changed review design

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);

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>
     </>)

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;

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;

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}`}>
+            {selectVisibility &&
-                {values.map((item, i) =>
+                <SelectMenu
-                    String(selectedInput) !== String(item) && (
+                    classNames={classNames}
-                        <div
+                    changeInputParent={changeSelectedInput}
-                            key={item}
+                    values={values}
-                            className={i >= (values.length - (selectedInput == values.at(-1) ? 2 : 1)) ? `review-select-item ${classNames} last` : `review-select-item ${classNames}`}
+                    selectedInput={selectedInput}
-                            onClick={() => changeSelectedInput(item)}
+                />}
-                        >
+
-                            {item}
-                        </div>
-                    )
-                )}
-            </div>}
         </ div>
     );
 }

website/src/index.css

@@ -55,4 +55,5 @@ h4 {
 .site-box {
     margin-top: 150px;
     width: 100%;
+    height: fit-content;
 }