style: add create board button and edit boards button

src/components/board-buttons/board-buttons.module.css

@@ -1,6 +1,6 @@
 .mobileBoardButtons {
   text-align: center;
-  margin: 10px 0;
+  margin-bottom: 10px;
 }
 
 .mobileBoardButtons button {
@@ -51,14 +51,33 @@
   padding-top: 15px;
 }
 
+.createBoardButton {
+  text-align: center;
+  font-size: 10px;
+}
+
+.createBoardButton a {
+  text-decoration: none;
+  color: var(--button-desktop-text-color);
+
+}
+.createBoardButton a:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+}
+
 @media (max-width: 640px) {
   .desktopBoardButtons {
     display: none;
   }
+
+  .createBoardButton {
+    display: inline-flex;
+  }
 }
 
 @media (min-width: 640px) {
   .mobileBoardButtons {
     display: none;
   }
-}
+}

src/components/board-buttons/board-buttons.tsx

@@ -172,6 +172,24 @@ export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView
   );
 };
 
+const CreateBoardButton = () => {
+  return (
+    <div className={styles.createBoardButton}>
+      [
+      <Link
+        to='/boards/create'
+        onClick={(e) => {
+          e.preventDefault();
+          alert('work in progress');
+        }}
+      >
+        Create a Board
+      </Link>
+      ]
+    </div>
+  );
+};
+
 export const MobileBoardButtons = () => {
   const params = useParams();
   const location = useLocation();
@@ -186,6 +204,8 @@ export const MobileBoardButtons = () => {
 
   return (
     <div className={styles.mobileBoardButtons}>
+      <CreateBoardButton />
+      <hr />
       {isInPostView || isInPendingPostPage ? (
         <>
           <ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
@@ -233,6 +253,8 @@ export const DesktopBoardButtons = () => {
 
   return (
     <>
+      <hr />
+      <CreateBoardButton />
       <hr />
       <div className={styles.desktopBoardButtons}>
         {isInPostView || isInPendingPostPage ? (

src/components/board-header/board-header.module.css

@@ -20,6 +20,7 @@
 }
 
 .boardSubtitle {
+  margin-top: 3px;
   font-size: var(--board-address-font-size);
   color: var(--board-address-text-color);
 }

src/components/topbar/topbar.tsx

@@ -80,7 +80,17 @@ const TopBarDesktop = () => {
         {subplebbits && (
           <>
             [{renderSubplebbits(plebbitSubs)}] [{renderSubplebbits(projectsSubs)}] [{renderSubplebbits(interestsSubs)}] [{renderSubplebbits(randomSubs)}] [
-            {renderSubplebbits(internationalSubs)}]
+            {renderSubplebbits(internationalSubs)}] [
+            <Link
+              to='boards'
+              onClick={(e) => {
+                e.preventDefault();
+                alert('work in progress');
+              }}
+            >
+              Edit
+            </Link>
+            ]
           </>
         )}
       </span>