Dev

web/src/components/nav/nav.css

@@ -41,6 +41,11 @@
     margin-left: 10px;
 }
 
+.navitem svg {
+    width: 24px;
+    height: 24px;
+}
+
 .navitem-active {
     border-left: 1px solid white;
 }

web/src/components/note/contentblock/textblock.tsx

@@ -1,13 +1,28 @@
-import "./contentblock.css"
+import { useState } from 'react';
+
+import "./contentblock.css";
+
+import Editor from '../editor/editor';
 
 interface TextBlockProps {
     text: string;
 }
 
 export default function TextBlock(props: TextBlockProps) {
+    const [editing, setEditing] = useState(false);
+    const [text, setText] = useState(props.text);
+
+    function toggleEditing() {
+        setEditing(!editing);
+    }
+
     return (
-        <div className="contentblock">
-            <p className="text">{props.text}</p>
+        <div className="contentblock" onClick={() => {}}>
+            {
+                (editing)
+                ? <Editor text={'test'} setText={setText}/>
+                : <p> {text} </p>
+            }
         </div>
     )
 }

web/src/components/note/editor/editor.css

@@ -0,0 +1,21 @@
+.editor-main {
+    border: solid;
+    border-color: lightgray;
+    border-width: 2px;
+    border-radius: 5px;
+}
+
+.editor-main > textarea {
+    background-color: red;
+
+    width: 100%;
+    height: 100px;
+    margin: 10px;
+
+    border: none;
+    outline: none;
+    resize: none;
+
+    font-family: 'Inter', sans-serif;
+    font-size: 20;
+}

web/src/components/note/editor/editor.tsx

@@ -0,0 +1,37 @@
+import { useRef } from 'react';
+
+import './editor.css'
+
+interface EditorProps {
+    text: string;
+    setText: (_v: string) => void;
+}
+
+export default function Editor(props: EditorProps) {
+    // const textArea = document.getElementById('editor-textarea');
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+    function autoResize() {
+        // ta.style.height = 'auto';
+        // ta.style.height = ta.scrollHeight + 'px';
+
+        const textArea = textAreaRef.current;
+        if (textArea) {
+            textArea.style.height = 'auto';
+            textArea.style.height = textArea.scrollHeight + 'px';
+
+            console.log(textArea.scrollHeight)
+        }
+    }
+
+    return (
+        <div className='editor-main'>
+            <textarea 
+                id='editor-textarea'
+                onInput={autoResize}
+                ref={textAreaRef}
+                defaultValue={props.text}
+            />
+        </div>
+    );
+}

web/src/components/popover/popover.tsx

@@ -43,13 +43,14 @@ export default function Popover(props: PopoverProps) {
                 <p className='popover-title'> {props.title} </p>
 
                 <div className='popover-section'>
-                        {buttons.map((buttonData, _) => (
+                        {buttons.map((buttonData, i) => (
                             <Button
                                 info={buttonData}
                                 onClick={() => {
                                     props.buttonCallback(buttonData.text.toLowerCase())
                                     props.closeCallback();
                                 }}
+                                key={i}
                             />
                         ))}
                 </div>

web/src/components/popup/menus/createNewMenu.tsx

@@ -2,11 +2,14 @@ import { Icon } from '@iconify/react';
 
 import './menus.css'
 
-export default function CreateNewMenu(props: {
+interface CreateNewMenuProps {
     studyguideaction: () => void;
     noteaction: () => void;
     folderaction: () => void;
-}) {
+}
+
+export default function CreateNewMenu(props: CreateNewMenuProps) {
+
     return (
         <div className="create-new">
             <div>

web/src/components/popup/menus/menus.css

@@ -1,20 +1,37 @@
 .popup-main .create-new {
-    display: grid;
-    grid-template-columns: 33% 33% 33%;
+    display: flex;
+    gap: 2rem;
     margin: auto;
-    width: 80%;
+    align-items: center;
+    justify-content: center;
+    width: 70%;
+    padding-bottom: 2vh;
+    padding-left: 5vh;
+    padding-right: 5vh;
 }
 
 .popup-main .create-new div {
     text-align: center;
+    transition: transform 0.15s ease;
+}
+
+.popup-main .create-new div:active {
+    transform: scale(0.9);
 }
 
 .popup-main .create-new button {
     width: 144px;
     height: 144px;
     border-radius: 16px;
     padding: 10px;
-    font-size: 64px;
+
+    cursor: pointer;
+    border: none;
+}
+
+.popup-main .create-new svg {
+    width: 70%;
+    height: 70%;
 }
 
 .popup-main .create-new p {
@@ -23,7 +40,10 @@
 
 .popup-main .create-new-note {
     margin: auto;
-    width: 80%;
+
+    padding-left: 5vh;
+    padding-right: 5vh;
+    padding-bottom: 5vh;
 }
 
 .popup-main .create-new-note input {
@@ -33,12 +53,24 @@
     border-bottom: 1px solid white;
     color: white;
     font-size: 20px;
+
+    outline: none;
 }
 
 .popup-main .create-new-note button {
     background-color: #DCECFF;
     border-radius: 8px;
     font-size: 16px;
     padding: 10px;
+    margin-top: 2rem;
     width: 100%;
+
+    border: none;
+    cursor: pointer;
+
+    transition: transform 0.15s ease;
+}
+
+.popup-main .create-new-note button:active {
+    transform: scale(0.9);
 }

web/src/components/popup/popup.css

@@ -7,9 +7,6 @@
     /* make it look like the popup is expanding from its center */
     transform-origin: left top;
 
-    width: 80vh;
-    height: 40vh;
-
     background-color: #202123;
     border-radius: 1rem;
     z-index: 999;
@@ -57,3 +54,5 @@
     backdrop-filter: blur(5px);
     z-index: 99;
 }
+
+

web/src/routes/note/note.tsx

@@ -57,17 +57,17 @@ export default function Note(props: NoteData) {
             </div>
 
             <div className='notebody'>
-                {blocks.map((blockData, _) => {
+                {blocks.map((blockData, i) => {
                     switch (blockData.type) {
                         case 'header':
-                            return <HeaderBlock text={blockData.data.text}/>
+                            return <HeaderBlock text={blockData.data.text} key={i} />
 
                         case 'text':
-                            return <TextBlock text={blockData.data.text}/>
+                            return <TextBlock text={blockData.data.text} key={i} />
 
                         case 'image':
                             // implement proper image handling
-                            return <ImageBlock src={blockData.data.src} alt={blockData.data.alt}/>
+                            return <ImageBlock src={blockData.data.src} alt={blockData.data.alt} key={i} />
                     }
                 })}