From 76c69f21d81fde3251797c0c85b4c2aff5ace596 Mon Sep 17 00:00:00 2001
From: Nora Kauczor <n.kauczor@web.de>
Date: Thu, 21 Nov 2024 21:30:27 +0100
Subject: [PATCH] style vocablist

---
 frontend/src/App.css                                |  1 +
 frontend/src/components/VocabList/VocabList.css     | 13 +++++++------
 frontend/src/components/VocabList/VocabList.tsx     |  5 ++++-
 .../src/components/VocabListItem/VocabListItem.css  |  6 +++---
 frontend/src/pages/BacklogPage/BacklogPage.tsx      |  2 +-
 frontend/src/pages/HomePage/HomePage.css            |  3 ++-
 6 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4b3fb445..57e940c9 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,4 +1,5 @@
 #app {
+    height: 100%;
     width: 100%;
     padding: 0;
     margin: 0;
diff --git a/frontend/src/components/VocabList/VocabList.css b/frontend/src/components/VocabList/VocabList.css
index ce9a7f8f..0c8bf69d 100644
--- a/frontend/src/components/VocabList/VocabList.css
+++ b/frontend/src/components/VocabList/VocabList.css
@@ -17,24 +17,25 @@
     flex-direction: column;
     justify-content: space-between;
     align-content: center;
-    width: 100%;
     max-width: 300px;
     gap: 10px;
 }
 
-#search-section-input-and-button{
+
+#search-section-input-and-button {
     display: flex;
-    justify-content: space-between;
+    /*justify-content: space-between;*/
     gap: 10px;
-    width: 95%;
+    max-height: 50px;
 }
 
 #input {
-    margin: 0 0 0 3px;
-    width: 100%;
+    margin: 0;
     border-radius: 0.5rem;
+    width: 70%;
 }
 
+
 #reset-button {
     margin: 0;
 }
diff --git a/frontend/src/components/VocabList/VocabList.tsx b/frontend/src/components/VocabList/VocabList.tsx
index db071902..9383d90f 100644
--- a/frontend/src/components/VocabList/VocabList.tsx
+++ b/frontend/src/components/VocabList/VocabList.tsx
@@ -69,11 +69,14 @@ export default function VocabList(props: Readonly<Props>) {
 
     return (<div id={"vocab-list"}>
 
-        <div id={"search-section"}>
+        <div id={"search-section"}
+        >
             <label htmlFor={"search-field"}>Search vocabulary by
                 translation</label>
             <div id={"search-section-input-and-button"}>
                 <input id={"input"}
+                       className={`${props.calendarMode ? "input-calendar-mode" :
+                           "input-backlog-mode"}`}
                        value={searchTerm}
                        onChange={handleChangeInput}/>
                 <button id={"reset-button"}
diff --git a/frontend/src/components/VocabListItem/VocabListItem.css b/frontend/src/components/VocabListItem/VocabListItem.css
index d7406d65..77299284 100644
--- a/frontend/src/components/VocabListItem/VocabListItem.css
+++ b/frontend/src/components/VocabListItem/VocabListItem.css
@@ -13,6 +13,7 @@
     margin: 10px;
     padding: 20px;
     width: 15rem;
+    height: auto;
 }
 
 #text-wrapper {
@@ -22,7 +23,6 @@
     gap: 10px;
     margin: 0;
     padding: 0 20px 0 0;
-    height: 100%;
     line-height: 25px;
     word-wrap: break-word;
 }
@@ -42,7 +42,6 @@
     gap: 0;
     margin: 0;
     padding: 0;
-    height: 100%;
     word-wrap: break-word;
 }
 
@@ -63,12 +62,13 @@
     padding: 0;
     display: flex;
     flex-direction: column;
+    gap: 10px;
     right: 2px;
     justify-content: space-evenly;
 }
 
 .list-item-button {
-    height: 25%;
+    height: 30%;
 }
 
 .de_activate-button-non-editable-vocab {
diff --git a/frontend/src/pages/BacklogPage/BacklogPage.tsx b/frontend/src/pages/BacklogPage/BacklogPage.tsx
index f5502618..a2765620 100644
--- a/frontend/src/pages/BacklogPage/BacklogPage.tsx
+++ b/frontend/src/pages/BacklogPage/BacklogPage.tsx
@@ -31,7 +31,7 @@ export default function BacklogPage(props: Readonly<Props>) {
     }
 
     return (<div id={"backlog-page"} className={"page"} role={"main"}>
-        <div style={{height: "50px"}}/>
+        <div style={{height: "40px"}}/>
         <VocabList vocabs={props.vocabs}
                    calendarMode={false}
                    activateVocab={props.activateVocab}
diff --git a/frontend/src/pages/HomePage/HomePage.css b/frontend/src/pages/HomePage/HomePage.css
index 71a067fa..f25bd9ba 100644
--- a/frontend/src/pages/HomePage/HomePage.css
+++ b/frontend/src/pages/HomePage/HomePage.css
@@ -1,7 +1,8 @@
 #homepage {
-    height: 65vh;
+    height: 50vh;
     justify-content: flex-end;
 }
+
 #homepage-text-and-button {
     width: 70%;
     max-width: 300px;