Improve settings layout

frontend/src/App.scss

@@ -1,5 +1,4 @@
 // Variables
-$border-color: #eaeaea;
 $padding: 20px;
 $navbar-height: 64px; // Adjust this value based on your preference
 
@@ -9,11 +8,9 @@ $navbar-height: 64px; // Adjust this value based on your preference
   justify-content: space-between;
   padding: 0 $padding;
   height: $navbar-height;
-  border-bottom: 1px solid $border-color;
 }
 
 .sidebar {
-  border-right: 1px solid $border-color;
   overflow-y: auto;
   padding: $padding;
 }
@@ -29,7 +26,6 @@ $navbar-height: 64px; // Adjust this value based on your preference
   justify-content: space-between;
   align-items: center;
   padding: $padding;
-  border-bottom: 1px solid $border-color;
 
   .breadcrumbs-container {
     flex-grow: 1;
@@ -46,6 +42,21 @@ $navbar-height: 64px; // Adjust this value based on your preference
   }
 }
 
+.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.setting-group {
+  margin-bottom: 1rem;
+}
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
 .content-body {
   flex-grow: 1;
   overflow: hidden;
@@ -59,7 +70,6 @@ $navbar-height: 64px; // Adjust this value based on your preference
   padding: $padding;
 }
 
-// Ensure CodeMirror takes full height of its container
 .editor-container {
   height: 100%;
   

frontend/src/components/Settings.js

@@ -1,47 +1,45 @@
 import React, { useState } from 'react';
-import { Modal, Input, Toggle, Spacer, Button, Text } from '@geist-ui/core';
+import { Modal, Text, Toggle, Tooltip, Input, Spacer, Button, useTheme } from '@geist-ui/core';
 
-const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
+const Settings = ({ visible, onClose, currentTheme, onThemeChange, onSettingsChange }) => {
+  const theme = useTheme();
   const [fontSize, setFontSize] = useState('14');
   const [autoSave, setAutoSave] = useState(false);
 
   const handleSubmit = () => {
-    const settings = {
+    onSettingsChange({ fontSize, autoSave });
-      fontSize,
-      autoSave,
-    };
-    console.log('Settings to be sent to backend:', settings);
-    // TODO: Implement API call to send settings to backend
     onClose();
   };
 
+  const disabledMessage = "This feature is not yet implemented";
+
   return (
     <Modal visible={visible} onClose={onClose}>
       <Modal.Title>Settings</Modal.Title>
       <Modal.Content>
-        <Text>Theme</Text>
+        <div className="setting-group">
+          <Text h4>Appearance</Text>
+          <div className="setting-item">
+            <Text>Dark Mode</Text>
             <Toggle 
               checked={currentTheme === 'dark'}
               onChange={() => onThemeChange()}
-        >
-          Dark Mode
-        </Toggle>
-        <Spacer h={0.5} />
-        <Input 
-          label="Font Size" 
-          value={fontSize} 
-          onChange={(e) => setFontSize(e.target.value)} 
             />
-        <Spacer h={0.5} />
+          </div>
-        <Toggle 
+        </div>
-          checked={autoSave}
+        <Spacer h={1} />
-          onChange={(e) => setAutoSave(e.target.checked)}
+        <div className="setting-group">
-        >
+          <Text h4>Editor</Text>
-          Auto Save
+          <Tooltip text={disabledMessage} type="dark" placement="left">
-        </Toggle>
+          <div className="setting-item disabled">
+            <Text>Auto Save</Text>
+            <Toggle disabled/>
+          </div>
+          </Tooltip>
+        </div>
       </Modal.Content>
       <Modal.Action passive onClick={onClose}>Cancel</Modal.Action>
-      <Modal.Action onClick={handleSubmit}>Submit</Modal.Action>
+      <Modal.Action onClick={handleSubmit}>Save Changes</Modal.Action>
     </Modal>
   );
 };