added InfiniteScroll, perfected styles

src/components/Board.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
-import { useFeed } from '@plebbit/plebbit-react-hooks';
-import ImageBanner from './ImageBanner';
 import { BoardContext } from '../App';
+import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
+import ImageBanner from './ImageBanner';
+import { useFeed } from '@plebbit/plebbit-react-hooks';
+import InfiniteScroll from 'react-infinite-scroller';
 
 const Board = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
@@ -12,7 +13,7 @@ const Board = ({ setBodyStyle }) => {
   const [showPostForm, setShowPostForm] = useState(false);
   const navigate = useNavigate();
 
-  const { feed } = useFeed([`${selectedAddress}`], 'new');
+  const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
 
   // console.log(feed);
 
@@ -129,7 +130,7 @@ const Board = ({ setBodyStyle }) => {
             </span>
           ))}
           <span className="nav">[
-            <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+            <Link id="home-button" to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
             )}>Home</Link>]&nbsp;
           </span>
         </>
@@ -216,7 +217,13 @@ const Board = ({ setBodyStyle }) => {
       </TopBar>
       <BoardForm selectedStyle={selectedStyle} id="board-form" name="board-form" action="" method="post">
         <div className="board">
-          {feed.map(object => {
+          <InfiniteScroll
+            pageStart={0}
+            loadMore={loadMore}
+            hasMore={hasMore}
+            loader={<div>Loading...</div>}
+          >
+            {feed.map(object => {
             let counter = 1;
             const thread = object;
             const { replies: { pages: { topAll: { comments } } } } = object;
@@ -297,6 +304,7 @@ const Board = ({ setBodyStyle }) => {
             <hr key={`hr-${thread.cid}`} />
             </>
             )})}
+          </InfiniteScroll>
         </div>
       </BoardForm>
     </Container>

src/components/styles/Board.styled.jsx

@@ -58,22 +58,21 @@ export const NavBar = styled.div`
           return `font-size: 11pt;
           display: block;
           
-          a {
+          a, a:visited {
             font-weight: 400;
             padding: 1px;
+            color: #00e;
+            text-decoration: underline;
           }
 
           a:hover {
             color: red;
           }
 
-          a:visited {
-            color: #00e;
-          }
-
           .nav {
           float: right;
           }
+
           `;
 
         case 'Burichan':
@@ -83,7 +82,8 @@ export const NavBar = styled.div`
           a, a:visited {
             font-weight: 400;
             padding: 1px;
-            color: #34345c
+            color: #34345c;
+            text-decoration: underline;
           }
 
           a:hover {
@@ -899,6 +899,7 @@ export const PostForm = styled.form`
 
       a, a:visited {
         color: #00e;
+        text-decoration: underline;
       }
       a:hover {
         color: red;
@@ -913,6 +914,7 @@ export const PostForm = styled.form`
 
       a, a:visited {
         color: #34345c;
+        text-decoration: underline;
       }
       a:hover {
         color: red;

src/components/styles/Thread.styled.jsx

@@ -494,6 +494,10 @@ export const TopBar = styled.div`
             color: #00e !important;
             text-decoration: none;
           }
+          
+          a:hover {
+            color: red !important;
+          }
         }`;
 
       case 'Yotsuba B':
@@ -517,6 +521,10 @@ export const TopBar = styled.div`
             color: #34345c !important;
             text-decoration: none;
           }
+
+          a:hover {
+            color: red !important;
+          }
         }`;
 
       case 'Futaba':
@@ -538,6 +546,10 @@ export const TopBar = styled.div`
           a, a:visited {
             color: #00e !important;
           }
+
+          a:hover {
+            color: red !important;
+          }
         }`;
 
       case 'Burichan':
@@ -557,7 +569,11 @@ export const TopBar = styled.div`
           font-size: 12pt;
 
           a, a:visited {
-            color: #00e !important;
+            color: #34345c !important;
+          }
+
+          a:hover {
+            color: red !important;
           }
         }`;
 
@@ -582,6 +598,10 @@ export const TopBar = styled.div`
             color: #81a2be !important;
             text-decoration: none;
           }
+
+          a:hover {
+            color: #5f89ab !important;
+          }
         }`;
 
       case 'Photon':
@@ -605,6 +625,10 @@ export const TopBar = styled.div`
             color: #f60 !important;
             text-decoration: none;
           }
+
+          a:hover {
+            color: #ff3300 !important;
+          }
         }`;
       
     }