css progress 1

app/styles/Settings.css

@@ -9,7 +9,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 10000;
 }
 
 .settings-main h2 {
@@ -104,14 +103,14 @@
     padding: 5px 10px;
     cursor: pointer;
     position: absolute; /* Position the button absolutely */
-    top: 10px; /* Distance from the top */
-    right: 10px; /* Distance from the right */
+    top: 15px; /* Distance from the top */
+    right: 40px; /* Distance from the right */
     transition: background 0.3s;
 }
 
 /* Close button positioning */
 .apply {
-    background: var(--close-button-color); /* Use variable for close button color */
+    background: var(--apply-button-color); /* Use variable for close button color */
     color: white; /* Use white for text color */
     border: none;
     border-radius: 5px;
@@ -119,7 +118,7 @@
     cursor: pointer;
     position: absolute; /* Position the button absolutely */
     top: 50px; /* Distance from the top */
-    right: 10px; /* Distance from the right */
+    right: 40px; /* Distance from the right */
     transition: background 0.3s;
 }
 

app/styles/container.css

@@ -1,19 +1,19 @@
 /* container.css */
-.container,
-.content {
+.container{
     display: flex;
     width: 100vw;
-    padding-top: 0.025vh;
+    height: 100vh;
+    padding-top: 12vh;
 }
 
 .left-panel {
-    margin-top: 5em;
     width: 25vw; /* Adjust as needed */
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
     background-color: var(--left-panel-background-color); /* Use variable for background color */
     border-radius: 0 1em 0 0;
     margin-left: 0;
     padding-right: 1em;
+    height: 100%;
 }
 
 .left-panel.hidden {
@@ -23,12 +23,11 @@
 }
 
 .conversation-container {
-    margin-top: 5em;
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */
     border-radius: 1em 0 0 0;
-    height: min-content;
+    height: 100%;
 }
 
 /* Adjust margin-left when panel is shown or hidden */

app/styles/global.css

@@ -1,7 +1,7 @@
 html,
 body {
     height: 100vh;
-    /* overflow: hidden; */
+    overflow: hidden;
     position: relative;
 }
 

app/styles/header.css

@@ -8,6 +8,7 @@ header{
     display: flex;
     align-items: center;
     font-size: 1em;
+    z-index: 999;
 }
 
 .hamburger{
@@ -39,9 +40,10 @@ header{
 
 .nav-links{
     position: absolute;
+    left: 1vw;
     display: flex;
-    gap: 1em;
-    width: 35vw;
+    gap: 0.5vw;
+    width:max-content;
     height: 100%;
     align-items: center;
 }
@@ -52,7 +54,8 @@ header{
     font-size: 0.9em;
     height: 50%;
     border-radius: 5px;
-    padding: 1px 15px;
+    padding: 0.2em 15px;
+    font-family: var(--font-family);
 }
 
 .nav-btn:hover{
@@ -72,16 +75,19 @@ header{
 }
 
 .login-button-container{
+    position: absolute;
+    top: 0.2vh;
+    right: 1vw;
     height: 100%;
     display: flex;
     align-items: center;
 }
 
 .header-login-button{
-    font-size: 2vh;
-    position: absolute;
+    font-size: var(--font-size);
+    /* position: absolute;
     top: 1.5vh;
-    right: 1vw;
+    right: 1vw; */
     padding: 10px 20px;
     background-color: var(--input-button-color);
     color: var(--text-color);
@@ -89,6 +95,7 @@ header{
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s;
+    font-family: var(--font-family);
 }
 
 .header-login-button:hover {

app/styles/history.css

@@ -1,13 +1,13 @@
 .history-background {
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 40vh;
+    height: 45%;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
     margin: 1em;
     margin-right: 0;
-    border-radius: 2em;
+    border-radius: 1em;
 }
 
 .history {
@@ -37,3 +37,7 @@
 .history ul li a:hover {
     background-color: var(--input-button-hover-color);
 }
+
+.history-models{
+    height: 100%;
+}

app/styles/input.css

@@ -5,7 +5,8 @@
     border-radius: 20px;
     background-color: var(--input-background-color);
     padding: 1em;
-    margin: 1em;
+    margin: 0 1em;
+    margin-bottom: 1em;
     display: flex;
     justify-content: space-between;
     align-items: center;

app/styles/models.css

@@ -1,13 +1,13 @@
 .model-background {
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 45vh;
+    height: 45%;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
-    margin: 1em;
+    margin: 0 1em;
     margin-right: 0;
-    border-radius: 2em;
+    border-radius: 1em;
 }
 
 .models {
@@ -17,12 +17,12 @@
     overflow-y: scroll;
 }
 
-.models .titel {
-    padding-bottom: 1em;
+.models .title {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 0.7em;
+    font-size: 1.5em;
+    margin-bottom: 0;
 }
 
 .model-dropdown {
@@ -56,7 +56,6 @@
 }
 
 .overlay {
-    z-index: 900;
     position: absolute;
     left: 0;
     width: 100%;

app/styles/output.css

@@ -2,24 +2,21 @@
 .output {
     grid-column: 2;
     grid-row: 1 / 4;
-    border-radius: 2em;
     background-color: var(--output-background-color);
-    padding: 1em;
     margin: 1em;
-    margin-top: 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     font-size: 1em;
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
-    height: 75vh;
+    height: 70vh;
 }
 
 #conversation {
     display: flex;
     flex-direction: column;
-    padding: 10px;
+    padding-left: 10px;
     overflow-y: auto;
     max-height: 80vh;
     background-color: var(--output-background-color);
@@ -51,16 +48,17 @@
 /* Button Container */
 .button-container {
     display: flex;
-    padding: 10px 0;
 }
 
 .button-container button {
     background: none;
     border: none;
     cursor: pointer;
-    border-radius: 50%;
+    border-radius: 100%;
     padding: 10px;
     transition: background-color 0.3s ease;
+    height: 40px;
+    width: 40px;
 }
 
 .button-container button:hover {
@@ -68,7 +66,8 @@
 }
 
 .button-container img {
-    height: 1.5em;
+    height: 20px;
+    width: 20px;
 }
 
 #copiedText{

app/styles/responsive.css

@@ -27,13 +27,6 @@
     padding: 7em 0 0 0 ;
   }
 
-  header li {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin: 0;
-  }
-
   /* Left panel styles */
   .left-panel {
     display: hidden; /* Initially hidden */
@@ -43,6 +36,7 @@
 
   .left-panel.visible {
     display: block;
+    height: min-content;
   }
 
   /* Conversation container styles */
@@ -134,7 +128,7 @@
 
   .nav-btn{
     width: 100%;
-    text-align: left;
+    text-align: center;
     padding: 10px;
   }
   

app/styles/user-ai-messages.css

@@ -25,3 +25,9 @@
     margin-right: auto;
     text-align: left;
 }
+
+.ai-container{
+    height: min-content;
+    bottom: 0;
+    width: 100%;
+}

app/styles/variables.css

@@ -20,6 +20,8 @@
     --doc-background-color: #ffffff; /* Background color for documents */
     --close-button-color: red;
     --close-button-hover-color: #9e0101; /*NEW*/
+    --apply-button-color:#8B9635;
+    --apply-button-hover-color:#6b7c2b;
     --burger-menu-background-color: #79832e;  /*NEW*/
     --overlay-text-color:white; /*NEW*/