final design

website/src/Reviews.css

@@ -6,26 +6,37 @@
 }
 
 .input-box {
-    display: flex;
-    gap: 0;
-    width: 100%;
-    justify-content: center;
+    display: grid;
+    gap: 10px;
+    column-gap: 10vw;
+    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 {
@@ -97,21 +110,21 @@
 
 .website .review-select-menu {
     grid-template-rows: repeat(2, 40px);
-    grid-template-areas: 
+    grid-template-areas:
         "box0" "box1";
 }
 
 .rating .review-select-menu {
     width: fit-content;
     grid-template-columns: repeat(3, 60px);
-    grid-template-areas: 
+    grid-template-areas:
         "box0 box1 box2"
         "box0 box3 box2";
 }
 
 .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;
-    width: 300px;
-    height: 160px;
+    overflow:auto;
+    width: min(600px, 98vw);
+    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;
 }