Skip to content

Commit 3f02de8

Browse files
zomarsjoeauyeungsean-brydon
authored
chore: icon cleanup (#13770)
Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
1 parent 7421cea commit 3f02de8

File tree

294 files changed

+3149
-1703
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

294 files changed

+3149
-1703
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ node_modules
44
**/**/public
55
packages/prisma/zod
66
apps/web/public/embed
7+
packages/ui/components/icon/dynamicIconImports.tsx

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,4 @@ packages/prisma/zod
1717
packages/prisma/enums
1818
apps/web/public/embed
1919
apps/api/v2/swagger/documentation.json
20+
packages/ui/components/icon/dynamicIconImports.tsx

‎apps/web/components/AddToHomescreen.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState } from "react";
22

33
import { useLocale } from "@calcom/lib/hooks/useLocale";
4-
import { X } from "@calcom/ui/components/icon";
4+
import { Icon } from "@calcom/ui";
55

66
export default function AddToHomescreen() {
77
const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
4040
type="button"
4141
className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
4242
<span className="sr-only">{t("dismiss")}</span>
43-
<X className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
43+
<Icon name="x" className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
4444
</button>
4545
</div>
4646
</div>

‎apps/web/components/AppListCard.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
99
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
1010
import { useLocale } from "@calcom/lib/hooks/useLocale";
1111
import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
12-
import { Badge, ListItemText, Avatar } from "@calcom/ui";
13-
import { AlertCircle } from "@calcom/ui/components/icon";
12+
import { Avatar, Badge, Icon, ListItemText } from "@calcom/ui";
1413

1514
type ShouldHighlight =
1615
| {
@@ -105,7 +104,7 @@ export default function AppListCard(props: AppListCardProps) {
105104
<ListItemText component="p">{description}</ListItemText>
106105
{invalidCredential && (
107106
<div className="flex gap-x-2 pt-2">
108-
<AlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
107+
<Icon name="circle-alert" className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
109108
<ListItemText component="p" className="whitespace-pre-wrap text-red-500">
110109
{t("invalid_credential")}
111110
</ListItemText>

‎apps/web/components/EnterprisePage.tsx

+7-8
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,39 @@
33
import { ShellMain } from "@calcom/features/shell/Shell";
44
import { UpgradeTip } from "@calcom/features/tips";
55
import { useLocale } from "@calcom/lib/hooks/useLocale";
6-
import { Button, ButtonGroup } from "@calcom/ui";
7-
import { BarChart, CreditCard, Globe, Lock, Paintbrush, Users } from "@calcom/ui/components/icon";
6+
import { Button, ButtonGroup, Icon } from "@calcom/ui";
87

98
export default function EnterprisePage() {
109
const { t } = useLocale();
1110

1211
const features = [
1312
{
14-
icon: <Globe className="h-5 w-5 text-red-500" />,
13+
icon: <Icon name="globe" className="h-5 w-5 text-red-500" />,
1514
title: t("branded_subdomain"),
1615
description: t("branded_subdomain_description"),
1716
},
1817
{
19-
icon: <BarChart className="h-5 w-5 text-blue-500" />,
18+
icon: <Icon name="bar-chart" className="h-5 w-5 text-blue-500" />,
2019
title: t("org_insights"),
2120
description: t("org_insights_description"),
2221
},
2322
{
24-
icon: <Paintbrush className="h-5 w-5 text-pink-500" />,
23+
icon: <Icon name="paintbrush" className="h-5 w-5 text-pink-500" />,
2524
title: t("extensive_whitelabeling"),
2625
description: t("extensive_whitelabeling_description"),
2726
},
2827
{
29-
icon: <Users className="h-5 w-5 text-orange-500" />,
28+
icon: <Icon name="users" className="h-5 w-5 text-orange-500" />,
3029
title: t("unlimited_teams"),
3130
description: t("unlimited_teams_description"),
3231
},
3332
{
34-
icon: <CreditCard className="h-5 w-5 text-green-500" />,
33+
icon: <Icon name="credit-card" className="h-5 w-5 text-green-500" />,
3534
title: t("unified_billing"),
3635
description: t("unified_billing_description"),
3736
},
3837
{
39-
icon: <Lock className="h-5 w-5 text-purple-500" />,
38+
icon: <Icon name="lock" className="h-5 w-5 text-purple-500" />,
4039
title: t("advanced_managed_events"),
4140
description: t("advanced_managed_events_description"),
4241
},

‎apps/web/components/apps/AdditionalCalendarSelector.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@ import { trpc } from "@calcom/trpc/react";
66
import {
77
Button,
88
Dropdown,
9+
DropdownItem,
910
DropdownMenuContent,
10-
DropdownMenuTrigger,
1111
DropdownMenuItem,
12-
DropdownItem,
12+
DropdownMenuTrigger,
1313
} from "@calcom/ui";
14-
import { Plus } from "@calcom/ui/components/icon";
1514

1615
import { QueryCell } from "@lib/QueryCell";
1716

@@ -42,15 +41,15 @@ const AdditionalCalendarSelector = ({ isPending }: AdditionalCalendarSelectorPro
4241
return (
4342
<Dropdown modal={false}>
4443
<DropdownMenuTrigger asChild>
45-
<Button StartIcon={Plus} color="secondary" {...(isPending && { loading: isPending })}>
44+
<Button StartIcon="plus" color="secondary" {...(isPending && { loading: isPending })}>
4645
{t("add")}
4746
</Button>
4847
</DropdownMenuTrigger>
4948
<DropdownMenuContent>
5049
{options.map((data) => (
5150
<DropdownMenuItem key={data.slug} className="focus:outline-none">
5251
{data.slug === "add-new" ? (
53-
<DropdownItem StartIcon={Plus} color="minimal" href="/apps/categories/calendar">
52+
<DropdownItem StartIcon="plus" color="minimal" href="/apps/categories/calendar">
5453
{t("install_new_calendar_app")}
5554
</DropdownItem>
5655
) : (

‎apps/web/components/apps/AppList.tsx

+6-7
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,16 @@ import type { AppCategories } from "@calcom/prisma/enums";
1111
import { trpc, type RouterOutputs } from "@calcom/trpc";
1212
import type { App } from "@calcom/types/App";
1313
import {
14+
Alert,
15+
Button,
1416
Dropdown,
1517
DropdownItem,
1618
DropdownMenuContent,
19+
DropdownMenuItem,
1720
DropdownMenuTrigger,
1821
List,
1922
showToast,
20-
Button,
21-
DropdownMenuItem,
22-
Alert,
2323
} from "@calcom/ui";
24-
import { MoreHorizontal, Trash, Video } from "@calcom/ui/components/icon";
2524

2625
import AppListCard from "@components/AppListCard";
2726

@@ -82,15 +81,15 @@ export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppL
8281
<div className="flex justify-end">
8382
<Dropdown modal={false}>
8483
<DropdownMenuTrigger asChild>
85-
<Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
84+
<Button StartIcon="ellipsis" variant="icon" color="secondary" />
8685
</DropdownMenuTrigger>
8786
<DropdownMenuContent>
8887
{!appIsDefault && variant === "conferencing" && !item.credentialOwner?.teamId && (
8988
<DropdownMenuItem>
9089
<DropdownItem
9190
type="button"
9291
color="secondary"
93-
StartIcon={Video}
92+
StartIcon="video"
9493
onClick={() => {
9594
const locationType = getEventLocationTypeFromApp(item?.locationOption?.value ?? "");
9695
if (locationType?.linkType === "static") {
@@ -214,7 +213,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
214213
color="destructive"
215214
onClick={() => handleDisconnect(credentialId, teamId)}
216215
disabled={isGlobal}
217-
StartIcon={Trash}>
216+
StartIcon="trash">
218217
{t("remove_app")}
219218
</DropdownItem>
220219
</DropdownMenuItem>

‎apps/web/components/apps/AppPage.tsx

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Link from "next/link";
22
import type { IframeHTMLAttributes } from "react";
3-
import React, { useState, useEffect } from "react";
3+
import React, { useEffect, useState } from "react";
44

55
import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
66
import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
@@ -10,8 +10,7 @@ import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/consta
1010
import { useLocale } from "@calcom/lib/hooks/useLocale";
1111
import { trpc } from "@calcom/trpc/react";
1212
import type { App as AppType } from "@calcom/types/App";
13-
import { Badge, Button, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";
14-
import { BookOpen, Check, ExternalLink, File, Flag, Mail, Shield } from "@calcom/ui/components/icon";
13+
import { Badge, Button, Icon, SkeletonButton, SkeletonText, showToast } from "@calcom/ui";
1514

1615
import { InstallAppButtonChild } from "./InstallAppButtonChild";
1716

@@ -196,7 +195,7 @@ export const AppPage = ({
196195
isGlobal ||
197196
(existingCredentials.length > 0 && allowedMultipleInstalls ? (
198197
<div className="flex space-x-3">
199-
<Button StartIcon={Check} color="secondary" disabled>
198+
<Button StartIcon="check" color="secondary" disabled>
200199
{existingCredentials.length > 0
201200
? t("active_install", { count: existingCredentials.length })
202201
: t("default")}
@@ -323,7 +322,7 @@ export const AppPage = ({
323322
rel="noreferrer"
324323
className="text-emphasis text-sm font-normal no-underline hover:underline"
325324
href={docs}>
326-
<BookOpen className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
325+
<Icon name="book-open" className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
327326
{t("documentation")}
328327
</a>
329328
</li>
@@ -335,7 +334,7 @@ export const AppPage = ({
335334
rel="noreferrer"
336335
className="text-emphasis font-normal no-underline hover:underline"
337336
href={website}>
338-
<ExternalLink className="text-subtle -mt-px mr-1 inline h-4 w-4" />
337+
<Icon name="external-link" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
339338
{website.replace("https://", "")}
340339
</a>
341340
</li>
@@ -347,7 +346,7 @@ export const AppPage = ({
347346
rel="noreferrer"
348347
className="text-emphasis font-normal no-underline hover:underline"
349348
href={`mailto:${email}`}>
350-
<Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
349+
<Icon name="mail" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
351350

352351
{email}
353352
</a>
@@ -360,7 +359,7 @@ export const AppPage = ({
360359
rel="noreferrer"
361360
className="text-emphasis font-normal no-underline hover:underline"
362361
href={tos}>
363-
<File className="text-subtle -mt-px mr-1 inline h-4 w-4" />
362+
<Icon name="file" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
364363
{t("terms_of_service")}
365364
</a>
366365
</li>
@@ -372,7 +371,7 @@ export const AppPage = ({
372371
rel="noreferrer"
373372
className="text-emphasis font-normal no-underline hover:underline"
374373
href={privacy}>
375-
<Shield className="text-subtle -mt-px mr-1 inline h-4 w-4" />
374+
<Icon name="shield" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
376375
{t("privacy_policy")}
377376
</a>
378377
</li>
@@ -383,7 +382,7 @@ export const AppPage = ({
383382
{t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
384383
</span>
385384
<a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
386-
<Flag className="inline h-3 w-3" /> {t("report_app")}
385+
<Icon name="flag" className="inline h-3 w-3" /> {t("report_app")}
387386
</a>
388387
</div>
389388
</div>

‎apps/web/components/apps/CalendarListContainer.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@ import {
1111
Alert,
1212
Button,
1313
EmptyScreen,
14+
Label,
1415
List,
15-
AppSkeletonLoader as SkeletonLoader,
1616
ShellSubHeading,
17-
Label,
17+
AppSkeletonLoader as SkeletonLoader,
1818
showToast,
1919
} from "@calcom/ui";
20-
import { Calendar } from "@calcom/ui/components/icon";
2120

2221
import { QueryCell } from "@lib/QueryCell";
2322
import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -267,7 +266,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
267266
</>
268267
) : (
269268
<EmptyScreen
270-
Icon={Calendar}
269+
Icon="calendar"
271270
headline={t("no_category_apps", {
272271
category: t("calendar").toLowerCase(),
273272
})}

‎apps/web/components/apps/InstallAppButtonChild.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -122,14 +122,13 @@ export const InstallAppButtonChild = ({
122122
data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
123123
key={team.id}
124124
disabled={isInstalled}
125-
StartIcon={(props: { className?: string }) => (
125+
CustomStartIcon={
126126
<Avatar
127127
alt={team.logo || ""}
128128
imageSrc={team.logo || `${WEBAPP_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
129129
size="sm"
130-
{...props}
131130
/>
132-
)}
131+
}
133132
onClick={() => {
134133
mutation.mutate(
135134
team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id }

‎apps/web/components/apps/layouts/AppsLayout.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import React from "react";
66
import { ShellMain } from "@calcom/features/shell/Shell";
77
import { useLocale } from "@calcom/lib/hooks/useLocale";
88
import { EmptyScreen } from "@calcom/ui";
9-
import { AlertCircle } from "@calcom/ui/components/icon";
109

1110
type AppsLayoutProps = {
1211
children: React.ReactNode;
@@ -27,7 +26,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
2726
<main className="w-full">
2827
{emptyStore ? (
2928
<EmptyScreen
30-
Icon={AlertCircle}
29+
Icon="circle-alert"
3130
headline={isAdmin ? t("no_apps") : t("no_apps_configured")}
3231
description={isAdmin ? t("enable_in_settings") : t("please_contact_admin")}
3332
buttonText={isAdmin ? t("apps_settings") : ""}

‎apps/web/components/availability/SkeletonLoader.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import React from "react";
2-
31
import { Button, SkeletonText } from "@calcom/ui";
4-
import { MoreHorizontal } from "@calcom/ui/components/icon";
52

63
import classNames from "@lib/classNames";
74

@@ -31,7 +28,7 @@ function SkeletonItem() {
3128
type="button"
3229
variant="icon"
3330
color="secondary"
34-
StartIcon={MoreHorizontal}
31+
StartIcon="ellipsis"
3532
disabled
3633
/>
3734
</div>

0 commit comments

Comments
 (0)