From e24fe8bc309317c4bb16df63a0f5d8ae24188d81 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 21 Mar 2024 15:21:33 +0100
Subject: [PATCH] add mobile button style

---
 .../assets/{ => buttons}/buttonfade-blue.png  | Bin
 .../assets/{ => buttons}/buttonfade-dark.png  | Bin
 public/assets/{ => buttons}/buttonfade.png    | Bin
 public/assets/{ => icons}/closed.gif          | Bin
 public/assets/{ => icons}/offline.png         | Bin
 public/assets/{ => icons}/sticky.gif          | Bin
 .../board-banner/board-banner.module.css      |   9 +++-
 .../board-stats/board-stats.module.css        |   7 ++++
 src/components/post-form/post-form.module.css |  39 ++++++++++++++++--
 src/components/post-form/post-form.tsx        |  11 +++--
 src/themes.css                                |   4 ++
 11 files changed, 63 insertions(+), 7 deletions(-)
 rename public/assets/{ => buttons}/buttonfade-blue.png (100%)
 rename public/assets/{ => buttons}/buttonfade-dark.png (100%)
 rename public/assets/{ => buttons}/buttonfade.png (100%)
 rename public/assets/{ => icons}/closed.gif (100%)
 rename public/assets/{ => icons}/offline.png (100%)
 rename public/assets/{ => icons}/sticky.gif (100%)

diff --git a/public/assets/buttonfade-blue.png b/public/assets/buttons/buttonfade-blue.png
similarity index 100%
rename from public/assets/buttonfade-blue.png
rename to public/assets/buttons/buttonfade-blue.png
diff --git a/public/assets/buttonfade-dark.png b/public/assets/buttons/buttonfade-dark.png
similarity index 100%
rename from public/assets/buttonfade-dark.png
rename to public/assets/buttons/buttonfade-dark.png
diff --git a/public/assets/buttonfade.png b/public/assets/buttons/buttonfade.png
similarity index 100%
rename from public/assets/buttonfade.png
rename to public/assets/buttons/buttonfade.png
diff --git a/public/assets/closed.gif b/public/assets/icons/closed.gif
similarity index 100%
rename from public/assets/closed.gif
rename to public/assets/icons/closed.gif
diff --git a/public/assets/offline.png b/public/assets/icons/offline.png
similarity index 100%
rename from public/assets/offline.png
rename to public/assets/icons/offline.png
diff --git a/public/assets/sticky.gif b/public/assets/icons/sticky.gif
similarity index 100%
rename from public/assets/sticky.gif
rename to public/assets/icons/sticky.gif
diff --git a/src/components/board-banner/board-banner.module.css b/src/components/board-banner/board-banner.module.css
index cf1ef2ab..89b5fb97 100644
--- a/src/components/board-banner/board-banner.module.css
+++ b/src/components/board-banner/board-banner.module.css
@@ -31,4 +31,11 @@
   border: var(--hr-border, revert);
   border-top: var(--hr-border-top, revert);
   height: var(--hr-height, revert);
-}
\ No newline at end of file
+}
+
+
+@media (max-width: 640px) {
+  .bannerCnt {
+    padding-top: 35px;
+  }
+ }
\ No newline at end of file
diff --git a/src/components/board-stats/board-stats.module.css b/src/components/board-stats/board-stats.module.css
index 17300ae4..1008b127 100644
--- a/src/components/board-stats/board-stats.module.css
+++ b/src/components/board-stats/board-stats.module.css
@@ -40,4 +40,11 @@
 
 .lowercase {
   text-transform: lowercase;
+}
+
+
+@media (max-width: 640px) {
+  .content {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css
index e071d1ca..95fede2b 100644
--- a/src/components/post-form/post-form.module.css
+++ b/src/components/post-form/post-form.module.css
@@ -1,15 +1,48 @@
-.togglePostForm {
+.postFormButtonDesktop {
   font-size: var(--post-form-toggle-font-size);
   font-weight: var(--post-form-toggle-font-weight);
   text-align: center;
 }
 
-.togglePostForm span {
+.postFormButtonDesktop span {
   color: var(--button-text-color);
   text-decoration: var(--button-text-decoration);
 }
 
-.togglePostForm span:hover {
+.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-repeat: var(--button-background-repeat-mobile);
+  text-decoration: var(--button-text-decoration-mobile);
+  user-select: none;
+  display: inline-block;
+}
+
+@media (max-width: 640px) {
+  .postFormButtonDesktop {
+    display: none;
+  }
+}
+
+@media (min-width: 641px) {
+  .postFormButtonMobile {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index 0efde90c..fe71e5be 100644
--- a/src/components/post-form/post-form.tsx
+++ b/src/components/post-form/post-form.tsx
@@ -9,9 +9,14 @@ const PostForm = ({ address }: PostFormProps) => {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.togglePostForm}>
-      [<span>{t('start_new_thread')}</span>]
-    </div>
+    <>
+      <div className={styles.postFormButtonDesktop}>
+        [<span>{t('start_new_thread')}</span>]
+      </div>
+      <div className={styles.postFormButtonMobile}>
+        <span>{t('start_new_thread')}</span>
+      </div>
+    </>
   );
 };
 
diff --git a/src/themes.css b/src/themes.css
index 0fa75862..c9da920f 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -17,6 +17,10 @@
   --box-border-color: #800;
   --button-text-color: #00e;
   --button-text-color-hover: red;
+  --button-font-size-mobile: 10pt;
+  --button-font-weight-mobile: 700;
+  --button-background-image-mobile: url("/public/assets/buttons/buttonfade.png");
+  --button-border-mobile: 1px solid #c0a69d;
   --color1: #800;
   --color2: #fca;
   --color3: #fed;