From 181fe61368be41a2d9a9eae913ec246bf0c5aa68 Mon Sep 17 00:00:00 2001 From: Beesquit Date: Mon, 22 Sep 2025 12:41:58 +0300 Subject: [PATCH] style changes especially sidebar --- src/App.tsx | 2 +- src/components/FormField.css | 6 ++-- src/components/Sidebar.css | 53 ++++++++++++++++++------------- src/components/Sidebar.tsx | 25 ++++++++++----- src/index.css | 16 ++++++++++ src/pages/dashboard/dashboard.css | 22 ++++++++++--- src/pages/dashboard/dashboard.tsx | 10 ++++-- src/pages/home/home.tsx | 13 +------- src/pages/login/login.css | 1 - 9 files changed, 95 insertions(+), 53 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 5ef1206..6bf5d27 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -83,7 +83,7 @@ function App() { } /> - 404
Not Found} /> + 404 [#]
Not Found} /> diff --git a/src/components/FormField.css b/src/components/FormField.css index 710c866..db29092 100644 --- a/src/components/FormField.css +++ b/src/components/FormField.css @@ -14,18 +14,18 @@ .form-field input:focus { outline: none; - border-color: #4a90e2; + border-color: var(--accent-color-lilac); } .form-field input.error { - border-color: #e74c3c; + border-color: var(--accent-color-alternative); } .error-message { position: absolute; bottom: -20px; left: 0; - color: #e74c3c; + color: var(--accent-color-alternative); font-size: 12px; opacity: 0; transform: translateY(10px); diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css index 8af5f2c..1e11aa3 100644 --- a/src/components/Sidebar.css +++ b/src/components/Sidebar.css @@ -1,15 +1,21 @@ .sidebar { - position: fixed; + display: flex; top: 0; left: 0; width: 240px; height: 100%; - background-color: #2a2a2a; + background-color: var(--background-dark); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3); border-right: 1px solid #404040; - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + flex-direction: column; } + +.sidebar-content { + flex: 1; +} + + .sidebar-header { padding: 1.5rem; border-bottom: 1px solid #404040; @@ -19,18 +25,24 @@ .sidebar-title { margin: 0; font-size: 1.25rem; - font-weight: 600; - color: rgba(255, 255, 255, 0.87); + color: var(--text-dark); } .sidebar-nav { padding: 1rem 0; } +.sidebar-bottom { + padding: 0; + border-top: 1px solid #404040; + margin-top: auto; +} + + .sidebar-link { display: block; padding: 0.75rem 1.5rem; - color: rgba(255, 255, 255, 0.87); + color: var(--text-dark); text-decoration: none; transition: all 0.2s ease; border-left: 3px solid transparent; @@ -42,28 +54,25 @@ color: var(--links-main-color); } -.sidebar-link:active { - background-color: #2a2a2a; -} - -.sidebar-bottom-link { +.logout-button { display: block; + width: 100%; padding: 0.75rem 1.5rem; - color: rgba(255, 255, 255, 0.87); + background: none; + border: none; + text-align: left; + font-family: inherit; + font-size: inherit; + color: var(--text-dark); text-decoration: none; - transition: all 0.2s ease; + cursor: pointer; + transition: color 0.2s ease; border-left: 3px solid transparent; - bottom: 0; } -.sidebar-bottom-link:hover { +.logout-button:hover { + color: var(--accent-color-alternative); background-color: #333333; - /* a249a5 */ - border-left-color: var(--links-main-color); - color: var(--links-main-color); -} - -.sidebar-bottom-link:active { - background-color: #2a2a2a; + border-left-color: var(--accent-color-alternative); } diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index a5fd04f..408b9f3 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,20 +1,29 @@ import React from 'react'; +import useLogout from "../auth/logout" import './Sidebar.css'; const Sidebar: React.FC = () => { return (
-
-

Menu

+
+
+

Picrinth [#]

+
+ +
- +
+ + Settings +
); }; diff --git a/src/index.css b/src/index.css index a6a5cd6..eeaee2b 100644 --- a/src/index.css +++ b/src/index.css @@ -9,6 +9,22 @@ --buttons-hover-color: #92002c; --buttons-press-color: #63001e; + --accent-color-alternative: #ff6b6b; + + --accent-color-green: #52b852; + --accent-color-seagreen-bright: #3cb371; + --accent-color-seagreen-dark: #2e8b57; + + --accent-color-blue-bright: #4169e1; + --accent-color-blue-dark: #191970; + + --accent-color-yellow: #ffd700; + --accent-color-golden: #daa520; + + --accent-color-turquoise: #48d1cc; + --accent-color-lilac: #9370db; + + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; diff --git a/src/pages/dashboard/dashboard.css b/src/pages/dashboard/dashboard.css index 8a6d90e..cc655f8 100644 --- a/src/pages/dashboard/dashboard.css +++ b/src/pages/dashboard/dashboard.css @@ -5,8 +5,22 @@ max-width:100%; } - -.login-link:hover { - color: var(--links-hover-color); - text-decoration: none; +.sidebar-container { + display: flex; +} + +.dashboard-content { + display: flex; + height: 100%; + width: 100%; + justify-content: center; + align-items: center; +} + +.dashboard-text { + display: flex; + max-width: 40vw; + text-align: center; + text-wrap: pretty; + outline: 1px solid thistle; } diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx index 267b298..6dce0f9 100644 --- a/src/pages/dashboard/dashboard.tsx +++ b/src/pages/dashboard/dashboard.tsx @@ -4,8 +4,14 @@ import "./dashboard.css" const Dashboard = () => { return (
-

Dashboard

- +
+ +
+
+
+

Dashboard Content
WIP

+
+
) } diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx index 305dd86..b6045c4 100644 --- a/src/pages/home/home.tsx +++ b/src/pages/home/home.tsx @@ -1,23 +1,12 @@ -import { useNavigate } from "react-router-dom"; -import useAuth from "../../auth/auth"; - import { Link } from 'react-router-dom'; import useLogout from "../../auth/logout" const Home = () => { - const { setToken } = useAuth(); - const navigate = useNavigate(); - - const handleLogout = () => { - setToken(null); - navigate("/login"); - }; - return (

Home

-