feat(ui): polish advanced settings, media hosting warning, reply modal mobile UX (#1054)

- Move Save Advanced Settings button to bottom-center of advanced settings
- Reduce spacing above/below web upload warning in media hosting
- Set 16px font for reply modal inputs on mobile (prevents iOS zoom)
- Autofocus textarea when opening reply modal on mobile

src/components/reply-modal/reply-modal.module.css

@@ -141,6 +141,10 @@
   .title {
     cursor: default;
   }
+
+  .container input[type="text"], .container textarea {
+    font-size: 16px;
+  }
 }
 
 .error {

src/components/reply-modal/reply-modal.tsx

@@ -152,23 +152,25 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
   }, [parentCid]);
 
   useEffect(() => {
-    if (showReplyModal && !isMobile) {
+    if (showReplyModal) {
       setTimeout(() => {
         if (textRef.current) {
           textRef.current.focus();
         }
       }, 0);
 
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          closeModal();
-        }
-      };
-      document.addEventListener('keydown', handleEscape);
+      if (!isMobile) {
+        const handleEscape = (e: KeyboardEvent) => {
+          if (e.key === 'Escape') {
+            closeModal();
+          }
+        };
+        document.addEventListener('keydown', handleEscape);
 
-      return () => {
-        document.removeEventListener('keydown', handleEscape);
-      };
+        return () => {
+          document.removeEventListener('keydown', handleEscape);
+        };
+      }
     }
   }, [showReplyModal, closeModal, isMobile]);
 

src/components/settings-modal/advanced-settings/advanced-settings.module.css

@@ -48,9 +48,8 @@
 }
 
 .saveOptions {
-  float: right;
-  margin-top: -27px;
-  margin-right: 10px;
+  display: block;
+  margin: 15px auto 15px;
   text-transform: capitalize;
 }
 

src/components/settings-modal/advanced-settings/advanced-settings.tsx

@@ -262,9 +262,6 @@ const AdvancedSettings = () => {
 
   return (
     <div className={styles.content}>
-      <button className={styles.saveOptions} onClick={handleSave}>
-        {t('save_options')}
-      </button>
       <div className={styles.category}>
         <span className={styles.categoryTitle}>IPFS gateways:</span>
         <span className={styles.categorySettings}>
@@ -305,6 +302,9 @@ const AdvancedSettings = () => {
           </span>
         </div>
       )}
+      <button className={styles.saveOptions} onClick={handleSave}>
+        {t('save_advanced_settings')}
+      </button>
     </div>
   );
 };

src/components/settings-modal/interface-settings/interface-settings.module.css

@@ -53,7 +53,7 @@
 
 .webUploadWarning {
   font-size: 0.8em;
-  padding: 5px 0;
+  padding: 2px 0;
   margin-left: 10px;
 }