Background URL option

1 files changed, 4 insertions, 3 deletions

diff --git a/extension/src/Body.tsx b/extension/src/Body.tsx
index ee38cf1..0ac2e4c 100644
--- a/extension/src/Body.tsx
+++ b/extension/src/Body.tsx
@@ -21,9 +21,10 @@ export const BookmarkTree = React.createContext({
 
 function Body() {
     const [settingsOpen, setSettingsOpen] = useState(false);
-    const [rootFolder, setRootFolder] = useState('1')
+    const [rootFolder, setRootFolder] = useState('1');
     const [bookmarkTree, setBookmarkTree] = useState<BookmarkTreeNode[]>([])
     const [ogBookmarkTree, setOgBookmarkTree] = useState<BookmarkTreeNode[] | null>([])
+    const [backgroundURL, setBackgroundURL] = useState("")
     useEffect(() => {
         browser.bookmarks.getTree().then(t => {
             setOgBookmarkTree(t);
@@ -35,14 +36,14 @@ function Body() {
         });
     }, [rootFolder]);
 
-    console.log("Body re-render")
     return (
         <BookmarkTree.Provider value={{bookmarkTree, setBookmarkTree}}>
         <RootFolder.Provider value={{rootFolder, setRootFolder}}>
+            <style>{"body {background-image: url(\""+ backgroundURL +"\")}"}</style>
             <button id="settings-button" onClick={_ => setSettingsOpen(!settingsOpen)}>
                 <img alt="open settings" src={imageUrl}/>
             </button>
-            {settingsOpen && (<SettingsEditor tree={ogBookmarkTree!} closer={setSettingsOpen}/>)}
+            {settingsOpen && (<SettingsEditor tree={ogBookmarkTree!} closer={setSettingsOpen} setBackgroundURL={setBackgroundURL}/>)}
             {bookmarkTree[0] && (<Folder data={bookmarkTree[0]}/>)}
         </RootFolder.Provider>
         </BookmarkTree.Provider>