From 80c3a5132806a98c3abcdaf267666018df52a3d0 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 22 Mar 2024 12:09:17 +0100
Subject: [PATCH] add board buttons row for mobile and desktop, global styling
 for button

---
 src/app.tsx                                   |  4 ++
 .../board-buttons/board-buttons.module.css    | 20 +++++++++
 .../board-buttons/board-buttons.tsx           | 42 +++++++++++++++++++
 src/components/board-buttons/index.ts         |  1 +
 .../board-stats/board-stats.module.css        |  6 +--
 src/components/post-form/post-form.module.css | 29 +------------
 src/components/post-form/post-form.tsx        |  4 +-
 src/index.css                                 | 33 +++++++++++++++
 src/themes.css                                | 34 +++++++--------
 9 files changed, 123 insertions(+), 50 deletions(-)
 create mode 100644 src/components/board-buttons/board-buttons.module.css
 create mode 100644 src/components/board-buttons/board-buttons.tsx
 create mode 100644 src/components/board-buttons/index.ts

diff --git a/src/app.tsx b/src/app.tsx
index 23c20f4b..7183a6ba 100644
--- a/src/app.tsx
+++ b/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 />
diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css
new file mode 100644
index 00000000..c3800751
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx
new file mode 100644
index 00000000..32c4a13f
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/board-buttons/index.ts b/src/components/board-buttons/index.ts
new file mode 100644
index 00000000..067ee43b
--- /dev/null
+++ b/src/components/board-buttons/index.ts
@@ -0,0 +1 @@
+export { MobileBoardButtons, DesktopBoardButtons } from './board-buttons';
diff --git a/src/components/board-stats/board-stats.module.css b/src/components/board-stats/board-stats.module.css
index 1008b127..3ef0b558 100644
--- a/src/components/board-stats/board-stats.module.css
+++ b/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 {
diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css
index 8d64269b..3453e4c0 100644
--- a/src/components/post-form/post-form.module.css
+++ b/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) {
diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index fe71e5be..36d70762 100644
--- a/src/components/post-form/post-form.tsx
+++ b/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>
     </>
   );
diff --git a/src/index.css b/src/index.css
index 894b20b3..7b696175 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,4 +10,37 @@ body {
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, iframe {
   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;
+  }
 }
\ No newline at end of file
diff --git a/src/themes.css b/src/themes.css
index 3ce3b82e..b4408964 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -20,8 +20,8 @@
   --body-font-size: 10pt;
 
   /* desktop buttons */
-  --button-text-color: #00e;
-  --button-text-color-hover: red;
+  --button-desktop-text-color: #00e;
+  --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-text-color-hover: #d00;
+  --button-desktop-text-color: #34345c;
+  --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 */
-  --button-text-color: #00e;
-  --button-text-color-hover: red;
+  /* desktop buttons */
+  --button-desktop-text-color: #00e;
+  --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 */
-  --button-text-color: #34345c;
+  /* desktop buttons */
+  --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 */
-  --button-text-color: #81a2be;
-  --button-text-color-hover: #5f89ac;
+  /* desktop buttons */
+  --button-desktop-text-color: #81a2be;
+  --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 */
-  --button-text-color: #f60;
-  --button-text-color-hover: #f30;
+  /* desktop buttons */
+  --button-desktop-text-color: #f60;
+  --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 */