added randomized banner, fixes

src/components/Board.jsx

@@ -1,9 +1,20 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { Container } from './styled/Home.styled'
+import { Container, NavBar, Header, Break, PostForm, TopBar } from './styled/Board.styled';
-import { NavBar, Header, Break, PostForm } from './styled/Board.styled';
 import { useFeed } from '@plebbit/plebbit-react-hooks';
 
+const ImageBanner = () => {
+  const [currentImage, setCurrentImage] = useState(1);
+
+  useEffect(() => {
+    setCurrentImage(Math.floor(Math.random() * 5) + 1);
+  }, []);
+
+  return (
+    <img id="banner-img" src={`banner-${currentImage}.jpg`} alt="banner" />
+  );
+};
+
 const Board = () => {
   // eslint-disable-next-line
   const { feed, hasMore, loadMore } = useFeed(['news.eth'], 'new');
@@ -31,8 +42,8 @@ const Board = () => {
       <NavBar>
         <>
           {defaultSubplebbits.map(subplebbit => (
-            <span className="boardList">[
+            <span className="boardList" key={subplebbit.address}>[
-              <a href="/board" key={subplebbit.address}>{subplebbit.title}</a>
+              <a href="/board">{subplebbit.title}</a>
               ]&nbsp;
             </span>
           ))}
@@ -44,21 +55,29 @@ const Board = () => {
       <Header>
         <>
           <div className="banner">
-            <img alt="plebchan" src="/banner.jpg"/>
+            <ImageBanner />
           </div>
           <div className="board-title">Plebs Helping Plebs</div>
           <div className="board-address">p/plebshelpingplebs.eth</div>
         </>
       </Header>
       <Break />
-      <PostForm>
+      <PostForm name="post" action="" method="post" enctype="multipart/form-data">
-        {/* <div id="post-form-link">
+        <div id="post-form-link">
           [
             <a href="#">Start a New Thread</a>
           ]
         </div>
-        <table id="post-form"></table> */}
+        <table id="post-form"></table>
       </PostForm>
+      <TopBar>
+        <hr />
+        <input id="search-box" type="text" placeholder="Search OPs…" />
+        [
+        <a href="./catalog">Catalog</a>
+        ]
+        <hr />
+      </TopBar>
     </Container>
   )
 }

src/components/styled/Board.styled.jsx

@@ -1,5 +1,16 @@
 import styled from 'styled-components';
 
+export const Container = styled.div`
+    color: maroon;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 10pt;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+`;
+
 export const NavBar = styled.div`
   font-size: 9pt;
   color: #b86;
@@ -25,13 +36,13 @@ export const Header = styled.div`
   .banner {
     border: 1px solid #800;
     margin: 5px auto;
-    width: 311px;
+    width: 300px;
     height: 100px;
   }
 
   img {
     border: none;
-    width: 311px;
+    width: 300px;
     height: 100px;
   }
 
@@ -52,11 +63,61 @@ export const Header = styled.div`
 `;
 
 export const Break = styled.hr`
+  width: 90%;
   border: none;
   border-top: 1px solid #d9bfb7;
   height: 0;
 `;
 
-export const PostForm = styled.div`
+export const PostForm = styled.form`
 
+  #post-form-link {
+    font-size: 22px;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  a, a:visited {
+    color: #00e;
+    text-decoration: none;
+  }
+  a:hover {
+    color: red;
+  }
+`;
+
+export const TopBar = styled.div`
+  clear: both;
+
+  hr {
+    border: none;
+    border-top: 1px solid #d9bfb7;
+    height: 0;
+  }
+
+  #search-box { 
+    height: 16px;
+    line-height: 16px;
+    margin-top: 0;
+    margin-right: 2px;
+    margin-bottom: 0;
+    margin-left: 2px;
+    padding: 0 2px;
+    width: 120px;
+    -webkit-appearance: none;
+    appearance: none;
+    border: 1px solid #aaa;
+    outline: none;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 10pt;
+  }
+
+  a {
+    color: #00e;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: red;
+  }
 `;

src/components/styled/Home.styled.jsx

@@ -1,6 +1,10 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  height: 100%;
+  color: #800;
+  font: 13px/1.231 arial, helvetica, clean, sans-serif;
+  text-align: center;
   margin: auto;
   text-align: left;
   width: 57.69em;

src/globalStyles.js

@@ -6,11 +6,6 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     background: #ffe url(/fade.png) top repeat-x;
-    color: #800;
-    font: 13px/1.231 arial, helvetica, clean, sans-serif;
-    *font-size: small;
-    *font: x-small;
-    text-align: center;
   }
 `;