Merge pull request #57 from hcp-uw/ui-changes

UI changes
hcp-uw · Oct 11, 2024 · f29d385 · f29d385
2 parents 506f768 + 87fcbfb
commit f29d385
Show file tree

Hide file tree

Showing 15 changed files with 170 additions and 86 deletions.
diff --git a/starter-frontend/src/App.tsx b/starter-frontend/src/App.tsx
@@ -15,8 +15,6 @@ import Register from './pages/auth-pages/register';
 import NewProfile from './pages/edit-profile/EditProfile';
 import PrivateRoute from './components/auth/PrivateRoute';
 import Settings from './pages/settings/settings';
-// Delete later
-import Testing from './pages/testing';
 
 function App(): JSX.Element {
   return (
@@ -32,7 +30,6 @@ function App(): JSX.Element {
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
         <Route path="/new-profile" element={<PrivateRoute><NewProfile /></PrivateRoute>} />
-        <Route path="/testing" element={<Testing />}/>
         <Route path="/settings" element={<PrivateRoute><Settings/></PrivateRoute>}/>
         <Route path="*" element={<ErrorPage />} />
       </Routes>

diff --git a/starter-frontend/src/components/editor/DeleteButton.tsx b/starter-frontend/src/components/editor/DeleteButton.tsx
@@ -5,7 +5,7 @@ type DeleteProps = {
 
 /** Button to open Delete Modal */
 const DeleteButton = ({setIsDeleting}: DeleteProps): JSX.Element => {
-    return <button className="new-folder-button" onClick={() => setIsDeleting(true)}>Delete</button>
+    return <button className="note-btn" onClick={() => setIsDeleting(true)}>Delete</button>
 }
 
-export default DeleteButton
+export default DeleteButton
diff --git a/starter-frontend/src/components/editor/EditModal.tsx b/starter-frontend/src/components/editor/EditModal.tsx
@@ -227,25 +227,25 @@ const EditModal = ({isEditing, setIsEditing, name, givenClass, teacher, year, ta
                 <label className="backdrop">
                     <input type="checkbox" checked={isEditing} onChange={() => revert()}/>
                 </label>
-                <div className="modal-body">
-                    <p className="modal-header">Edit Details</p>
-                    <button className="modal-exit" onClick={() => revert()}>X</button>
+                <div className="edit-popup">
+                    <p className="make-header">Edit Details</p>
+                    <button className="make-exit" onClick={() => revert()}>X</button>
 
-                    <div className="modaltxt-wrap">
-                        <p className="modal-text">Name: </p>
+                    <div className="maketxt-wrap">
+                        <p className="make-text">Name: </p>
                         <input className="text-input-minor required-input" required pattern=".*\S+.*" type="text" value={currName} onChange={changeName}></input>
 
-                        <p className="modal-text">Class: </p>
+                        <p className="make-text">Class: </p>
                         <input className="text-input-minor" type="text" value={currClass} onChange={changeClass}></input>
                     </div>
-                    <div className="modaltxt-wrap">
-                        <p className="modal-text">Teacher: </p>
+                    <div className="maketxt-wrap">
+                        <p className="make-text">Teacher: </p>
                         <input className="text-input-minor" type="text" value={currTeacher} onChange={changeTeacher}></input>
 
-                        <p className="modal-text">Year: </p>
+                        <p className="make-text">Year: </p>
                         <input className="text-input-minor" type="number" value={currYear} onChange={changeYear} min={0} max={2024}></input>
 
-                        <p className="modal-text">Quarter: </p>
+                        <p className="make-text">Quarter: </p>
                         <select className="text-input-minor" name="quarter" id="quarter" value={currQuarter} onChange={(e) => setCurrQuarter(e.target.value)}>
                             <option value=""></option>
                             <option value="Autumn">Autumn</option>
@@ -257,14 +257,14 @@ const EditModal = ({isEditing, setIsEditing, name, givenClass, teacher, year, ta
 
                     {renderTags()}
                     <p className="warning-text">Warning: saving details will lose any unsaved progress! Please save your writing first!</p>
-                    <div className="modaltxt-wrap modal-centered">
-                        <button className="input-button" onClick={() => doSaveClick()}>Save</button>
-                        <button className="input-button" onClick={() => revert()}>Cancel</button>
+                    <div className="maketxt-wrap make-centered">
+                        <button className="create-button" onClick={() => doSaveClick()}>Save</button>
+                        <button className="delete-button" onClick={() => revert()}>Cancel</button>
                     </div>
                 </div>
             </div>
             )
     }
 }
 
-export default EditModal
+export default EditModal
diff --git a/starter-frontend/src/components/editor/EditModalButton.tsx b/starter-frontend/src/components/editor/EditModalButton.tsx
@@ -5,7 +5,7 @@ type EditProps = {
 
 /** Button to open edit modal */
 const EditModalButton = ({setIsEditing}: EditProps): JSX.Element => {
-    return <button className="new-folder-button" onClick={() => setIsEditing(true)}>Set Details</button>
+    return <button className="note-btn" onClick={() => setIsEditing(true)}>Set Details</button>
 }
 
-export default EditModalButton
+export default EditModalButton
diff --git a/starter-frontend/src/components/editor/Modal.css b/starter-frontend/src/components/editor/Modal.css
@@ -131,9 +131,10 @@
 
 .location-link {
     border: none;
-    text-decoration: underline;
+    text-decoration: none;
     background-color: var(--light-green);
-    font-size: 1.8rem;
+    font-size: 1.5rem;
+    font: inherit;
 }
 
 .location-link:hover {
@@ -145,6 +146,7 @@
     margin-left: 10px;
     width: 30px;
     height: 30px;
+    margin-top: 15px;
 }
 
 .location-template:hover {
@@ -161,4 +163,29 @@
     outline-color: red;
     outline-width: 1px;
     outline-style: solid;
-}
+}
+
+#files {
+    border-radius: 7px;
+    padding: 0.2rem;
+    font-size: 1.2rem;
+    font-family: "Fira Code";
+    width: 50%;
+    margin-left: 1.5rem;
+    margin-top: 10px;
+}
+
+.edit-popup {
+    position: fixed;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    top: 50%;
+    margin-top: 10px;
+    width: 70vw;
+    z-index: 10;
+
+    border-radius: 10px;
+    background-color: var(--light-green);
+
+    padding: 35px;
+}
diff --git a/starter-frontend/src/components/editor/PublicSaveModal.tsx b/starter-frontend/src/components/editor/PublicSaveModal.tsx
@@ -243,7 +243,7 @@ const PublicSaveModal = ({noteName, isPublicSaving, setIsPublicSaving, currBody}
             }
         }
         return (
-            <select name="files" id = "files" onChange={(e) => folderClick(e.target.value)}>
+            <select name="files" id="files" onChange={(e) => folderClick(e.target.value)}>
                 {options}
             </select>
         )
@@ -261,27 +261,26 @@ const PublicSaveModal = ({noteName, isPublicSaving, setIsPublicSaving, currBody}
             <label className="backdrop">
                 <input type="checkbox" checked={isPublicSaving} onChange={() => setIsPublicSaving(!isPublicSaving)}/>
             </label>
-            <div className="modal-body">
-                <p className="modal-header"> Save a Copy</p>
-                <button className="modal-exit" onClick={() => setIsPublicSaving(!isPublicSaving)}>X</button>
-                <div className="modaltxt-wrap">
-                    <p className="modal-text">Name:</p>
-                    <input className="text-input-major" type="text" value={currName} onChange={changeName}></input>
+            <div className="make">
+                <p className="make-header"> Save a Copy</p>
+                <button className="make-exit" onClick={() => setIsPublicSaving(!isPublicSaving)}>X</button>
+                <div className="maketxt-wrap">
+                    <p className="make-text">Name:</p>
+                    <input className="name-input" type="text" value={currName} onChange={changeName}></input>
                 </div>
-                <div className="modaltxt-wrap">
-                    <p className="modal-text">Location: </p>
-                    <button className="location-link">TemplateHome/</button>
+                <div className="maketxt-wrap">
+                    <p className="make-text">Location: TemplateHome/</p>
                 </div>
-                <div className="modaltxt-wrap">
-                    <p className="modal-text">Save as template?</p>
+                <div className="maketxt-wrap">
+                    <p className="make-text">Save as template?</p>
                     <input type="checkbox" className="location-template" checked={isTemplate} onChange={() => setIsTemplate(!isTemplate)}></input>
                 </div>
 
-                <p className="warning-text">Warning: You can't move this file later!</p>
+                <p>Warning: You can't move this file later!</p>
 
-                <div className="modaltxt-wrap modal-centered">
-                        <button className="input-button" onClick={() => saveClick()}>Save</button>
-                        <button className="input-button" onClick={() => setIsPublicSaving(false)}>Cancel</button>
+                <div className="maketxt-wrap">
+                        <button className="create-button" onClick={() => saveClick()}>Save</button>
+                        <button className="delete-button" onClick={() => setIsPublicSaving(false)}>Cancel</button>
                 </div>
 
 
@@ -296,32 +295,30 @@ const PublicSaveModal = ({noteName, isPublicSaving, setIsPublicSaving, currBody}
             <label className="backdrop">
                 <input type="checkbox" checked={isPublicSaving} onChange={() => setIsPublicSaving(!isPublicSaving)}/>
             </label>
-            <div className="modal-body">
-                <p className="modal-header"> Save a Copy</p>
-                <button className="modal-exit" onClick={() => setIsPublicSaving(!isPublicSaving)}>X</button>
-                <div className="modaltxt-wrap">
-                    <p className="modal-text">Name:</p>
-                    <input className="text-input-major" type="text" value={currName} onChange={changeName}></input>
+            <div className="make">
+                <p className="make-header"> Save a Copy</p>
+                <button className="make-exit" onClick={() => setIsPublicSaving(!isPublicSaving)}>X</button>
+                <div className="maketxt-wrap">
+                    <p className="make-text">Name:</p>
+                    <input className="name-input" type="text" value={currName} onChange={changeName}></input>
                 </div>
-                <div className="modaltxt-wrap">
-                    <p className="modal-text">Location: </p>
-                    {LocationLinks()}
+                <div className="maketxt-wrap">
+                    <p className="make-text">Location: {LocationLinks()}</p>
                 </div>
-                <div className="modaltxt-wrap">
-                    <p className="modal-text">Choose a file?</p>
+                <div className="maketxt-wrap">
+                    <p className="make-text">Choose a folder?</p>
                     {SelectFiles()}
                 </div>
-                <div className="modaltxt-wrap">
-                    <p className="modal-text">Save as template?</p>
+                <div className="maketxt-wrap">
+                    <p className="make-text">Save as template?</p>
                     <input type="checkbox" className="location-template" checked={isTemplate} onChange={() => setIsTemplate(!isTemplate)}></input>
                 </div>
 
-                <p className="warning-text">Warning: You can't move this file later!</p>
+                <p className="tiny-warning">Warning: You can't move this file later!</p>
 
-
-                <div className="modaltxt-wrap modal-centered">
-                        <button className="input-button" onClick={() => saveClick()}>Save</button>
-                        <button className="input-button" onClick={() => setIsPublicSaving(false)}>Cancel</button>
+                <div className="maketxt-wrap make-centered">
+                        <button className="create-button" onClick={() => saveClick()}>Save</button>
+                        <button className="delete-button" onClick={() => setIsPublicSaving(false)}>Cancel</button>
                 </div>
 
 
@@ -414,4 +411,4 @@ const getExtendedRoute = (locationID: route, email: string): string => {
     }
 
     return eRoute;
-}
+}
diff --git a/starter-frontend/src/components/editor/SavePublicButton.tsx b/starter-frontend/src/components/editor/SavePublicButton.tsx
@@ -6,7 +6,7 @@ type SavePublicProps = {
 /** Button to open modal that saves a copy */
 const SavePublicButton = ({setIsPublicSaving}: SavePublicProps): JSX.Element => {
 
-    return <button className="new-folder-button" onClick={() => setIsPublicSaving(true)}>Save a Copy</button>
+    return <button className="note-btn" onClick={() => setIsPublicSaving(true)}>Save a Copy</button>
 }
 
-export default SavePublicButton
+export default SavePublicButton
diff --git a/starter-frontend/src/components/editor/ShareButton.tsx b/starter-frontend/src/components/editor/ShareButton.tsx
@@ -1,13 +1,13 @@
 /** Parameters for button to open share modal */
 type ShareButtonProps = {
     setIsSharing: React.Dispatch<React.SetStateAction<boolean>>
-}
+};
 
 /** Button to open share modal */
 const ShareButton = ({setIsSharing}: ShareButtonProps): JSX.Element => {
     return(
-        <button className="new-folder-button" onClick={() => setIsSharing(true)}>Share</button>
+        <button className="note-btn" onClick={() => setIsSharing(true)}>Share</button>
     )
-}
+};
 
-export default ShareButton
+export default ShareButton;
diff --git a/starter-frontend/src/components/editor/TextEditor.tsx b/starter-frontend/src/components/editor/TextEditor.tsx
@@ -44,7 +44,7 @@ export default function TextEditor({editorRef, initContent, eRoute, setIsLoading
             setupIDEButtons(openIDE, editorRef);
           }}
           init={{ 
-            height: "calc(100vh - 105px)",
+            height: "calc(96vh - 105px)",
             width: "auto",
             resize: false, 
             menubar: false,

diff --git a/starter-frontend/src/components/ide/IDE.css b/starter-frontend/src/components/ide/IDE.css
@@ -1,5 +1,5 @@
 .ide {
-    height: calc(100vh - 105px);
+    height: calc(96vh - 105px);
     width: 35%;
     border: 1.5px solid var(--dark-gray);
     border-radius: 8.5px;

diff --git a/starter-frontend/src/components/personal/Create.css b/starter-frontend/src/components/personal/Create.css
@@ -58,6 +58,7 @@
     word-wrap: inherit;
     display: block;
     margin-bottom: 10px;
+    text-decoration: none;
 }
 
 /* button indicating whether new note or temp */
@@ -170,4 +171,4 @@
 .delete-button:hover {
     cursor: pointer;
     background-color: rgb(211, 0, 0);
-}
+}
diff --git a/starter-frontend/src/components/personal/FolderModal.tsx b/starter-frontend/src/components/personal/FolderModal.tsx
@@ -96,7 +96,7 @@ const FolderModal = ({isMakingFolder, onMakeFolder, givenPath, eRoute} : FolderM
                         <p className="make-text">Name:</p>
                         <input className="name-input" required pattern=".*\S+.*" type="text" value={name} onChange={changeName}></input>
                     </div>
-                    <div className="maketxt-warp">
+                    <div className="maketxt-wrap">
                         <p>You can't change the name later</p>
                     </div>
                     <div className="maketxt-wrap">

diff --git a/starter-frontend/src/pages/editor/editor.css b/starter-frontend/src/pages/editor/editor.css
@@ -1,5 +1,5 @@
 .display-window {
-    height: calc(100vh - 105px);
+    height: calc(96vh - 105px);
     background-color: var(--light-gray);
     overflow-wrap: break-word;
     width: auto;
@@ -17,4 +17,58 @@
     display: flex;
     padding: 15px;
     gap: 15px;
+    margin-left: 2vh;
+    margin-right: 1vw;
+}
+
+.note-header {
+    margin-top: 1vh;
+    width: 100%;
+    height: 5vh;
+    padding-left: 2vw;
+    justify-content: space-between;
+}
+
+.note-btn {
+        /* top: 0px;
+        bottom: 0px;
+        left: 0px;
+        right: 0px; */
+        min-width: 100px;
+        margin-top: 1vh;
+        height: 5vh;
+        cursor: pointer;
+
+        color: var(--dark-gray);
+
+        /* font-family: "Fira Code";
+        font-weight: 700;
+        font-style: normal; */
+
+        border-radius: 5px;
+        border: 2px var(--dark-green) solid;
+        background-color: var(--light-green);
+        font-family: 'Amiko';
+}
+
+
+.note-btn:hover {
+    background-color: var(--green);
+    /* color: var(--offbase-white); */
+}
+
+
+.btns {
+    width: 50%;
+    display: flex;
+    gap: 20px;
+    justify-content: right;
+    margin-right: calc(2vw + 1px);
+    /* align-items: center; */
+    /* max-height: 4vh; */
+}
+
+
+.note-ttl {
+    font-size: 3vh;
 }