From 1d1e41adeaebc0ead6273d82bc8aa922d38ebd86 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 6 Sep 2022 20:37:24 +0300 Subject: [PATCH] ui components updates --- package-lock.json | 15 +++++ package.json | 1 + public/static/graphics/hmenu-b.png | Bin 137 -> 0 bytes public/static/graphics/hmenu-close-b.png | Bin 500 -> 0 bytes src/components/Block/index.tsx | 9 ++- src/components/Block/styles.module.css | 4 ++ src/components/Menu/index.tsx | 8 +-- src/components/Menu/styles.module.css | 19 +++--- src/components/MenuToggle/index.tsx | 15 ++--- src/components/MenuToggle/styles.module.css | 14 ----- src/components/Navigation/index.tsx | 64 +++++++++----------- src/style/style.css | 1 + src/ui/Button/button.module.css | 22 ++++--- 13 files changed, 90 insertions(+), 82 deletions(-) delete mode 100644 public/static/graphics/hmenu-b.png delete mode 100644 public/static/graphics/hmenu-close-b.png delete mode 100644 src/components/MenuToggle/styles.module.css diff --git a/package-lock.json b/package-lock.json index 4bf09e80..93cfbacd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "7.0.0", "license": "ISC", "dependencies": { + "@radix-ui/react-icons": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.0.0", "classnames": "^2.2.6", "date-fns": "^2.11.1", @@ -448,6 +449,14 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-icons": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz", + "integrity": "sha512-xc3wQC59rsFylVbSusQCrrM+6695ppF730Q6yqzhRdqDcRNWIm2R6ngpzBoSOQMcwnq4p805F+Gr7xo4fmtN1A==", + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + } + }, "node_modules/@radix-ui/react-id": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz", @@ -4524,6 +4533,12 @@ "@radix-ui/react-use-escape-keydown": "1.0.0" } }, + "@radix-ui/react-icons": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz", + "integrity": "sha512-xc3wQC59rsFylVbSusQCrrM+6695ppF730Q6yqzhRdqDcRNWIm2R6ngpzBoSOQMcwnq4p805F+Gr7xo4fmtN1A==", + "requires": {} + }, "@radix-ui/react-id": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz", diff --git a/package.json b/package.json index 4a7d1d14..4db97ebd 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "author": "Roman Timashev", "license": "ISC", "dependencies": { + "@radix-ui/react-icons": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.0.0", "classnames": "^2.2.6", "date-fns": "^2.11.1", diff --git a/public/static/graphics/hmenu-b.png b/public/static/graphics/hmenu-b.png deleted file mode 100644 index 4386ba369611e2fae249f6fdff7a3b4a8c68fff0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 137 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=0iG_7Ar*7p-q^@_z<|fq(Xw0W zQpz%uMxR$_6gD_a*d6!b%0CXEx_{{@{OgL>bxnwU_uThyNk}Wmp!jbMs|0|I7pLU{ fM45n$3s>1a+~Zy%=d}e9gi0jMNt$*Q4~c{Dnvqm_;7#s0x~^0vu@k=5VNRjvDVHe#%;hKAD^CY zLt>cl^fJY>7#p{>*3QD?gki0njg8ylS%6GK;{+RUa%Sy?H}TAKn{XB{p1Bv^PR^`D zV+FUsr9wJqR;k+|cFsWtq$ntNuE7SRDlAuyC;GW&orqH1)qLssRwU;2f+Q5(8kEfShlZWClQ(kleFHQUl;`f=Ucl$qj((gq08vnGAs61(p&I84ZBT zLIFyNhs*}RHxuytz6fbbi0^Y3z*;*S%f~B7BY?;6J3m^MSgZ_KhzzF}UzY3!e6;}5 z^ey1`f;6QzOIZ#0@euT*W#>oBQkx~v*PsqUItr%@UiD$9>f>|CLA>1CGP~h_EZM#)94ib8 = ({ as = "div", style, direction, ...props }) => { +export const Block: React.FC = ({ as = "div", align = false, style, direction, ...props }) => { const directionClass = direction === "horizontal" ? s.horizontal : s.vertical const newProps = { - className: cx(s.block, directionClass), + className: cx(s.block, directionClass, { align }), style, } diff --git a/src/components/Block/styles.module.css b/src/components/Block/styles.module.css index 9676ac32..fe052dcb 100644 --- a/src/components/Block/styles.module.css +++ b/src/components/Block/styles.module.css @@ -5,6 +5,10 @@ justify-content: flex-start; } +.block.align { + align-items: center; +} + .horizontal { flex-direction: row; } diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 7e4424dd..83cbea2e 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -8,18 +8,16 @@ import { ActiveLink } from "./ActiveLink" let cx = classnames.bind(s) -export type MenuLayout = "desktop" | "mobile" - export type MenuProps = { - layout: MenuLayout + vertical?: boolean items: IMenu[] } -export const Menu: React.FC = ({ layout, items }) => { +export const Menu: React.FC = ({ vertical = false, items }) => { const router = useRouter() return ( - + { items.map(item => { const current = router.asPath === item.href diff --git a/src/components/Menu/styles.module.css b/src/components/Menu/styles.module.css index d8733f91..e60ccf20 100644 --- a/src/components/Menu/styles.module.css +++ b/src/components/Menu/styles.module.css @@ -8,16 +8,11 @@ font-size: var(--font-size-second); list-style: none; - padding: var(--size-s); -} - -/* MENU LAYOUT */ - -.desktop { + /* NOT VERTICAL */ flex-direction: row; } -.mobile { +.vertical { flex-direction: column; } @@ -27,7 +22,7 @@ user-select: none; background-color: var(--color-back-main); border-radius: var(--size-s); - transition: box-shadow 200ms ease-in; + transition: box-shadow 200ms ease-in, background-color 200ms ease-in; padding: var(--size-s) var(--size-s); } @@ -48,3 +43,11 @@ text-decoration: none; color: var(--color-text); } + +/* DARK THEME */ +@media (prefers-color-scheme: dark) { + .menuItem.active:hover { + box-shadow: none; + background-color: var(--color-back); + } +} diff --git a/src/components/MenuToggle/index.tsx b/src/components/MenuToggle/index.tsx index 932777be..f24df0fa 100644 --- a/src/components/MenuToggle/index.tsx +++ b/src/components/MenuToggle/index.tsx @@ -1,7 +1,5 @@ -import s from "./styles.module.css" - -import cx from "classnames" import { Button } from "@/ui/Button" +import { HamburgerMenuIcon, Cross1Icon } from "@radix-ui/react-icons" export interface IMenuToggleProps { style?: React.CSSProperties @@ -16,12 +14,11 @@ export const MenuToggle: React.FC = props => { style={props.style} theme={"icon"} > -
+ {props.open ? ( + + ) : ( + + )} ) } diff --git a/src/components/MenuToggle/styles.module.css b/src/components/MenuToggle/styles.module.css deleted file mode 100644 index 1f984b06..00000000 --- a/src/components/MenuToggle/styles.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.toggle { - --s: 32px; - width: var(--s); - height: var(--s); - background-size: var(--s); -} - -.toggle.open { - background-image: url(/static/graphics/hmenu-close-b.png); -} - -.toggle.close { - background-image: url(/static/graphics/hmenu-b.png); -} diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx index 4ff04f62..64a6875e 100644 --- a/src/components/Navigation/index.tsx +++ b/src/components/Navigation/index.tsx @@ -17,15 +17,6 @@ export const Navigation: React.FC = props => { const [open, toggleOpen] = useToggle(false) const { menu } = useContext(ConfigContext) - if (!collapseMenu) { - return ( - - ) - } - return ( <> = props => { onClickOverlay={toggleOpen} duration={250} > - + + + + + + + + + + {collapseMenu ? null : ( + + )} + + + + {!collapseMenu ? null : ( = props => { margin: "var(--size-xs)", }} /> - - - - - - - - - + )} ) diff --git a/src/style/style.css b/src/style/style.css index ad49196b..12a2a369 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -182,6 +182,7 @@ h3 { --color-back-main: hsl(240, 10%, 10%); --color-back: hsl(240, 10%, 15%); + --color-back-active: hsl(240, 10%, 20%); --color-back-opposite: hsl(240, 10%, 80%); --color-link: hsl(240, 10%, 40%); --color-link-opposite: hsl(240, 10%, 60%); diff --git a/src/ui/Button/button.module.css b/src/ui/Button/button.module.css index 04a37c84..4649d061 100644 --- a/src/ui/Button/button.module.css +++ b/src/ui/Button/button.module.css @@ -6,25 +6,21 @@ text-align: center; - border-radius: 100px; + border-radius: var(--size-s); border: 1px solid var(--color-shadow); color: var(--color-text); background-color: var(--color-back); - - transition: box-shadow 150ms; + box-shadow: none; + transition: box-shadow 200ms ease-in, background-color 200ms ease-in; outline: none; cursor: pointer; } .button:hover { - margin: 1px; - /* margin-left: 1px; - margin-right: 1px; */ - - border: none; - box-shadow: var(--shadow-active); + border-color: rgba(0, 0, 0, 0); + box-shadow: var(--shadow); } /* MODIFICATORS */ @@ -52,5 +48,13 @@ } .themeIcon { + border-color: rgba(0, 0, 0, 0); padding: var(--size-xs) var(--size-xs); } + +/* DARK THEME */ +@media (prefers-color-scheme: dark) { + .button:hover { + background-color: var(--color-back-active); + } +}