From dabe947eab90ea3aa11c7901aada9097878b74ab Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Sat, 13 May 2023 17:43:13 +0200
Subject: [PATCH] fix SubscriptionsCatalog links, footer, styling

---
 src/components/styled/Board.styled.jsx        |  2 +-
 src/components/styled/Catalog.styled.jsx      |  4 +--
 src/components/views/Catalog.jsx              |  8 +++---
 src/components/views/SubscriptionsCatalog.jsx | 26 +++++++++----------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/styled/Board.styled.jsx b/src/components/styled/Board.styled.jsx
index c3981457..61081cac 100644
--- a/src/components/styled/Board.styled.jsx
+++ b/src/components/styled/Board.styled.jsx
@@ -427,7 +427,7 @@ export const Header = styled.div`
   .offline {
     width: 16px; 
     position: relative;
-    margin: 2px 2px -4px 2px;
+    margin: 2px 2px -2px 2px;
   }
 `;
 
diff --git a/src/components/styled/Catalog.styled.jsx b/src/components/styled/Catalog.styled.jsx
index de5f20d0..0c09d11f 100644
--- a/src/components/styled/Catalog.styled.jsx
+++ b/src/components/styled/Catalog.styled.jsx
@@ -23,7 +23,7 @@ export const Threads = styled.div`
     max-height: 150px;
   }
 
-  img {
+  .card {
     display: inline;
     margin: auto;
     box-shadow: 0 0 5px rgba(0, 0, 0, .25);
@@ -45,7 +45,7 @@ export const Threads = styled.div`
   }
 
   .offline-icon-no-link {
-    height: 13px;
+    height: 11px;
     position: absolute;
     margin-left: 13px;
     margin-top: -2px;
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index 18f2f4b9..1cd30d66 100644
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -477,7 +477,7 @@ const Catalog = () => {
                           <Fragment key="f-catalog">
                             {commentMediaInfo?.type === "webpage" ? (
                               thread.thumbnailUrl ? (
-                              <img key={`img-${index}`}
+                              <img className="card" key={`img-${index}`}
                               src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
                               onError={(e) => {
                                 e.target.src = fallbackImgUrl
@@ -486,21 +486,21 @@ const Catalog = () => {
                               ) : null
                             ) : null}
                             {commentMediaInfo?.type === "image" ? (
-                              <img key={`img-${index}`}
+                              <img className="card" key={`img-${index}`}
                               src={commentMediaInfo.url} alt={commentMediaInfo.type} 
                               onError={(e) => {
                                 e.target.src = fallbackImgUrl
                                 e.target.onerror = null;}}  />
                             ) : null}
                             {commentMediaInfo?.type === "video" ? (
-                              <video key={`fti-${index}`} 
+                              <video className="card" key={`fti-${index}`} 
                               src={commentMediaInfo.url} 
                               alt={commentMediaInfo.type} 
                               style={{ pointerEvents: "none" }}
                               onError={(e) => e.target.src = fallbackImgUrl} /> 
                             ) : null}
                             {commentMediaInfo?.type === "audio" ? (
-                              <audio controls 
+                              <audio className="card" controls 
                               key={`fti-${index}`} 
                               src={commentMediaInfo.url} 
                               alt={commentMediaInfo.type} 
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index 80e1d2b2..0afeff32 100644
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -214,14 +214,14 @@ const SubscriptionsCatalog = () => {
                 const commentMediaInfo = getCommentMediaInfo(thread);
                 const fallbackImgUrl = "assets/filedeleted-res.gif";
                 return (
-                  <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
+                  <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} 
                   onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}>
                     <div key={`thread-${index}`} className="thread">
                         {commentMediaInfo?.url ? (
                           <Fragment key="f-catalog">
                             {commentMediaInfo?.type === "webpage" ? (
                               thread.thumbnailUrl ? (
-                              <img key={`img-${index}`}
+                              <img className="card" key={`img-${index}`}
                               src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
                               onError={(e) => {
                                 e.target.src = fallbackImgUrl
@@ -230,21 +230,21 @@ const SubscriptionsCatalog = () => {
                               ) : null
                             ) : null}
                             {commentMediaInfo?.type === "image" ? (
-                              <img key={`img-${index}`}
+                              <img className="card" key={`img-${index}`}
                               src={commentMediaInfo.url} alt={commentMediaInfo.type} 
                               onError={(e) => {
                                 e.target.src = fallbackImgUrl
                                 e.target.onerror = null;}}  />
                             ) : null}
                             {commentMediaInfo?.type === "video" ? (
-                              <video key={`fti-${index}`} 
+                              <video className="card" key={`fti-${index}`} 
                               src={commentMediaInfo.url} 
                               alt={commentMediaInfo.type} 
                               style={{ pointerEvents: "none" }}
                               onError={(e) => e.target.src = fallbackImgUrl} /> 
                             ) : null}
                             {commentMediaInfo?.type === "audio" ? (
-                              <audio controls 
+                              <audio className="card" controls 
                               key={`fti-${index}`} 
                               src={commentMediaInfo.url} 
                               alt={commentMediaInfo.type} 
@@ -254,14 +254,18 @@ const SubscriptionsCatalog = () => {
                           </Fragment>
                         ) : null}
                       <div key={`ti-${index}`} className="thread-icons" >
-                        {thread.link ? (
-                          // <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"></span> */
+                      {(commentMediaInfo && (
+                        commentMediaInfo.type === 'image' || 
+                        commentMediaInfo.type === 'video' || 
+                        (commentMediaInfo.type === 'webpage' && 
+                        commentMediaInfo.thumbnail))) ? (                          
+                          // <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky" /> */
                           <OfflineIndicator 
                           address={thread.subplebbitAddress} 
                           className="thread-icon offline-icon"
                           tooltipPlace="top" />
                         ) : (
-                          // <span key={`si-${index}`} className="thread-icon sticky-icon-no-link" title="Sticky"></span> */
+                          // <span key={`si-${index}`} className="thread-icon sticky-icon-no-link" title="Sticky" /> */
                           <OfflineIndicator 
                           address={thread.subplebbitAddress} 
                           className="thread-icon offline-icon-no-link"
@@ -318,10 +322,6 @@ const SubscriptionsCatalog = () => {
                 {index === 0 ? null : "\u00a0"}
                 <Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
                 >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
-                <OfflineIndicator 
-                address={subplebbit.address} 
-                className="offline-nav"
-                tooltipPlace="bottom" />
                 {index !== defaultSubplebbits.length - 1 ? " /" : null}
                 </span>
               ))}
@@ -336,7 +336,7 @@ const SubscriptionsCatalog = () => {
               }>Create Board</button>
               ]
                 [
-                <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 ]
                 [
                 <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}