changed review design

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