added complete footer in all views

src/components/Post.jsx

@@ -53,7 +53,7 @@ const createQuotelink = (handlequoteclick, comment, children) => {
 
 
 const Post = ({ content, handlequoteclick, comment }) => {
-  const doubleNewlineContent = content.replaceAll(/\n(?!\n)/g, '\n\n');
+  const doubleNewlineContent = content?.replaceAll(/\n(?!\n)/g, '\n\n');
   const sanitizedContent = DOMPurify.sanitize(doubleNewlineContent);
 
   return (

src/components/styled/Board.styled.jsx

@@ -7,6 +7,10 @@ export const Container = styled.div`
   margin-top: 5px;
   padding-left: 5px;
   padding-right: 5px;
+
+  .footer-links {
+    text-decoration: none;
+  }
 `;
 
 export const NavBar = styled.div`
@@ -1535,6 +1539,7 @@ export const TopBar = styled.div`
 
 export const BoardForm = styled.div`
   @media (min-width: 480px) {
+    margin-bottom: 25px;
     .thread-mobile {
       display: none;
     }

src/components/styled/Thread.styled.jsx

@@ -2783,4 +2783,119 @@ export const BoardForm = styled.div`
       }
     }}
   }
+`;
+
+export const Footer = styled.div`
+  #version {
+    text-align: center;
+    font-size: 11px;
+    font-family: "arial";
+  }
+  @media (min-width: 480px) {
+    #break {
+      display: none;
+    }
+
+    hr {
+      margin-top: -10px;
+    }
+
+    #version {
+      margin-top: 25px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    margin-top: 60px;
+
+    .style-changer {
+      display: none;
+    }
+
+    #version {
+      margin-top: -2em;
+    }
+  }
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `
+        .footer-links {
+          a {
+            color: #00e;
+            text-decoration: none;
+          }
+
+          a:hover {
+            color: red;
+          }
+        }`;
+
+      case 'Yotsuba-B':
+        return `
+        .footer-links {
+          a {
+            color: #34345c;
+            text-decoration: none;
+          }
+
+          a:hover {
+            color: #d00;
+          }
+        }`;
+
+      case 'Futaba':
+        return `
+        .footer-links {
+          a {
+            color: #00e;
+            text-decoration: underline;
+          }
+
+          a:hover {
+            color: red;
+          }
+        }`;
+
+      case 'Burichan':
+        return `
+        .footer-links {
+          a {
+            color: #34345c;
+            text-decoration: underline;
+          }
+
+          a:hover {
+            color: #d00;
+          }
+        }`;
+
+      case 'Tomorrow':
+        return `
+        .footer-links {
+          a {
+            color: #81a2be;
+            text-decoration: none;
+          }
+
+          a:hover {
+            color: #5f89ac;
+          }
+        }`;
+
+      case 'Photon':
+        return `
+        .footer-links {
+          a {
+            color: #f60;
+            text-decoration: none;
+          }
+
+          a:hover {
+            color: #f30;
+          }
+        }`;
+    }
+  }}
 `;

src/components/views/Board.jsx

@@ -7,6 +7,7 @@ import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled';
+import { Footer } from '../styled/Thread.styled';
 import ImageBanner from '../ImageBanner';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
@@ -932,14 +933,77 @@ const Board = () => {
             )}
           </div>
         </BoardForm>
-        <div style={{
+        <Footer selectedStyle={selectedStyle}>
-          textAlign: "center",
+          <Break id="break" selectedStyle={selectedStyle} style={{
-          fontSize: "11px",
+            marginTop: "-36px",
-          marginTop: "2em",
+            width: "100%",
-          marginBottom: "2em",
+          }} />
-        }}>
+          <Break selectedStyle={selectedStyle} style={{
-          plebchan v0.1.0. GPL-2.0
+            width: "100%",
-        </div>
+          }} />
+          <span className="style-changer" style={{
+            float: "right",
+            marginTop: "2px",
+          }}>
+            Style:
+             
+            <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
+              <option value="Yotsuba">Yotsuba</option>
+              <option value="Yotsuba-B">Yotsuba B</option>
+              <option value="Futaba">Futaba</option>
+              <option value="Burichan">Burichan</option>
+              <option value="Tomorrow">Tomorrow</option>
+              <option value="Photon">Photon</option>
+            </select>
+          </span>
+          <NavBar selectedStyle={selectedStyle} style={{
+            marginTop: "42px",
+          }}>
+            <>
+              {defaultSubplebbits.map(subplebbit => (
+                <span className="boardList" key={`span-${subplebbit.address}`}>
+                  [
+                  <Link key={`a-${subplebbit.address}`} 
+                  to={`/p/${subplebbit.address}`} 
+                  onClick={() => {
+                    setSelectedTitle(subplebbit.title);
+                    setSelectedAddress(subplebbit.address);
+                  }}
+                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                  ]&nbsp;
+                </span>
+              ))}
+              <span className="nav">
+                [
+                <Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                ]
+                [
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                )}>Home</Link>
+                ]
+              </span>
+            </>
+          </NavBar>
+          <div id="version">
+            plebchan v0.1.0. GPL-2.0
+          </div>
+          <div className="footer-links"
+          style={{
+            textAlign: "center",
+            fontSize: "x-small",
+            fontFamily: "arial",
+            marginTop: "10px",
+            marginBottom: "15px",
+          }}>
+            <a href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            &nbsp;•&nbsp;  
+            <a href="https://github.com/plebbit" target="_blank" rel="noopener noreferrer">GitHub</a>
+            &nbsp;•&nbsp;
+            <a href="https://twitter.com/getplebbit" target="_blank" rel="noopener noreferrer">Twitter</a>
+            &nbsp;•&nbsp;  
+            <a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+          </div>
+        </Footer>
       </Container>
     </>
   );

src/components/views/Catalog.jsx

@@ -7,7 +7,7 @@ import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
 import { Threads } from '../styled/Catalog.styled';
-import { TopBar } from '../styled/Thread.styled';
+import { TopBar, Footer } from '../styled/Thread.styled';
 import CatalogLoader from '../CatalogLoader';
 import ImageBanner from '../ImageBanner';
 import SettingsModal from '../SettingsModal';
@@ -417,15 +417,78 @@ const Catalog = () => {
             </InfiniteScroll>
           )}
         </Threads>
+        <Footer selectedStyle={selectedStyle}>
+          <Break id="break" selectedStyle={selectedStyle} style={{
+            marginTop: "-36px",
+            width: "100%",
+          }} />
+          <Break selectedStyle={selectedStyle} style={{
+            width: "100%",
+          }} />
+          <span className="style-changer" style={{
+            float: "right",
+            marginTop: "2px",
+          }}>
+            Style:
+             
+            <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
+              <option value="Yotsuba">Yotsuba</option>
+              <option value="Yotsuba-B">Yotsuba B</option>
+              <option value="Futaba">Futaba</option>
+              <option value="Burichan">Burichan</option>
+              <option value="Tomorrow">Tomorrow</option>
+              <option value="Photon">Photon</option>
+            </select>
+          </span>
+          <NavBar selectedStyle={selectedStyle} style={{
+            marginTop: "42px",
+          }}>
+            <>
+              {defaultSubplebbits.map(subplebbit => (
+                <span className="boardList" key={`span-${subplebbit.address}`}>
+                  [
+                  <Link key={`a-${subplebbit.address}`} 
+                  to={`/p/${subplebbit.address}`} 
+                  onClick={() => {
+                    setSelectedTitle(subplebbit.title);
+                    setSelectedAddress(subplebbit.address);
+                  }}
+                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                  ]&nbsp;
+                </span>
+              ))}
+              <span className="nav">
+                [
+                <Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                ]
+                [
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                )}>Home</Link>
+                ]
+              </span>
+            </>
+          </NavBar>
+          <div id="version">
+            plebchan v0.1.0. GPL-2.0
+          </div>
+          <div className="footer-links"
+          style={{
+            textAlign: "center",
+            fontSize: "x-small",
+            fontFamily: "arial",
+            marginTop: "10px",
+            marginBottom: "15px",
+          }}>
+            <a href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            &nbsp;•&nbsp;  
+            <a href="https://github.com/plebbit" target="_blank" rel="noopener noreferrer">GitHub</a>
+            &nbsp;•&nbsp;
+            <a href="https://twitter.com/getplebbit" target="_blank" rel="noopener noreferrer">Twitter</a>
+            &nbsp;•&nbsp;  
+            <a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+          </div>
+        </Footer>
       </Container>
-      <div style={{
-          textAlign: "center",
-          fontSize: "11px",
-          marginTop: "2em",
-          marginBottom: "2em",
-        }}>
-          plebchan v0.1.0. GPL-2.0
-        </div>
     </>
   );
 }

src/components/views/Thread.jsx

@@ -6,7 +6,7 @@ import { useAccount, useComment, usePublishComment } from '@plebbit/plebbit-reac
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable } from '../styled/Board.styled';
-import { ReplyFormLink, TopBar, BottomBar, BoardForm } from '../styled/Thread.styled';
+import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/Thread.styled';
 import ImageBanner from '../ImageBanner';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
@@ -909,8 +909,8 @@ const Thread = () => {
                 </BottomBar>
                 {comment.replyCount > 2 ? (
                   <div id="bottombar-mobile">
-                    <TopBar selectedStyle={selectedStyle} style={{marginTop: "20px"}}>
+                    <hr style={{marginTop: "30px"}} />
-                      <hr />
+                    <TopBar selectedStyle={selectedStyle} style={{marginTop: "-5px"}}>
                       <span className="style-changer">
                         Style:
                          
@@ -977,14 +977,77 @@ const Thread = () => {
             <PostLoader />
           )}
         </BoardForm>
-        <div style={{
+        <Footer selectedStyle={selectedStyle}>
-          textAlign: "center",
+          <Break id="break" selectedStyle={selectedStyle} style={{
-          fontSize: "11px",
+            marginTop: "-36px",
-          marginTop: "2em",
+            width: "100%",
-          marginBottom: "2em",
+          }} />
-        }}>
+          <Break selectedStyle={selectedStyle} style={{
-          plebchan v0.1.0. GPL-2.0
+            width: "100%",
-        </div>
+          }} />
+          <span className="style-changer" style={{
+            float: "right",
+            marginTop: "2px",
+          }}>
+            Style:
+             
+            <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
+              <option value="Yotsuba">Yotsuba</option>
+              <option value="Yotsuba-B">Yotsuba B</option>
+              <option value="Futaba">Futaba</option>
+              <option value="Burichan">Burichan</option>
+              <option value="Tomorrow">Tomorrow</option>
+              <option value="Photon">Photon</option>
+            </select>
+          </span>
+          <NavBar selectedStyle={selectedStyle} style={{
+            marginTop: "42px",
+          }}>
+            <>
+              {defaultSubplebbits.map(subplebbit => (
+                <span className="boardList" key={`span-${subplebbit.address}`}>
+                  [
+                  <Link key={`a-${subplebbit.address}`} 
+                  to={`/p/${subplebbit.address}`} 
+                  onClick={() => {
+                    setSelectedTitle(subplebbit.title);
+                    setSelectedAddress(subplebbit.address);
+                  }}
+                  >{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
+                  ]&nbsp;
+                </span>
+              ))}
+              <span className="nav">
+                [
+                <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                ]
+                [
+                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                )}>Home</Link>
+                ]
+              </span>
+            </>
+          </NavBar>
+          <div id="version">
+            plebchan v0.1.0. GPL-2.0
+          </div>
+          <div className="footer-links"
+          style={{
+            textAlign: "center",
+            fontSize: "x-small",
+            fontFamily: "arial",
+            marginTop: "10px",
+            marginBottom: "15px",
+          }}>
+            <a href="https://plebbit.com" target="_blank" rel="noopener noreferrer">About</a>
+            &nbsp;•&nbsp;  
+            <a href="https://github.com/plebbit" target="_blank" rel="noopener noreferrer">GitHub</a>
+            &nbsp;•&nbsp;
+            <a href="https://twitter.com/getplebbit" target="_blank" rel="noopener noreferrer">Twitter</a>
+            &nbsp;•&nbsp;  
+            <a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
+          </div>
+        </Footer>
       </Container>
     </>
   );