add board buttons row for mobile and desktop, global styling for button

src/app.tsx

@@ -11,6 +11,8 @@ import BoardNav from './components/board-nav';
 import BoardBanner from './components/board-banner';
 import BoardStats from './components/board-stats';
 import PostForm from './components/post-form';
+import { MobileBoardButtons } from './components/board-buttons';
+import { DesktopBoardButtons } from './components/board-buttons';
 
 const BoardLayout = () => {
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
@@ -22,8 +24,10 @@ const BoardLayout = () => {
         <>
           <BoardNav address={subplebbitAddress} />
           <BoardBanner title={subplebbit.title} address={subplebbitAddress} />
+          <MobileBoardButtons address={subplebbitAddress} />
           <PostForm address={subplebbitAddress} />
           <BoardStats address={subplebbitAddress} createdAt={subplebbit.createdAt} />
+          <DesktopBoardButtons address={subplebbitAddress} />
         </>
       )}
       <Outlet />

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

@@ -0,0 +1,20 @@
+.mobileBoardButtons {
+  text-align: center;
+  margin-top: 9px;
+}
+
+.mobileBoardButtons button {
+  margin: 0 2px;
+}
+
+@media (max-width: 640px) {
+  .desktopBoardButtons {
+    display: none;
+  }
+}
+
+@media (min-width: 640px) {
+  .mobileBoardButtons {
+    display: none;
+  }
+}

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

@@ -0,0 +1,42 @@
+import { useSubscribe } from '@plebbit/plebbit-react-hooks';
+import styles from './board-buttons.module.css';
+
+interface BoardButtonsProps {
+  address: string;
+}
+
+const OptionsButton = () => {
+  return <button className='button'>options</button>;
+};
+
+const CatalogButton = () => {
+  return <button className='button'>catalog</button>;
+};
+
+const SubscribeButton = ({ address }: BoardButtonsProps) => {
+  const { subscribed, subscribe, unsubscribe } = useSubscribe({ subplebbitAddress: address });
+
+  return (
+    <button className='button' onClick={subscribed ? unsubscribe : subscribe}>
+      {subscribed ? 'Unsubscribe' : 'Subscribe'}
+    </button>
+  );
+};
+
+export const MobileBoardButtons = ({ address }: BoardButtonsProps) => {
+  return (
+    <div className={styles.mobileBoardButtons}>
+      <OptionsButton />
+      <CatalogButton />
+      <SubscribeButton address={address} />
+    </div>
+  );
+};
+
+export const DesktopBoardButtons = ({ address }: BoardButtonsProps) => {
+  return (
+    <div className={styles.desktopBoardButtons}>
+      <SubscribeButton address={address} />
+    </div>
+  );
+};

src/components/board-buttons/index.ts

@@ -0,0 +1 @@
+export { MobileBoardButtons, DesktopBoardButtons } from './board-buttons';

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

@@ -24,18 +24,18 @@
 }
 
 .hideButton {
-  color: var(--button-text-color);
+  color: var(--button-desktop-text-color);
   text-decoration: var(--button-text-decoration);
   text-transform: capitalize;
 }
 
 .hideButton:hover {
   cursor: pointer;
-  color: var(--button-text-color-hover);
+  color: var(--button-desktop-text-color-hover);
 }
 
 .statValue {
-  color: var(--button-text-color);
+  color: var(--button-desktop-text-color);
 }
 
 .lowercase {

src/components/post-form/post-form.module.css

@@ -4,36 +4,9 @@
   text-align: center;
 }
 
-.postFormButtonDesktop span {
-  color: var(--button-text-color);
-  text-decoration: var(--button-text-decoration);
-}
-
-.postFormButtonDesktop span:hover {
-  cursor: pointer;
-  color: var(--button-text-color-hover);
-}
-
 .postFormButtonMobile {
   text-align: center;
-  padding-top: 5px;
+  padding-top: 9px;
-}
-
-.postFormButtonMobile span {
-  font-size: var(--button-font-size-mobile);
-  font-weight: var(--button-font-weight-mobile);
-  font-family: var(--button-font-family-mobile);
-  border-radius: 3px;
-  padding: 5px 10px 5px;
-  background-color: var(--button-background-color-mobile);
-  color: var(--button-text-color-mobile);
-  border: var(--button-border-mobile);
-  background-image: var(--button-background-image-mobile);
-  background: var(--button-background-mobile);
-  background-repeat: var(--button-background-repeat-mobile);
-  text-decoration: var(--button-text-decoration-mobile);
-  user-select: none;
-  display: inline-block;
 }
 
 @media (max-width: 640px) {

src/components/post-form/post-form.tsx

@@ -11,10 +11,10 @@ const PostForm = ({ address }: PostFormProps) => {
   return (
     <>
       <div className={styles.postFormButtonDesktop}>
-        [<span>{t('start_new_thread')}</span>]
+        [<button className='button'>{t('start_new_thread')}</button>]
       </div>
       <div className={styles.postFormButtonMobile}>
-        <span>{t('start_new_thread')}</span>
+        <button className='button'>{t('start_new_thread')}</button>
       </div>
     </>
   );

src/index.css

@@ -11,3 +11,36 @@ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fiel
   margin: 0;
   padding: 0;
 }
+
+@media (max-width: 640px) {
+  .button {
+    text-transform: capitalize;
+    font-size: var(--button-font-size-mobile);
+    font-weight: var(--button-font-weight-mobile);
+    font-family: var(--button-font-family-mobile);
+    border-radius: 3px;
+    padding: 5px 10px 5px;
+    background-color: var(--button-background-color-mobile);
+    color: var(--button-text-color-mobile);
+    border: var(--button-border-mobile);
+    background-image: var(--button-background-image-mobile);
+    background-repeat: var(--button-background-repeat-mobile);
+    text-decoration: var(--button-text-decoration-mobile);
+    user-select: none;
+    display: inline-block;
+  }
+}
+
+@media (min-width: 640px) {
+  .button {
+    all: unset;
+    text-transform: capitalize;
+    color: var(--button-desktop-text-color);
+    text-decoration: var(--button-text-decoration);
+  }
+
+  .button:hover {
+    color: var(--button-desktop-text-color-hover);
+    cursor: pointer;
+  }
+}

src/themes.css

@@ -20,8 +20,8 @@
   --body-font-size: 10pt;
 
   /* desktop buttons */
-  --button-text-color: #00e;
+  --button-desktop-text-color: #00e;
-  --button-text-color-hover: red;
+  --button-desktop-text-color-hover: red;
 
   /* mobile buttons */
   --button-font-size-mobile: 10pt;
@@ -96,8 +96,8 @@
   --homepage-box-bar-background-color: #98e;
 
   /* desktop buttons */
-  --button-text-color: #34345c;
+  --button-desktop-text-color: #34345c;
-  --button-text-color-hover: #d00;
+  --button-desktop-text-color-hover: #d00;
 
   /* mobile buttons */
   --button-font-size-mobile: 10pt;
@@ -156,9 +156,9 @@
   --board-title-font-size: 32px;
   --board-address-font-size: 10pt;
 
-  /* buttons */
+  /* desktop buttons */
-  --button-text-color: #00e;
+  --button-desktop-text-color: #00e;
-  --button-text-color-hover: red;
+  --button-desktop-text-color-hover: red;
   --button-text-decoration: underline;
 
   /* mobile buttons */
@@ -218,10 +218,10 @@
   --homepage-box-bar-background-color: #98e;
   --homepage-box-bar-text-color-hover: #fff;
 
-  /* buttons */
+  /* desktop buttons */
-  --button-text-color: #34345c;
+  --button-desktop-text-color: #34345c;
   --button-text-decoration: underline;
-  --button-text-color-hover: #d00;
+  --button-desktop-text-color-hover: #d00;
 
   /* mobile buttons */
   --button-font-size-mobile: 11pt;
@@ -277,9 +277,9 @@
   --board-title-font-family: Tahoma, sans-serif;
   --board-address-font-size: x-small;
 
-  /* buttons */
+  /* desktop buttons */
-  --button-text-color: #81a2be;
+  --button-desktop-text-color: #81a2be;
-  --button-text-color-hover: #5f89ac;
+  --button-desktop-text-color-hover: #5f89ac;
 
   /* mobile buttons */
   --button-font-size-mobile: 10pt;
@@ -329,15 +329,15 @@
   --board-title-text-color: #004a99;
   --board-address-font-size: x-small;
 
-  /* buttons */
+  /* desktop buttons */
-  --button-text-color: #f60;
+  --button-desktop-text-color: #f60;
-  --button-text-color-hover: #f30;
+  --button-desktop-text-color-hover: #f30;
 
   /* mobile buttons */
   --button-font-size-mobile: 10pt;
   --button-font-weight-mobile: 700;
   --button-text-color-mobile: #333;
-  --button-background-mobile: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
+  --button-background-image-mobile: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
   --button-border-mobile: 1px solid #ccc;
 
   /* horizontal rule */