app/components/settings/Settings.tsx

@@ -1,3 +1,4 @@
+//#region imports
 import React, { useState, useEffect } from 'react';
 import { applyTheme } from './theme';
 import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
@@ -34,6 +35,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     return false; // Default to false if item is null or empty
   };
 
+  //#region variables
+
   // Active section
   const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
 
@@ -287,6 +290,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     { value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' },
   ];
 
+  //#region Start of the code
   const handleLogout = () => {
     localStorage.clear();
     alert('Successfully logged out!');
@@ -379,10 +383,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     }
   };
 
-
+  //#region rendered content
   // Render settings content based on the active section
   const renderSettingsContent = () => {
     switch (activeSection) {
+      //#region general
       case 'general':
         return (
           <div className="settings-section">
@@ -439,6 +444,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         );
 
       case 'privacy':
+        //#region privacy
         return (
           <div className="settings-section">
             <h2>Privacy Settings</h2>
@@ -465,6 +471,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
 
       case 'theme':
+        //#region theme
+        //#region Basic
         return (
           <div className="settings-section">
             <h2>Theme Settings</h2>
@@ -473,7 +481,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               selectedTheme={selectedTheme}
               setSelectedTheme={setSelectedTheme}
             />
-
             {selectedTheme === 'BASIC-CUSTOM' && (
               <>
                 <h3>Basic Colors</h3>
@@ -508,6 +515,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   setValue={setBasicTextColor}
                   cssVariable=""
                 />
+                <DropdownSetting
+                  label="Font Family"
+                  value={fontFamily}
+                  setValue={(newFont) => {
+                    setFontFamily(newFont);
+                    document.documentElement.style.setProperty('--font-family', newFont);
+                  }}
+                  options={fontOptions}
+                />
+                <FontSizeSetting
+                  fontSize={fontSize}
+                  setFontSize={setFontSize}
+                />
               </>
             )}
 
@@ -543,7 +563,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             )}
           </div>
         );
-
+        //#region custom --> foss
       case 'foss':
         return (
           <div className="settings-section">
@@ -556,7 +576,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           </div>
         );
 
-
+        //#region account
       case 'account':
         return (
           <div className="settings-section">
@@ -599,7 +619,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             />
           </div>
         );
-
+        //#region api
       case 'api':
         return (
           <div className="settings-section">
@@ -653,7 +673,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             </div>
           </div>
         );
-
+        //#region import export
       case 'im/export':
         return (
           <div className="settings-section">
@@ -707,6 +727,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     URL.revokeObjectURL(url); // Clean up the URL object
   };
 
+  //#region overall export
   return (
     <div className="popup-overlay">
       <div className="settings-content">