changed design

website/src/Reviews.css

@@ -7,22 +7,22 @@
 
 .input-box {
     display: flex;
-    gap: 80px;
+    gap: 0;
     width: 100%;
-    grid-template-columns: repeat(1fr, 3);
-    justify-items: center;
+    justify-content: center;
     align-items: center;
     height: fit-content;
+    flex-wrap: wrap;
 }
 
 .input-component-box {
     display: grid;
     width: fit-content;
     height: fit-content;
-    grid-template-rows: 150px 150px 150px;
+    grid-template-rows: 50px 150px 50px;
     justify-items: center;
     align-items: center;
-    gap: 10px;
+    margin: 60px;
 }
 
 .description {
@@ -44,10 +44,11 @@
 }
 
 .review-select-dropdown {
-    width: 200px;
+    width: fit-content;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     height: fit-content;
     gap: 0px;
     user-select: none;
@@ -55,11 +56,11 @@
 }
 
 .review-select-dropdown.rating {
-    width: 60px;
+    width: calc(60px*3);
 }
 
 .review-select-button {
-    width: 100%;
+    width: 200px;
     height: 50px;
     cursor: pointer;
     background: var(--surface);
@@ -70,6 +71,10 @@
     border-radius: var(--radius);
 }
 
+.rating .review-select-button {
+    width: 60px;
+}
+
 .review-select-button.active {
     border-top-right-radius: var(--radius);
     border-top-left-radius: var(--radius);
@@ -84,15 +89,22 @@
 }
 
 .review-select-menu {
-    width: 100%;
-    grid-auto-rows: 1fr;
+    width: 200px;
+    grid-auto-rows: 40px;
+}
+
+.website .review-select-menu {
+    grid-template-rows: repeat(2, 40px);
+    grid-template-areas: 
+        "box0" "box1";
 }
 
 .rating .review-select-menu {
-    width: 300%;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-auto-rows: 1fr;
-    transform: translateX(-33.3333%);
+    width: fit-content;
+    grid-template-columns: repeat(3, 60px);
+    grid-template-areas: 
+        "box0 box1 box2"
+        "box0 box3 box2";
 }
 
 .review-select-item {
@@ -100,7 +112,6 @@
     border: 1px solid var(--surface);
     background: var(--surface);
     text-align: center;
-    height: 40px;
     width: 100%;
     display: flex;
     align-items: center;
@@ -109,31 +120,15 @@
 }
 
 .rating .review-select-box-0 {
-    grid-column: 1;
-    grid-row: 1;
     border-bottom-left-radius: var(--radius);
     border-top-left-radius: var(--radius);
 }
 
-.rating .review-select-box-1 {
-    grid-column: 2;
-    grid-row: 1;
-}
-
 .rating .review-select-box-2 {
-    grid-column: 3;
-    grid-row: 1;
     border-bottom-right-radius: var(--radius);
     border-top-right-radius: var(--radius);
 }
 
-.rating .review-select-box-3 {
-    grid-column: 2;
-    grid-row: 2;
-    border-bottom-left-radius: var(--radius);
-    border-bottom-right-radius: var(--radius);
-}
-
 .website .review-select-box-1 {
     border-bottom-left-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
@@ -173,4 +168,8 @@
 
 .review-text::placeholder {
     color: white;
+}
+
+.custom-button.send-review {
+    margin: 60px;
 }