dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UPDATE: Theme Design for Quick Settings

Browse Source
This commit is contained in:
EvanLin3141
2025-02-18 17:47:21 +00:00
parent 4673052e09
commit d4a6c2c7cd
5 changed files with 62 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/Layout/ListRow.tsx
View File

@@ -15,6 +15,7 @@ interface ListRowProps {
onClick: (itemName: string) => void;
extraClasses?: string;
children?: React.ReactNode;
style?: React.CSSProperties;
}
// Row of entries
@@ -26,6 +27,7 @@ const ListRow: React.FC<ListRowProps> = ({
onClick,
extraClasses = "",
children,
style,
}) => {
const slider = useRef<HTMLDivElement>(null);
const scrollAmount = window.innerWidth * 0.3;
@@ -45,6 +47,7 @@ const ListRow: React.FC<ListRowProps> = ({
return (
<div
className={`flex flex-col w-full space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] transition-all ${extraClasses}`}
style={style}
>
<div className="space-y-1">
<h2 className="text-2xl font-bold">{title}</h2>

2
frontend/src/components/Navigation/Sidebar.tsx
View File

@@ -65,7 +65,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
return (
<div
id="sidebar"
className={`fixed top-0 left-0 w-[15vw] h-screen flex flex-col bg-[var(--bg-color)] text-[var(--text-color)] text-center overflow-y-auto scrollbar-hide
className={`fixed top-0 left-0 w-[15vw] h-screen flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
transition-all duration-500 ease-in-out ${
showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`}

11
frontend/src/components/Settings/QuickSettings.tsx
View File

@@ -9,12 +9,13 @@ const QuickSettings: React.FC = () => {
return (
<div
className={`fixed top-0 right-0 w-[20vw] h-screen p-4 flex flex-col items-center overflow-y-auto ${
showQuickSettings ? "opacity-100 z-[90]" : "opacity-0 z-[-1]"
} transition-all duration-300 ease-in-out`}
style={{ backgroundColor: "var(--bg-color)", color: "var(--text-color)" }}
className={`fixed top-0 right-0 w-[20vw] h-screen p-4 flex flex-col items-center overflow-y-hidden overflow-x-hidden ${showQuickSettings ? "opacity-100 z-[90]" : "opacity-0 z-[-1]"
} transition-all duration-300 ease-in-out pt-0 bg-[var(--quickBar-bg)] text-[var(--quickBar-text)]`}
>
<h1 className="text-[2rem] font-black">Quick Settings</h1>
<div className="w-[20vw] p-[1em] flex flex-col items-center bg-[var(--quickBar-title-bg)] text-[var(--quickBar-title)]
border-b-[0.25em] border-[var(--quickBar-border)] ">
<h1 className="text-[2rem] font-black">Quick Settings</h1>
</div>
<div id="quick-settings-menu" className="flex flex-col flex-grow my-8 gap-4">
<ThemeSetting />
</div>