style(post mobile): improve buttons positioning, add Update and Auto buttons for clarity

src/app.tsx

@@ -46,8 +46,8 @@ const BoardLayout = () => {
       {isMobile
         ? (subplebbitAddress || isInAllView || isInSubscriptionsView || pendingPost?.subplebbitAddress) && (
             <>
-              <PostForm key={key} />
               <MobileBoardButtons />
+              <PostForm key={key} />
             </>
           )
         : (subplebbitAddress || isInAllView || isInSubscriptionsView || pendingPost?.subplebbitAddress) && (

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

@@ -11,6 +11,32 @@
   margin: 5px 2px;
 }
 
+.mobileBoardButtons .secondRow {
+  margin-top: -5px;
+  padding-bottom: 20px;
+}
+
+.mobileBoardButtons {
+  margin-top: -3px;
+}
+
+.mobileBoardButtons .autoCheckbox {
+  margin: 0 3px 0 0;
+  position: relative;
+  top: -2px;
+  border-radius: 0;
+  height: 10px;
+  width: 10px;
+}
+
+.disabledButton {
+  opacity: 0.5;
+}
+
+.disabledButton:hover {
+  cursor: not-allowed !important;
+}
+
 .mobileBoardButtons a, .desktopBoardButtons a {
   all: unset;
 }

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

@@ -11,6 +11,7 @@ import styles from './board-buttons.module.css';
 import Tooltip from '../tooltip';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import _ from 'lodash';
+import useIsMobile from '../../hooks/use-is-mobile';
 
 interface BoardButtonsProps {
   address?: string | undefined;
@@ -85,6 +86,49 @@ const RefreshButton = () => {
   );
 };
 
+const UpdateButton = () => {
+  const { t } = useTranslation();
+  const isMobile = useIsMobile();
+
+  return (
+    <>
+      {/* TODO: Implement update button once available in API  */}
+      {isMobile ? (
+        <button className={`button ${styles.disabledButton}`} disabled>
+          {t('update')}
+        </button>
+      ) : (
+        <button className={`button ${styles.disabledButton}`} disabled>
+          {t('update')}
+        </button>
+      )}
+    </>
+  );
+};
+
+const AutoButton = () => {
+  const { t } = useTranslation();
+  const isMobile = useIsMobile();
+
+  return (
+    <>
+      {isMobile ? (
+        <button className='button'>
+          <label>
+            <input type='checkbox' className={styles.autoCheckbox} checked disabled />
+            {t('Auto')}
+          </label>
+        </button>
+      ) : (
+        <label>
+          {' '}
+          <input type='checkbox' className={styles.autoCheckbox} checked disabled /> {t('Auto')}
+        </label>
+      )}
+    </>
+  );
+};
+
 const SortOptions = () => {
   const { t } = useTranslation();
   const { sortType, setSortType } = useSortingStore();
@@ -194,6 +238,10 @@ export const MobileBoardButtons = () => {
           <ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
           <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
           <SubscribeButton address={subplebbitAddress} />
+          <div className={styles.secondRow}>
+            <UpdateButton />
+            <AutoButton />
+          </div>
         </>
       ) : (
         <>
@@ -266,7 +314,10 @@ export const DesktopBoardButtons = () => {
             [
             <ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
             ] [
-            <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />]
+            <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />] [
+            <UpdateButton />
+            ] [
+            <AutoButton />]
             <span className={styles.rightSideButtons}>
               <PostPageStats />
             </span>

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

@@ -16,6 +16,7 @@
 .postFormMobile {
   text-align: center;
   margin-top: -2px;
+  padding-bottom: 7px;
 }
 
 .closed {

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

@@ -449,7 +449,6 @@ const PostForm = () => {
               {showForm ? t('close_post_form') : isInPostView ? t('post_a_reply') : t('start_new_thread')}
             </button>
             {showForm && <PostFormTable closeForm={() => setShowForm(false)} postCid={postCid} />}
-            <hr />
           </>
         )}
       </div>