Background URL option

3 files changed, 13 insertions, 4 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>
diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx
index f803fc3..a5b9224 100644
--- a/extension/src/SettingsEditor.tsx
+++ b/extension/src/SettingsEditor.tsx
@@ -4,7 +4,7 @@ import imageUrl from "./assets/close.svg"
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
 import {RootFolder} from "./Body.tsx";
 
-function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean) => void}) {
+function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean) => void, setBackgroundURL: (arg0: string) => void}) {
     const [backgroundType, setBackgroundType] = useState("fromTheme");
     const [sort, setSort] = useState("fromBookmarks");
     const {rootFolder, setRootFolder} = useContext(RootFolder)
@@ -35,6 +35,9 @@ function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean
                 <option value={"image"}>Image</option>
             </RadioButtonGroup>
 
+            <h3>Background URL</h3>
+            <input type={"url"} onChange={e => props.setBackgroundURL(e.target.value)}/>
+
             <h3>Edit mode</h3>
             <label>
                 <input type={"checkbox"}/>
diff --git a/extension/src/index.css b/extension/src/index.css
index a0d71b1..ebaa37b 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -5,6 +5,7 @@
 html {
   margin: 0;
   padding: 0;
+  height: 100%
 }
 
 body {
@@ -13,6 +14,10 @@ body {
   font-family: sans-serif;
   margin: 0;
   padding: 0;
+  height: 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 100%;
 }
 
 #settings-menu {