style HomePage

nora-kauczor · Nov 10, 2024 · 218cfb7 · 218cfb7
1 parent 9e3912d
commit 218cfb7
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 63 deletions.
diff --git a/frontend/src/components/CalendarDay/CalendarDay.css b/frontend/src/components/CalendarDay/CalendarDay.css
@@ -1,7 +1,6 @@
 #calendar-day-wrapper {
     height: 90px;
     width: 50px;
-    display: flex;
 }
 
 #calendar-day {
@@ -10,10 +9,10 @@
     height: 100%;
     width: 100%;
     font-size: 0.75rem;
-    border: 1px solid gray;
+    border: 1px solid lightgray;
     border-radius: 0;
     color: black;
-    background-color: inherit;
+    background-color: var(--calendar-color);
     display: flex;
     justify-content: space-evenly;
     flex-direction: column;
@@ -41,7 +40,9 @@
     font-size: 1.5em;
 }
 
-#invisible-dot {color: #D1E7F5;}
+#invisible-dot {
+    color: var(--calendar-color);
+}
 
 #plus {
     font-size: 1em;

diff --git a/frontend/src/components/DayPopUp/DayPopUp.css b/frontend/src/components/DayPopUp/DayPopUp.css
@@ -1,22 +1,14 @@
 #day-popup {
-    z-index: 3;
-    padding: 0;
-    margin: auto;
-    border-radius: 10px;
-    cursor: pointer;
-    position: fixed;
     width: 70%;
     max-width: 500px;
-    height: 70%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    height: auto;
     display: flex;
     flex-direction: column;
     gap: 5px;
     justify-content: space-evenly;
     align-items: center;
     overflow-y: auto;
+
 }
 
 button {

diff --git a/frontend/src/components/DayPopUp/DayPopUp.tsx b/frontend/src/components/DayPopUp/DayPopUp.tsx
@@ -32,5 +32,4 @@ export default function DayPopUp(props: Readonly<Props>) {
                    userId={props.userId}/>
     </div>)
 
-
 }
diff --git a/frontend/src/components/Form/Form.tsx b/frontend/src/components/Form/Form.tsx
@@ -75,13 +75,15 @@ export default function Form(props: Readonly<Props>) {
             <label htmlFor={"word-input"}>Your Vocab</label>
             <input name={"word"} id={"word-input"} value={wordInput}
                    onChange={handleChange}
+                   maxLength={25}
                    aria-required={"true"}
                    required
             />
             <label htmlFor={"translation-input"}>Translation into
                 English</label>
             <input name={"translation"} id={"translation-input"}
                    value={translationInput} onChange={handleChange}
+                   maxLength={25}
                    aria-required={"true"}
                    required/>
             <label htmlFor={"info-input"}>Additional info, e.g.

diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
@@ -18,29 +18,39 @@ export default function NavBar(props: Readonly<Props>) {
         }
     };
     return (<ul id={"navbar"}>
-            <li onClick={() => navigate('/backlog')}
-                onKeyDown={(event) => handleKeyDown(event, '/backlog')}
-                className={`navbar-button ${path === '/backlog' && !props.useForm ?
-                    'highlighted' : ''}`}
-                aria-label={"Go to Backlog"}
-            ><p className={"navbar-button-text"}>Backlog</p>
-            </li>
-            <li
-                onClick={() => props.setUseForm(true)}
-                onKeyDown={(event) => handleKeyDown(event, '')}
-                className={`navbar-button ${props.useForm ? 'highlighted' :
-                    ''}`}
-                aria-label={"Create a new item"}
-            ><p className={"navbar-button-text"}>Create</p>
-            </li>
-            <li
-                onClick={() => navigate('/calendar')}
-                onKeyDown={(event) => handleKeyDown(event, '/calendar')}
-                className={`navbar-button ${path === '/calendar' && !props.useForm  ?
-                    'highlighted' : ''}`}
-                aria-label={"Go to Calendar"}
+        {/*<li onClick={() => navigate('/')}*/}
+        {/*    onKeyDown={(event) => handleKeyDown(event, '/')}*/}
+        {/*    className={`navbar-button ${path === '/' && !props.useForm ?*/}
+        {/*        'highlighted' : ''}`}*/}
+        {/*    aria-label={"Go to Homepage"}*/}
+        {/*><p className={"navbar-button-text"}>Home</p>*/}
+        {/*</li>*/}
+        <li onClick={() => navigate('/backlog')}
+            onKeyDown={(event) => handleKeyDown(event, '/backlog')}
+            className={`navbar-button ${path === '/backlog' && !props.useForm ?
+                'highlighted' : ''}`}
+            aria-label={"Go to Backlog"}
+        ><p className={"navbar-button-text"}>Backlog</p>
+        </li>
+        <li
+            onClick={() => props.setUseForm(true)}
+            onKeyDown={(event) => handleKeyDown(event, '')}
+            className={`navbar-button ${props.useForm ? 'highlighted' : ''}`}
+            aria-label={"Create a new item"}
+        ><p className={"navbar-button-text"}>Create</p>
+        </li>
+        <li
+            onClick={() => {
+                navigate('/calendar')
+            }}
+            onKeyDown={(event) => {
+                handleKeyDown(event, '/calendar')
+            }}
+            className={`navbar-button ${path === '/calendar' && !props.useForm ?
+                'highlighted' : ''}`}
+            aria-label={"Go to Calendar"}
 
-            ><p className={"navbar-button-text"}>Calendar</p>
-            </li>
-        </ul>)
+        ><p className={"navbar-button-text"}>Calendar</p>
+        </li>
+    </ul>)
 }
diff --git a/frontend/src/components/NewVocabsPopUp/NewVocabsPopUp.tsx b/frontend/src/components/NewVocabsPopUp/NewVocabsPopUp.tsx
@@ -60,7 +60,7 @@ export default function NewVocabsPopUp(props: Readonly<Props>) {
                 className={"close-button"}
                 aria-label={"Close new vocabulary pop-up"}>✕
         </button>
-        <h2 className={"popup-header"}>Learn new vocabulary</h2>
+        <h2 className={"popup-header"}>New vocabulary</h2>
 
         <div id={"button-wrapper"}>
             <button className={"new-vocabs-button"}

diff --git a/frontend/src/components/VocabList/VocabList.css b/frontend/src/components/VocabList/VocabList.css
@@ -1,10 +1,9 @@
 #vocab-list {
     list-style: none;
-    color: inherit;
     font: inherit;
     width: 100%;
     margin: 0;
-    padding: 0
+    padding: 0;
 }
 
 .list-item {
@@ -14,16 +13,31 @@
     padding: 10px;
 }
 
-.list-item-word-wrapper
-{
+#text-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
 }
 
-.list-item-button-wrapper {
+#translation-and-info-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0;
     margin: 0; padding: 0;
+
+}
+
+#vocab-info {
+    font-style: italic;
+    font-size: 13px;
+}
+
+#list-item-button-wrapper {
+    margin: 0;
+    padding: 0;
     height: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: space-around;
 }
diff --git a/frontend/src/components/VocabList/VocabList.tsx b/frontend/src/components/VocabList/VocabList.tsx
@@ -53,11 +53,14 @@ export default function VocabList(props: Readonly<Props>) {
     return (<ul id={"vocab-list"} role={"list"}>
         {props.vocabs.map(vocab => <li key={vocab.id}
                                        className={"list-item + card"}>
-            <div className={"list-item-word-wrapper"}>
+            <article id={"text-wrapper"}>
                 <p>{vocab.word}</p>
+                <div id={"translation-and-info-wrapper"}>
                 <p>{vocab.translation}</p>
-            </div>
-            <div className={"list-item-button-wrapper"}>
+                <p id={"vocab-info"}>{vocab.info}</p>
+                </div>
+            </article>
+            <div id={"list-item-button-wrapper"}>
                 {vocab.createdBy  === props.userId  && vocab.id ? <button
                     onClick={() => handleClickEdit(vocab.id)}
                     onKeyDown={(e) => {

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -6,6 +6,7 @@
     --navbar-highlight-font-color: black;
     --navbar-highlight-color: white;
     --dropdown-color: white;
+    --calendar-color: rgba(255, 250, 240, 0.93);
 }
 
 body {
@@ -109,11 +110,13 @@ button {
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
+
 }
 
 .card {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     border: lightgray 3px solid;
     border-radius: 0.3rem;
     background-color: #FFF8DC;
+    color: black;
 }
diff --git a/frontend/src/pages/BacklogPage/BacklogPage.tsx b/frontend/src/pages/BacklogPage/BacklogPage.tsx
@@ -1,7 +1,7 @@
 import './BacklogPage.css'
 import {Vocab} from "../../types/Vocab.ts";
 import VocabList from "../../components/VocabList/VocabList.tsx";
-import React, {useEffect} from "react";
+import React from "react";
 
 
 type Props = {
@@ -16,10 +16,6 @@ type Props = {
 
 export default function BacklogPage(props: Readonly<Props>) {
 
-    useEffect(() => {
-        props.setUseForm(false)
-    }, [props]);
-
     if (props.vocabs.length < 1 || !Array.isArray(props.vocabs)) return <p
         className={"loading-message"}>Loading...</p>
 

diff --git a/frontend/src/pages/CalendarPage/CalendarPage.css b/frontend/src/pages/CalendarPage/CalendarPage.css
@@ -1,5 +1,5 @@
 #calendar-page {
-    gap: 1rem;
+    gap: 0.75rem;
 }
 
 #button-and-header-container {
@@ -25,6 +25,5 @@
 }
 
 #calendar-back-button {
-   margin-top: 2rem;
     margin-bottom: 0;
 }
diff --git a/frontend/src/pages/CalendarPage/CalendarPage.tsx b/frontend/src/pages/CalendarPage/CalendarPage.tsx
@@ -101,7 +101,7 @@ export default function CalendarPage(props: Readonly<Props>) {
 
 
     return (<div id={"calendar-page"} className={"page"} role={"main"}>
-        <div style={{height: "50px"}}/>
+        <div style={{height: "40px"}}/>
         <div id={"button-and-header-container"}>
             {month && <button
                 className={"calendar-button"}
@@ -135,7 +135,8 @@ export default function CalendarPage(props: Readonly<Props>) {
                 onClick={() => navigate("/")}
                 onKeyDown={() => navigate("/")}
                 aria-label={"Go back to the main page"}>
-            ← Back
+            Go to homepage
         </button>
+        <div style={{height: "40px"}}/>
     </div>)
 }
diff --git a/frontend/src/pages/HomePage/HomePage.css b/frontend/src/pages/HomePage/HomePage.css
@@ -1,7 +1,10 @@
-
+#homepage {
+    height: 65vh;
+    justify-content: flex-end;
+}
 #homepage-text-and-button {
     width: 70%;
-    height: 70%;
+    max-width: 300px;
     margin: 0;
     padding: 0;
     display: flex;
@@ -13,4 +16,5 @@
 .homepage-text{
 line-height: 20px;
     padding-left: 15px;
+    align-self: center;
 }
diff --git a/frontend/src/pages/HomePage/HomePage.tsx b/frontend/src/pages/HomePage/HomePage.tsx
@@ -29,13 +29,13 @@ export default function HomePage(props: Readonly<Props>) {
                     scheduled
                     for today or you've already reviewed
                     all of it. <br/><br/>To start learning
-                    (more) words click below </p>}
+                    (more) words click below. </p>}
             {!props.finishedReviewing && props.language &&
-                <p className={"homepage-text"}>Nice to see you! <br/>Click below
+                <p className={"homepage-text"}>Nice to see you! <br/><br/>Click below
                     to
                     get
                     started with your daily vocab
-                    review</p>}
+                    review.</p>}
             {props.finishedReviewing && props.language && <button
                 className={"big-button"}
                 onClick={() => props.setDisplayNewVocabsPopUp(true)}

diff --git a/frontend/src/pages/LoginPage/LoginPage.css b/frontend/src/pages/LoginPage/LoginPage.css
@@ -1,6 +1,5 @@
 #login-page{
     height: 65vh;
-    width: 100%;
     justify-content: flex-end;
     align-items: center;
     gap: 50px;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,5 +32,4 @@ export default function DayPopUp(props: Readonly<Props>) {
		userId={props.userId}/>
		</div>)


		}