improved subscriptions box styling

src/components/styled/Home.styled.jsx

@@ -172,6 +172,7 @@ export const Boards = styled.div`
   padding-bottom: .5em;
   background: #fff;
   word-wrap: break-word;
+  margin-bottom: 6px;
 
   #subscriptions {
     text-align: left;
@@ -258,6 +259,28 @@ export const BoardsContent = styled.div`
       color: #e00
     }
   }
+
+  #view-all {
+    color: #800;
+    font-weight: 700;
+    text-decoration: none;
+
+    :hover {
+      color: #e00;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .boardlink, #view-all {
+      font-size: 1.2em;
+    }
+  }
+
+  @media (min-width: 480px) {
+    #mobile-br {
+      display: none;
+    }
+  }
 `;
 
 export const Footer = styled.div`

src/components/views/Home.jsx

@@ -99,24 +99,27 @@ const Home = () => {
               </div>
             </AboutContent>
           </About>
-          {account.subscriptions?.length > 0 ? (
+          {account?.subscriptions?.length > 0 ? (
-            <Boards style={{marginBottom: '6px'}}>
+            <Boards>
                 <BoardsTitle>
                   <h2>Board Subscriptions</h2>
                 </BoardsTitle>
                 <BoardsContent id="subscriptions">
                   <h3 style={{textDecoration: 'underline', display: 'inline'}}>
-                    You have subscribed to {account.subscriptions.length} board{account.subscriptions.length > 1 ? "s" : null}
+                    You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? "s" : null}
-                  </h3>
+                  </h3>&nbsp;
+                  <Link to="/profile/p/subscriptions" id="view-all">[view all]</Link>
                   <br />
-                  {account.subscriptions.map((subscription, index) => (
+                  {account?.subscriptions?.map((subscription, index) => (
                     <>
-                      <Link key={`sub-${index}`} class="boardlink" to={`/p/${subscription.subplebbitAddress}`}>
+                      <Link key={`sub-${index}`} className="boardlink" to={`/p/${subscription.subplebbitAddress}`}>
+                        <br id="mobile-br" />
                         {subscription}
                       </Link>
                       <br />
                     </>
                   ))}
+                  <br id="mobile-br" />
                 </BoardsContent>
             </Boards>
           ) : null}