From 73c02d34c4aaf1f0590592f09fc988c6bd31d106 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 26 Aug 2025 01:47:22 +0300 Subject: [PATCH 1/2] format --- src/components/HudozkaLogo/logo.module.css | 38 +++++++++++----------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/HudozkaLogo/logo.module.css b/src/components/HudozkaLogo/logo.module.css index 4bda5ec5..52a32bb1 100644 --- a/src/components/HudozkaLogo/logo.module.css +++ b/src/components/HudozkaLogo/logo.module.css @@ -1,31 +1,31 @@ .container { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; - width: var(--size-l); - height: var(--size-l); + width: var(--size-l); + height: var(--size-l); - border-radius: var(--radius-small); + border-radius: var(--radius-small); } .dark { - background-color: #f9ea12; + background-color: #f9ea12; - --shadow-color: 60deg 100% 29%; - --shadow-elevation-high: - 0px 0.1px 0.1px hsl(var(--shadow-color) / 0.34), - 0px 0.4px 0.5px -0.4px hsl(var(--shadow-color) / 0.34), - 0px 0.8px 0.9px -0.7px hsl(var(--shadow-color) / 0.34), - 0px 1.3px 1.5px -1.1px hsl(var(--shadow-color) / 0.34), - 0px 2.1px 2.4px -1.4px hsl(var(--shadow-color) / 0.34), - 0px 3.3px 3.7px -1.8px hsl(var(--shadow-color) / 0.34), - -0.1px 5.1px 5.7px -2.1px hsl(var(--shadow-color) / 0.34), - -0.1px 7.5px 8.4px -2.5px hsl(var(--shadow-color) / 0.34); + --shadow-color: 60deg 100% 29%; + --shadow-elevation-high: + 0px 0.1px 0.1px hsl(var(--shadow-color) / 0.34), + 0px 0.4px 0.5px -0.4px hsl(var(--shadow-color) / 0.34), + 0px 0.8px 0.9px -0.7px hsl(var(--shadow-color) / 0.34), + 0px 1.3px 1.5px -1.1px hsl(var(--shadow-color) / 0.34), + 0px 2.1px 2.4px -1.4px hsl(var(--shadow-color) / 0.34), + 0px 3.3px 3.7px -1.8px hsl(var(--shadow-color) / 0.34), + -0.1px 5.1px 5.7px -2.1px hsl(var(--shadow-color) / 0.34), + -0.1px 7.5px 8.4px -2.5px hsl(var(--shadow-color) / 0.34); - box-shadow: var(--shadow-elevation-high); + box-shadow: var(--shadow-elevation-high); } .dark img { - filter: invert(0%); + filter: invert(0%); } From 37e2fc9ea51f0ed80f3e9ef7c279986867560612 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 26 Aug 2025 01:52:03 +0300 Subject: [PATCH 2/2] rewrit HudozkaLogo to use dark style natively --- src/components/HudozkaLogo/index.tsx | 26 +++++++------- src/components/HudozkaLogo/logo.module.css | 35 ++++++++++--------- .../Navigation/DesktopNavigation.tsx | 6 ++-- .../Navigation/MobileNavigation.tsx | 6 ++-- 4 files changed, 36 insertions(+), 37 deletions(-) diff --git a/src/components/HudozkaLogo/index.tsx b/src/components/HudozkaLogo/index.tsx index bfc4e1e2..921a040d 100644 --- a/src/components/HudozkaLogo/index.tsx +++ b/src/components/HudozkaLogo/index.tsx @@ -1,19 +1,19 @@ import s from "./logo.module.css" import Image from "next/image" -import image from "src/assets/hudozka-logo.png" +import src from "src/assets/hudozka-logo.png" -export type HudozkaLogoProps = { - dark?: boolean +function HudozkaLogo() { + return ( +
+ {"Hudozka"} +
+ ) } -export const HudozkaLogo: React.FC = ({ dark }) => ( -
- {"Hudozka"} -
-) +export default HudozkaLogo diff --git a/src/components/HudozkaLogo/logo.module.css b/src/components/HudozkaLogo/logo.module.css index 52a32bb1..a8781e25 100644 --- a/src/components/HudozkaLogo/logo.module.css +++ b/src/components/HudozkaLogo/logo.module.css @@ -9,23 +9,26 @@ border-radius: var(--radius-small); } -.dark { - background-color: #f9ea12; +/* DARK THEME */ +@media (prefers-color-scheme: dark) { + .container { + background-color: #f9ea12; - --shadow-color: 60deg 100% 29%; - --shadow-elevation-high: - 0px 0.1px 0.1px hsl(var(--shadow-color) / 0.34), - 0px 0.4px 0.5px -0.4px hsl(var(--shadow-color) / 0.34), - 0px 0.8px 0.9px -0.7px hsl(var(--shadow-color) / 0.34), - 0px 1.3px 1.5px -1.1px hsl(var(--shadow-color) / 0.34), - 0px 2.1px 2.4px -1.4px hsl(var(--shadow-color) / 0.34), - 0px 3.3px 3.7px -1.8px hsl(var(--shadow-color) / 0.34), - -0.1px 5.1px 5.7px -2.1px hsl(var(--shadow-color) / 0.34), - -0.1px 7.5px 8.4px -2.5px hsl(var(--shadow-color) / 0.34); + --shadow-color: 60deg 100% 29%; + --shadow-elevation-high: + 0px 0.1px 0.1px hsl(var(--shadow-color) / 0.34), + 0px 0.4px 0.5px -0.4px hsl(var(--shadow-color) / 0.34), + 0px 0.8px 0.9px -0.7px hsl(var(--shadow-color) / 0.34), + 0px 1.3px 1.5px -1.1px hsl(var(--shadow-color) / 0.34), + 0px 2.1px 2.4px -1.4px hsl(var(--shadow-color) / 0.34), + 0px 3.3px 3.7px -1.8px hsl(var(--shadow-color) / 0.34), + -0.1px 5.1px 5.7px -2.1px hsl(var(--shadow-color) / 0.34), + -0.1px 7.5px 8.4px -2.5px hsl(var(--shadow-color) / 0.34); - box-shadow: var(--shadow-elevation-high); -} + box-shadow: var(--shadow-elevation-high); + } -.dark img { - filter: invert(0%); + .container img { + filter: invert(0%); + } } diff --git a/src/components/Navigation/DesktopNavigation.tsx b/src/components/Navigation/DesktopNavigation.tsx index 7cca2850..9d23313e 100644 --- a/src/components/Navigation/DesktopNavigation.tsx +++ b/src/components/Navigation/DesktopNavigation.tsx @@ -2,8 +2,7 @@ import { Menu } from "../Menu" import { useContext } from "react" import { MenuContext } from "@/context/MenuContext" import { Box } from "@/ui/Box" -import { HudozkaLogo } from "../HudozkaLogo" -import { useDarkTheme } from "@/hooks/useDarkTheme" +import HudozkaLogo from "../HudozkaLogo" import Link from "next/link" import { AccessibilityButton } from "../AccessibilityButton" import { Spacer } from "../Spacer" @@ -13,13 +12,12 @@ export type DesktopNavigationProps = { } export const DesktopNavigation: React.FC = ({ style }) => { - const dark = useDarkTheme() const menu = useContext(MenuContext) return ( - + = ({ style }) => { - const dark = useDarkTheme() const [open, toggleOpen] = useToggle(false) const menu = useContext(MenuContext) @@ -48,7 +46,7 @@ export const MobileNavigation: React.FC = ({ style }) => - +