Skip to content

Commit

Permalink
Reorganizing styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bezik1
Bezik1 committed Jul 13, 2024
1 parent 4a66ecb commit ad55c86
Show file tree
Hide file tree
Showing 22 changed files with 776 additions and 739 deletions.
1 change: 1 addition & 0 deletions src/renderer/components/CommandHistory/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { HistoryItem } from "../HistoryItem";
import { IconOutlineSearch } from "../Icons/IconOutlineSearch";
import { useCommandHistory } from "../../contexts/CommandHistoryContext";
import { motion } from "framer-motion";
import "./style.css"

import SEARCH_UNDERLINE_PATH from "../../assets/img/searchbar-underline.svg"

Expand Down
179 changes: 179 additions & 0 deletions src/renderer/components/CommandHistory/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
.no-history {
color: #828282;
width: 80%;
text-align: center;
font-family: "Outfit", Helvetica;
position: absolute;
top: 35%;
}

.no-additional-info {
color: #828282;
text-align: center;
font-family: "Outfit", Helvetica;
position: absolute;
top: 30%;
}

.app .command-history {
height: 373px;
left: 237px;
position: absolute;
top: 33px;
width: 310px;
}

.app .overlap-5 {
border-radius: 25px;
height: 373px;
position: relative;
}

.app .history-background {
background-color: #763754;
border-radius: 25px;
box-shadow: 0px 4px 4px 1px #00000040;
height: 373px;
left: 0;
position: absolute;
top: 0;
width: 305px;
}

.app .searchbar {
height: 25px;
left: 24px;
position: absolute;
top: 37px;
width: 267px;
}

.app .icon-outline-search-instance {
left: 8px !important;
}

.app .text-wrapper-5 {
background: none;
border: none;
outline: none;
color: #ffffff;
font-family: "Outfit", Helvetica;
font-size: 16px;
font-weight: 400;
left: 36px;
letter-spacing: 0;
line-height: normal;
position: absolute;
bottom: 5px;
white-space: nowrap;
width: 229px;
}

.app .searchbar-underline {
height: 2px;
left: 0;
object-fit: cover;
position: absolute;
top: 23px;
width: 257px;
}

.app .history-item {
cursor: default;
height: 31px;
width: 266px;
transition: .5s;
}

.app .history-item:hover {
transition: .5s;
color: #fff;
scale: 1.05;
}

.app .history-item:hover .history-item-text {
color: #fff;
transition: .5s;
}

.app .history-item:hover .history-item-2 {
border-color: #fff;
transition: .5s;
}

.app .overlap-group-3 {
height: 31px;
position: relative;
width: 262px;
}

.app .history-item-2 {
transition: .5s;
border: 1px solid;
border-color: #865e72;
border-radius: 25px;
height: 31px;
left: 0;
position: absolute;
top: 0;
width: 257px;
}

.app .history-item-text {
transition: .5s;
overflow: hidden;
display: inline-block;
color: #b6b5b5;
font-family: "Roboto", Helvetica;
font-size: 14px;
font-weight: 400;
left: 43px;
letter-spacing: 0;
line-height: normal;
position: absolute;
top: 8px;
overflow: hidden;
width: 130px;
height: 50%;
}

.app .command-history-2 {
color: #b6b5b5;
font-family: "Roboto", Helvetica;
font-size: 14px;
font-weight: 400;
left: 218px;
letter-spacing: 0;
line-height: normal;
position: absolute;
top: 9px;
white-space: nowrap;
width: 44px;
}

.app .icon-outline-terminal {
left: 15px !important;
top: 3px !important;
}

.app .history-info-command {
height: 20px !important;
left: 188px !important;
position: absolute !important;
top: 7px !important;
width: 21px !important;
}

.history-items {
display: flex;
align-items: center;
flex-direction: column;
padding-top: 10px;
left: 0px;
position: absolute;
top: 92px;
gap: 10px;
height: 250px;
width: 100%;
overflow-y: auto;
}
1 change: 1 addition & 0 deletions src/renderer/components/CommandPrompt/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { SoundIcon } from "../Icons/SoundIcon"
import axios from "axios"
import { useCommandHistory } from "../../contexts/CommandHistoryContext"
import { motion } from "framer-motion"
import "./style.css"

const SERVER_URL = "http://localhost:8000/command"
export const CommandPrompt = () =>{
Expand Down
80 changes: 80 additions & 0 deletions src/renderer/components/CommandPrompt/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
.app .command-prompt {
height: 51px;
left: 21px;
position: absolute;
top: 439px;
width: 523px;
}

.app .overlap-group-2 {
background: linear-gradient(120deg, #713e55 0%, #b15982 100%);
border-radius: 20px;
box-shadow: 0px 4px 4px 1px #00000040;
height: 51px;
position: relative;
width: 521px;
}

.app .text-wrapper {
background: none;
border: none;
outline: none;
color: #ffffff;
font-family: "Outfit", Helvetica;
font-size: 16px;
font-weight: 400;
left: 65px;
letter-spacing: 0;
line-height: normal;
position: absolute;
top: 14px;
width: 401px;
}

.app .icon-outline-paper {
height: 20px !important;
left: 477px !important;
position: absolute !important;
top: 13px !important;
width: 20px !important;
cursor: pointer;
transition: .5s;
scale: 1.2;
}

.app .sound-icon-instance {
height: 22px !important;
left: 18px !important;
position: absolute !important;
top: 14px !important;
width: 24px !important;
}

.app .design-component-instance-node {
height: 22px !important;
width: 3px !important;
}

.app .sound-icon-2 {
height: 22px !important;
left: 5px !important;
width: 3px !important;
}

.app .sound-icon-3 {
height: 22px !important;
left: 11px !important;
width: 3px !important;
}

.app .sound-icon-4 {
height: 22px !important;
left: 16px !important;
width: 3px !important;
}

.app .sound-icon-5 {
height: 22px !important;
left: 21px !important;
width: 3px !important;
}
2 changes: 2 additions & 0 deletions src/renderer/components/HistoryItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { HistoryInfoCommand } from "../../icons/HistoryInfoCommand"
import { IconOutline } from "../Icons/IconOutline"
import { motion } from "framer-motion"

import "./style.css"

export const HistoryItem = ({ command, status } : { command: string, status: number }) =>{
return (
<motion.div
Expand Down
Empty file added src/renderer/components/HistoryItem/style.css
View file
Empty file.
78 changes: 4 additions & 74 deletions src/renderer/components/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,14 @@ import { IconOutlineX } from "../Icons/IconOutlineX";
import { LightBulb } from "../Icons/LightBulb";

import LOGO_PATH from "../../assets/img/logo.svg"
import { ThemeIcon } from "../Icons/ThemeIcon";
import { useThemeContext } from "../../contexts/ThemeContext";
import { IconOutline } from "../Icons/IconOutline";
import { useChat } from "../../contexts/ChatContext";
import { HomeIcon } from "../Icons/HomeIcon";
import { PackagesIcon } from "../Icons/PackagesIcon";

import "./style.css"
import { SideMenu } from "../SideMenu";

export const Navbar = () => {
const { active, setActive } = useChat()
const { status } = useCommandContext();
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [microphoneAccess, setMicrophoneAccess] = useState(false);
const { theme, setTheme } = useThemeContext()

const [themeIconHovered, setThemeIconHovered] = useState(false)
const [terminalIconHovered, setTerminalIconHovered] = useState(false)
const [packagesIconHovered, setPackagesIconHovered] = useState(false)
const [homeIconHovered, setHomeIconHovered] = useState(false)

useEffect(() => {
const checkMicrophoneAccess = async () => {
Expand Down Expand Up @@ -76,67 +66,7 @@ export const Navbar = () => {
<IconOutlineMinus className="icon-outline-minus-instance" />
</div>
<LightBulb status={status} className="light-bulb-2" />

<motion.div
className="side-menu"
initial={{ x: "-100%" }}
animate={{ x: isMenuOpen ? 0 : "-100%" }}
transition={{ stiffness: 300, damping: 30 }}
>
<div className="menu-content">
<div
className="menu-el"
onPointerOver={() => setThemeIconHovered(true)}
onPointerLeave={() => setThemeIconHovered(false)}
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
>
<div className="menu-icon">
<ThemeIcon theme={theme} hovered={themeIconHovered}/>
</div>
<p>Theme</p>
</div>
<div className="menu-el"
onPointerOver={() => setHomeIconHovered(true)}
onPointerLeave={() => setHomeIconHovered(false)}
onClick={() => setActive('home')}
>
<div className="menu-icon">
<HomeIcon
className="menu-icon"
hovered={homeIconHovered}
/>
</div>
<p>Home</p>
</div>
<div className="menu-el"
onPointerOver={() => setTerminalIconHovered(true)}
onPointerLeave={() => setTerminalIconHovered(false)}
onClick={() => setActive('informations')}
>
<div className="menu-icon">
<IconOutline
className="menu-icon"
hovered={terminalIconHovered}
stokeWidth={1}
/>
</div>
<p>Informations</p>
</div>
<div className="menu-el"
onPointerOver={() => setPackagesIconHovered(true)}
onPointerLeave={() => setPackagesIconHovered(false)}
onClick={() => setActive('packages')}
>
<div className="menu-icon">
<PackagesIcon
className="menu-icon"
hovered={packagesIconHovered}
/>
</div>
<p>Packages</p>
</div>
</div>
</motion.div>
<SideMenu isMenuOpen={isMenuOpen} />
</div>
);
};
Loading

0 comments on commit ad55c86

Please sign in to comment.