Settings sidebar works now

1 files changed, 22 insertions, 10 deletions

diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx
index 7335a18..3e9fc93 100644
--- a/extension/src/SettingsEditor.tsx
+++ b/extension/src/SettingsEditor.tsx
@@ -1,19 +1,18 @@
 import RadioButtonGroup from "./RadioButtonGroup.tsx";
 import React, {useState} from "react";
+import imageUrl from "./assets/close.svg"
 
-function SettingsEditor() {
+function SettingsEditor(props: {closer: (arg0: boolean) => void}) {
     const [backgroundType, setBackgroundType] = useState("fromTheme");
     const [sort, setSort] = useState("fromBookmarks");
     const [rootFolder, setRootFolder] = useState('0');
 
     return (
-        <form>
-            <h3>Background Type</h3>
-            <RadioButtonGroup defaultValue={backgroundType} onChange={e => setBackgroundType(e)}>
-                <option value={"fromTheme"}>From Theme</option>
-                <option value={"solidColor"}>Solid Color</option>
-                <option value={"image"}>Image</option>
-            </RadioButtonGroup>
+        <div id="settings-menu">
+            <button id="settings-close" onClick={_ => props.closer(false)}>
+                <img alt="close settings" src={imageUrl}/>
+            </button>
+            <h1>Settings</h1>
 
             <h3>Sort</h3>
             <RadioButtonGroup defaultValue={sort} onChange={e => setSort(e)}>
@@ -23,6 +22,19 @@ function SettingsEditor() {
                 <option value={"recent"}>Recently used</option>
             </RadioButtonGroup>
 
+            <h3>Background Type</h3>
+            <RadioButtonGroup defaultValue={backgroundType} onChange={e => setBackgroundType(e)}>
+                <option value={"fromTheme"}>From Theme</option>
+                <option value={"solidColor"}>Solid Color</option>
+                <option value={"image"}>Image</option>
+            </RadioButtonGroup>
+
+            <h3>Edit mode</h3>
+            <label>
+                <input type={"checkbox"}/>
+                Enable Edit mode
+            </label>
+
             <h3>Root folder</h3>
             <select defaultValue={rootFolder} onChange={e => setRootFolder(e.target.value)}>
                 <option value={'0'}>Bookmarks Toolbar id:0</option>
@@ -34,8 +46,8 @@ function SettingsEditor() {
             <span>value of bg type: {backgroundType}</span>
             <span>value of sort: {sort}</span>
             <span>value of root folder: {rootFolder}</span>
-            <input type="submit"/>
-        </form>
+            <button>Save</button>
+        </div>
     )
 }