sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

css tweaks start

Browse source
This commit is contained in:
YasinOnm08 2024-09-30 08:41:06 +02:00
parent 7c399a74f2
commit 37bfa22891
4 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/Header.tsx
View file

@ -43,7 +43,7 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
<div className="header-button header-logo"> <div className="header-button header-logo">
{/* AI logo or text */} {/* AI logo or text */}
</div> </div>
<div className="login-button"> <div className="login-button-container">
<Login /> <Login />
</div> </div>
</header> </header>

2
app/components/InputFrontend.tsx
View file

@ -40,7 +40,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
<button type="button" onClick={() => onSendClick(inputValue, false)} disabled={inputDisabled ? true : false}> <button type="button" onClick={() => onSendClick(inputValue, false)} disabled={inputDisabled ? true : false}>
<img src="/img/send.svg" alt="send" /> <img src="/img/send.svg" alt="send" />
</button> </button>
<button className={`microphone-button ${isRecording ? "red":"green"}`} type="button" onClick={onMicClick}> <button className={`microphone-button ${isRecording ? "red": "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
<img src="/img/microphone.svg" alt="microphone" /> <img src="/img/microphone.svg" alt="microphone" />
</button> </button>
</div> </div>

6
app/components/Models.tsx
View file

@ -1,3 +1,4 @@
"use client";
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
// Define the available model options // Define the available model options
@ -18,9 +19,10 @@ const modelDropdown = {
const Models: React.FC = () => { const Models: React.FC = () => {
// Initialize state with value from localStorage or default to '' // Initialize state with value from localStorage or default to ''
const [selectedModel, setSelectedModel] = useState(''); const [selectedModel, setSelectedModel] = useState('');
const radioSelection = localStorage.getItem('radioSelection') const [radioSelection, setRadioSelection] = useState<string | null>("")
useEffect(() => { useEffect(() => {
setRadioSelection(localStorage.getItem('radioSelection'))
const handleStorageChange = () => { const handleStorageChange = () => {
setSelectedModel(localStorage.getItem('selectedModel') || ''); setSelectedModel(localStorage.getItem('selectedModel') || '');
}; };

25
app/styles/header.css
View file

@ -40,16 +40,23 @@ header{
.nav-links{ .nav-links{
position: absolute; position: absolute;
display: flex; display: flex;
top: 2vh;
gap: 1em; gap: 1em;
width: 25em; width: 35vw;
height: 2em; height: 100%;
align-items: center;
} }
.nav-btn{ .nav-btn{
background-color: transparent; background-color: var(--input-button-color);
border: none; border: none;
font-size: 0.9em; font-size: 0.9em;
height: 50%;
border-radius: 5px;
padding: 1px 15px;
}
.nav-btn:hover{
background-color: var(--input-button-hover-color);
} }
.header-logo{ .header-logo{
@ -64,7 +71,13 @@ header{
border: none; border: none;
} }
.login-button .header-login-button{ .login-button-container{
height: 100%;
display: flex;
align-items: center;
}
.header-login-button{
font-size: 2vh; font-size: 2vh;
position: absolute; position: absolute;
top: 1.5vh; top: 1.5vh;
@ -78,6 +91,6 @@ header{
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.login-button button:hover { .header-login-button:hover {
background-color: var(--input-button-hover-color); background-color: var(--input-button-hover-color);
} }