From 4f103e6e2210e313438b6f0f46e9549db5ccad1a Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Wed, 6 Nov 2024 19:55:06 -0500
Subject: Improve settings menu animation

---
 extension/src/SettingsEditor.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

(limited to 'extension/src/SettingsEditor.tsx')

diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx
index 9bbf153..f1f90cf 100644
--- a/extension/src/SettingsEditor.tsx
+++ b/extension/src/SettingsEditor.tsx
@@ -4,12 +4,13 @@ import imageUrl from "./assets/close.svg"
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
 import {Settings} from "./Body.tsx";
 
-function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean) => void}) {
+function SettingsEditor(props: {tree: BookmarkTreeNode[], isOpen: [boolean,  React.Dispatch<React.SetStateAction<boolean>>]}) {
     const [settings, setSettings] = useContext(Settings)
+    const [open, setOpen] = props.isOpen;
 
     return (
-        <div id="settings-menu">
-            <button id="settings-close" onClick={_ => props.closer(false)}>
+        <div id="settings-menu" className={open? "open": "closed"}>
+            <button id="settings-close" onClick={_ => setOpen(false)}>
                 <img alt="close settings" src={imageUrl}/>
             </button>
             <h1>Settings</h1>
@@ -40,13 +41,13 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean
 
             {(() => { switch (settings.backgroundMode) {
                 case "image": return (<>
-                    <h3>Background Color</h3>
+                    <h3>Background Image URL</h3>
                     <input type={"url"}
                            defaultValue={settings.backgroundImage}
                            onChange={e => setSettings({...settings, backgroundImage: e.target.value})}/>
                 </>)
                 case "color": return (<>
-                    <h3>Background URL</h3>
+                    <h3>Background Color</h3>
                     <input type={"color"}
                            defaultValue={settings.backgroundColor}
                            onChange={e => setSettings({...settings, backgroundColor: e.target.value})}/>
-- 
cgit v1.2.3