final design

website/src/Reviews.css

@@ -6,26 +6,37 @@
 }
 
 .input-box {
-    display: flex;
+    display: grid;
-    gap: 0;
+    gap: 10px;
-    width: 100%;
+    column-gap: 10vw;
-    justify-content: center;
+    width: 98vw;
+    max-width: calc(3 * 200px + 10vw * 2);
+    min-height: 100vh;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-auto-rows: fit-content(300px);
+
+    justify-items: center;
     align-items: center;
-    height: fit-content;
+
-    flex-wrap: wrap;
+    align-self: center;
+    justify-self: center;
 }
 
 .input-component-box {
     display: grid;
     width: fit-content;
+    min-width: 200px;
     height: fit-content;
-    grid-template-rows: 50px 160px 50px;
+    grid-template-rows: 30px minmax(150px, 1fr) fit-content(30px);
     justify-items: center;
     align-items: center;
-    margin: 60px;
     gap: 20px;
 }
 
+.input-component-box.text {
+    grid-column: 1 / -1;
+}
+
 .description {
     grid-column: 1;
     grid-row: 1;
@@ -83,11 +94,13 @@
 
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
-    border-bottom: 1px solid black;
+    border-bottom: 2px solid black;
 }
 
 .review-select-button:hover {
-    border-color: white;
+    border: 2px solid white;
+    color: white;
+    font-weight: bold;
 }
 
 .review-select-menu {
@@ -111,7 +124,7 @@
 
 .review-select-item {
     cursor: pointer;
-    border: 1px solid var(--surface);
+    border: 2px solid var(--surface);
     background: var(--surface);
     text-align: center;
     width: 100%;
@@ -121,6 +134,12 @@
     border-radius: 0;
 }
 
+.review-select-item:hover {
+    cursor: pointer;
+    border: 2px solid white;
+    font-weight: bold;
+}
+
 .rating .review-select-box-0 {
     border-bottom-left-radius: var(--radius);
     border-top-left-radius: var(--radius);
@@ -136,11 +155,6 @@
     border-bottom-right-radius: var(--radius);
 }
 
-.review-select-item:hover {
-    cursor: pointer;
-    border-color: white;
-}
-
 .review-text-box {
     display: flex;
     flex-direction: column;
@@ -152,11 +166,11 @@
 
 .review-text {
     resize: none;
-    overflow: hidden;
+    overflow:auto;
-    width: 300px;
+    width: min(600px, 98vw);
-    height: 160px;
+    height: 400px;
     border-radius: 8px;
-    border: 1px solid var(--surface);
+    border: 2px solid var(--bg);
     background: var(--surface);
     color: black;
     padding: 10px;
@@ -164,14 +178,34 @@
     font-size: 15px;
 }
 
+/* width of scrollbar */
+.review-text::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* track (background) */
+.review-text::-webkit-scrollbar-track {
+  background: #aeaeae;
+  border-radius: 10px;
+}
+
+/* handle */
+.review-text::-webkit-scrollbar-thumb {
+  background: #535353;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+/* hover effect */
+.review-text::-webkit-scrollbar-thumb:hover {
+  background: #2e2e2e;
+}
+
 .review-text:focus {
-    border: 1px solid white;
+    border: 2px solid white;
+    outline: none;
 }
 
 .review-text::placeholder {
     color: white;
 }
-
-.custom-button.send-review {
-    margin: 60px;
-}

website/src/Reviews.jsx

@@ -12,7 +12,7 @@ function Reviews() {
     const [selectedRating, setSelectedRating] = useState(1);
     const [text, setText] = useState("");
 
-    const MAX_TEXT = 180;
+    const MAX_TEXT = 900;
 
 
     const fetchReviews = async () => {
@@ -109,21 +109,6 @@ function Reviews() {
                     />
                 </div>
 
-                <div className='input-component-box'>
-                    <p className='description'>Review</p>
-                    <textarea
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck={false}
-                        className='review-text input-component'
-                        type="text"
-                        value={text}
-                        onChange={(e) => handleTextInput(e)}
-                        placeholder="Type something..."
-                    />
-                    <p className='description second'>{text.length}/{MAX_TEXT}</p>
-                </div>
-
                 <div className='input-component-box'>
                     <p className='description'>Rating</p>
                     <SelectDropdown
@@ -136,11 +121,28 @@ function Reviews() {
                     />
                 </div>
 
-                <div className='button-div'>
+                <div className='input-component-box'>
-                    <button id='button-send' style={{ display: "none" }} onClick={sendReview} />
+                    <div className='button-div input-component'>
-                    <label htmlFor="button-send" className="custom-button send-review">
+                        <button id='button-send' style={{ display: "none" }} onClick={sendReview} />
-                        Send Review
+                        <label htmlFor="button-send" className="custom-button send-review">
-                    </label>
+                            Send Review
+                        </label>
+                    </div>
+                </div>
+
+                <div className='input-component-box text'>
+                    <p className='description'>Review</p>
+                    <textarea
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck={false}
+                        className='review-text input-component'
+                        type="text"
+                        value={text}
+                        onChange={(e) => handleTextInput(e)}
+                        placeholder="Share your Opinion"
+                    />
+                    <p className='description second'>{text.length}/{MAX_TEXT}</p>
                 </div>
             </div>
         </div>

website/src/index.css

@@ -7,10 +7,11 @@ html {
 }
 
 body {
-    background: rgb(4, 0, 10);
+    background: var(--bg);
     margin: 0;
     padding: 0;
     --surface: rgb(47, 168, 208);
+    --bg: rgb(4, 0, 10);
 }
 
 button {