fix styling of subscribe button

src/components/styled/Board.styled.jsx

@@ -1458,6 +1458,7 @@ export const TopBar = styled.div`
           padding: 6px 10px 5px;
           background-repeat: repeat-x;
           cursor: pointer;
+          font-size: 10pt !important;
         }
 
         .btn-wrap a {
@@ -1499,7 +1500,12 @@ export const TopBar = styled.div`
           padding: 6px 10px 5px;
           background-repeat: repeat-x;
           cursor: pointer;
-          font-size: 16px;
+          font-size: 16px !important;
+          font-family: times new roman !important;
+        }
+
+        .subscribe-button-mobile {
+          margin-top: -5px !important;
         }
 
         .btn-wrap a {
@@ -1520,7 +1526,12 @@ export const TopBar = styled.div`
           padding: 6px 10px 5px;
           background-repeat: repeat-x;
           cursor: pointer;
-          font-size: 16px;
+          font-size: 16px !important;
+          font-family: times new roman !important;
+        }
+
+        .subscribe-button-mobile {
+          margin-top: -5px !important;
         }
 
         .btn-wrap a {

src/components/styled/Thread.styled.jsx

@@ -180,6 +180,16 @@ export const TopBar = styled.div`
     .reply-stat {
       margin-top: 5px;
     }
+
+    .subscribe-button-desktop {
+      float: right;
+      margin-right: 10px;
+      margin-top: 3px;
+    }
+
+    .subscribe-button-mobile {
+      display: none;
+    }
   }
 
   @media (max-width: 480px) {
@@ -200,6 +210,19 @@ export const TopBar = styled.div`
     hr {
       display: none;
     }
+
+    .subscribe-button-desktop {
+      display: none;
+    }
+
+    .subscribe-button-mobile {
+      margin-right: 10px;
+      float: right;
+
+      a {
+        cursor: pointer;
+      }
+    }
   }
 
   .return-button {
@@ -242,6 +265,15 @@ export const TopBar = styled.div`
           a:hover, #button:hover {
             color: red !important;
           }
+        }
+        
+        a, #subscribe {
+          color: #00e !important;
+          text-decoration: none;
+        }
+        
+        a:hover, #subscribe:hover {
+          color: red !important;
         }`;
 
       case 'Yotsuba-B':
@@ -268,6 +300,15 @@ export const TopBar = styled.div`
           a:hover, #button:hover {
             color: red !important;
           }
+        }
+        
+        a, #subscribe {
+          color: #34345c !important;
+          text-decoration: none;
+        }
+        
+        a:hover, #subscribe:hover {
+          color: #d00 !important;
         }`;
 
       case 'Futaba':
@@ -299,6 +340,16 @@ export const TopBar = styled.div`
         .reply-stat {
           font-size: 12pt;
           bottom: 2px;
+        }
+        
+        a, #subscribe {
+          color: #00e !important;
+          text-decoration: underline !important;
+          font-size: 12pt !important;
+        }
+        
+        a:hover, #subscribe:hover {
+          color: red !important;
         }`;
 
       case 'Burichan':
@@ -330,6 +381,16 @@ export const TopBar = styled.div`
         .reply-stat {
           font-size: 12pt;
           bottom: 2px;
+        }
+        
+        a, #subscribe{
+          color: #34345c !important;
+          text-decoration: underline !important;
+          font-size: 12pt !important;
+        }
+        
+        a:hover, #subscribe:hover {
+          color: red !important;
         }`;
 
       case 'Tomorrow':
@@ -362,6 +423,15 @@ export const TopBar = styled.div`
           a:hover, #button:hover {
             color: #5f89ab !important;
           }
+        }
+        
+        a, #subscribe {
+          color: #81a2be !important;
+          text-decoration: none;
+        }
+        
+        a:hover, #subscribe:hover {
+          color: #5f89ab !important;
         }`;
 
       case 'Photon':
@@ -388,6 +458,15 @@ export const TopBar = styled.div`
           a:hover, #button:hover {
             color: #ff3300 !important;
           }
+        }
+        
+        a, #subscribe {
+          color: #f60 !important;
+          text-decoration: none;
+        }
+        
+        a:hover, #subscribe:hover {
+          color: #ff3300 !important;
         }`;
       default:
         return '';
@@ -407,6 +486,7 @@ export const TopBar = styled.div`
           padding: 6px 10px 5px;
           background-repeat: repeat-x;
           cursor: pointer;
+          font-size: 10pt !important;
         }
 
         .btn-wrap a {
@@ -448,7 +528,12 @@ export const TopBar = styled.div`
           padding: 6px 10px 5px;
           background-repeat: repeat-x;
           cursor: pointer;
-          font-size: 16px;
+          font-size: 16px !important;
+          font-family: times new roman !important;
+        }
+
+          .subscribe-button-mobile {
+            margin-top: -2px !important;
           }
 
         .btn-wrap a {
@@ -469,7 +554,12 @@ export const TopBar = styled.div`
           padding: 6px 10px 5px;
           background-repeat: repeat-x;
           cursor: pointer;
-          font-size: 16px;
+          font-size: 16px !important;
+          font-family: times new roman !important;
+        }
+
+        .subscribe-button-mobile {
+          margin-top: -2px !important;
         }
 
         .btn-wrap a {

src/components/views/Catalog.jsx

@@ -375,6 +375,20 @@ const Catalog = () => {
             <Link to={`/p/${selectedAddress}`}>Return</Link>
             ]
           </div>
+          {feed.length > 0 ? (
+            <>
+              <span className="subscribe-button-desktop">
+                [
+                <button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}>Subscribe</button>
+                ]
+              </span>
+              <button className="subscribe-button-mobile btn-wrap">Subscribe</button>
+            </>
+          ) : (
+            <div id="stats" style={{float: "right", marginTop: "5px"}}>
+              <span>Fetching IPFS...</span>
+            </div>
+          )}
           <div id="return-button-mobile">
             <span className="btn-wrap-catalog btn-wrap">
               <Link to={`/p/${selectedAddress}`}>Return</Link>