Merge pull request 'main' (#68) from YasinOnm08/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/68

app/styles/header.css

@@ -7,12 +7,14 @@ header{
     height: 10vh;
     display: flex;
     align-items: center;
+    justify-content: center;
     font-size: 1em;
     z-index: 999;
 }
 
 .hamburger{
     position: absolute;
+    left: 5vw;
     display: none;
     flex-direction: column;
     cursor: pointer;
@@ -54,7 +56,7 @@ header{
     font-size: 0.9em;
     height: 50%;
     border-radius: 5px;
-    padding: 0.2em 15px;
+    padding: 2px 15px;
     font-family: var(--font-family);
 }
 
@@ -63,7 +65,6 @@ header{
 }
 
 .header-logo{
-    margin:auto;
     width: 250px;
     height: 5vh;
     background-image: url(../../public/img/logo.png);

app/styles/input.css

@@ -2,23 +2,24 @@
 .input {
     grid-column: 2/3;
     grid-row: 4/5;
-    border-radius: 20px;
+    border-radius: 8px;
     background-color: var(--input-background-color);
     padding: 1em;
-    margin: 0 1em;
-    margin-bottom: 1em;
+    padding-left: 0.5em;
+    padding-right: 0;
+    margin: 0 10px;
+    margin-bottom: 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: auto;
-    gap: 10px;
     height: 10vh;
 }
 
 .input input {
     flex-grow: 1;
     padding: 5px;
-    font-size: 1.2em;
+    font-size: 1em;
     border-radius: 8px;
     border: 2px solid var(--input-button-color);
     outline: none;
@@ -34,16 +35,17 @@
 }
 
 .input button {
-    padding: 1em;
+    padding: 5px;
     margin: 5px;
+    margin-left: 0;
     background-color: var(--input-button-color);
     color: var(--user-message-text-color); /* Use variable for button text color */
     border: none;
-    border-radius: 50%;
+    border-radius: 8px;
     font-size: 1.5em;
     cursor: pointer;
     height: 50px;
-    width: 50px;
+    width: 75px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -53,7 +55,7 @@
 }
 
 .input button img {
-    height: 1em;
+    height: 20px;
 }
 
 .input button:hover {

app/styles/responsive.css

@@ -98,11 +98,10 @@
     color: var(--user-message-text-color); /* Use variable for button text color */
   }
 
-  .header-login-button{
-    position: absolute;
-    top: 3.5vh;
-    right: 5vw;
-  } 
+  .header-logo{
+    position: relative;
+    margin-left: -40px;
+  }
 
   .hamburger.open{
     margin-top: 0.5vh;
@@ -124,17 +123,23 @@
 
   .nav-links.active{
     display: flex;
+    height: fit-content;
   }
 
   .nav-btn{
     width: 100%;
     text-align: center;
     padding: 10px;
+    height: 50px;
   }
   
   .hamburger {
     display: flex;
   }
+
+  .header-login-button{
+    right: 5vh;
+  }
 }
 
 /* Responsive adjustments for the settings */