Refactored icons.

This commit is contained in:
Mike Cao 2025-05-27 00:50:28 -07:00
parent 18eceee4c4
commit 99330a1a4d
86 changed files with 310 additions and 273 deletions

View file

@ -1,6 +1,6 @@
import { Button, Icon, Text, useToast, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
import { PasswordEditForm } from './PasswordEditForm';
import { Lucide } from '@/components/icons';
import { LockKeyhole } from '@/components/icons';
import { useMessages } from '@/components/hooks';
export function PasswordChangeButton() {
@ -14,8 +14,8 @@ export function PasswordChangeButton() {
return (
<DialogTrigger>
<Button>
<Icon fillColor="currentColor">
<Lucide.LockKeyhole />
<Icon>
<LockKeyhole />
</Icon>
<Text>{formatMessage(labels.changePassword)}</Text>
</Button>

View file

@ -1,5 +1,5 @@
import { Row, Button, Icon, useTheme } from '@umami/react-zen';
import { Lucide } from '@/components/icons';
import { Sun, Moon } from '@/components/icons';
export function ThemeSetting() {
const { theme, setTheme } = useTheme();
@ -11,12 +11,12 @@ export function ThemeSetting() {
onPress={() => setTheme('light')}
>
<Icon>
<Lucide.Sun />
<Sun />
</Icon>
</Button>
<Button variant={theme === 'dark' ? 'primary' : 'secondary'} onPress={() => setTheme('dark')}>
<Icon>
<Lucide.Moon />
<Moon />
</Icon>
</Button>
</Row>

View file

@ -1,6 +1,7 @@
import { useLoginQuery, useMessages, useModified } from '@/components/hooks';
import { useRouter } from 'next/navigation';
import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
import { LogOut } from '@/components/icons';
import { TeamLeaveForm } from './TeamLeaveForm';
export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName: string }) {
@ -18,7 +19,7 @@ export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName
<DialogTrigger>
<Button variant="secondary">
<Icon>
<Icons.Logout />
<LogOut />
</Icon>
<Text>{formatMessage(labels.leave)}</Text>
</Button>

View file

@ -1,5 +1,5 @@
import { Button, Icon, Modal, DialogTrigger, Dialog, Text, useToast } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { Plus } from '@/components/icons';
import { useMessages, useModified } from '@/components/hooks';
import { TeamAddForm } from './TeamAddForm';
import { messages } from '@/components/messages';
@ -19,7 +19,7 @@ export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
<DialogTrigger>
<Button variant="primary">
<Icon>
<Icons.Plus />
<Plus />
</Icon>
<Text>{formatMessage(labels.createTeam)}</Text>
</Button>

View file

@ -1,5 +1,5 @@
import { Button, Icon, Modal, DialogTrigger, Dialog, Text, useToast } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { AddUser } from '@/components/icons';
import { useMessages, useModified } from '@/components/hooks';
import { TeamJoinForm } from './TeamJoinForm';
@ -16,8 +16,8 @@ export function TeamsJoinButton() {
return (
<DialogTrigger>
<Button variant="secondary">
<Icon fillColor="currentColor">
<Icons.AddUser />
<Icon>
<AddUser />
</Icon>
<Text>{formatMessage(labels.joinTeam)}</Text>
</Button>

View file

@ -1,6 +1,6 @@
import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { Arrow, Edit } from '@/components/icons';
import { ROLES } from '@/lib/constants';
import { MenuButton } from '@/components/input/MenuButton';
@ -36,7 +36,7 @@ export function TeamsTable({
<MenuItem href={`/teams/${id}`}>
<Row alignItems="center" gap>
<Icon>
<Icons.Arrow />
<Arrow />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Row>
@ -44,7 +44,7 @@ export function TeamsTable({
<MenuItem href={`/teams/${id}/settings`}>
<Row alignItems="center" gap>
<Icon>
<Icons.Edit />
<Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>

View file

@ -1,4 +1,5 @@
import { Button, Icon, Icons, Text } from '@umami/react-zen';
import { Button, Icon, Text } from '@umami/react-zen';
import { Close } from '@/components/icons';
import styles from './WebsiteTags.module.css';
export function WebsiteTags({
@ -26,7 +27,7 @@ export function WebsiteTags({
<b>{`${website.name}`}</b>
</Text>
<Icon>
<Icons.Close />
<Close />
</Icon>
</Button>
</div>

View file

@ -1,15 +1,7 @@
import {
Button,
Icon,
Text,
Modal,
Icons,
DialogTrigger,
Dialog,
useToast,
} from '@umami/react-zen';
import { Button, Icon, Text, Modal, DialogTrigger, Dialog, useToast } from '@umami/react-zen';
import { UserAddForm } from './UserAddForm';
import { useMessages, useModified } from '@/components/hooks';
import { Plus } from '@/components/icons';
export function UserAddButton({ onSave }: { onSave?: () => void }) {
const { formatMessage, labels, messages } = useMessages();
@ -26,7 +18,7 @@ export function UserAddButton({ onSave }: { onSave?: () => void }) {
<DialogTrigger>
<Button variant="primary" data-test="button-create-user">
<Icon>
<Icons.Plus />
<Plus />
</Icon>
<Text>{formatMessage(labels.createUser)}</Text>
</Button>

View file

@ -1,5 +1,6 @@
import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
import { useMessages, useLoginQuery } from '@/components/hooks';
import { Trash } from '@/components/icons';
import { UserDeleteForm } from './UserDeleteForm';
export function UserDeleteButton({
@ -18,7 +19,7 @@ export function UserDeleteButton({
<DialogTrigger>
<Button isDisabled={userId === user?.id} data-test="button-delete">
<Icon size="sm">
<Icons.Trash />
<Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Button>

View file

@ -1,8 +1,8 @@
import { useState } from 'react';
import {
Row,
Text,
Icon,
Icons,
DataTable,
DataColumn,
MenuItem,
@ -10,12 +10,13 @@ import {
Modal,
Dialog,
} from '@umami/react-zen';
import Link from 'next/link';
import { formatDistance } from 'date-fns';
import { ROLES } from '@/lib/constants';
import { Trash } from '@/components/icons';
import { useMessages, useLocale } from '@/components/hooks';
import { Edit } from '@/components/icons';
import { MenuButton } from '@/components/input/MenuButton';
import Link from 'next/link';
import { useState } from 'react';
import { UserDeleteForm } from '@/app/(main)/settings/users/UserDeleteForm';
export function UsersTable({
@ -64,7 +65,7 @@ export function UsersTable({
<MenuItem href={`/settings/users/${id}`} data-test="link-button-edit">
<Row alignItems="center" gap>
<Icon>
<Icons.Edit />
<Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>
@ -77,7 +78,7 @@ export function UsersTable({
>
<Row alignItems="center" gap>
<Icon>
<Icons.Trash />
<Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Row>

View file

@ -1,6 +1,6 @@
import { useContext } from 'react';
import { Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { User } from '@/components/icons';
import { UserEditForm } from './UserEditForm';
import { SectionHeader } from '@/components/common/SectionHeader';
import { useMessages } from '@/components/hooks';
@ -13,7 +13,7 @@ export function UserSettings({ userId }: { userId: string }) {
return (
<>
<SectionHeader title={user?.username} icon={<Icons.User />} />
<SectionHeader title={user?.username} icon={<User />} />
<Tabs>
<TabList>
<Tab id="details">{formatMessage(labels.details)}</Tab>

View file

@ -1,14 +1,6 @@
import { useMessages, useModified } from '@/components/hooks';
import {
Button,
Icon,
Icons,
Modal,
Dialog,
DialogTrigger,
Text,
useToast,
} from '@umami/react-zen';
import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
import { Plus } from '@/components/icons';
import { WebsiteAddForm } from './WebsiteAddForm';
export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?: () => void }) {
@ -26,7 +18,7 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
<DialogTrigger>
<Button data-test="button-website-add" variant="primary">
<Icon>
<Icons.Plus />
<Plus />
</Icon>
<Text>{formatMessage(labels.addWebsite)}</Text>
</Button>

View file

@ -2,7 +2,7 @@ import { ReactNode } from 'react';
import { Row, Text, Icon, DataTable, DataColumn, MenuItem } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { MenuButton } from '@/components/input/MenuButton';
import { Lucide } from '@/components/icons';
import { Eye, SquarePen } from '@/components/icons';
import Link from 'next/link';
export interface WebsitesTableProps {
@ -45,7 +45,7 @@ export function WebsitesTable({
<MenuItem href={renderTeamUrl(`/websites/${websiteId}`)}>
<Row alignItems="center" gap>
<Icon data-test="link-button-view">
<Lucide.Eye />
<Eye />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Row>
@ -55,7 +55,7 @@ export function WebsitesTable({
<MenuItem href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
<Row alignItems="center" gap>
<Icon data-test="link-button-edit">
<Lucide.SquarePen />
<SquarePen />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Row>

View file

@ -2,7 +2,7 @@ import { useContext } from 'react';
import { Icon, Tabs, TabList, Tab, TabPanel, Text } from '@umami/react-zen';
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
import { useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { Globe, Arrow } from '@/components/icons';
import { SectionHeader } from '@/components/common/SectionHeader';
import { ShareUrl } from './ShareUrl';
import { TrackingCode } from './TrackingCode';
@ -22,14 +22,14 @@ export function WebsiteSettings({
return (
<>
<SectionHeader title={website?.name} icon={<Icons.Globe />}>
<SectionHeader title={website?.name} icon={<Globe />}>
<LinkButton
variant="primary"
href={`/websites/${websiteId}`}
target={openExternal ? '_blank' : null}
>
<Icon>
<Icons.Arrow />
<Arrow />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</LinkButton>