diff --git a/app/src/App.module.scss b/app/src/App.module.scss index 481cc25..ce1d4af 100644 --- a/app/src/App.module.scss +++ b/app/src/App.module.scss @@ -24,4 +24,10 @@ flex-grow: 1; flex-basis: auto; overflow-x: scroll; + + // Cribbed from https://www.magicpattern.design/tools/css-backgrounds + background-color: #e5e5f7; + opacity: 0.8; + background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px); + background-size: 10px 10px; } \ No newline at end of file diff --git a/app/src/components/NodeDisplay.module.scss b/app/src/components/NodeDisplay.module.scss index 60496b1..74c72f1 100644 --- a/app/src/components/NodeDisplay.module.scss +++ b/app/src/components/NodeDisplay.module.scss @@ -13,6 +13,10 @@ flex-direction: column; resize: horizontal; + + background-color: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); } .header { diff --git a/app/src/components/nodes/JournalPage.module.scss b/app/src/components/nodes/JournalPage.module.scss index d4b3798..af4b3c3 100644 --- a/app/src/components/nodes/JournalPage.module.scss +++ b/app/src/components/nodes/JournalPage.module.scss @@ -4,7 +4,14 @@ flex-direction: column; } -.title { +.titleContainer, +.titleEditorForm { + display: flex; +} + +.title, +.titleEditor { + flex-grow: 1; padding: 12px; border: none; border-bottom: 1px solid lightgray; diff --git a/app/src/components/nodes/JournalPage.tsx b/app/src/components/nodes/JournalPage.tsx index 06abf2d..a81e3a6 100644 --- a/app/src/components/nodes/JournalPage.tsx +++ b/app/src/components/nodes/JournalPage.tsx @@ -33,7 +33,6 @@ export default function JournalPage({ id, data }: JournalPageProps) { useEffect(() => { if (changed) { - // console.log("OLD", previous, "NEW", valueToSave); (async () => { console.log("Saving..."); const resp = await fetch(`http://localhost:5195/node/${id}`, { @@ -72,27 +71,34 @@ export default function JournalPage({ id, data }: JournalPageProps) { <> {isEditingTitle ? (
) : ( -