From 709efe9869baed3cf83a8ae922c7a4b7b64b7cad Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 4 Jun 2024 16:13:20 +0200
Subject: [PATCH] add mobile button styling

---
 .../post/edit-menu/edit-menu.module.css          | 16 ++++++----------
 src/components/post/edit-menu/edit-menu.tsx      |  6 +++++-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/post/edit-menu/edit-menu.module.css b/src/components/post/edit-menu/edit-menu.module.css
index 00f83baa..60f1de2b 100644
--- a/src/components/post/edit-menu/edit-menu.module.css
+++ b/src/components/post/edit-menu/edit-menu.module.css
@@ -4,14 +4,6 @@
   filter: var(--filter80);
 }
 
-.button {
-  color: var(--text-info);
-  font-weight: bold;
-  text-decoration: none;
-  padding: 0 4px 0 4px;
-  cursor: pointer;
-}
-
 .modal {
   z-index: 7;
   background-color: var(--challenge-modal-background-color);
@@ -74,8 +66,6 @@
 
 .bottom button {
   text-transform: capitalize;
-  cursor: pointer;
-  padding: 2px 6px 3px;
   margin-left: 2px;
   margin-bottom: 2px;
 }
@@ -90,6 +80,12 @@
   }
 }
 
+@media (min-width: 640px) {
+  .bottom button {
+    cursor: pointer;
+    padding: 2px 6px 3px; 
+  }
+}
 
 @media (max-width: 640px) {
   .checkbox {
diff --git a/src/components/post/edit-menu/edit-menu.tsx b/src/components/post/edit-menu/edit-menu.tsx
index 9874632c..33f601e2 100644
--- a/src/components/post/edit-menu/edit-menu.tsx
+++ b/src/components/post/edit-menu/edit-menu.tsx
@@ -6,6 +6,7 @@ import styles from './edit-menu.module.css';
 import { alertChallengeVerificationFailed } from '../../../lib/utils/challenge-utils';
 import useChallengesStore from '../../../stores/use-challenges-store';
 import _ from 'lodash';
+import useIsMobile from '../../../hooks/use-is-mobile';
 
 const { addChallenge } = useChallengesStore.getState();
 
@@ -18,6 +19,7 @@ type EditMenuProps = {
 
 const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentAuthorMod }: EditMenuProps) => {
   const { t } = useTranslation();
+  const isMobile = useIsMobile();
   let post: any;
   const comment = useComment({ commentCid });
   const { editedComment } = useEditedComment({ comment });
@@ -222,7 +224,9 @@ const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentA
                 <input type='text' onChange={onReason} defaultValue={post?.reason} size={14} />
               </div>
               <div className={styles.bottom}>
-                <button onClick={_publishCommentEdit}>{t('save')}</button>
+                <button className={isMobile ? 'button' : ''} onClick={_publishCommentEdit}>
+                  {t('save')}
+                </button>
               </div>
             </div>
           </div>