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

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;
-}
-
-.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;
+  padding-top: 9px;
 }
 
 @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>
     </>
   );