From 1c5ef97f842b46f62f9736f74489b241a421ffc5 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Tue, 18 Feb 2025 20:46:03 -0800 Subject: [PATCH] Updated icons. --- package.json | 2 + src/app/(main)/SideNav.module.css | 2 +- src/app/(main)/SideNav.tsx | 59 +++++++----------------- src/app/(main)/teams/[teamId]/layout.tsx | 4 +- src/assets/dashboard.svg | 2 +- src/assets/pushpin.svg | 9 +--- src/components/icons.ts | 3 ++ src/components/input/LanguageButton.tsx | 4 +- src/components/input/ProfileButton.tsx | 8 ++-- src/components/input/TeamsButton.tsx | 13 +++--- yarn.lock | 36 ++++++++++++++- 11 files changed, 74 insertions(+), 68 deletions(-) diff --git a/package.json b/package.json index e551987c..59e31607 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "build-geo": "node scripts/build-geo.js", "build-db-schema": "prisma db pull", "build-db-client": "prisma generate", + "build-icons": "svgr ./src/assets --out-dir ./src/components/icons --typescript", "update-tracker": "node scripts/update-tracker.js", "update-db": "prisma migrate deploy", "check-db": "node scripts/check-db.js", @@ -132,6 +133,7 @@ "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.2.0", "@rollup/plugin-replace": "^5.0.2", + "@svgr/cli": "^8.1.0", "@svgr/rollup": "^8.1.0", "@svgr/webpack": "^8.1.0", "@types/cypress": "^1.1.3", diff --git a/src/app/(main)/SideNav.module.css b/src/app/(main)/SideNav.module.css index 39a056dd..ac92d623 100644 --- a/src/app/(main)/SideNav.module.css +++ b/src/app/(main)/SideNav.module.css @@ -4,7 +4,7 @@ width: 200px; height: 100vh; background-color: var(--layer-color-1); - border-right: 1px solid var(--layer-color-2); + border-right: 1px solid var(--border-color); } .header { diff --git a/src/app/(main)/SideNav.tsx b/src/app/(main)/SideNav.tsx index 2e5e5928..de05efb4 100644 --- a/src/app/(main)/SideNav.tsx +++ b/src/app/(main)/SideNav.tsx @@ -1,9 +1,7 @@ -import { ReactNode } from 'react'; import Link from 'next/link'; -import { Icon } from '@umami/react-zen'; -import { Icons } from '@/components/icons'; +import { SideNav as Nav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen'; +import { Icons, Lucide } from '@/components/icons'; import { useMessages, useTeamUrl } from '@/components/hooks'; -import styles from './SideNav.module.css'; export function SideNav() { const { formatMessage, labels } = useMessages(); @@ -13,69 +11,44 @@ export function SideNav() { { label: formatMessage(labels.boards), href: renderTeamUrl('/boards'), - icon: , + icon: , }, { label: formatMessage(labels.dashboard), href: renderTeamUrl('/dashboard'), - icon: , + icon: , }, { label: formatMessage(labels.websites), href: renderTeamUrl('/websites'), - icon: , + icon: , }, { label: formatMessage(labels.reports), href: renderTeamUrl('/reports'), - icon: , + icon: , }, { label: formatMessage(labels.settings), href: renderTeamUrl('/settings'), - icon: , + icon: , }, ].filter(n => n); return ( -
+
+ ); } - -const SideNavHeader = () => { - return ( -
- - - -
umami
-
- ); -}; - -const SideNavSection = ({ title, children }: { title?: string; children: ReactNode }) => { - return ( -
- {title &&
{title}
} -
{children}
-
- ); -}; - -const SideNavItem = ({ href, label, icon }: { href: string; label: string; icon: ReactNode }) => { - return ( - - {icon} - {label} - - ); -}; diff --git a/src/app/(main)/teams/[teamId]/layout.tsx b/src/app/(main)/teams/[teamId]/layout.tsx index de58b828..11814eca 100644 --- a/src/app/(main)/teams/[teamId]/layout.tsx +++ b/src/app/(main)/teams/[teamId]/layout.tsx @@ -1,13 +1,13 @@ import { TeamProvider } from './TeamProvider'; import { Metadata } from 'next'; -import TeamSettingsLayout from './settings/TeamSettingsLayout'; +import { TeamSettingsLayout } from './settings/TeamSettingsLayout'; export default async function ({ children, params, }: { children: any; - params: { teamId: string }; + params: Promise<{ teamId: string }>; }) { const { teamId } = await params; diff --git a/src/assets/dashboard.svg b/src/assets/dashboard.svg index 2090e5dc..398f2f22 100644 --- a/src/assets/dashboard.svg +++ b/src/assets/dashboard.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/pushpin.svg b/src/assets/pushpin.svg index 653a552d..69262210 100644 --- a/src/assets/pushpin.svg +++ b/src/assets/pushpin.svg @@ -1,8 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/icons.ts b/src/components/icons.ts index 6735d23a..ec45c81a 100644 --- a/src/components/icons.ts +++ b/src/components/icons.ts @@ -1,4 +1,5 @@ import { Icons as ReactBasicsIcons } from 'react-basics'; +import * as lucide from 'lucide-react'; import AddUser from '@/assets/add-user.svg'; import Bars from '@/assets/bars.svg'; import BarChart from '@/assets/bar-chart.svg'; @@ -56,4 +57,6 @@ const icons = { Visitor, }; +export const Lucide = lucide; + export const Icons = icons; diff --git a/src/components/input/LanguageButton.tsx b/src/components/input/LanguageButton.tsx index fc65f7c2..b33be23f 100644 --- a/src/components/input/LanguageButton.tsx +++ b/src/components/input/LanguageButton.tsx @@ -1,7 +1,7 @@ import { Icon, Button, MenuTrigger, Popover, Grid, Text, Dialog } from '@umami/react-zen'; import { languages } from '@/lib/lang'; import { useLocale } from '@/components/hooks'; -import { Icons } from '@/components/icons'; +import { Globe } from 'lucide-react'; export function LanguageButton() { const { locale, saveLocale } = useLocale(); @@ -15,7 +15,7 @@ export function LanguageButton() { diff --git a/src/components/input/ProfileButton.tsx b/src/components/input/ProfileButton.tsx index d14ee9a4..5621e31d 100644 --- a/src/components/input/ProfileButton.tsx +++ b/src/components/input/ProfileButton.tsx @@ -11,7 +11,7 @@ import { Text, } from '@umami/react-zen'; import { useRouter } from 'next/navigation'; -import { Icons } from '@/components/icons'; +import { User, LogOut, CircleUserRound } from 'lucide-react'; import { useMessages, useLogin } from '@/components/hooks'; export function ProfileButton() { @@ -33,7 +33,7 @@ export function ProfileButton() { @@ -42,14 +42,14 @@ export function ProfileButton() { - + {formatMessage(labels.profile)} {!cloudMode && ( - + {formatMessage(labels.logout)} diff --git a/src/components/input/TeamsButton.tsx b/src/components/input/TeamsButton.tsx index f42420cc..b7b7438a 100644 --- a/src/components/input/TeamsButton.tsx +++ b/src/components/input/TeamsButton.tsx @@ -13,8 +13,9 @@ import { Popover, Row, Box, + Icons, } from '@umami/react-zen'; -import { Icons } from '@/components/icons'; +import { User, Users } from 'lucide-react'; import { useLogin, useMessages, useTeams, useTeamUrl } from '@/components/hooks'; export function TeamsButton({ @@ -50,10 +51,10 @@ export function TeamsButton({ @@ -68,7 +69,7 @@ export function TeamsButton({ - + {user.username} @@ -78,7 +79,7 @@ export function TeamsButton({ {result?.data?.map(({ id, name }) => ( - + {name} diff --git a/yarn.lock b/yarn.lock index c807085c..a2f7e44e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4005,6 +4005,22 @@ "@svgr/babel-plugin-transform-react-native-svg" "8.1.0" "@svgr/babel-plugin-transform-svg-component" "8.0.0" +"@svgr/cli@^8.1.0": + version "8.1.0" + resolved "https://registry.yarnpkg.com/@svgr/cli/-/cli-8.1.0.tgz#dd7fcf42a144eb681bb9923c5d806bf6cafd7512" + integrity sha512-SnlaLspB610XFXvs3PmhzViHErsXp0yIy4ERyZlHDlO1ro2iYtHMWYk2mztdLD/lBjiA4ZXe4RePON3qU/Tc4A== + dependencies: + "@svgr/core" "8.1.0" + "@svgr/plugin-jsx" "8.1.0" + "@svgr/plugin-prettier" "8.1.0" + "@svgr/plugin-svgo" "8.1.0" + camelcase "^6.2.0" + chalk "^4.1.2" + commander "^9.4.1" + dashify "^2.0.0" + glob "^8.0.3" + snake-case "^3.0.4" + "@svgr/core@8.1.0": version "8.1.0" resolved "https://registry.yarnpkg.com/@svgr/core/-/core-8.1.0.tgz#41146f9b40b1a10beaf5cc4f361a16a3c1885e88" @@ -4034,6 +4050,14 @@ "@svgr/hast-util-to-babel-ast" "8.0.0" svg-parser "^2.0.4" +"@svgr/plugin-prettier@8.1.0": + version "8.1.0" + resolved "https://registry.yarnpkg.com/@svgr/plugin-prettier/-/plugin-prettier-8.1.0.tgz#71bf0d0b0ae4c2234a2deb0e5bad21c2cfe31364" + integrity sha512-o4/uFI8G64tAjBZ4E7gJfH+VP7Qi3T0+M4WnIsP91iFnGPqs5WvPDkpZALXPiyWEtzfYs1Rmwy1Zdfu8qoZuKw== + dependencies: + deepmerge "^4.3.1" + prettier "^2.8.7" + "@svgr/plugin-svgo@8.1.0": version "8.1.0" resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz#b115b7b967b564f89ac58feae89b88c3decd0f00" @@ -5647,6 +5671,11 @@ commander@^7.2.0: resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw== +commander@^9.4.1: + version "9.5.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30" + integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ== + common-tags@^1.8.0: version "1.8.2" resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6" @@ -6077,6 +6106,11 @@ dashdash@^1.12.0: dependencies: assert-plus "^1.0.0" +dashify@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/dashify/-/dashify-2.0.0.tgz#fff270ca2868ca427fee571de35691d6e437a648" + integrity sha512-hpA5C/YrPjucXypHPPc0oJ1l9Hf6wWbiOL7Ik42cxnsUOhWiCB/fylKbKqqJalW9FgkNQCw16YO8uW9Hs0Iy1A== + data-uri-to-buffer@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e" @@ -10504,7 +10538,7 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" -prettier@^2.6.2: +prettier@^2.6.2, prettier@^2.8.7: version "2.8.8" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==