changed design

website/src/Bird_CNN.css

@@ -140,7 +140,11 @@ a:hover {
     box-sizing: content-box;
 }
 
-.input-box {
+.request-box .custom-button{
+    box-sizing: border-box;
+}
+
+.input-box-cnn {
     scroll-margin-top: 100px;
     width: min(500px, 100%);
     height: 160px;

website/src/Bird_CNN.jsx

@@ -3,7 +3,7 @@ import './Bird_CNN.css';
 
 function Bird_CNN() {
     const apiUrl = process.env.NODE_ENV === "development"
-        ? "http://localhost:8000"
+        ? "https://api.marvinkrausser.com"
         : "https://api.marvinkrausser.com";
 
     const [file, setFile] = useState(null);
@@ -102,7 +102,7 @@ function Bird_CNN() {
                     </div>
 
                     <div className='request-box'>
-                        <div ref={scrollRefUploadButton} className='input-box'>
+                        <div ref={scrollRefUploadButton} className='input-box-cnn'>
                             <div className='button-div'>
                                 <input disabled={loading} ref={fileInputRef} type="file" id='fileUpload' accept="image" onChange={handleImage} style={{ display: "none" }} />
                                 <label htmlFor="fileUpload" className="custom-button">

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-content: center;
-    justify-items: 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%;
+    width: 200px;
-    grid-auto-rows: 1fr;
+    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%;
+    width: fit-content;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: repeat(3, 60px);
-    grid-auto-rows: 1fr;
+    grid-template-areas: 
-    transform: translateX(-33.3333%);
+        "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;
 }

website/src/Reviews.jsx

@@ -4,7 +4,7 @@ import SelectDropdown from './components/SelectDropdown';
 
 function Reviews() {
     const apiUrl = process.env.NODE_ENV === "development"
-        ? "http://localhost:8000"
+        ? "https://api.marvinkrausser.com"
         : "https://api.marvinkrausser.com";
 
     const [error, setError] = useState(null);
@@ -17,9 +17,9 @@ function Reviews() {
 
     const fetchReviews = async () => {
         const response = await fetch(`${apiUrl}/review`, {
-            method: "POST",
+            method: "GET",
             headers: {
-                "Authorization": `Bearer 1234`,
+                "authorization": `Bearer 1234`,
             },
         });
 
@@ -31,9 +31,9 @@ function Reviews() {
             setError(false);
         }
 
-        console.log(response);
-
         const result = await response.json();
+
+        console.log(result);
     }
 
     const sendReview = async () => {
@@ -41,12 +41,17 @@ function Reviews() {
             "website": selectedWebsite,
             "rating": selectedRating,
             "text": text,
-            "created_at": "today"
+            "date": "today"
         }
 
+        console.log(JSON.stringify(review));
+
         const response = await fetch(`${apiUrl}/review`, {
             method: "POST",
             body: JSON.stringify(review),
+            headers: {
+                "Content-Type": "application/json"
+            }
         });
 
         if (!response.ok) {
@@ -84,7 +89,6 @@ function Reviews() {
         }
     };
 
-
     return (<>
         <div className='site-box'>
             <h1 className='site-headline'>Reviews</h1>
@@ -132,10 +136,12 @@ function Reviews() {
                     />
                 </div>
 
-                <button id='button-send' style={{ display: "none" }} onClick={sendReview} />
+                <div className='button-div'>
-                <label htmlFor="button-send" className="custom-button">
+                    <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>
     </>)

website/src/components/SelectDropdown.jsx

@@ -38,8 +38,9 @@ function SelectDropdown(props) {
             String(selectedInput) !== String(item) && (
                 <div
                     key={item}
-                    className={`review-select-item review-select-box-${indices.pop()} ${classNames}` + (i >= (values.length - (selectedInput == values.at(-1) ? 2 : 1)) ? ' last' : '')}
+                    className={`review-select-item review-select-box-${indices[indices.length - 1]} ${classNames}` + (i >= (values.length - (selectedInput == values.at(-1) ? 2 : 1)) ? ' last' : '')}
                     onClick={() => changeSelectedInput(item)}
+                    style={{gridArea:`box${indices.pop()}`}}
                 >
                     {item}
                 </div>

website/src/index.css

@@ -61,7 +61,7 @@ h4 {
 .custom-button {
     font-size: 1rem;
     font-weight: bold;
-    height: 40px;
+    height: 45px;
     padding: 10px 20px;
     background: var(--surface);
     color: rgb(0, 0, 0);