watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 12:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Updated icons.

Browse source
This commit is contained in:
Mike Cao 2025-09-22 20:11:31 -07:00
parent d8b3c8d13c
commit bf16ade184
23 changed files with 159 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/(main)/SideNav.tsx
View file

@ -8,7 +8,7 @@ import {
SidebarProps,
ThemeButton,
} from '@umami/react-zen';
import { Globe, Link as LinkIcon, Logo, Pixel, PanelLeft } from '@/components/icons';
import { Globe, LinkIcon, LogoSvg, Grid2x2, PanelLeft } from '@/components/icons';
import { useMessages, useNavigation, useGlobalState } from '@/components/hooks';
import { TeamsButton } from '@/components/input/TeamsButton';
import { PanelButton } from '@/components/input/PanelButton';
@ -39,7 +39,7 @@ export function SideNav(props: SidebarProps) {
id: 'pixels',
label: formatMessage(labels.pixels),
path: '/pixels',
icon: <Pixel />,
icon: <Grid2x2 />,
},
];
@ -53,7 +53,7 @@ export function SideNav(props: SidebarProps) {
<SidebarSection onClick={() => setIsCollapsed(false)}>
<SidebarHeader
label="umami"
icon={isCollapsed && !hasNav ? <PanelLeft /> : <Logo />}
icon={isCollapsed && !hasNav ? <PanelLeft /> : <LogoSvg />}
style={{ maxHeight: 40 }}
>
{!isCollapsed && !hasNav && <PanelButton />}

4
src/app/(main)/links/LinkEditForm.tsx
View file

@ -13,7 +13,7 @@ import {
} from '@umami/react-zen';
import { useConfig, useLinkQuery } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { Refresh } from '@/components/icons';
import { RefreshCw } from '@/components/icons';
import { getRandomChars } from '@/lib/generate';
import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
import { LINKS_URL } from '@/lib/constants';
@ -127,7 +127,7 @@ export function LinkEditForm({
onPress={() => setValue('slug', handleSlug(), { shouldDirty: true })}
>
<Icon>
<Refresh />
<RefreshCw />
</Icon>
</Button>
</Row>

4
src/app/(main)/pixels/PixelEditForm.tsx
View file

@ -12,7 +12,7 @@ import {
} from '@umami/react-zen';
import { useConfig, usePixelQuery } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { Refresh } from '@/components/icons';
import { RefreshCw } from '@/components/icons';
import { getRandomChars } from '@/lib/generate';
import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
import { useEffect, useState } from 'react';
@ -111,7 +111,7 @@ export function PixelEditForm({
onPress={() => setValue('slug', handleSlug(), { shouldDirty: true })}
>
<Icon>
<Refresh />
<RefreshCw />
</Icon>
</Button>
</Row>

4
src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx
View file

@ -1,7 +1,7 @@
import { Grid, Row, Column, Text, Icon, ProgressBar, Dialog } from '@umami/react-zen';
import { ReportEditButton } from '@/components/input/ReportEditButton';
import { useMessages, useResultQuery } from '@/components/hooks';
import { File, Lightning, User } from '@/components/icons';
import { File, LightningSvg, User } from '@/components/icons';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { formatLongNumber } from '@/lib/format';
import { GoalEditForm } from './GoalEditForm';
@ -68,7 +68,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
</Row>
<Row alignItems="center" justifyContent="space-between" gap>
<Row alignItems="center" gap>
<Icon>{parameters.type === 'path' ? <File /> : <Lightning />}</Icon>
<Icon>{parameters.type === 'path' ? <File /> : <LightningSvg />}</Icon>
<Text>{parameters.value}</Text>
</Row>
<Row alignItems="center" gap>

42
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -2,6 +2,27 @@ import { Grid, Column } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
import { SideMenu } from '@/components/common/SideMenu';
import {
Link,
LogOut,
LogIn,
Search,
Type,
ArrowRight,
Megaphone,
Earth,
Globe,
Landmark,
MapPin,
AppWindow,
Laptop,
Languages,
Monitor,
Cpu,
LightningSvg,
LucideCaseSensitive,
Tag,
} from '@/components/icons';
export function WebsiteExpandedView({
websiteId,
@ -24,26 +45,31 @@ export function WebsiteExpandedView({
id: 'path',
label: formatMessage(labels.path),
path: updateParams({ view: 'path' }),
icon: <Link />,
},
{
id: 'entry',
label: formatMessage(labels.entry),
path: updateParams({ view: 'entry' }),
icon: <LogIn />,
},
{
id: 'exit',
label: formatMessage(labels.exit),
path: updateParams({ view: 'exit' }),
icon: <LogOut />,
},
{
id: 'title',
label: formatMessage(labels.title),
path: updateParams({ view: 'title' }),
icon: <Type />,
},
{
id: 'query',
label: formatMessage(labels.query),
path: updateParams({ view: 'query' }),
icon: <Search />,
},
],
},
@ -54,16 +80,19 @@ export function WebsiteExpandedView({
id: 'referrer',
label: formatMessage(labels.referrer),
path: updateParams({ view: 'referrer' }),
icon: <ArrowRight />,
},
{
id: 'channel',
label: formatMessage(labels.channel),
path: updateParams({ view: 'channel' }),
icon: <Megaphone />,
},
{
id: 'domain',
label: formatMessage(labels.domain),
path: updateParams({ view: 'domain' }),
icon: <Globe />,
},
],
},
@ -74,16 +103,19 @@ export function WebsiteExpandedView({
id: 'country',
label: formatMessage(labels.country),
path: updateParams({ view: 'country' }),
icon: <Earth />,
},
{
id: 'region',
label: formatMessage(labels.region),
path: updateParams({ view: 'region' }),
icon: <MapPin />,
},
{
id: 'city',
label: formatMessage(labels.city),
path: updateParams({ view: 'city' }),
icon: <Landmark />,
},
],
},
@ -94,26 +126,31 @@ export function WebsiteExpandedView({
id: 'browser',
label: formatMessage(labels.browser),
path: updateParams({ view: 'browser' }),
icon: <AppWindow />,
},
{
id: 'os',
label: formatMessage(labels.os),
path: updateParams({ view: 'os' }),
icon: <Cpu />,
},
{
id: 'device',
label: formatMessage(labels.device),
path: updateParams({ view: 'device' }),
icon: <Laptop />,
},
{
id: 'language',
label: formatMessage(labels.language),
path: updateParams({ view: 'language' }),
icon: <Languages />,
},
{
id: 'screen',
label: formatMessage(labels.screen),
path: updateParams({ view: 'screen' }),
icon: <Monitor />,
},
],
},
@ -124,16 +161,19 @@ export function WebsiteExpandedView({
id: 'event',
label: formatMessage(labels.event),
path: updateParams({ view: 'event' }),
icon: <LightningSvg />,
},
{
id: 'hostname',
label: formatMessage(labels.hostname),
path: updateParams({ view: 'hostname' }),
icon: <LucideCaseSensitive />,
},
{
id: 'tag',
label: formatMessage(labels.tag),
path: updateParams({ view: 'tag' }),
icon: <Tag />,
},
],
},
@ -142,7 +182,7 @@ export function WebsiteExpandedView({
return (
<Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
<Column gap="6" border="right" paddingRight="3">
<SideMenu items={items} selectedKey={view} />
<SideMenu items={items} selectedKey={view} muteItems={false} />
</Column>
<Column overflow="hidden">
<MetricsExpandedTable

28
src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
View file

@ -1,19 +1,19 @@
import {
Eye,
Lightning,
LightningSvg,
User,
Clock,
Sheet,
Target,
Funnel,
Path,
Magnet,
TargetSvg,
FunnelSvg,
PathSvg,
MagnetSvg,
Tag,
Money,
MoneySvg,
Network,
ChartPie,
UserPlus,
Compare,
CompareSvg,
} from '@/components/icons';
import { useMessages, useNavigation } from '@/components/hooks';
import { SideMenu } from '@/components/common/SideMenu';
@ -44,7 +44,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
{
id: 'events',
label: formatMessage(labels.events),
icon: <Lightning />,
icon: <LightningSvg />,
path: renderPath('/events'),
},
{
@ -62,7 +62,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
{
id: 'compare',
label: formatMessage(labels.compare),
icon: <Compare />,
icon: <CompareSvg />,
path: renderPath('/compare'),
},
{
@ -79,25 +79,25 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
{
id: 'goals',
label: formatMessage(labels.goals),
icon: <Target />,
icon: <TargetSvg />,
path: renderPath('/goals'),
},
{
id: 'funnel',
label: formatMessage(labels.funnels),
icon: <Funnel />,
icon: <FunnelSvg />,
path: renderPath('/funnels'),
},
{
id: 'journeys',
label: formatMessage(labels.journeys),
icon: <Path />,
icon: <PathSvg />,
path: renderPath('/journeys'),
},
{
id: 'retention',
label: formatMessage(labels.retention),
icon: <Magnet />,
icon: <MagnetSvg />,
path: renderPath('/retention'),
},
],
@ -131,7 +131,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
{
id: 'revenue',
label: formatMessage(labels.revenue),
icon: <Money />,
icon: <MoneySvg />,
path: renderPath('/revenue'),
},
{

6
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
View file

@ -2,7 +2,7 @@ import { ReactNode } from 'react';
import { Icon, TextField, Column, Row, Label, Text } from '@umami/react-zen';
import { useFormat, useLocale, useMessages, useRegionNames } from '@/components/hooks';
import { TypeIcon } from '@/components/common/TypeIcon';
import { Location, KeyRound, Calendar } from '@/components/icons';
import { LocationSvg, KeyRound, Calendar } from '@/components/icons';
import { DateDistance } from '@/components/common/DateDistance';
export function SessionInfo({ data }) {
@ -36,11 +36,11 @@ export function SessionInfo({ data }) {
{formatValue(data?.country, 'country')}
</Info>
<Info label={formatMessage(labels.region)} icon={<Location />}>
<Info label={formatMessage(labels.region)} icon={<LocationSvg />}>
{getRegionName(data?.region)}
</Info>
<Info label={formatMessage(labels.city)} icon={<Location />}>
<Info label={formatMessage(labels.city)} icon={<LocationSvg />}>
{data?.city}
</Info>

4
src/app/login/LoginForm.tsx
View file

@ -13,7 +13,7 @@ import { useRouter } from 'next/navigation';
import { useMessages, useUpdateQuery } from '@/components/hooks';
import { setUser } from '@/store/app';
import { setClientAuthToken } from '@/lib/client';
import { Logo } from '@/components/icons';
import { LogoSvg } from '@/components/icons';
export function LoginForm() {
const { formatMessage, labels, getErrorMessage } = useMessages();
@ -34,7 +34,7 @@ export function LoginForm() {
return (
<Column justifyContent="center" alignItems="center" gap="6">
<Icon size="lg">
<Logo />
<LogoSvg />
</Icon>
<Heading>umami</Heading>
<Form onSubmit={handleSubmit} error={getErrorMessage(error)}>