From 05541e60b5943c564bda0d10986d6c7cb077f11b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= <koro.no.omo@gmail.com>
Date: Thu, 14 May 2026 18:44:50 +0200
Subject: [PATCH] changed review design

---
 website/src/Reviews.css                   | 41 +++++++++++++++++++--
 website/src/Reviews.jsx                   | 43 ++++++++++++++++++-----
 website/src/components/DropdownFlex.jsx   | 26 ++++++++++++++
 website/src/components/DropdownGrid.jsx   | 26 ++++++++++++++
 website/src/components/SelectDropdown.jsx | 37 ++++++++++---------
 website/src/index.css                     |  1 +
 6 files changed, 147 insertions(+), 27 deletions(-)
 create mode 100644 website/src/components/DropdownFlex.jsx
 create mode 100644 website/src/components/DropdownGrid.jsx

diff --git a/website/src/Reviews.css b/website/src/Reviews.css
index 4425963..076ee38 100644
--- a/website/src/Reviews.css
+++ b/website/src/Reviews.css
@@ -1,13 +1,41 @@
 .input-box {
     display: flex;
-    align-items: center;
-    justify-content: center;
     gap: 80px;
     width: 100%;
-    padding: 40px;
+    grid-template-columns: repeat(1fr, 3);
+    justify-items: center;
+    align-items: center;
     height: fit-content;
 }
 
+.input-component-box {
+    display: grid;
+    width: fit-content;
+    height: fit-content;
+    grid-template-rows: 150px 150px 150px;
+    justify-items: center;
+    align-items: center;
+    gap: 10px;
+}
+
+.description {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: flex-end;
+}
+
+.input-component {
+    grid-column: 1;
+    grid-row: 2;
+    align-self: flex-start;
+}
+
+.description.second {
+    grid-column: 1;
+    grid-row: 3;
+    align-self: flex-start;
+}
+
 .review-select-dropdown {
     width: 200px;
     display: flex;
@@ -47,6 +75,13 @@
     border-color: white;
 }
 
+.review-select-menu.grid {
+    width: 300%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-auto-rows: 1fr;
+}
+
 .review-select-item {
     cursor: pointer;
     border: 1px solid var(--surface);
diff --git a/website/src/Reviews.jsx b/website/src/Reviews.jsx
index 80b6eb3..58ff6d3 100644
--- a/website/src/Reviews.jsx
+++ b/website/src/Reviews.jsx
@@ -5,7 +5,7 @@ import SelectDropdown from './components/SelectDropdown';
 function Reviews() {
     const [error, setError] = useState(null);
     const [selectedWebsite, setSelectedWebsite] = useState("Not Specified");
-    const [selectedRating, setSelectedRating] = useState(0);
+    const [selectedRating, setSelectedRating] = useState(1);
     const [text, setText] = useState("");
 
     const MAX_TEXT = 180;
@@ -47,10 +47,12 @@ function Reviews() {
 
     const changeSelectedWebsite = (website) => {
         setSelectedWebsite(website);
+        console.log(selectedWebsite);
     };
 
     const changeSelectedRating = (rating) => {
         setSelectedRating(rating);
+        console.log(selectedRating);
     }
 
     const websites = [
@@ -59,7 +61,7 @@ function Reviews() {
         "Not Specified"
     ];
 
-    const ratings = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    const ratings = [1, 2, 3, 4, 5];
 
     const handleTextInput = (e) => {
         const textInput = e.target.value;
@@ -74,24 +76,49 @@ function Reviews() {
         <div className='site-box'>
             <h1 className='site-headline'>Reviews</h1>
 
-            <div className='input-box'>
-                <SelectDropdown values={websites} defaultValue={websites.at(0)} classNames={"website"} changeInputParent={changeSelectedWebsite} />
 
-                <div className='review-text-box'>
+
+            <div className='input-box'>
+                <div className='input-component-box'>
+                    <p className='description'>Website</p>
+                    <SelectDropdown
+                        listClass="flex"
+                        parentClass="input-component"
+                        values={websites}
+                        defaultValue={websites.at(-1)}
+                        classNames={"website"}
+                        changeInputParent={changeSelectedWebsite}
+                        flex={true}
+                    />
+                </div>
+
+                <div className='input-component-box'>
+                    <p className='description'>Description</p>
                     <textarea
                         autoCorrect="off"
                         autoCapitalize="off"
                         spellCheck={false}
-                        className='review-text'
+                        className='review-text input-component'
                         type="text"
                         value={text}
                         onChange={(e) => handleTextInput(e)}
                         placeholder="Type something..."
                     />
-                    <p>{text.length}/{MAX_TEXT}</p>
+                    <p className='description second'>{text.length}/{MAX_TEXT}</p>
                 </div>
 
-                <SelectDropdown values={ratings} defaultValue={ratings.at(0)} classNames={"rating"} changeInputParent={changeSelectedRating} />
+                <div className='input-component-box'>
+                    <p className='description'>Rating</p>
+                    <SelectDropdown
+                        listClass="grid"
+                        parentClass="input-component"
+                        values={ratings}
+                        defaultValue={ratings.at(0)}
+                        classNames={"rating"}
+                        changeInputParent={changeSelectedRating}
+                        flex={false}
+                    />
+                </div>
             </div>
         </div>
     </>)
diff --git a/website/src/components/DropdownFlex.jsx b/website/src/components/DropdownFlex.jsx
new file mode 100644
index 0000000..e756121
--- /dev/null
+++ b/website/src/components/DropdownFlex.jsx
@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+function DropwdownFlex(props) {
+    const values = props.values;
+    const classNames = props.classNames;
+    const changeInputParent = props.changeInputParent;
+    const selectedInput = props.selectedInput;
+
+    return (
+        <div className={`review-select-menu flex ${classNames}`}>
+            {values.map((item, i) =>
+                String(selectedInput) !== String(item) && (
+                    <div
+                        key={item}
+                        className={i >= (values.length - (selectedInput == values.at(-1) ? 2 : 1)) ? `review-select-item ${classNames} last` : `review-select-item ${classNames}`}
+                        onClick={() => changeInputParent(item)}
+                    >
+                        {item}
+                    </div>
+                )
+            )}
+        </div>
+    );
+}
+
+export default DropwdownFlex;
\ No newline at end of file
diff --git a/website/src/components/DropdownGrid.jsx b/website/src/components/DropdownGrid.jsx
new file mode 100644
index 0000000..7474cab
--- /dev/null
+++ b/website/src/components/DropdownGrid.jsx
@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+function DropwdownGrid(props) {
+    const values = props.values;
+    const classNames = props.classNames;
+    const changeInputParent = props.changeInputParent;
+    const selectedInput = props.selectedInput;
+
+    return (
+        <div className={`review-select-menu grid ${classNames}`}>
+            {values.map((item, i) =>
+                String(selectedInput) !== String(item) && (
+                    <div
+                        key={item}
+                        className={i >= (values.length - (selectedInput == values.at(-1) ? 2 : 1)) ? `review-select-item grid-box-${i} ${classNames} last` : `review-select-item grid-box-${i} ${classNames}`}
+                        onClick={() => changeInputParent(item)}
+                    >
+                        {item}
+                    </div>
+                )
+            )}
+        </div>
+    );
+}
+
+export default DropwdownGrid;
\ No newline at end of file
diff --git a/website/src/components/SelectDropdown.jsx b/website/src/components/SelectDropdown.jsx
index 01b82c7..a1a7a6d 100644
--- a/website/src/components/SelectDropdown.jsx
+++ b/website/src/components/SelectDropdown.jsx
@@ -1,14 +1,24 @@
 import { useState, useRef, useEffect } from 'react';
+import DropwdownFlex from './DropdownFlex';
+import DropwdownGrid from './DropdownGrid';
 
 function SelectDropdown(props) {
     const values = props.values;
     const defaultValue = props.defaultValue;
     const classNames = props.classNames;
     const changeInputParent = props.changeInputParent;
-    const [selectedInput, setselectedInput,] = useState(defaultValue);
+    const parentClass = props.parentClass;
+    const flex = props.flex;
     const [selectVisibility, setSelectVisibility] = useState(false);
     const SelectButton = useRef();
 
+    const [selectedInput, setSelectedInput] = useState(defaultValue);
+
+    const SelectMenu =
+        flex === true
+            ? DropwdownFlex
+            : DropwdownGrid;
+
     useEffect(() => {
         function handleClick(event) {
             if (SelectButton.current && !SelectButton.current.contains(event.target)
@@ -25,29 +35,24 @@ function SelectDropdown(props) {
     }, []);
 
     const changeSelectedInput = (input) => {
-        setselectedInput(input);
+        setSelectedInput(input);
         changeInputParent(input);
     };
 
 
     return (
-        <div className={`review-select-dropdown ${classNames}`} >
+        <div className={`review-select-dropdown ${classNames} ${parentClass}`} >
             <button ref={SelectButton} className={selectVisibility ? `review-select-button ${classNames} active` : `review-select-button ${classNames}`} onClick={() => { setSelectVisibility(!selectVisibility) }}>
                 {selectedInput}
             </button>
-            {selectVisibility && <div className={`review-select-menu ${classNames}`}>
-                {values.map((item, i) =>
-                    String(selectedInput) !== String(item) && (
-                        <div
-                            key={item}
-                            className={i >= (values.length - (selectedInput == values.at(-1) ? 2 : 1)) ? `review-select-item ${classNames} last` : `review-select-item ${classNames}`}
-                            onClick={() => changeSelectedInput(item)}
-                        >
-                            {item}
-                        </div>
-                    )
-                )}
-            </div>}
+            {selectVisibility &&
+                <SelectMenu
+                    classNames={classNames}
+                    changeInputParent={changeSelectedInput}
+                    values={values}
+                    selectedInput={selectedInput}
+                />}
+
         </ div>
     );
 }
diff --git a/website/src/index.css b/website/src/index.css
index 3ad6ae5..70b70c5 100644
--- a/website/src/index.css
+++ b/website/src/index.css
@@ -55,4 +55,5 @@ h4 {
 .site-box {
     margin-top: 150px;
     width: 100%;
+    height: fit-content;
 }
\ No newline at end of file