From dc888cfa5f6bd6a9878f7cb5b3d54559f695d1d1 Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Wed, 25 Sep 2024 13:33:46 +0200
Subject: [PATCH] little css tweaks
---
app/components/Models.tsx | 10 +++++-----
app/styles/container.css | 4 ++--
app/styles/global.css | 1 -
app/styles/header.css | 17 ++++++++++-------
app/styles/models.css | 13 ++++++-------
app/styles/variables.css | 3 ++-
6 files changed, 25 insertions(+), 23 deletions(-)
diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 9d1bf92..cdf07a2 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -69,31 +69,31 @@ const Models: React.FC = () => {
</button>
<button className="financial-model model-box">
<div className="overlay">
- <h3>Character</h3>
+ <h3>Finance</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
<button className="weather-model model-box">
<div className="overlay">
- <h3>Character</h3>
+ <h3>Weather</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
<button className="time-planner-model model-box">
<div className="overlay">
- <h3>Character</h3>
+ <h3>Time</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
<button className="image-model model-box">
<div className="overlay">
- <h3>Character</h3>
+ <h3>Image</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
<button className="default-model model-box">
<div className="overlay">
- <h3>Character</h3>
+ <h3>Custom</h3>
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div>
</button>
diff --git a/app/styles/container.css b/app/styles/container.css
index 854c997..53c90a0 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -9,7 +9,7 @@
}
.left-panel {
- margin-top: 10vh;
+ 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 */
@@ -25,7 +25,7 @@
}
.conversation-container {
- margin-top: 10vh;
+ 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 */
diff --git a/app/styles/global.css b/app/styles/global.css
index 1db5ccb..00a246b 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -3,7 +3,6 @@ body {
height: 100vh;
overflow: hidden;
position: relative;
- top: 1vh;
}
body {
diff --git a/app/styles/header.css b/app/styles/header.css
index d085746..b830147 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,13 +1,13 @@
header{
position: absolute;
padding: 0 20px;
- top: 0;
+ top: 2em;
left: 0;
width: 100%;
- height: 10vh;
+ height: 5em;
display: flex;
align-items: center;
- margin: 1.5vh 0;
+ font-size: 1em;
}
.hamburger{
@@ -40,14 +40,16 @@ header{
.nav-links{
position: absolute;
display: flex;
- gap: 15px;
- width: 25vw;
- height: 5vh;
+ top: 1em;
+ gap: 1em;
+ width: 25em;
+ height: 3em;
}
.nav-btn{
background-color: transparent;
border: none;
+ font-size: 0.9em;
}
.header-logo{
@@ -63,8 +65,9 @@ header{
}
.login-button .header-login-button{
+ font-size: 1em;
position: absolute;
- top: 2.5vh;
+ top: 1.5em;
right: 1vw;
padding: 10px 20px;
background-color: var(--input-button-color);
diff --git a/app/styles/models.css b/app/styles/models.css
index 2c2d91e..e2d01ec 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -61,11 +61,11 @@
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
- color: var(--text-color); /* Use variable for overlay text color */
+ color: var(--overlay-text-color); /* Use variable for overlay text color */
display: flex;
justify-content: center;
align-items: center;
- font-size: x-large;
+ font-size: large;
transition: opacity 0.5s ease;
pointer-events: none;
opacity: 0;
@@ -176,11 +176,10 @@
color: var(--text-color); /* Text color */
font-size: medium; /* Font size for dropdown */
cursor: pointer; /* Cursor change on hover */
- transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */
+ transition: all 0.3s ease-in-out, border 0.3s ease; /* Smooth transition */
+}
+#model-select option:hover{
+ background-color: gray;
}
-#model-select:hover {
- background-color: var(--button-hover-background-color); /* Change background on hover */
- border-color: var(--button-background-color); /* Change border color on hover */
-}
diff --git a/app/styles/variables.css b/app/styles/variables.css
index 50847a8..7b54ab3 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -19,7 +19,8 @@
--conversation-background-color: #79832e; /* Background color for conversation container */
--doc-background-color: #ffffff; /* Background color for documents */
--close-button-color: red;
- --burger-menu-background-color: #79832e;
+ --burger-menu-background-color: #79832e; /*NEW*/
+ --overlay-text-color:white; /*NEW*/
/* FAQ Colors */
--faq-background-color: #474D22; /* Background color for FAQ section */