mirror of
https://github.com/umami-software/umami.git
synced 2025-12-08 05:12:36 +01:00
Updated icons.
This commit is contained in:
Mike Cao
parent
b53606d497
commit
1c5ef97f84
11 changed files with 74 additions and 68 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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: <Icons.Dashboard />,
|
||||
icon: <Lucide.LayoutDashboard />,
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.dashboard),
|
||||
href: renderTeamUrl('/dashboard'),
|
||||
icon: <Icons.BarChart />,
|
||||
icon: <Lucide.Copy />,
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.websites),
|
||||
href: renderTeamUrl('/websites'),
|
||||
icon: <Icons.Globe />,
|
||||
icon: <Lucide.Globe />,
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.reports),
|
||||
href: renderTeamUrl('/reports'),
|
||||
icon: <Icons.Reports />,
|
||||
icon: <Lucide.ChartArea />,
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.settings),
|
||||
href: renderTeamUrl('/settings'),
|
||||
icon: <Icons.Gear />,
|
||||
icon: <Lucide.Settings />,
|
||||
},
|
||||
].filter(n => n);
|
||||
|
||||
return (
|
||||
<div className={styles.sidenav}>
|
||||
<Nav>
|
||||
<SideNavSection>
|
||||
<SideNavHeader />
|
||||
<SideNavHeader name="umami" icon={<Icons.Logo />} />
|
||||
</SideNavSection>
|
||||
<SideNavSection>
|
||||
{links.map(props => {
|
||||
return <SideNavItem key={props.href} {...props} />;
|
||||
})}
|
||||
</SideNavSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SideNavHeader = () => {
|
||||
{links.map(({ href, label, icon }) => {
|
||||
return (
|
||||
<div className={styles.header}>
|
||||
<Icon size="sm">
|
||||
<Icons.Logo />
|
||||
</Icon>
|
||||
<div className={styles.name}>umami</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SideNavSection = ({ title, children }: { title?: string; children: ReactNode }) => {
|
||||
return (
|
||||
<div className={styles.section}>
|
||||
{title && <div className={styles.title}>{title}</div>}
|
||||
<div className={styles.items}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SideNavItem = ({ href, label, icon }: { href: string; label: string; icon: ReactNode }) => {
|
||||
return (
|
||||
<Link href={href} className={styles.item}>
|
||||
<Icon size="sm">{icon}</Icon>
|
||||
{label}
|
||||
<Link key={href} href={href}>
|
||||
<SideNavItem label={label} icon={icon} />
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
})}
|
||||
</SideNavSection>
|
||||
</Nav>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512pt" height="512pt" viewBox="0 0 512 512"><path d="M197.332 170.668h-160C16.746 170.668 0 153.922 0 133.332v-96C0 16.746 16.746 0 37.332 0h160c20.59 0 37.336 16.746 37.336 37.332v96c0 20.59-16.746 37.336-37.336 37.336zM37.332 32A5.336 5.336 0 0 0 32 37.332v96a5.337 5.337 0 0 0 5.332 5.336h160a5.338 5.338 0 0 0 5.336-5.336v-96A5.337 5.337 0 0 0 197.332 32zm160 480h-160C16.746 512 0 495.254 0 474.668v-224c0-20.59 16.746-37.336 37.332-37.336h160c20.59 0 37.336 16.746 37.336 37.336v224c0 20.586-16.746 37.332-37.336 37.332zm-160-266.668A5.337 5.337 0 0 0 32 250.668v224A5.336 5.336 0 0 0 37.332 480h160a5.337 5.337 0 0 0 5.336-5.332v-224a5.338 5.338 0 0 0-5.336-5.336zM474.668 512h-160c-20.59 0-37.336-16.746-37.336-37.332v-96c0-20.59 16.746-37.336 37.336-37.336h160c20.586 0 37.332 16.746 37.332 37.336v96C512 495.254 495.254 512 474.668 512zm-160-138.668a5.338 5.338 0 0 0-5.336 5.336v96a5.337 5.337 0 0 0 5.336 5.332h160a5.336 5.336 0 0 0 5.332-5.332v-96a5.337 5.337 0 0 0-5.332-5.336zm160-74.664h-160c-20.59 0-37.336-16.746-37.336-37.336v-224C277.332 16.746 294.078 0 314.668 0h160C495.254 0 512 16.746 512 37.332v224c0 20.59-16.746 37.336-37.332 37.336zM314.668 32a5.337 5.337 0 0 0-5.336 5.332v224a5.338 5.338 0 0 0 5.336 5.336h160a5.337 5.337 0 0 0 5.332-5.336v-224A5.336 5.336 0 0 0 474.668 32zm0 0"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 396 B |
|
|
@ -1,8 +1 @@
|
|||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
width="1em"
|
||||
>
|
||||
<path d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3-15.4 12.3-16.6 35.4-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8z" />
|
||||
</svg>
|
||||
<svg viewBox="0 0 1024 1024" fill="currentColor" height="1em" width="1em"><path d="M878.3 392.1 631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3-15.4 12.3-16.6 35.4-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 0 0-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 571 B After Width: | Height: | Size: 527 B |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
<MenuTrigger key="language">
|
||||
<Button variant="quiet">
|
||||
<Icon>
|
||||
<Icons.Globe />
|
||||
<Globe />
|
||||
</Icon>
|
||||
</Button>
|
||||
<Popover placement="bottom end">
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
<MenuTrigger>
|
||||
<Button data-test="button-profile" variant="quiet">
|
||||
<Icon>
|
||||
<Icons.Profile />
|
||||
<CircleUserRound />
|
||||
</Icon>
|
||||
</Button>
|
||||
<Popover placement="bottom end">
|
||||
|
|
@ -42,14 +42,14 @@ export function ProfileButton() {
|
|||
<MenuSeparator />
|
||||
<MenuItem id="profile">
|
||||
<Icon>
|
||||
<Icons.User />
|
||||
<User />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.profile)}</Text>
|
||||
</MenuItem>
|
||||
{!cloudMode && (
|
||||
<MenuItem data-test="item-logout" id="logout">
|
||||
<Icon>
|
||||
<Icons.Logout />
|
||||
<LogOut />
|
||||
</Icon>
|
||||
<Text>{formatMessage(labels.logout)}</Text>
|
||||
</MenuItem>
|
||||
|
|
|
|||
|
|
@ -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({
|
|||
<MenuTrigger>
|
||||
<Button className={className} variant="quiet">
|
||||
<Row alignItems="center" gap="3">
|
||||
<Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
|
||||
<Icon>{teamId ? <Users /> : <User />}</Icon>
|
||||
{showText && <Text weight="bold">{teamId ? team?.name : user.username}</Text>}
|
||||
<Icon>
|
||||
<Icons.ChevronDown />
|
||||
<Icon rotate={90} size="sm">
|
||||
<Icons.Chevron />
|
||||
</Icon>
|
||||
</Row>
|
||||
</Button>
|
||||
|
|
@ -68,7 +69,7 @@ export function TeamsButton({
|
|||
<MenuSection title={formatMessage(labels.myAccount)}>
|
||||
<MenuItem id={user.id}>
|
||||
<Icon>
|
||||
<Icons.User />
|
||||
<User />
|
||||
</Icon>
|
||||
<Text wrap="nowrap">{user.username}</Text>
|
||||
</MenuItem>
|
||||
|
|
@ -78,7 +79,7 @@ export function TeamsButton({
|
|||
{result?.data?.map(({ id, name }) => (
|
||||
<MenuItem key={id} id={id}>
|
||||
<Icon size="sm">
|
||||
<Icons.Users />
|
||||
<Users />
|
||||
</Icon>
|
||||
<Text wrap="nowrap">{name}</Text>
|
||||
</MenuItem>
|
||||
|
|
|
|||
36
yarn.lock
36
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==
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue