commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.1k Packages Projects Releases Wiki Activity

refactor: migrate Icon to component icons from @coss/ui/icons (#27458)

Browse Source 
* feat: add @coss/ui/icons package and migrate static icon usages

Create a new icon system in @coss/ui/icons that wraps lucide-react icons
with controlled props (size and className only). Migrate 44 component
files from <Icon name="xxx" /> to <XxxIcon /> pattern.

This is Phase 1 of the icon migration, covering only static icon names.
Dynamic icon usages (e.g., name={variable}) are skipped for now.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate more static icons to @coss/ui/icons (batch 2)

Migrated 18 files from <Icon name="xxx" /> to <XxxIcon /> pattern:
- Event meta, insights, shell, user table bulk actions
- Webhooks, blocklist, form-builder, form components

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate more static icons to @coss/ui/icons (batch 3)

Migrated 7 files:
- CancelBooking, AddGuestsDialog, ChargeCardDialog
- ReassignDialog, RescheduleDialog
- Categories, Slider

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate more static icons to @coss/ui/icons (batch 4)

Migrated 6 files:
- Organizations: AboutOrganizationForm, PaymentStatusView, profile
- Workflows: CallDetailsSheet, SkeletonLoaderList, TimeTimeUnitInput

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate more static icons to @coss/ui/icons (batch 5)

Migrated 4 files:
- TwoFactorModalHeader
- App setups: alby, make, btcpayserver

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static icons to @coss/ui/icons (batch 6)

- confirmDialog.tsx: clock icon
- ics-feedcalendar/Setup.tsx: trash, plus icons
- hitpay/Setup.tsx: info icon
- paypal/Setup.tsx: circle-alert icons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static icons to @coss/ui/icons (batch 7)

- webhook-edit-view.tsx: external-link icon
- webhook-new-view.tsx: external-link icon
- UserDropdown.tsx: chevron-down, user, settings, moon, map, circle-help, download, blocks, log-out icons
- TopNav.tsx: settings icon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static icons to @coss/ui/icons (batch 8)

- EmailInviteForm.tsx: x icon
- InviteOptions.tsx: mail, upload, link icons
- SkeletonLoader.tsx: search, clock, user icons
- Embed.tsx: sun, arrow-left icons
- CalendarSwitch.tsx: arrow-left, rotate-cw icons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static icons to @coss/ui/icons (batch 9)

- apps-view.tsx: search icon
- categories-view.tsx: arrow-left, arrow-right icons
- DatePicker.tsx: calendar icon
- EditLocationDialog.tsx: map-pin icon
- AppPage.tsx: circle-alert, book-open, external-link, mail, file, shield, flag icons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static icons to @coss/ui/icons (batch 10)

- LicenseSelection.tsx: loader, check icons
- AppConnectionItem.tsx: circle-alert, arrow-right icons
- oauth-client-form/index.tsx: info icons (x2)
- auth/error/page.tsx: x icon
- troubleshoot/layout.tsx: loader icon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static icons to @coss/ui/icons (batch 11)

- UpgradeTipWrapper.tsx: users, refresh-ccw, user-plus icons
- PbacOptInModal.tsx: shield-check, lock, users, shield icons
- AdvancedPermissionGroup.tsx: chevron-right, info icons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static icons to @coss/ui/icons (batch 12)

- AdminAppsList.tsx: pencil icon
- AvailableTimes.tsx: calendar-x-2 icon
- BookingDetailsSheet.tsx: external-link (x2), repeat icons
- BookingCalendarContainer.tsx: chevron-left, chevron-right icons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static icons to @coss/ui/icons (batch 13)

- videos-single-view.tsx: chevron-right icon
- TroubleshooterSidebar.tsx: arrow-left icon
- RuleBuilder.tsx: filter icon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static icons to @coss/ui/icons (batch 14)

- FieldMappingBuilder.tsx: arrow-right, link icons
- IntegrationAttributeSyncCard.tsx: key icon
- onboarding-view.tsx: loader icon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static icons to @coss/ui/icons (batch 15)

- team-profile-view.tsx: copy icon
- DateRangeFilter.tsx: check icon
- ColumnVisibilityButton.tsx: check icon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static Icon to @coss/ui/icons (batch 16)

- EventWorkflowsTab.tsx: lock
- event-types-listing-view.tsx: search
- onboarding-migrate-members-browser-view.tsx: arrow-left, arrow-right, rotate-cw, lock, ellipsis-vertical, check, user-plus
- onboarding-migrate-teams-browser-view.tsx: arrow-left, arrow-right, rotate-cw, lock, ellipsis-vertical, check, arrow-right, users
- EventAvailabilityTab.tsx: globe, user
- onboarding-teams-browser-view.tsx: arrow-left, arrow-right, rotate-cw, lock, ellipsis-vertical, check, arrow-right, users
- FormBuilder.tsx: mail, phone, arrow-up, arrow-down
- AIEventController.tsx: info
- EventTeamAssignmentTab.tsx: x

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static Icon to @coss/ui/icons (batch 17)

- EventAdvancedTab.tsx: pencil, info
- HostLocations.tsx: triangle-alert, loader
- EventTypeLayout.tsx: loader
- Locations.tsx: x, corner-down-right, check
- EditWeightsForAllTeamMembers.tsx: upload, search, info, chevron-down
- WorkflowPage.tsx: pencil

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static Icon to @coss/ui/icons (batch 18)

- TestPhoneCallDialog.tsx: phone
- WorkflowListPage.tsx: link
- UsersTable.tsx: building, lock
- TeamList.tsx: building, paintbrush, chart-line, user-plus, users, pencil
- bookings-single-view.tsx: chevron-left, check, calendar, x, external-link

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate static Icon to @coss/ui/icons (batch 19)

- TeamsListing.tsx: users, refresh-ccw, user-plus, mail, video, eye-off, info
- ConnectionInfo.tsx: clipboard
- IntercomContactForm.tsx: message-circle, loader, send

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: migrate static Icon to @coss/ui/icons in teams components

- EventTypesList.tsx: check → CheckIcon
- MemberInvitationModal.tsx: user, users, building → UserIcon, UsersIcon, BuildingIcon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: migrate static Icon to @coss/ui/icons in workflow components

- ImportNumberDialog.tsx: info → InfoIcon
- VoiceSelector.tsx: user → UserIcon
- IncomingCallsTab.tsx: info, phone-incoming → InfoIcon, PhoneIncomingIcon
- PhoneNumberTab.tsx: loader, phone → LoaderIcon, PhoneIcon
- VoiceSelectionDialog.tsx: pause, play, user → PauseIcon, PlayIcon, UserIcon
- WebCallDialog.tsx: loader, phone, phone-off, triangle-alert, trash, message-circle → new icons (kept Icon import for dynamic mic icon)
- WorkflowDetailsPage.tsx: zap, arrow-right → ZapIcon, ArrowRightIcon
- AddActionDialog.tsx: info → InfoIcon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: migrate static Icon to @coss/ui/icons in WorkflowStepContainer

- info → InfoIcon (2 instances)
- phone → PhoneIcon (2 instances)
- circle-help → CircleHelpIcon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: migrate static Icon to @coss/ui/icons in data-table and org components

- attributes-list-view.tsx: tags → TagsIcon
- AddFilterButton.tsx: plus, eye-off → PlusIcon, EyeOffIcon
- BaseSelectFilterOptions.tsx: check → CheckIcon
- DataTable.tsx: arrow-up, arrow-down, check, chevrons-up-down, eye-off → new icons
- booking-dry-run-success-view.tsx: check → CheckIcon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: migrate static Icon to @coss/ui/icons in username and routing components

- UsernameTextfield.tsx: check → CheckIcon
- PremiumTextfield.tsx: check, external-link → CheckIcon, ExternalLinkIcon (kept Icon for star with fill prop)
- Header.tsx (routing-forms): pencil, menu, waypoints → PencilIcon, MenuIcon, WaypointsIcon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate Icon to component icons in routing-forms pages

Batch 25: Migrate static Icon usages to @coss/ui/icons components.

Files changed:
- Forms.tsx: file-text, shuffle, chart-bar, circle-check, mail, download → FileTextIcon, ShuffleIcon, ChartBarIcon, CircleCheckIcon, MailIcon, DownloadIcon
- FormEdit.tsx: chevron-down, menu → ChevronDownIcon, MenuIcon
- IncompleteBooking.tsx: globe → GlobeIcon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate Icon to component icons in UI package

Batch 26: Migrate static Icon usages to @coss/ui/icons components.

Files changed:
- ProgressToast.tsx: file-down, x → FileDownIcon, XIcon
- showToast.tsx: check, info, x → CheckIcon, InfoIcon, XIcon
- InfoBadge.tsx: info → InfoIcon
- MeetingTimeInTimezones.tsx: globe → GlobeIcon
- InputError.tsx: info → InfoIcon
- ConfirmationDialogContent.tsx: circle-alert, check → CircleAlertIcon, CheckIcon
- CalendarSwitch.tsx: arrow-left, rotate-cw → ArrowLeftIcon, RotateCwIcon
- ArrowButton.tsx: arrow-up, arrow-down → ArrowUpIcon, ArrowDownIcon
- FileUploader.tsx: upload → UploadIcon (kept Icon for dynamic)
- Checkbox.tsx: check → CheckIcon
- EditableHeading.tsx: pencil → PencilIcon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate Icon to component icons in UI and app-store packages

Batch 27: Migrate static Icon usages to @coss/ui/icons components.

Files changed:
- MultiEmail.tsx: x → XIcon (converted width to size)
- AppListCard.tsx: circle-alert → CircleAlertIcon
- SplitButton.tsx: chevron-down → ChevronDownIcon (kept Icon for dynamic)
- Calendar.tsx: chevron-left, chevron-right → ChevronLeftIcon, ChevronRightIcon
- AppDependencyComponent.tsx: check, circle-x, arrow-right → CheckIcon, CircleXIcon, ArrowRightIcon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate Icon to component icons in form input components

Batch 28: Migrate static Icon usages to @coss/ui/icons components.

Files changed:
- TextField.tsx: info → InfoIcon (kept Icon for x with onClick)
- Input.tsx: eye, eye-off, search → EyeIcon, EyeOffIcon, SearchIcon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: use @coss/ui/src/icons in packages with legacy moduleResolution

Packages like packages/ui and packages/app-store use a legacy moduleResolution
setting that doesn't support subpath exports. This changes the import path from
@coss/ui/icons to @coss/ui/src/icons for these packages.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate Icon to component icons in UI form and editor components

Migrates static Icon usages:
- MultiOptionInput: x (2x), arrow-up, arrow-down
- components (select): check
- AddVariablesDropdown: chevron-down (3x)
- ToolbarPlugin: chevron-down

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: migrate Icon to component icons in settings and platform atoms

Migrates static Icon usages:
- SettingsLayoutAppDirClient: chevron-down (2x), chevron-right (2x), arrow-left
- platform/atoms dialog: x
- platform/atoms toast: x

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: resolve @coss/ui/icons module resolution for legacy moduleResolution

Add typesVersions to @coss/ui package.json to help TypeScript resolve
subpath exports even with legacy moduleResolution: "node" setting.

Change imports from @coss/ui/src/icons to @coss/ui/icons to avoid
double-src path issue when Next.js applies import maps.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: localize 'Select field type' fallback label in FormEdit

Address Cubic AI review feedback (confidence 9/10) by using t() for
the hardcoded 'Select field type' string to ensure proper i18n support.

Co-Authored-By: unknown <>

* fix: add typesVersions wildcards for @coss/ui subpath imports

Add lib/*, components/*, and hooks/* to typesVersions to support
legacy moduleResolution with all package subpath patterns.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: resolve missing Icon references in settings and workflows

- Add Icon import for dynamic icon usages in SettingsLayoutAppDirClient
- Replace static Icon usages with component icons (InfoIcon, PhoneIcon)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: resolve icon component type errors

- Add onClick prop support to IconProps
- Fix size prop type (use number instead of string)
- Rename local MailOpenIcon to MailOpenIconWrapper to avoid shadowing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: add data-testid to icon components for test compatibility

- Add testId parameter to createIcon function
- Auto-generate data-testid for all icons (e.g., "check-icon", "search-icon")
- Remove outdated mock for @calcom/ui/components/icon in tests

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Update package.json

* Update package.json

* fix: migrate Icon to CalendarDaysIcon in videos-single-view.tsx

Co-Authored-By: unknown <>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Eunjae Lee
2026-02-12 14:30:27 +01:00
committed by GitHub
co-authored by Claude Opus 4.5 unknown Devin AI
parent 635c1febb0
commit bf348ee209
192 changed files with 1337 additions and 1033 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx
+4 -4
View File
@@ -14,10 +14,10 @@ import {
SelectField,
TextField,
} from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { Tooltip } from "@calcom/ui/components/tooltip";
import type { getServerSidePropsForSingleFormView as getServerSideProps } from "@calcom/web/lib/apps/routing-forms/[...pages]/getServerSidePropsSingleForm";
import SingleForm from "@components/apps/routing-forms/SingleForm";
import { ChevronDownIcon, MenuIcon } from "@coss/ui/icons";
import { useAutoAnimate } from "@formkit/auto-animate/react";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
import type { UseFormReturn } from "react-hook-form";
@@ -164,8 +164,8 @@ function Field({
"h-8 w-full justify-between text-left text-sm",
!!router && "bg-subtle cursor-not-allowed"
)}>
<span className="text-default">{defaultValue?.label || "Select field type"}</span>
<Icon name="chevron-down" className="text-default h-4 w-4" />
<span className="text-default">{defaultValue?.label || t("select_field_type")}</span>
<ChevronDownIcon className="text-default h-4 w-4" />
</Button>
</Tooltip>
</div>
@@ -333,7 +333,7 @@ const FormEdit = ({
{/* Icon card - Top */}
<div className="bg-default border-subtle z-30 col-start-1 col-end-1 row-start-1 row-end-1 h-10 w-10 transform rounded-md border shadow-sm">
<div className="text-emphasis flex h-full items-center justify-center">
<Icon name="menu" className="text-emphasis h-4 w-4" />
<MenuIcon className="text-emphasis h-4 w-4" />
</div>
</div>
{/* Left fanned card */}
apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx
+6 -11
View File
@@ -1,10 +1,7 @@
"use client";
import { useState, useEffect } from "react";
import type z from "zod";
import type { RoutingFormWithResponseCount } from "@calcom/app-store/routing-forms/types/types";
import { WhenToWriteToRecord, SalesforceFieldType } from "@calcom/app-store/salesforce/lib/enums";
import { SalesforceFieldType, WhenToWriteToRecord } from "@calcom/app-store/salesforce/lib/enums";
import type { writeToRecordDataSchema as salesforceWriteToRecordDataSchema } from "@calcom/app-store/salesforce/zod";
import { routingFormIncompleteBookingDataSchema as salesforceRoutingFormIncompleteBookingDataSchema } from "@calcom/app-store/salesforce/zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -12,15 +9,13 @@ import { IncompleteBookingActionType } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
import { Button } from "@calcom/ui/components/button";
import { Switch } from "@calcom/ui/components/form";
import { InputField } from "@calcom/ui/components/form";
import { Select } from "@calcom/ui/components/form";
import { Label } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { InputField, Label, Select, Switch } from "@calcom/ui/components/form";
import { showToast } from "@calcom/ui/components/toast";
import type { getServerSidePropsForSingleFormView as getServerSideProps } from "@calcom/web/lib/apps/routing-forms/[...pages]/getServerSidePropsSingleForm";
import SingleForm from "@components/apps/routing-forms/SingleForm";
import { GlobeIcon } from "@coss/ui/icons";
import { useEffect, useState } from "react";
import type z from "zod";
function Page({ form }: { form: RoutingFormWithResponseCount }) {
const { t } = useLocale();
@@ -105,7 +100,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
<div className="flex items-center justify-between">
<div className="flex items-center gap-0.5">
<div className="border-subtle rounded-lg border p-1">
<Icon name="globe" className="text-subtle h-4 w-4" />
<GlobeIcon className="text-subtle h-4 w-4" />
</div>
<div className="flex flex-col">
<span className="text-emphasis ml-2 text-sm font-medium">
apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx
+21 -16
View File
@@ -1,13 +1,7 @@
"use client";
import { useAutoAnimate } from "@formkit/auto-animate/react";
import posthog from "posthog-js";
import { useEffect, useState } from "react";
import { useFormContext } from "react-hook-form";
import { isFallbackRoute } from "@calcom/app-store/routing-forms/lib/isFallbackRoute";
import type { RoutingFormWithResponseCount } from "@calcom/app-store/routing-forms/types/types";
import LicenseRequired from "~/ee/common/components/LicenseRequired";
import { FilterResults } from "~/filters/components/FilterResults";
import { TeamsFilter } from "~/filters/components/TeamsFilter";
import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
@@ -21,22 +15,33 @@ import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
import { EmptyScreen } from "@calcom/ui/components/empty-screen";
import { Icon } from "@calcom/ui/components/icon";
import { List, ListLinkItem } from "@calcom/ui/components/list";
import { Tooltip } from "@calcom/ui/components/tooltip";
import type {
SetNewFormDialogState,
NewFormDialogState,
SetNewFormDialogState,
} from "@calcom/web/components/apps/routing-forms/FormActions";
import {
FormAction,
FormActionsDropdown,
FormActionsProvider,
} from "@calcom/web/components/apps/routing-forms/FormActions";
import {
ChartBarIcon,
CircleCheckIcon,
DownloadIcon,
FileTextIcon,
MailIcon,
ShuffleIcon,
} from "@coss/ui/icons";
import { useAutoAnimate } from "@formkit/auto-animate/react";
import posthog from "posthog-js";
import { useEffect, useState } from "react";
import { useFormContext } from "react-hook-form";
import { useHasPaidPlan } from "~/billing/hooks/useHasPaidPlan";
import SkeletonLoaderTeamList from "~/ee/teams/components/SkeletonloaderTeamList";
import LicenseRequired from "~/ee/common/components/LicenseRequired";
import { CreateButtonWithTeamsList } from "~/ee/teams/components/createButton/CreateButtonWithTeamsList";
import SkeletonLoaderTeamList from "~/ee/teams/components/SkeletonloaderTeamList";
import { ShellMain } from "~/shell/Shell";
import { UpgradeTip } from "~/shell/UpgradeTip";
@@ -92,32 +97,32 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
const forms = queryRes.data?.filtered;
const features = [
{
icon: <Icon name="file-text" className="h-5 w-5 text-orange-500" />,
icon: <FileTextIcon className="h-5 w-5 text-orange-500" />,
title: t("create_your_first_form"),
description: t("create_your_first_form_description"),
},
{
icon: <Icon name="shuffle" className="h-5 w-5 text-lime-500" />,
icon: <ShuffleIcon className="h-5 w-5 text-lime-500" />,
title: t("create_your_first_route"),
description: t("route_to_the_right_person"),
},
{
icon: <Icon name="chart-bar" className="h-5 w-5 text-blue-500" />,
icon: <ChartBarIcon className="h-5 w-5 text-blue-500" />,
title: t("reporting"),
description: t("reporting_feature"),
},
{
icon: <Icon name="circle-check" className="h-5 w-5 text-teal-500" />,
icon: <CircleCheckIcon className="h-5 w-5 text-teal-500" />,
title: t("test_routing_form"),
description: t("test_preview_description"),
},
{
icon: <Icon name="mail" className="h-5 w-5 text-yellow-500" />,
icon: <MailIcon className="h-5 w-5 text-yellow-500" />,
title: t("routing_forms_send_email_owner"),
description: t("routing_forms_send_email_owner_description"),
},
{
icon: <Icon name="download" className="h-5 w-5 text-violet-500" />,
icon: <DownloadIcon className="h-5 w-5 text-violet-500" />,
title: t("download_responses"),
description: t("download_responses_description"),
},
apps/web/app/(use-page-wrapper)/auth/error/page.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import { z } from "zod";
import { IdentityProvider } from "@calcom/prisma/enums";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { XIcon } from "@coss/ui/icons";
import AuthContainer from "@components/ui/AuthContainer";
@@ -61,7 +61,7 @@ const ServerPage = async ({ searchParams }: PageProps) => {
<AuthContainer>
<div>
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<Icon name="x" className="h-6 w-6 text-red-600" />
<XIcon className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx
+2 -2
View File
@@ -3,14 +3,14 @@
import React, { Suspense } from "react";
import { ErrorBoundary } from "@calcom/ui/components/errorBoundary";
import { Icon } from "@calcom/ui/components/icon";
import { LoaderIcon } from "@coss/ui/icons";
export default function TroubleshooterLayout({ children }: { children: React.ReactNode }) {
return (
<>
<div className="flex flex-1 *:flex-1">
<ErrorBoundary>
<Suspense fallback={<Icon name="loader" />}>{children}</Suspense>
<Suspense fallback={<LoaderIcon />}>{children}</Suspense>
</ErrorBoundary>
</div>
</>
apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx
+4 -4
View File
@@ -7,7 +7,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui/components/button";
import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
import { Icon } from "@calcom/ui/components/icon";
import { RefreshCcwIcon, UserPlusIcon, UsersIcon } from "@coss/ui/icons";
import { UpgradeTip } from "~/shell/UpgradeTip";
@@ -22,17 +22,17 @@ export default function UpgradeTipWrapper({ children }: { children: React.ReactN
const features = [
{
icon: <Icon name="users" className="h-5 w-5 text-red-500" />,
icon: <UsersIcon className="h-5 w-5 text-red-500" />,
title: t("view_bookings_across"),
description: t("view_bookings_across_description"),
},
{
icon: <Icon name="refresh-ccw" className="h-5 w-5 text-blue-500" />,
icon: <RefreshCcwIcon className="h-5 w-5 text-blue-500" />,
title: t("identify_booking_trends"),
description: t("identify_booking_trends_description"),
},
{
icon: <Icon name="user-plus" className="h-5 w-5 text-green-500" />,
icon: <UserPlusIcon className="h-5 w-5 text-green-500" />,
title: t("spot_popular_event_types"),
description: t("spot_popular_event_types_description"),
},
apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
+7 -9
View File
@@ -31,6 +31,7 @@ import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { ErrorBoundary } from "@calcom/ui/components/errorBoundary";
import { Icon } from "@calcom/ui/components/icon";
import { ArrowLeftIcon, ChevronDownIcon, ChevronRightIcon } from "@coss/ui/icons";
import type { VerticalTabItemProps } from "@calcom/ui/components/navigation";
import { VerticalTabItem } from "@calcom/ui/components/navigation";
import { Skeleton } from "@calcom/ui/components/skeleton";
@@ -475,10 +476,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
href="/event-types"
className="hover:bg-subtle todesktop:mt-10 [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4 transition"
data-testid={`vertical-tab-${name}`}>
<Icon
name="arrow-left"
className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0"
/>
<ArrowLeftIcon className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
<Skeleton title={name} as="p" className="min-h-4 max-w-36 truncate" loadingClassName="ms-3">
{name}
</Skeleton>
@@ -602,9 +600,9 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
}`}>
<div className="me-3">
{teamMenuState[index].teamMenuOpen ? (
<Icon name="chevron-down" className="h-4 w-4" />
<ChevronDownIcon className="h-4 w-4" />
) : (
<Icon name="chevron-right" className="h-4 w-4" />
<ChevronRightIcon className="h-4 w-4" />
)}
</div>
{}
@@ -949,9 +947,9 @@ const SettingsSidebarContainer = ({
}`}>
<div className="me-3">
{otherTeamMenuState[index].teamMenuOpen ? (
<Icon name="chevron-down" className="h-4 w-4" />
<ChevronDownIcon className="h-4 w-4" />
) : (
<Icon name="chevron-right" className="h-4 w-4" />
<ChevronRightIcon className="h-4 w-4" />
)}
</div>
{}
@@ -1036,7 +1034,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
<button
className="hover:bg-emphasis flex items-center space-x-2 rounded-md px-3 py-1 rtl:space-x-reverse"
onClick={() => router.back()}>
<Icon name="arrow-left" className="text-default h-4 w-4" />
<ArrowLeftIcon className="text-default h-4 w-4" />
<p className="text-emphasis font-semibold">{t("settings")}</p>
</button>
</div>
apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx
+3 -4
View File
@@ -11,8 +11,8 @@ import {
import { useLocale } from "@calcom/lib/hooks/useLocale";
import classNames from "@calcom/ui/classNames";
import { Checkbox, Label } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { Tooltip } from "@calcom/ui/components/tooltip";
import { ChevronRightIcon, InfoIcon } from "@coss/ui/icons";
import { usePermissions } from "./usePermissions";
@@ -98,8 +98,7 @@ export function AdvancedPermissionGroup({
}
}}>
<div className="flex items-center gap-1.5" onClick={() => setIsExpanded(!isExpanded)}>
<Icon
name="chevron-right"
<ChevronRightIcon
className={classNames(
"h-4 w-4 transition-transform",
isExpanded && !isAllResources ? "rotate-90" : ""
@@ -173,7 +172,7 @@ export function AdvancedPermissionGroup({
</span>
{isAutoEnabled && (
<Tooltip content={t("read_permission_auto_enabled_tooltip")}>
<Icon name="info" className="text-muted-foreground h-3 w-3" />
<InfoIcon className="text-muted-foreground h-3 w-3" />
</Tooltip>
)}
</div>
apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx
+5 -5
View File
@@ -7,8 +7,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { LockIcon, ShieldCheckIcon, ShieldIcon, UsersIcon } from "@coss/ui/icons";
import { FingerprintAnimation } from "./FingerprintAnimation";
@@ -59,7 +59,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac
<div className="bg-subtle border-subtle w-full stack-y-px overflow-hidden rounded-xl border">
<div className="bg-default flex gap-3 p-3">
<div className="bg-subtle flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
<Icon name="shield-check" className="text-subtle h-5 w-5" />
<ShieldCheckIcon className="text-subtle h-5 w-5" />
</div>
<div className="flex flex-col gap-1">
<p className="text-emphasis text-sm font-semibold">{t("pbac_opt_in_custom_roles_title")}</p>
@@ -69,7 +69,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac
<div className="bg-default flex gap-3 p-3">
<div className="bg-subtle flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
<Icon name="lock" className="text-subtle h-5 w-5" />
<LockIcon className="text-subtle h-5 w-5" />
</div>
<div className="flex flex-col gap-1">
<p className="text-emphasis text-sm font-semibold">
@@ -81,7 +81,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac
<div className="bg-default flex gap-3 p-3">
<div className="bg-subtle flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
<Icon name="users" className="text-subtle h-5 w-5" />
<UsersIcon className="text-subtle h-5 w-5" />
</div>
<div className="flex flex-col gap-1">
<p className="text-emphasis text-sm font-semibold">
@@ -93,7 +93,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac
<div className="bg-default flex gap-3 p-3">
<div className="bg-subtle flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
<Icon name="shield" className="text-subtle h-5 w-5" />
<ShieldIcon className="text-subtle h-5 w-5" />
</div>
<div className="flex flex-col gap-1">
<p className="text-emphasis text-sm font-semibold">
apps/web/components/AddToHomescreen.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/components/icon";
import { XIcon } from "@coss/ui/icons";
export default function AddToHomescreen() {
const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
type="button"
className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
<span className="sr-only">{t("dismiss")}</span>
<Icon name="x" className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
<XIcon className="text-inverted h-6 w-6 dark:text-white" />
</button>
</div>
</div>
apps/web/components/EnterprisePage.tsx
+7 -7
View File
@@ -3,7 +3,7 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui/components/button";
import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
import { Icon } from "@calcom/ui/components/icon";
import { ChartBarIcon, CreditCardIcon, GlobeIcon, LockIcon, PaintbrushIcon, UsersIcon } from "@coss/ui/icons";
import Shell from "~/shell/Shell";
import { UpgradeTip } from "~/shell/UpgradeTip";
@@ -13,32 +13,32 @@ export default function EnterprisePage() {
const features = [
{
icon: <Icon name="globe" className="h-5 w-5 text-red-500" />,
icon: <GlobeIcon className="h-5 w-5 text-red-500" />,
title: t("branded_subdomain"),
description: t("branded_subdomain_description"),
},
{
icon: <Icon name="chart-bar" className="h-5 w-5 text-blue-500" />,
icon: <ChartBarIcon className="h-5 w-5 text-blue-500" />,
title: t("org_insights"),
description: t("org_insights_description"),
},
{
icon: <Icon name="paintbrush" className="h-5 w-5 text-pink-500" />,
icon: <PaintbrushIcon className="h-5 w-5 text-pink-500" />,
title: t("extensive_whitelabeling"),
description: t("extensive_whitelabeling_description"),
},
{
icon: <Icon name="users" className="h-5 w-5 text-orange-500" />,
icon: <UsersIcon className="h-5 w-5 text-orange-500" />,
title: t("unlimited_teams"),
description: t("unlimited_teams_description"),
},
{
icon: <Icon name="credit-card" className="h-5 w-5 text-green-500" />,
icon: <CreditCardIcon className="h-5 w-5 text-green-500" />,
title: t("unified_billing"),
description: t("advanced_managed_events_description"),
},
{
icon: <Icon name="lock" className="h-5 w-5 text-purple-500" />,
icon: <LockIcon className="h-5 w-5 text-purple-500" />,
title: t("advanced_managed_events"),
description: t("advanced_managed_events_description"),
},
apps/web/components/apps/AppPage.tsx
+16 -8
View File
@@ -19,7 +19,15 @@ import type { App as AppType } from "@calcom/types/App";
import classNames from "@calcom/ui/classNames";
import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import {
BookOpenIcon,
CircleAlertIcon,
ExternalLinkIcon,
FileIcon,
FlagIcon,
MailIcon,
ShieldIcon,
} from "@coss/ui/icons";
import { SkeletonButton, SkeletonText } from "@calcom/ui/components/skeleton";
import { showToast } from "@calcom/ui/components/toast";
@@ -385,7 +393,7 @@ export const AppPage = ({
<div className="items-start space-x-2.5">
<div className="text-info flex items-start">
<div>
<Icon name="circle-alert" className="mr-2 mt-1 font-semibold" />
<CircleAlertIcon className="mr-2 mt-1 font-semibold" />
</div>
<div>
<span className="font-semibold">{t("msteams_calendar_warning_body")}</span>
@@ -445,7 +453,7 @@ export const AppPage = ({
rel="noreferrer"
className="text-emphasis text-sm font-normal no-underline hover:underline"
href={docs}>
<Icon name="book-open" className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
<BookOpenIcon className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
{t("documentation")}
</a>
</li>
@@ -457,7 +465,7 @@ export const AppPage = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={website}>
<Icon name="external-link" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
<ExternalLinkIcon className="text-subtle -mt-px mr-1 inline h-4 w-4" />
{website.replace("https://", "")}
</a>
</li>
@@ -469,7 +477,7 @@ export const AppPage = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={`mailto:${email}`}>
<Icon name="mail" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
<MailIcon className="text-subtle -mt-px mr-1 inline h-4 w-4" />
{email}
</a>
@@ -482,7 +490,7 @@ export const AppPage = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={tos}>
<Icon name="file" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
<FileIcon className="text-subtle -mt-px mr-1 inline h-4 w-4" />
{t("terms_of_service")}
</a>
</li>
@@ -494,7 +502,7 @@ export const AppPage = ({
rel="noreferrer"
className="text-emphasis font-normal no-underline hover:underline"
href={privacy}>
<Icon name="shield" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
<ShieldIcon className="text-subtle -mt-px mr-1 inline h-4 w-4" />
{t("privacy_policy")}
</a>
</li>
@@ -505,7 +513,7 @@ export const AppPage = ({
{t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
</span>
<a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
<Icon name="flag" className="inline h-3 w-3" /> {t("report_app")}
<FlagIcon className="inline h-3 w-3" /> {t("report_app")}
</a>
</div>
</div>
apps/web/components/apps/alby/Setup.tsx
+2 -2
View File
@@ -12,8 +12,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { InfoIcon } from "@coss/ui/icons";
export default function AlbySetup(props: IAlbySetupProps) {
const params = useCompatSearchParams();
@@ -165,7 +165,7 @@ function AlbySetupPage(props: IAlbySetupProps) {
{/* TODO: remove when invoices are generated using user identifier */}
<div className="mt-4 rounded bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-950 dark:text-blue-300">
<Icon name="info" className="mb-0.5 inline-flex h-4 w-4" /> Your Alby lightning address will be
<InfoIcon className="mb-0.5 inline-flex h-4 w-4" /> Your Alby lightning address will be
used to generate invoices. If you update your lightning address, please disconnect and setup the
Alby app again.
</div>
apps/web/components/apps/btcpayserver/Setup.tsx
+2 -2
View File
@@ -16,8 +16,8 @@ import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { LoaderIcon } from "@coss/ui/icons";
export default function BTCPaySetup(props: IBTCPaySetupProps) {
const params = useCompatSearchParams();
@@ -324,7 +324,7 @@ function BTCPaySetupPage(props: IBTCPaySetupProps) {
disabled={loading || validating || !updatable}>
{loading ? (
<>
<Icon name="loader" className="mr-2 animate-spin" />
<LoaderIcon className="mr-2 animate-spin" />
{t("connecting")}
</>
) : (
apps/web/components/apps/hitpay/Setup.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { Switch } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { InfoIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
export default function HitPaySetup(props: IHitPaySetupProps) {
@@ -205,7 +205,7 @@ function HitPaySetupPage(props: IHitPaySetupProps) {
{showContent ? (
<div className="flex w-full w-full max-w-[43em] flex-col items-center justify-center stack-y-4 p-4 lg:stack-y-5">
<div className="rounded bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-950 dark:text-blue-300">
<Icon name="info" className="mb-0.5 inline-flex h-4 w-4" /> Create or connect to an existing
<InfoIcon className="mb-0.5 inline-flex h-4 w-4" /> Create or connect to an existing
HitPay account to receive payments for your paid bookings.
</div>
apps/web/components/apps/ics-feedcalendar/Setup.tsx
+3 -3
View File
@@ -8,7 +8,7 @@ import { Alert } from "@calcom/ui/components/alert";
import { Button } from "@calcom/ui/components/button";
import { Form } from "@calcom/ui/components/form";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { PlusIcon, TrashIcon } from "@coss/ui/icons";
export default function ICSFeedSetup() {
const { t } = useLocale();
@@ -78,7 +78,7 @@ export default function ICSFeedSetup() {
type="button"
className="mb-2 h-min text-sm"
onClick={() => setUrls((urls) => urls.filter((_, ii) => i !== ii))}>
<Icon name="trash" size={16} />
<TrashIcon size={16} />
</button>
) : null}
</div>
@@ -91,7 +91,7 @@ export default function ICSFeedSetup() {
onClick={() => {
setUrls((urls) => urls.concat(""));
}}>
{t("add")} <Icon className="inline" name="plus" size={16} />
{t("add")} <PlusIcon className="inline" size={16} />
</button>
{errorMessage && (
apps/web/components/apps/make/Setup.tsx
+2 -2
View File
@@ -8,9 +8,9 @@ import ServerTrans from "@calcom/lib/components/ServerTrans";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { Tooltip } from "@calcom/ui/components/tooltip";
import { ClipboardIcon } from "@coss/ui/icons";
const MAKE = "make";
@@ -164,7 +164,7 @@ const CopyApiKey = ({ apiKey }: { apiKey: string }) => {
}}
type="button"
className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
<Icon name="clipboard" className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
<ClipboardIcon className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>
apps/web/components/apps/paypal/Setup.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { CircleAlertIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
export default function PayPalSetup() {
@@ -91,7 +91,7 @@ export default function PayPalSetup() {
</p>
<p className="text-lgf text-default mt-5 inline-flex font-bold">
<Icon name="circle-alert" className="mr-2 mt-1 h-4 w-4" /> Important requirements:
<CircleAlertIcon className="mr-2 mt-1 h-4 w-4" /> Important requirements:
</p>
<ul className="text-default ml-1 mt-2 list-disc pl-2">
<li>Paypal Business account</li>
@@ -145,7 +145,7 @@ export default function PayPalSetup() {
<li>You should be all setup after this.</li>
</ol>
<p className="text-default mt-5 inline-flex font-bold">
<Icon name="circle-alert" className="mr-2 mt-1 h-4 w-4" />
<CircleAlertIcon className="mr-2 mt-1 h-4 w-4" />
Reminder:
</p>
<p className="text-default mt-2">
apps/web/components/apps/routing-forms/Header.tsx
+6 -6
View File
@@ -9,7 +9,7 @@ import type { RoutingFormWithResponseCount } from "@calcom/routing-forms/types/t
import { Button } from "@calcom/ui/components/button";
import { DropdownMenuSeparator } from "@calcom/ui/components/dropdown";
import { ToggleGroup } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { MenuIcon, PencilIcon, WaypointsIcon } from "@coss/ui/icons";
import { Tooltip } from "@calcom/ui/components/tooltip";
import { FormAction, FormActionsDropdown } from "./FormActions";
@@ -298,7 +298,7 @@ export function Header({
color="minimal"
onClick={() => setIsEditing(true)}
CustomStartIcon={
<Icon name="pencil" className="text-subtle group-hover:text-default h-3 w-3" />
<PencilIcon className="text-subtle group-hover:text-default h-3 w-3" />
}>
<span className="sr-only">Edit</span>
</Button>
@@ -319,13 +319,13 @@ export function Header({
{
value: "form-edit",
label: <span className="sr-only sm:not-sr-only">{t("form")}</span>,
iconLeft: <Icon name="menu" className="h-3 w-3" />,
iconLeft: <MenuIcon className="h-3 w-3" />,
dataTestId: "toggle-group-item-form-edit",
},
{
value: "route-builder",
label: <span className="sr-only sm:not-sr-only">{t("routing")}</span>,
iconLeft: <Icon name="waypoints" className="h-3 w-3" />,
iconLeft: <WaypointsIcon className="h-3 w-3" />,
},
]}
/>
@@ -355,12 +355,12 @@ export function Header({
{
value: "form-edit",
label: <span className="sr-only sm:not-sr-only">{t("form")}</span>,
iconLeft: <Icon name="menu" className="h-3 w-3" />,
iconLeft: <MenuIcon className="h-3 w-3" />,
},
{
value: "route-builder",
label: <span className="sr-only sm:not-sr-only">{t("routing")}</span>,
iconLeft: <Icon name="waypoints" className="h-3 w-3" />,
iconLeft: <WaypointsIcon className="h-3 w-3" />,
},
]}
/>
apps/web/components/apps/wipemycalother/confirmDialog.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import logger from "@calcom/lib/logger";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
import { Icon } from "@calcom/ui/components/icon";
import { ClockIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
interface IConfirmDialogWipe {
@@ -83,7 +83,7 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
<DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
<div className="flex flex-row space-x-3">
<div className="flex h-10 w-10 shrink-0 justify-center rounded-full bg-[#FAFAFA]">
<Icon name="clock" className="m-auto h-5 w-5" />
<ClockIcon className="m-auto h-5 w-5" />
</div>
<div className="pt-1">
<DialogHeader title="Wipe My Calendar" />
apps/web/components/booking/CancelBooking.tsx
+3 -3
View File
@@ -10,8 +10,8 @@ import type { RecurringEvent } from "@calcom/types/Calendar";
import classNames from "@calcom/ui/classNames";
import { Button } from "@calcom/ui/components/button";
import { Label, Select, TextArea, CheckboxField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { InfoIcon, XIcon } from "@coss/ui/icons";
interface InternalNotePresetsSelectProps {
internalNotePresets: { id: number; name: string }[];
@@ -182,7 +182,7 @@ export default function CancelBooking(props: Props) {
{error && !props.showErrorAsToast && (
<div className="mt-8">
<div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<Icon name="x" className="h-6 w-6 text-red-600" />
<XIcon className="h-6 w-6 text-red-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
@@ -230,7 +230,7 @@ export default function CancelBooking(props: Props) {
/>
{isCancellationUserHost ? (
<div className="-mt-2 mb-4 flex items-center gap-2">
<Icon name="info" className="text-subtle h-4 w-4" />
<InfoIcon className="text-subtle h-4 w-4" />
<p className="text-subtle text-sm leading-none">
{t("notify_attendee_cancellation_reason_warning")}
</p>
apps/web/components/dialog/AddGuestsDialog.tsx
+3 -3
View File
@@ -8,8 +8,8 @@ import { trpc } from "@calcom/trpc/react";
import { MultiEmail } from "@calcom/ui/components/address";
import { Button } from "@calcom/ui/components/button";
import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { TriangleAlertIcon, UserPlusIcon } from "@coss/ui/icons";
interface IAddGuestsDialog {
isOpenDialog: boolean;
@@ -59,7 +59,7 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
<DialogContent enableOverflow>
<div className="flex flex-row md:space-x-3">
<div className="bg-subtle hidden h-10 w-10 shrink-0 justify-center rounded-full md:flex">
<Icon name="user-plus" className="m-auto h-6 w-6" />
<UserPlusIcon className="m-auto h-6 w-6" />
</div>
<div className="w-full md:pt-1">
<DialogHeader title={t("additional_guests")} />
@@ -75,7 +75,7 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
{isInvalidEmail && (
<div className="my-4 flex text-sm text-red-700">
<div className="shrink-0">
<Icon name="triangle-alert" className="h-5 w-5" />
<TriangleAlertIcon className="h-5 w-5" />
</div>
<div className="ml-3">
<p className="font-medium">{t("emails_must_be_unique_valid")}</p>
apps/web/components/dialog/ChargeCardDialog.tsx
+3 -3
View File
@@ -6,8 +6,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { CreditCardIcon, TriangleAlertIcon } from "@coss/ui/icons";
interface IRescheduleDialog {
isOpenDialog: boolean;
@@ -45,7 +45,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
<DialogContent>
<div className="flex flex-row space-x-3">
<div className=" bg-subtle flex h-10 w-10 shrink-0 justify-center rounded-full">
<Icon name="credit-card" className="m-auto h-6 w-6" />
<CreditCardIcon className="m-auto h-6 w-6" />
</div>
<div className="pt-1">
<DialogHeader title={t("charge_card")} />
@@ -53,7 +53,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
{chargeError && (
<div className="mt-4 flex text-red-500">
<Icon name="triangle-alert" className="mr-2 h-5 w-5 " aria-hidden="true" />
<TriangleAlertIcon className="mr-2 h-5 w-5" />
<p className="text-sm">{chargeError}</p>
</div>
)}
apps/web/components/dialog/EditLocationDialog.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
import { Form, Input } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { MapPinIcon } from "@coss/ui/icons";
import { QueryCell } from "../../lib/QueryCell";
@@ -258,7 +258,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
}}>
<div className="flex flex-row md:space-x-3">
<div className="bg-subtle hidden h-10 w-10 shrink-0 justify-center rounded-full md:flex">
<Icon name="map-pin" className="m-auto h-6 w-6" />
<MapPinIcon className="m-auto h-6 w-6" />
</div>
<div className="w-full md:pt-1">
<DialogHeader title={t("edit_location")} />
apps/web/components/dialog/ReassignDialog.tsx
+3 -3
View File
@@ -20,9 +20,9 @@ import {
ConfirmationDialogContent,
} from "@calcom/ui/components/dialog";
import { TextAreaField, Form, Label, Input } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { RadioAreaGroup as RadioArea } from "@calcom/ui/components/radio";
import { showToast } from "@calcom/ui/components/toast";
import { CheckIcon, LoaderIcon } from "@coss/ui/icons";
enum ReassignType {
AUTO = "auto",
@@ -287,7 +287,7 @@ export const ReassignDialog = ({
{isFetching && teamMemberOptions.length === 0 ? (
<div className="flex h-full items-center justify-center">
<div className="flex flex-col items-center gap-2">
<Icon name="loader" className="text-subtle h-5 w-5 animate-spin" />
<LoaderIcon className="text-subtle h-5 w-5 animate-spin" />
<p className="text-subtle text-sm">{t("loading")}</p>
</div>
</div>
@@ -328,7 +328,7 @@ export const ReassignDialog = ({
<span className="text-emphasis w-full text-sm">{member.label}</span>
{watchedTeamMemberId === member.value && (
<div className="place-self-end pr-2">
<Icon name="check" className="text-emphasis h-4 w-4" />
<CheckIcon className="text-emphasis h-4 w-4" />
</div>
)}
</div>
apps/web/components/dialog/RescheduleDialog.tsx
+2 -2
View File
@@ -7,8 +7,8 @@ import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
import { TextArea } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { ClockIcon } from "@coss/ui/icons";
interface IRescheduleDialog {
isOpenDialog: boolean;
@@ -39,7 +39,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
<DialogContent enableOverflow data-testid="reschedule-dialog">
<div className="flex flex-row md:space-x-3">
<div className="bg-subtle hidden h-10 w-10 shrink-0 justify-center rounded-full md:flex">
<Icon name="clock" className="m-auto h-6 w-6" />
<ClockIcon className="m-auto h-6 w-6" />
</div>
<div className="w-full md:pt-1">
<DialogHeader title={t("send_reschedule_request")} />
apps/web/components/getting-started/components/AppConnectionItem.tsx
+3 -3
View File
@@ -10,8 +10,8 @@ import { trpc } from "@calcom/trpc/react";
import type { App } from "@calcom/types/App";
import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { ArrowRightIcon, CircleAlertIcon } from "@coss/ui/icons";
interface IAppConnectionItem {
title: string;
@@ -79,7 +79,7 @@ const AppConnectionItem = (props: IAppConnectionItem) => {
<div className="items-start space-x-2.5">
<div className="flex items-start">
<div>
<Icon name="circle-alert" className="mr-2 mt-1 font-semibold" />
<CircleAlertIcon className="mr-2 mt-1 font-semibold" />
</div>
<div>
<span className="text-xs font-semibold">
@@ -99,7 +99,7 @@ const AppConnectionItem = (props: IAppConnectionItem) => {
<span className="mr-1">
{t("connect_app", { dependencyName: dependency.name })}
</span>
<Icon name="arrow-right" className="inline-block h-3 w-3" />
<ArrowRightIcon className="inline-block h-3 w-3" />
</Link>
</>
</div>
apps/web/components/security/TwoFactorModalHeader.tsx
+2 -2
View File
@@ -1,10 +1,10 @@
import { Icon } from "@calcom/ui/components/icon";
import { ShieldIcon } from "@coss/ui/icons";
const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
return (
<div className="mb-4 sm:flex sm:items-start">
<div className="bg-brand/5 text-brandcontrast dark:bg-darkmodebrand/5 dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
<Icon name="shield" className="text-inverted h-6 w-6" />
<ShieldIcon className="text-inverted h-6 w-6" />
</div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
+3 -3
View File
@@ -5,8 +5,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants/permissions";
import { Button } from "@calcom/ui/components/button";
import { Label, TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { Tooltip } from "@calcom/ui/components/tooltip";
import { InfoIcon } from "@coss/ui/icons";
type OAuthClientFormProps = {
defaultValues?: Partial<FormValues>;
@@ -227,7 +227,7 @@ export const OAuthClientForm = ({
className="max-w-[400px] whitespace-normal"
content="If enabled and the managed user has calendar connected, an event in the calendar will be created. By default true. Disable it if you want to create events in the calendar manually.">
<div className="ml-1">
<Icon name="info" className="h-4 w-4 text-gray-500" aria-hidden="true" />
<InfoIcon className="h-4 w-4 text-gray-500" />
</div>
</Tooltip>
</div>
@@ -252,7 +252,7 @@ export const OAuthClientForm = ({
className="max-w-[400px] whitespace-normal"
content="If enabled, when creating a managed user the managed user will have 4 default event types: 30 and 60 minutes without Cal video, 30 and 60 minutes with Cal video. Leave this disabled if you want to create a managed user and then manually create event types for the user.">
<div className="ml-1">
<Icon name="info" className="h-4 w-4 text-gray-500" aria-hidden="true" />
<InfoIcon className="h-4 w-4 text-gray-500" />
</div>
</Tooltip>
</div>
apps/web/components/setup/EnterpriseLicense.tsx
+3 -3
View File
@@ -12,7 +12,7 @@ import { trpc } from "@calcom/trpc/react";
import classNames from "@calcom/ui/classNames";
import { Button } from "@calcom/ui/components/button";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon, LoaderIcon } from "@coss/ui/icons";
type EnterpriseLicenseFormValues = {
licenseKey: string;
@@ -122,9 +122,9 @@ const EnterpriseLicense = (
)}
addOnSuffix={
checkLicenseLoading ? (
<Icon name="loader" className="h-5 w-5 animate-spin" />
<LoaderIcon className="h-5 w-5 animate-spin" />
) : errors.licenseKey === undefined && isDirty ? (
<Icon name="check" className="h-5 w-5 text-green-700" />
<CheckIcon className="h-5 w-5 text-green-700" />
) : undefined
}
color={errors.licenseKey ? "warn" : ""}
apps/web/components/setup/LicenseSelection.tsx
+3 -3
View File
@@ -13,7 +13,7 @@ import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon, LoaderIcon } from "@coss/ui/icons";
type LicenseSelectionFormValues = {
licenseKey: string;
@@ -180,9 +180,9 @@ const LicenseSelection = (
)}
addOnSuffix={
checkLicenseLoading ? (
<Icon name="loader" className="h-5 w-5 animate-spin" />
<LoaderIcon className="h-5 w-5 animate-spin" />
) : licenseValidation?.valid && licenseTouched ? (
<Icon name="check" className="h-5 w-5 text-green-700" />
<CheckIcon className="h-5 w-5 text-green-700" />
) : undefined
}
color={errors.licenseKey ? "warn" : ""}
apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+3 -2
View File
@@ -20,6 +20,7 @@ import { Button } from "@calcom/ui/components/button";
import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
import { Label, Input } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon, ExternalLinkIcon } from "@coss/ui/icons";
import type { TRPCClientErrorLike } from "@trpc/client";
@@ -251,7 +252,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
<></>
)}
{!isInputUsernamePremium && usernameIsAvailable ? (
<Icon name="check" className="mt-[2px] h-4 w-4" />
<CheckIcon className="mt-[2px] h-4 w-4" />
) : (
<></>
)}
@@ -307,7 +308,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
data-testid="go-to-billing"
href={paymentLink}>
<>
{t("go_to_stripe_billing")} <Icon name="external-link" className="ml-1 h-4 w-4" />
{t("go_to_stripe_billing")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
</>
</Button>
)}
apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ import type { AppRouter } from "@calcom/trpc/types/server/routers/_app";
import { Button } from "@calcom/ui/components/button";
import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon } from "@coss/ui/icons";
import { Tooltip } from "@calcom/ui/components/tooltip";
import type { TRPCClientErrorLike } from "@trpc/client";
@@ -143,7 +143,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
<div className="absolute right-[2px] top-6 flex h-7 flex-row">
<span className={classNames("bg-default mx-0 p-3")}>
{usernameIsAvailable ? (
<Icon name="check" className="relative bottom-[6px] h-4 w-4" />
<CheckIcon className="relative bottom-[6px] h-4 w-4" />
) : (
<></>
)}
apps/web/components/ui/form/DatePicker.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import "react-date-picker/dist/DatePicker.css";
import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
import classNames from "@calcom/ui/classNames";
import { Icon } from "@calcom/ui/components/icon";
import { CalendarIcon } from "@coss/ui/icons";
type Props = {
date: Date;
@@ -22,7 +22,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
className
)}
clearIcon={null}
calendarIcon={<Icon name="calendar" className="text-subtle h-5 w-5" />}
calendarIcon={<CalendarIcon className="text-subtle h-5 w-5" />}
value={date}
minDate={minDate}
disabled={disabled}
apps/web/modules/apps/apps-view.tsx
+2 -2
View File
@@ -12,7 +12,7 @@ import type { AppCategories } from "@calcom/prisma/enums";
import type { AppFrontendPayload } from "@calcom/types/App";
import classNames from "@calcom/ui/classNames";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { SearchIcon } from "@coss/ui/icons";
import type { HorizontalTabItemProps } from "@calcom/ui/components/navigation";
import { HorizontalTabs } from "@calcom/ui/components/navigation";
@@ -39,7 +39,7 @@ function AppsSearch({
const { t } = useLocale();
return (
<TextField
addOnLeading={<Icon name="search" className="text-subtle h-4 w-4" />}
addOnLeading={<SearchIcon className="text-subtle h-4 w-4" />}
addOnClassname="!border-muted"
containerClassName={classNames("focus:ring-offset-0! m-1", className)}
type="search"
apps/web/modules/apps/categories/categories-view.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import Link from "next/link";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
import { Icon } from "@calcom/ui/components/icon";
import { ArrowLeftIcon, ArrowRightIcon } from "@coss/ui/icons";
import { SkeletonText } from "@calcom/ui/components/skeleton";
import type { getServerSideProps } from "@lib/apps/categories/getServerSideProps";
@@ -22,7 +22,7 @@ export default function Apps({ categories }: PageProps) {
<Link
href="/apps"
className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
<Icon name="arrow-left" className="h-4 w-4" />
<ArrowLeftIcon className="h-4 w-4" />
{isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
</Link>
</div>
@@ -38,7 +38,7 @@ export default function Apps({ categories }: PageProps) {
<h3 className="font-medium capitalize">{category.name}</h3>
<p className="text-subtle text-sm">
{t("number_apps", { count: category.count })}{" "}
<Icon name="arrow-right" className="inline-block h-4 w-4" />
<ArrowRightIcon className="inline-block h-4 w-4" />
</p>
</div>
</Link>
apps/web/modules/apps/components/AdminAppsList.tsx
+2 -2
View File
@@ -29,8 +29,8 @@ import { EmptyScreen } from "@calcom/ui/components/empty-screen";
import { Form } from "@calcom/ui/components/form";
import { TextField } from "@calcom/ui/components/form";
import { Switch } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { List } from "@calcom/ui/components/list";
import { PencilIcon } from "@coss/ui/icons";
import { SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
import { showToast } from "@calcom/ui/components/toast";
@@ -92,7 +92,7 @@ const IntegrationContainer = ({
<div className="flex items-center justify-self-end">
{app.keys && (
<Button color="secondary" className="mr-2" onClick={() => showKeyModal()}>
<Icon name="pencil" />
<PencilIcon />
</Button>
)}
apps/web/modules/apps/components/AllApps.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ import type { AppFrontendPayload as App } from "@calcom/types/App";
import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
import classNames from "@calcom/ui/classNames";
import { EmptyScreen } from "@calcom/ui/components/empty-screen";
import { Icon } from "@calcom/ui/components/icon";
import { ChevronLeftIcon, ChevronRightIcon } from "@coss/ui/icons";
import { AppCard } from "./AppCard";
@@ -90,7 +90,7 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
{leftVisible && (
<button onClick={handleLeft} className="absolute bottom-0 flex lg:left-1/2">
<div className="bg-default flex h-12 w-5 items-center justify-end">
<Icon name="chevron-left" className="text-subtle h-4 w-4" />
<ChevronLeftIcon className="text-subtle h-4 w-4" />
</div>
<div className="to-default flex h-12 w-5 bg-linear-to-l from-transparent" />
</button>
@@ -131,7 +131,7 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
<button onClick={handleRight} className="absolute bottom-0 right-0 flex ">
<div className="to-default flex h-12 w-5 bg-linear-to-r from-transparent" />
<div className="bg-default flex h-12 w-5 items-center justify-end">
<Icon name="chevron-right" className="text-subtle h-4 w-4" />
<ChevronRightIcon className="text-subtle h-4 w-4" />
</div>
</button>
)}
apps/web/modules/apps/components/Categories.tsx
+2 -2
View File
@@ -2,8 +2,8 @@ import Image from "next/image";
import Link from "next/link";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/components/icon";
import { SkeletonText } from "@calcom/ui/components/skeleton";
import { ArrowRightIcon } from "@coss/ui/icons";
import { Slider } from "./Slider";
@@ -52,7 +52,7 @@ export function AppStoreCategories({
)}
<p className="text-subtle pt-2 text-sm font-medium">
{isLocaleReady ? t("number_apps", { count: category.count }) : <SkeletonText invisible />}{" "}
<Icon name="arrow-right" className="inline-block h-4 w-4" />
<ArrowRightIcon className="inline-block h-4 w-4" />
</p>
</div>
</Link>
apps/web/modules/apps/components/Slider.tsx
+3 -3
View File
@@ -8,8 +8,8 @@ import type { ComponentProps, FC } from "react";
import { useEffect, useRef } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/components/icon";
import { SkeletonText } from "@calcom/ui/components/skeleton";
import { ArrowLeftIcon, ArrowRightIcon } from "@coss/ui/icons";
const SliderButton: FC<ComponentProps<"button">> = (props) => {
const { children, ...rest } = props;
@@ -64,10 +64,10 @@ export const Slider = <T extends string | unknown>({
)}
<div className="glide__arrows ml-auto flex items-center gap-x-1" data-glide-el="controls">
<SliderButton data-glide-dir="<">
<Icon name="arrow-left" className="h-5 w-5" />
<ArrowLeftIcon className="h-5 w-5" />
</SliderButton>
<SliderButton data-glide-dir=">">
<Icon name="arrow-right" className="h-5 w-5" />
<ArrowRightIcon className="h-5 w-5" />
</SliderButton>
</div>
</div>
apps/web/modules/auth/logout-view.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
import { WEBSITE_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon } from "@coss/ui/icons";
import AuthContainer from "@components/ui/AuthContainer";
@@ -44,7 +44,7 @@ export function Logout(props: PageProps) {
<AuthContainer showLogo>
<div className="mb-4">
<div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<Icon name="check" className="h-6 w-6 text-green-600" />
<CheckIcon className="h-6 w-6 text-green-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
apps/web/modules/auth/oauth2/authorize-view.tsx
+3 -3
View File
@@ -13,7 +13,7 @@ import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import { Avatar } from "@calcom/ui/components/avatar";
import { Button } from "@calcom/ui/components/button";
import { Select } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { InfoIcon, PlusIcon } from "@coss/ui/icons";
import { Tooltip } from "@calcom/ui/components/tooltip";
export function Authorize() {
@@ -147,7 +147,7 @@ export function Authorize() {
<div className="flex justify-center items-center">
<Avatar
alt=""
fallback={<Icon name="plus" className="w-6 h-6 text-subtle" />}
fallback={<PlusIcon className="w-6 h-6 text-subtle" />}
className="items-center"
imageSrc={client.logo}
size="lg"
@@ -231,7 +231,7 @@ export function Authorize() {
</ul>
<div className="flex p-3 mt-8 mb-8 rounded-md bg-subtle">
<div>
<Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
<InfoIcon className="mr-1 mt-0.5 h-4 w-4" />
</div>
<div className="ml-1">
<div className="mb-1 text-sm font-medium">
apps/web/modules/auth/platform/authorize-view.tsx
+4 -4
View File
@@ -8,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants/permissions";
import { Avatar } from "@calcom/ui/components/avatar";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { InfoIcon, PlusIcon } from "@coss/ui/icons";
import { hasPermission } from "../../../../../packages/platform/utils/permissions";
@@ -67,7 +67,7 @@ export default function Authorize() {
{client.logo ? (
<Avatar
alt=""
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
fallback={<PlusIcon className="text-subtle h-6 w-6" />}
className="items-center"
imageSrc={client.logo}
size="lg"
@@ -75,7 +75,7 @@ export default function Authorize() {
) : (
<Avatar
alt=""
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
fallback={<PlusIcon className="text-subtle h-6 w-6" />}
className="items-center"
imageSrc="/cal-com-icon.svg"
size="lg"
@@ -98,7 +98,7 @@ export default function Authorize() {
<ul className="stack-y-4 text-sm text-black">{permissions}</ul>
<div className="bg-subtle mb-8 mt-8 flex rounded-md p-3">
<div>
<Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
<InfoIcon className="mr-1 mt-0.5 h-4 w-4" />
</div>
<div className="ml-1 ">
<div className="mb-1 text-sm font-medium">
apps/web/modules/auth/verify-view.tsx
+10 -11
View File
@@ -1,19 +1,18 @@
"use client";
import { motion } from "framer-motion";
import { signIn } from "next-auth/react";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import z from "zod";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
import classNames from "@calcom/ui/classNames";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { MailOpenIcon, TriangleAlertIcon } from "@coss/ui/icons";
import { motion } from "framer-motion";
import { usePathname, useRouter } from "next/navigation";
import { signIn } from "next-auth/react";
import { useEffect, useRef, useState } from "react";
import z from "zod";
async function sendVerificationLogin(email: string, username: string, t: (key: string) => string) {
await signIn("email", {
@@ -59,7 +58,7 @@ const querySchema = z.object({
const PaymentFailedIcon = () => (
<div className="rounded-full bg-orange-900 p-3">
<Icon name="triangle-alert" className="h-6 w-6 shrink-0 p-0.5 font-extralight text-orange-100" />
<TriangleAlertIcon className="h-6 w-6 shrink-0 p-0.5 font-extralight text-orange-100" />
</div>
);
@@ -106,9 +105,9 @@ const PaymentSuccess = () => (
</div>
);
const MailOpenIcon = () => (
const MailOpenIconWrapper = () => (
<div className="bg-default rounded-full p-3">
<Icon name="mail-open" className="text-emphasis h-12 w-12 shrink-0 p-0.5 font-extralight" />
<MailOpenIcon className="text-emphasis h-12 w-12 shrink-0 p-0.5 font-extralight" />
</div>
);
@@ -170,7 +169,7 @@ export default function Verify({ EMAIL_FROM }: { EMAIL_FROM?: string }) {
) : isPremiumUsername ? (
<PaymentSuccess />
) : (
<MailOpenIcon />
<MailOpenIconWrapper />
)}
<h3 className="font-cal text-emphasis my-6 text-2xl font-normal leading-none">
{hasPaymentFailed
apps/web/modules/blocklist/components/BlocklistEntryDetailsSheet.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import Link from "next/link";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { ExternalLinkIcon } from "@coss/ui/icons";
import {
Sheet,
SheetContent,
@@ -132,7 +132,7 @@ export function BlocklistEntryDetailsSheet<T extends BlocklistEntry>({
<Link key={report.booking.uid} href={`/booking/${report.booking.uid}`}>
<div className="text-subtle flex items-center gap-1 text-sm">
{report.booking.title}
<Icon name="external-link" className="h-4 w-4" />
<ExternalLinkIcon className="h-4 w-4" />
</div>
</Link>
);
apps/web/modules/blocklist/components/BookingReportDetailsModal.tsx
+4 -4
View File
@@ -8,7 +8,7 @@ import { WatchlistType } from "@calcom/prisma/enums";
import { Button } from "@calcom/ui/components/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
import { ToggleGroup } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { ExternalLinkIcon, GlobeIcon, MailIcon } from "@coss/ui/icons";
import type { GroupedBookingReport, BlocklistScope } from "@calcom/features/blocklist/types";
@@ -130,7 +130,7 @@ export function BookingReportDetailsModal<T extends GroupedBookingReport>({
<Link key={report.id} href={`/booking/${report.booking.uid}`}>
<div className="text-subtle hover:text-emphasis flex items-center gap-1 text-sm">
{report.booking.title || t("untitled")}
<Icon name="external-link" className="h-3 w-3" />
<ExternalLinkIcon className="h-3 w-3" />
</div>
</Link>
))}
@@ -157,12 +157,12 @@ export function BookingReportDetailsModal<T extends GroupedBookingReport>({
{
value: WatchlistType.EMAIL,
label: t("block_this_email"),
iconLeft: <Icon name="mail" className="h-4 w-4" />,
iconLeft: <MailIcon className="h-4 w-4" />,
},
{
value: WatchlistType.DOMAIN,
label: t("block_all_from_domain"),
iconLeft: <Icon name="globe" className="h-4 w-4" />,
iconLeft: <GlobeIcon className="h-4 w-4" />,
},
]}
/>
apps/web/modules/blocklist/components/CreateBlocklistEntryModal.tsx
+3 -3
View File
@@ -10,7 +10,7 @@ import { Alert } from "@calcom/ui/components/alert";
import { Button } from "@calcom/ui/components/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
import { Input, Label, TextArea, ToggleGroup } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { GlobeIcon, MailIcon } from "@coss/ui/icons";
import type { BlocklistScope, CreateBlocklistEntryFormData } from "@calcom/features/blocklist/types";
@@ -82,8 +82,8 @@ export function CreateBlocklistEntryModal({
};
const typeOptions = [
{ label: t("email"), value: WatchlistType.EMAIL, iconLeft: <Icon name="mail" className="h-4 w-4" /> },
{ label: t("domain"), value: WatchlistType.DOMAIN, iconLeft: <Icon name="globe" className="h-4 w-4" /> },
{ label: t("email"), value: WatchlistType.EMAIL, iconLeft: <MailIcon className="h-4 w-4" /> },
{ label: t("domain"), value: WatchlistType.DOMAIN, iconLeft: <GlobeIcon className="h-4 w-4" /> },
];
return (
apps/web/modules/bookings/components/AvailableTimes.tsx
+2 -2
View File
@@ -16,8 +16,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { localStorage } from "@calcom/lib/webstorage";
import classNames from "@calcom/ui/classNames";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { SkeletonText } from "@calcom/ui/components/skeleton";
import { CalendarX2Icon } from "@coss/ui/icons";
import { useBookerTime } from "@calcom/features/bookings/Booker/hooks/useBookerTime";
import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
@@ -284,7 +284,7 @@ export const AvailableTimes = ({
<div
data-testId="no-slots-available"
className="bg-subtle border-subtle flex h-full flex-col items-center rounded-md border p-6 dark:bg-transparent">
<Icon name="calendar-x-2" className="text-muted mb-2 h-4 w-4" />
<CalendarX2Icon className="text-muted mb-2 h-4 w-4" />
<p className={classNames("text-muted", showTimeFormatToggle ? "-mt-1 text-lg" : "text-sm")}>
{t("all_booked_today")}
</p>
apps/web/modules/bookings/components/BookingCalendarContainer.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import { Alert } from "@calcom/ui/components/alert";
import { Button } from "@calcom/ui/components/button";
import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
import { Icon } from "@calcom/ui/components/icon";
import { ChevronLeftIcon, ChevronRightIcon } from "@coss/ui/icons";
import { getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
import React, { useEffect, useMemo } from "react";
import { useBookingCalendarData } from "~/bookings/hooks/useBookingCalendarData";
@@ -136,11 +136,11 @@ function BookingCalendarInner({
<ButtonGroup combined>
<Button color="secondary" onClick={goToPreviousWeek}>
<span className="sr-only">{t("view_previous_week")}</span>
<Icon name="chevron-left" className="h-4 w-4" />
<ChevronLeftIcon className="h-4 w-4" />
</Button>
<Button color="secondary" onClick={goToNextWeek}>
<span className="sr-only">{t("view_next_week")}</span>
<Icon name="chevron-right" className="h-4 w-4" />
<ChevronRightIcon className="h-4 w-4" />
</Button>
</ButtonGroup>
<ViewToggleButton bookingsV3Enabled={bookingsV3Enabled} />
apps/web/modules/bookings/components/BookingDetailsSheet.tsx
+4 -4
View File
@@ -20,7 +20,6 @@ import classNames from "@calcom/ui/classNames";
import { Avatar } from "@calcom/ui/components/avatar";
import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { SegmentedControl } from "@calcom/ui/components/segmented-control";
import {
Sheet,
@@ -30,6 +29,7 @@ import {
SheetHeader,
SheetTitle,
} from "@calcom/ui/components/sheet";
import { ExternalLinkIcon, RepeatIcon } from "@coss/ui/icons";
import { BookingHistory } from "@calcom/web/modules/booking-audit/components/BookingHistory";
import assignmentReasonBadgeTitleMap from "@lib/booking/assignmentReasonBadgeTitleMap";
import Link from "next/link";
@@ -755,7 +755,7 @@ function OldRescheduledBookingInfo({
<Link href={`/booking/${rescheduledToBooking.uid}`}>
<div className="text-default flex items-center gap-1 text-sm underline">
{t("view_booking")}
<Icon name="external-link" className="h-4 w-4" />
<ExternalLinkIcon className="h-4 w-4" />
</div>
</Link>
</Section>
@@ -798,7 +798,7 @@ function NewRescheduledBookingInfo({ booking }: { booking: BookingOutput }) {
<Link href={`/booking/${booking.fromReschedule}`}>
<div className="text-default flex items-center gap-1 text-sm underline">
{t("original_booking")}
<Icon name="external-link" className="h-4 w-4" />
<ExternalLinkIcon className="h-4 w-4" />
</div>
</Link>
</Section>
@@ -894,7 +894,7 @@ function BookingHeaderBadges({
) : null}
{recurringInfo && (
<Badge variant="gray">
<Icon name="repeat" className="mr-1 h-3 w-3" />
<RepeatIcon className="mr-1 h-3 w-3" />
{recurringInfo.count}
</Badge>
)}
apps/web/modules/bookings/components/BookingSuccessCard.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Badge } from "@calcom/ui/components/badge";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon } from "@coss/ui/icons";
export interface BookingSuccessCardProps {
title: string;
@@ -42,7 +42,7 @@ export function BookingSuccessCard({
aria-labelledby="modal-headline">
<div>
<div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
<CheckIcon className="h-5 w-5 text-green-600 dark:text-green-400" />
</div>
</div>
<div className="mb-8 mt-6 text-center last:mb-0">
apps/web/modules/bookings/components/DecoyBookingSuccessCard.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Badge } from "@calcom/ui/components/badge";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon } from "@coss/ui/icons";
export interface DecoyBookingSuccessCardProps {
title: string;
@@ -42,7 +42,7 @@ export function DecoyBookingSuccessCard({
aria-labelledby="modal-headline">
<div>
<div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
<Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
<CheckIcon className="h-5 w-5 text-green-600 dark:text-green-400" />
</div>
</div>
<div className="mb-8 mt-6 text-center last:mb-0">
apps/web/modules/bookings/components/DryRunMessage.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/components/icon";
import { InfoIcon } from "@coss/ui/icons";
export const DryRunMessage = ({ isEmbed }: { isEmbed?: boolean }) => {
const { t } = useLocale();
@@ -17,7 +17,7 @@ export const DryRunMessage = ({ isEmbed }: { isEmbed?: boolean }) => {
} z-50 -translate-x-1/2 transform cursor-pointer items-center gap-3 rounded-xl border p-3 text-sm shadow-md`}>
<div className="flex items-center gap-3">
<div className="relative">
<Icon name="info" className="h-5 w-5 text-orange-500" />
<InfoIcon className="h-5 w-5 text-orange-500" />
</div>
<div className="text-emphasis font-medium" data-testid="dry-run-msg">
{t("dry_run_mode_active")}
apps/web/modules/bookings/components/HavingTroubleFindingTime.tsx
+3 -3
View File
@@ -2,7 +2,7 @@ import { useState } from "react";
import { BOOKER_NUMBER_OF_DAYS_TO_LOAD } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/components/icon";
import { ArrowRightIcon, InfoIcon } from "@coss/ui/icons";
type Props = {
onButtonClick: () => void;
@@ -30,7 +30,7 @@ export function HavingTroubleFindingTime(props: Props) {
return (
<div className="bg-default border-subtle mt-6 flex w-1/2 min-w-0 items-center justify-between rounded-[32px] border p-3 text-sm leading-none shadow-sm lg:w-1/3">
<div className="flex items-center gap-2 overflow-x-hidden">
<Icon name="info" className="text-default h-4 w-4" />
<InfoIcon className="text-default h-4 w-4" />
<p className="w-full leading-none">{t("having_trouble_finding_time")}</p>
</div>
{/* TODO: we should give this more of a touch target on mobile */}
@@ -41,7 +41,7 @@ export function HavingTroubleFindingTime(props: Props) {
props.onButtonClick();
setInternalClick(true);
}}>
{t("show_more")} <Icon name="arrow-right" className="h-4 w-4" />
{t("show_more")} <ArrowRightIcon className="h-4 w-4" />
</button>
</div>
);
apps/web/modules/bookings/components/SlotSelectionModalHeader.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import type { TimezoneSelectComponentProps } from "@calcom/features/timezone/com
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { GlobeIcon } from "@coss/ui/icons";
import dynamic from "next/dynamic";
import type { ComponentType } from "react";
import { useMemo } from "react";
@@ -104,7 +104,7 @@ export const SlotSelectionModalHeader = ({
{event && <EventDetails event={event} blocks={[EventDetailBlocks.DURATION]} />}
<div className="mb-0 flex items-center gap-2 text-default text-sm">
<Icon name="globe" className="h-4 w-4 shrink-0 text-subtle" />
<GlobeIcon className="h-4 w-4 shrink-0 text-subtle" />
{TimezoneSelect && (
<span className="-mt-[2px] flex h-6 min-w-32 max-w-full items-center justify-start">
<TimezoneSelect
apps/web/modules/bookings/components/VerifyCodeDialog.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import { Button } from "@calcom/ui/components/button";
import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog";
import { Input } from "@calcom/ui/components/form";
import { Label } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { InfoIcon } from "@coss/ui/icons";
export const VerifyCodeDialog = ({
isOpenDialog,
@@ -113,7 +113,7 @@ export const VerifyCodeDialog = ({
{error && (
<div className="mt-2 flex items-center gap-x-2 text-sm text-red-700">
<div>
<Icon name="info" className="h-3 w-3" />
<InfoIcon className="h-3 w-3" />
</div>
<p>{error}</p>
</div>
apps/web/modules/bookings/components/ViewToggleButton.tsx
+3 -3
View File
@@ -5,7 +5,7 @@ import { useEffect } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
import { ToggleGroup } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { CalendarIcon, MenuIcon } from "@coss/ui/icons";
import { useBookingsView } from "../hooks/useBookingsView";
@@ -42,13 +42,13 @@ export function ViewToggleButton({ bookingsV3Enabled }: ViewToggleButtonProps) {
value: "list",
label: "",
tooltip: t("list_view"),
iconLeft: <Icon name="menu" className="h-4 w-4" />,
iconLeft: <MenuIcon className="h-4 w-4" />,
},
{
value: "calendar",
label: "",
tooltip: t("calendar_view"),
iconLeft: <Icon name="calendar" className="h-4 w-4" />,
iconLeft: <CalendarIcon className="h-4 w-4" />,
},
]}
/>
apps/web/modules/bookings/components/event-meta/AvailableEventLocations.tsx
+3 -3
View File
@@ -8,8 +8,8 @@ import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
import classNames from "@calcom/ui/classNames";
import { Icon } from "@calcom/ui/components/icon";
import { Tooltip } from "@calcom/ui/components/tooltip";
import { LinkIcon, MapPinIcon } from "@coss/ui/icons";
const excludeNullValues = (value: unknown) => !!value;
@@ -81,7 +81,7 @@ export function AvailableEventLocations({ locations }: { locations: LocationObje
return (
<div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
{eventLocationType.iconUrl === "/link.svg" ? (
<Icon name="link" className="text-default h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
<LinkIcon className="text-default h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
) : (
<RenderIcon eventLocationType={eventLocationType} isTooltip={false} />
)}
@@ -98,7 +98,7 @@ export function AvailableEventLocations({ locations }: { locations: LocationObje
return filteredLocations.length > 1 ? (
<div className="flex flex-row items-center text-sm font-medium">
{isPlatform ? (
<Icon name="map-pin" className={classNames("me-[10px] h-4 w-4 opacity-70 dark:invert")} />
<MapPinIcon className={classNames("me-[10px] h-4 w-4 opacity-70 dark:invert")} />
) : (
<img
src="/map-pin-dark.svg"
apps/web/modules/bookings/components/event-meta/Duration.tsx
+3 -3
View File
@@ -8,7 +8,7 @@ import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerSt
import type { BookerEvent } from "@calcom/features/bookings/types";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import classNames from "@calcom/ui/classNames";
import { Icon } from "@calcom/ui/components/icon";
import { ChevronLeftIcon, ChevronRightIcon } from "@coss/ui/icons";
/** Render X mins as X hours or X hours Y mins instead of in minutes once >= 60 minutes */
export const getDurationFormatted = (mins: number | undefined, t: TFunction) => {
@@ -106,7 +106,7 @@ export const EventDuration = ({
{leftVisible && (
<button onClick={handleLeft} className="absolute bottom-0 left-0 flex">
<div className="bg-default flex h-9 w-5 items-center justify-end rounded-md">
<Icon name="chevron-left" className="text-subtle h-4 w-4" />
<ChevronLeftIcon className="text-subtle h-4 w-4" />
</div>
<div className="to-default flex h-9 w-5 bg-linear-to-l from-transparent" />
</button>
@@ -136,7 +136,7 @@ export const EventDuration = ({
<button onClick={handleRight} className="absolute bottom-0 right-0 flex">
<div className="to-default flex h-9 w-5 bg-linear-to-r from-transparent" />
<div className="bg-default flex h-9 w-5 items-center justify-end rounded-md">
<Icon name="chevron-right" className="text-subtle h-4 w-4" />
<ChevronRightIcon className="text-subtle h-4 w-4" />
</div>
</button>
)}
apps/web/modules/bookings/components/event-meta/PriceIcon.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { Icon } from "@calcom/ui/components/icon";
import { SatSymbol } from "@calcom/ui/components/icon";
import { CreditCardIcon } from "@coss/ui/icons";
export function PriceIcon(props: { currency: string; className?: string }) {
const { className, currency } = props;
if (currency !== "BTC") return <Icon name="credit-card" className={className} />;
if (currency !== "BTC") return <CreditCardIcon className={className} />;
return <SatSymbol className={className} />;
}
apps/web/modules/bookings/views/booking-dry-run-success-view.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
"use client";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon } from "@coss/ui/icons";
export default function DryRunSuccessful() {
const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function DryRunSuccessful() {
<div className="flex h-screen">
<div className="bg-default m-auto rounded-md p-10 text-center">
<div className="bg-cal-success mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
<Icon name="check" className="h-6 w-6 text-green-600 dark:text-green-400" />
<CheckIcon className="h-6 w-6 text-green-600 dark:text-green-400" />
</div>
<h1 className="text-emphasis mb-4 text-2xl font-medium" data-testid="dry-run-success-msg">
{t("booking_dry_run_successful")}
apps/web/modules/bookings/views/bookings-single-view.tsx
+13 -6
View File
@@ -54,6 +54,13 @@ import { Button } from "@calcom/ui/components/button";
import { EmptyScreen } from "@calcom/ui/components/empty-screen";
import { EmailInput, TextArea } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import {
CalendarIcon,
CheckIcon,
ChevronLeftIcon,
ExternalLinkIcon,
XIcon,
} from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import { useCalcomTheme } from "@calcom/ui/styles";
import CancelBooking from "@calcom/web/components/booking/CancelBooking";
@@ -476,7 +483,7 @@ export default function Success(props: PageProps) {
href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
data-testid="back-to-bookings"
className="hover:bg-subtle text-subtle hover:text-default mt-2 inline-flex px-1 py-2 text-sm transition dark:hover:bg-transparent">
<Icon name="chevron-left" className="h-5 w-5 rtl:rotate-180" /> {t("back_to_bookings")}
<ChevronLeftIcon className="h-5 w-5 rtl:rotate-180" /> {t("back_to_bookings")}
</Link>
</div>
)}
@@ -536,12 +543,12 @@ export default function Success(props: PageProps) {
isCancelled ? "bg-error" : ""
)}>
{!giphyImage && !needsConfirmation && !isAwaitingPayment && isReschedulable && (
<Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
<CheckIcon className="h-5 w-5 text-green-600 dark:text-green-400" />
)}
{(needsConfirmation || isAwaitingPayment) && isReschedulable && (
<Icon name="calendar" className="text-emphasis h-5 w-5" />
<CalendarIcon className="text-emphasis h-5 w-5" />
)}
{isCancelled && <Icon name="x" className="h-5 w-5 text-red-600 dark:text-red-200" />}
{isCancelled && <XIcon className="h-5 w-5 text-red-600 dark:text-red-200" />}
</div>
</div>
<div className="mb-8 mt-6 text-center last:mb-0">
@@ -1172,7 +1179,7 @@ const RescheduledToLink = ({ rescheduledToUid }: { rescheduledToUid: string }) =
<Link href={`/booking/${rescheduledToUid}`}>
<div className="flex items-center gap-1">
{t("view_booking")}
<Icon name="external-link" className="h-4 w-4" />
<ExternalLinkIcon className="h-4 w-4" />
</div>
</Link>
</span>
@@ -1198,7 +1205,7 @@ const DisplayLocation = ({
className={classNames("text-default flex items-center gap-2", className)}
rel="noreferrer">
{providerName || "Link"}
<Icon name="external-link" className="text-default inline h-4 w-4" />
<ExternalLinkIcon className="text-default inline h-4 w-4" />
</a>
) : (
<p className={className}>{locationToDisplay}</p>
apps/web/modules/calendars/components/CalendarSwitch.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import classNames from "@calcom/ui/classNames";
import { Switch } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { ArrowLeftIcon, RotateCwIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import type { ICalendarSwitchProps } from "@calcom/ui/components/calendar-switch";
@@ -100,12 +100,12 @@ const CalendarSwitch = (props: ICalendarSwitchProps) => {
</label>
{!!props.destination && (
<span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
<Icon name="arrow-left" className="h-4 w-4" />
<ArrowLeftIcon className="h-4 w-4" />
{t("adding_events_to")}
</span>
)}
{mutation.isPending && (
<Icon name="rotate-cw" className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />
<RotateCwIcon className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />
)}
</div>
);
apps/web/modules/data-table/components/DataTable.tsx
+9 -10
View File
@@ -10,7 +10,7 @@ import { useEffect, useState, memo, useMemo } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import classNames from "@calcom/ui/classNames";
import { Command, CommandList, CommandItem } from "@calcom/ui/components/command";
import { Icon } from "@calcom/ui/components/icon";
import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronsUpDownIcon, EyeOffIcon } from "@coss/ui/icons";
import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
import {
TableNew,
@@ -481,11 +481,10 @@ const TableHeadLabel = <TData,>({ header }: { header: Header<TData, unknown> })
}>
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
</div>
{header.column.getIsSorted() === "asc" && <Icon name="arrow-up" className="h-4 w-4 shrink-0" />}
{header.column.getIsSorted() === "desc" && <Icon name="arrow-down" className="h-4 w-4 shrink-0" />}
{header.column.getIsSorted() === "asc" && <ArrowUpIcon className="h-4 w-4 shrink-0" />}
{header.column.getIsSorted() === "desc" && <ArrowDownIcon className="h-4 w-4 shrink-0" />}
<div className="grow" />
<Icon
name="chevrons-up-down"
<ChevronsUpDownIcon
className={classNames(
"text-subtle h-4 w-4 shrink-0",
!open && "opacity-0 group-hover:opacity-100"
@@ -507,10 +506,10 @@ const TableHeadLabel = <TData,>({ header }: { header: Header<TData, unknown> })
header.column.toggleSorting(false, true);
}
}}>
<Icon name="arrow-up" className="h-4 w-4" />
<ArrowUpIcon className="h-4 w-4" />
{t("asc")}
<div className="flex-1" />
{header.column.getIsSorted() === "asc" && <Icon name="check" className="h-4 w-4" />}
{header.column.getIsSorted() === "asc" && <CheckIcon className="h-4 w-4" />}
</CommandItem>
<CommandItem
className="flex cursor-pointer items-center gap-2 px-3 py-2"
@@ -521,10 +520,10 @@ const TableHeadLabel = <TData,>({ header }: { header: Header<TData, unknown> })
header.column.toggleSorting(true, true);
}
}}>
<Icon name="arrow-down" className="h-4 w-4" />
<ArrowDownIcon className="h-4 w-4" />
{t("desc")}
<div className="flex-1" />
{header.column.getIsSorted() === "desc" && <Icon name="check" className="h-4 w-4" />}
{header.column.getIsSorted() === "desc" && <CheckIcon className="h-4 w-4" />}
</CommandItem>
</>
)}
@@ -535,7 +534,7 @@ const TableHeadLabel = <TData,>({ header }: { header: Header<TData, unknown> })
header.column.toggleVisibility(false);
setOpen(false);
}}>
<Icon name="eye-off" className="h-4 w-4" />
<EyeOffIcon className="h-4 w-4" />
{t("hide")}
</CommandItem>
)}
apps/web/modules/data-table/components/filters/AddFilterButton.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import { forwardRef, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui/components/button";
import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "@calcom/ui/components/command";
import { Icon } from "@calcom/ui/components/icon";
import { EyeOffIcon, PlusIcon } from "@coss/ui/icons";
import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -55,7 +55,7 @@ function AddFilterButtonComponent<TData>(
<PopoverTrigger asChild>
<Button ref={ref} color="secondary" data-testid="add-filter-button" className="h-full">
<span className="sr-only">{t("filter")}</span>
<Icon name="plus" />
<PlusIcon />
</Button>
</PopoverTrigger>
</Tooltip>
@@ -81,7 +81,7 @@ function AddFilterButtonComponent<TData>(
className="flex items-center justify-between rounded-none px-4 py-2"
data-testid={`add-filter-item-${column.id}`}>
<span>{startCase(column.title)}</span>
{showHiddenIndicator && <Icon name="eye-off" className="h-4 w-4 opacity-50" />}
{showHiddenIndicator && <EyeOffIcon className="h-4 w-4 opacity-50" />}
</CommandItem>
);
})}
apps/web/modules/data-table/components/filters/BaseSelectFilterOptions.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ import {
CommandSeparator,
CommandGroup,
} from "@calcom/ui/components/command";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon } from "@coss/ui/icons";
import { useDataTable, useFilterValue } from "@calcom/features/data-table/hooks";
import type {
@@ -141,7 +141,7 @@ export function BaseSelectFilterOptions<T extends Extract<FilterType, "ms" | "ss
isOptionSelected(filterValue, optionValue) ? "bg-primary-default" : "border opacity-50"
)}>
{isOptionSelected(filterValue, optionValue) && (
<Icon name="check" className="text-primary-foreground h-4 w-4" />
<CheckIcon className="text-primary-foreground h-4 w-4" />
)}
</div>
{optionLabel}
apps/web/modules/data-table/components/filters/ColumnVisibilityButton.tsx
+2 -2
View File
@@ -16,8 +16,8 @@ import {
CommandItem,
CommandSeparator,
} from "@calcom/ui/components/command";
import { Icon } from "@calcom/ui/components/icon";
import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
import { CheckIcon } from "@coss/ui/icons";
export interface ColumnVisiblityProps<TData> {
table: Table<TData>;
@@ -66,7 +66,7 @@ function ColumnVisibilityButtonComponent<TData>(
"border-subtle mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
isVisible ? "text-emphasis" : "opacity-50 [&_svg]:invisible"
)}>
<Icon name="check" className={classNames("h-4 w-4", !isVisible && "invisible")} />
<CheckIcon className={classNames("h-4 w-4", !isVisible && "invisible")} />
</div>
{column.columnDef.header}
</CommandItem>
apps/web/modules/data-table/components/filters/DateRangeFilter.tsx
+2 -2
View File
@@ -16,8 +16,8 @@ import {
CommandSeparator,
} from "@calcom/ui/components/command";
import { DateRangePicker } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
import { CheckIcon } from "@coss/ui/icons";
import { useDataTable, useFilterValue } from "@calcom/features/data-table/hooks";
import {
@@ -236,7 +236,7 @@ export const DateRangeFilter = ({
updateDateRangeFromPreset(option.value);
}}>
<span className="capitalize">{t(option.labelKey, option.i18nOptions)}</span>
{selectedPreset.value === option.value && <Icon name="check" />}
{selectedPreset.value === option.value && <CheckIcon />}
</CommandItem>
))}
</CommandList>
apps/web/modules/ee/dsync/components/GroupNameCell.tsx
+3 -3
View File
@@ -5,8 +5,8 @@ import { trpc } from "@calcom/trpc/react";
import classNames from "@calcom/ui/classNames";
import { Badge } from "@calcom/ui/components/badge";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { PlusIcon, XIcon } from "@coss/ui/icons";
interface GroupNameCellProps {
groupNames: string[];
@@ -78,7 +78,7 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)
<div className="flex min-w-0 items-center gap-2">
<p className="min-w-0 wrap-break-word">{name}</p>
<div className="hover:bg-emphasis shrink-0 rounded p-1">
<Icon name="x" className="h-4 w-4 stroke-[3px]" onClick={() => removeGroupName(name)} />
<XIcon className="h-4 w-4 stroke-[3px]" onClick={() => removeGroupName(name)} />
</div>
</div>
</Badge>
@@ -111,7 +111,7 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)
<p>{t("add_group_name")}</p>
)}
<div className={classNames("rounded p-1", showTextInput && "hover:bg-emphasis ml-2")}>
<Icon name="plus" className="h-4 w-4 stroke-[3px]" onClick={() => addGroupName(newGroupName)} />
<PlusIcon className="h-4 w-4 stroke-[3px]" onClick={() => addGroupName(newGroupName)} />
</div>
</div>
</Badge>
apps/web/modules/ee/organizations/admin-api.tsx
+4 -4
View File
@@ -4,7 +4,7 @@ import LicenseRequired from "~/ee/common/components/LicenseRequired";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui/components/button";
import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
import { Icon } from "@calcom/ui/components/icon";
import { FolderIcon, SparklesIcon, TerminalIcon } from "@coss/ui/icons";
import { UpgradeTip } from "~/shell/UpgradeTip";
@@ -13,17 +13,17 @@ export const AdminAPIView = () => {
const features = [
{
icon: <Icon name="terminal" className="h-5 w-5 text-pink-500" />,
icon: <TerminalIcon className="h-5 w-5 text-pink-500" />,
title: t("admin_api"),
description: t("leverage_our_api"),
},
{
icon: <Icon name="folder" className="h-5 w-5 text-red-500" />,
icon: <FolderIcon className="h-5 w-5 text-red-500" />,
title: `SCIM & ${t("directory_sync")}`,
description: t("directory_sync_description"),
},
{
icon: <Icon name="sparkles" className="h-5 w-5 text-blue-500" />,
icon: <SparklesIcon className="h-5 w-5 text-blue-500" />,
title: "Cal.ai",
description: t("use_cal_ai_to_make_call_description"),
},
apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ import {
DropdownMenuItem,
} from "@calcom/ui/components/dropdown";
import { Switch } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { TagsIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import { revalidateAttributesList } from "@calcom/web/app/(use-page-wrapper)/settings/organizations/(org-user-only)/members/actions";
@@ -179,7 +179,7 @@ function OrganizationAttributesPage({
) : (
<div className="flex w-full flex-col items-center justify-center p-14">
<div className="bg-emphasis text-emphasis flex h-16 w-16 items-center justify-center rounded-full p-2">
<Icon name="tags" />
<TagsIcon />
</div>
<h2 className="font-cal text-emphasis mt-6 text-xl font-semibold leading-none">
{t("add_attributes")}
apps/web/modules/ee/organizations/components/AboutOrganizationForm.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ import { Avatar } from "@calcom/ui/components/avatar";
import { Button } from "@calcom/ui/components/button";
import { Form } from "@calcom/ui/components/form";
import { Label } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { PlusIcon } from "@coss/ui/icons";
export const AboutOrganizationForm = () => {
const { t } = useLocale();
@@ -50,7 +50,7 @@ export const AboutOrganizationForm = () => {
<div className="flex items-center">
<Avatar
alt=""
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
fallback={<PlusIcon className="text-subtle h-6 w-6" />}
className="items-center"
imageSrc={value}
size="lg"
apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import { useOnboarding } from "@calcom/web/modules/ee/organizations/lib/onboardi
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon, XIcon } from "@coss/ui/icons";
const PaymentStatusView = () => {
const { t } = useLocale();
@@ -36,7 +36,7 @@ const PaymentStatusView = () => {
return (
<div className="flex min-h-[500px] flex-col items-center justify-center stack-y-6 px-4 sm:px-6">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<Icon name="x" className="h-6 w-6 text-red-600" />
<XIcon className="h-6 w-6 text-red-600" />
</div>
<div className="text-center">
<h1 className="font-cal text-emphasis text-2xl">{t("payment_failed")}</h1>
@@ -52,7 +52,7 @@ const PaymentStatusView = () => {
return (
<div className="flex min-h-[500px] flex-col items-center justify-center stack-y-6 px-4 sm:px-6">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<Icon name="check" className="h-6 w-6 text-green-600 dark:text-green-400" />
<CheckIcon className="h-6 w-6 text-green-600 dark:text-green-400" />
</div>
<div className="text-center">
<h1 className="font-cal text-emphasis text-2xl">{t("payment_successful")}</h1>
apps/web/modules/ee/organizations/profile.tsx
+3 -3
View File
@@ -24,8 +24,8 @@ import { Editor } from "@calcom/ui/components/editor";
import { Form } from "@calcom/ui/components/form";
import { Label } from "@calcom/ui/components/form";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { BannerUploader, ImageUploader } from "@calcom/ui/components/image-uploader";
import { CopyIcon, PlusIcon } from "@coss/ui/icons";
// if I include this in the above barrel import, I get a runtime error that the component is not exported.
import { OrgBanner } from "@calcom/ui/components/organization-banner";
import {
@@ -293,7 +293,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => {
<Avatar
alt="calVideoLogo"
imageSrc={value}
fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
fallback={<PlusIcon className="text-subtle h-6 w-6" />}
size="lg"
/>
<div>
@@ -453,7 +453,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => {
type="button"
aria-label="copy organization id"
onClick={() => handleCopy(value.toString())}>
<Icon name="copy" className="ml-1 h-4 w-4" />
<CopyIcon className="ml-1 h-4 w-4" />
</Button>
</Tooltip>
}
apps/web/modules/ee/sso/components/ConnectionInfo.tsx
+4 -4
View File
@@ -8,7 +8,7 @@ import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
import { Label } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { ClipboardIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -102,7 +102,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
}}
type="button"
className="rounded-l-none py-[19px] text-base ">
<Icon name="clipboard" className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
<ClipboardIcon className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>
@@ -124,7 +124,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
}}
type="button"
className="rounded-l-none py-[19px] text-base ">
<Icon name="clipboard" className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
<ClipboardIcon className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>
@@ -160,7 +160,7 @@ const OIDCInfo = ({ callbackUrl }: { callbackUrl: string | null }) => {
}}
type="button"
className="rounded-l-none py-[19px] text-base ">
<Icon name="clipboard" className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
<ClipboardIcon className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
{t("copy")}
</Button>
</Tooltip>
apps/web/modules/ee/support/components/IntercomContactForm.tsx
+4 -4
View File
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import classNames from "@calcom/ui/classNames";
import { Button } from "@calcom/ui/components/button";
import { Label, TextArea } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { LoaderIcon, MessageCircleIcon, SendIcon } from "@coss/ui/icons";
import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
import { showToast } from "@calcom/ui/components/toast";
@@ -118,7 +118,7 @@ export const IntercomContactForm = () => {
<Button
onClick={() => setIsOpen(true)}
className="bg-subtle text-emphasis flex h-12 w-12 items-center justify-center rounded-full border-none">
<Icon name="message-circle" className="h-6 w-6" />
<MessageCircleIcon className="h-6 w-6" />
</Button>
</PopoverTrigger>
@@ -174,12 +174,12 @@ export const IntercomContactForm = () => {
<div className="flex w-full justify-center">
{isSubmitting ? (
<div className="flex items-center">
<Icon name="loader" className="mr-2 h-4 w-4 animate-spin rounded-full" />
<LoaderIcon className="mr-2 h-4 w-4 animate-spin rounded-full" />
{t("sending")}
</div>
) : (
<>
<Icon name="send" className="mr-2 h-4 w-4" />
<SendIcon className="mr-2 h-4 w-4" />
{t("send_message")}
</>
)}
apps/web/modules/ee/teams/components/EventTypesList.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ import {
CommandItem,
CommandList,
} from "@calcom/ui/components/command";
import { Icon } from "@calcom/ui/components/icon";
import { CheckIcon } from "@coss/ui/icons";
import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
import { showToast } from "@calcom/ui/components/toast";
@@ -196,7 +196,7 @@ const ListItem = ({ onSelect, text, isSelected }: ListItemProps) => {
"border-subtle ml-auto flex h-4 w-4 items-center justify-center rounded-sm border",
isSelected ? "text-emphasis" : "opacity-50 [&_svg]:invisible"
)}>
<Icon name="check" className={classNames("h-4 w-4")} />
<CheckIcon className={classNames("h-4 w-4")} />
</div>
</CommandItem>
);
apps/web/modules/ee/teams/components/InternalNotePresetsView.tsx
+3 -3
View File
@@ -12,8 +12,8 @@ import type { RouterOutputs } from "@calcom/trpc/react";
import classNames from "@calcom/ui/classNames";
import { Button } from "@calcom/ui/components/button";
import { Form, Input, SettingsToggle } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { showToast } from "@calcom/ui/components/toast";
import { CornerDownRightIcon, TrashIcon } from "@coss/ui/icons";
interface ProfileViewProps {
team: RouterOutputs["viewer"]["teams"]["get"];
@@ -141,11 +141,11 @@ const InternalNotePresetsView = ({ team }: ProfileViewProps) => {
variant="icon"
onClick={() => remove(index)}
disabled={fields.length === 1}>
<Icon name="trash" className="h-4 w-5" />
<TrashIcon className="h-4 w-5" />
</Button>
</div>
<div className="flex items-center gap-2">
<Icon name="corner-down-right" className="h-4 w-4" />
<CornerDownRightIcon className="h-4 w-4" />
<Controller
name={`presets.${index}.cancellationReason`}
control={form.control}
apps/web/modules/ee/teams/components/MemberInvitationModal.tsx
+4 -4
View File
@@ -26,7 +26,7 @@ import { Label } from "@calcom/ui/components/form";
import { TextField } from "@calcom/ui/components/form";
import { Select } from "@calcom/ui/components/form";
import { ToggleGroup } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { BuildingIcon, UserIcon, UsersIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import { revalidateTeamsList } from "@calcom/web/app/(use-page-wrapper)/(main-nav)/teams/actions";
@@ -121,15 +121,15 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
{
value: "INDIVIDUAL",
label: t("invite_team_individual_segment"),
iconLeft: <Icon name="user" />,
iconLeft: <UserIcon />,
},
{ value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: <Icon name="users" /> },
{ value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: <UsersIcon /> },
];
if (canSeeOrganization) {
array.unshift({
value: "ORGANIZATION",
label: t("organization"),
iconLeft: <Icon name="building" />,
iconLeft: <BuildingIcon />,
});
}
return array;
apps/web/modules/ee/teams/components/TeamList.tsx
+14 -7
View File
@@ -9,7 +9,14 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import { Card } from "@calcom/ui/components/card";
import { Icon } from "@calcom/ui/components/icon";
import {
BuildingIcon,
ChartLineIcon,
PaintbrushIcon,
PencilIcon,
UserPlusIcon,
UsersIcon,
} from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import { revalidateTeamsList } from "@calcom/web/app/(use-page-wrapper)/(main-nav)/teams/actions";
@@ -69,7 +76,7 @@ export default function TeamList(props: Props) {
<div className="bg-subtle p-4" key={team.id}>
<div className="grid-col-1 grid gap-2 md:grid-cols-3">
<Card
icon={<Icon name="building" className="h-5 w-5 text-red-700" />}
icon={<BuildingIcon className="h-5 w-5 text-red-700" />}
variant="basic"
title={props.teams.length === 1 ? t("you_have_one_team") : t("You have a lot of teams")}
description={
@@ -84,7 +91,7 @@ export default function TeamList(props: Props) {
}}
/>
<Card
icon={<Icon name="paintbrush" className="h-5 w-5 text-orange-700" />}
icon={<PaintbrushIcon className="h-5 w-5 text-orange-700" />}
variant="basic"
title={t("Get a clean subdomain")}
description={t(
@@ -96,7 +103,7 @@ export default function TeamList(props: Props) {
}}
/>
<Card
icon={<Icon name="chart-line" className="h-5 w-5 text-green-700" />}
icon={<ChartLineIcon className="h-5 w-5 text-green-700" />}
variant="basic"
title={t("Admin tools and analytics")}
description={t(
@@ -134,7 +141,7 @@ export default function TeamList(props: Props) {
<h3 className="text-emphasis mb-4 text-sm font-semibold">{t("recommended_next_steps")}</h3>
<div className="grid-col-1 grid gap-2 md:grid-cols-3">
<Card
icon={<Icon name="user-plus" className="h-5 w-5 text-green-700" />}
icon={<UserPlusIcon className="h-5 w-5 text-green-700" />}
variant="basic"
title={t("invite_team_member")}
description={t("meetings_are_better_with_the_right")}
@@ -144,7 +151,7 @@ export default function TeamList(props: Props) {
}}
/>
<Card
icon={<Icon name="users" className="h-5 w-5 text-orange-700" />}
icon={<UsersIcon className="h-5 w-5 text-orange-700" />}
variant="basic"
title={t("collective_or_roundrobin")}
description={t("book_your_team_members")}
@@ -154,7 +161,7 @@ export default function TeamList(props: Props) {
}}
/>
<Card
icon={<Icon name="pencil" className="h-5 w-5 text-purple-700" />}
icon={<PencilIcon className="h-5 w-5 text-purple-700" />}
variant="basic"
title={t("appearance")}
description={t("appearance_description")}
apps/web/modules/ee/teams/components/TeamsListing.tsx
+16 -8
View File
@@ -10,7 +10,15 @@ import { Button } from "@calcom/ui/components/button";
import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
import { EmptyScreen } from "@calcom/ui/components/empty-screen";
import { Label } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import {
EyeOffIcon,
InfoIcon,
MailIcon,
RefreshCcwIcon,
UserPlusIcon,
UsersIcon,
VideoIcon,
} from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import SkeletonLoaderTeamList from "~/ee/teams/components/SkeletonloaderTeamList";
@@ -60,32 +68,32 @@ export function TeamsListing({
const features = [
{
icon: <Icon name="users" className="h-5 w-5 text-red-500" />,
icon: <UsersIcon className="h-5 w-5 text-red-500" />,
title: t("collective_scheduling"),
description: t("make_it_easy_to_book"),
},
{
icon: <Icon name="refresh-ccw" className="h-5 w-5 text-blue-500" />,
icon: <RefreshCcwIcon className="h-5 w-5 text-blue-500" />,
title: t("round_robin"),
description: t("find_the_best_person"),
},
{
icon: <Icon name="user-plus" className="h-5 w-5 text-green-500" />,
icon: <UserPlusIcon className="h-5 w-5 text-green-500" />,
title: t("fixed_round_robin"),
description: t("add_one_fixed_attendee"),
},
{
icon: <Icon name="mail" className="h-5 w-5 text-orange-500" />,
icon: <MailIcon className="h-5 w-5 text-orange-500" />,
title: t("sms_attendee_action"),
description: t("send_reminder_sms"),
},
{
icon: <Icon name="video" className="h-5 w-5 text-purple-500" />,
icon: <VideoIcon className="h-5 w-5 text-purple-500" />,
title: `Cal Video ${t("recordings_title")}`,
description: t("upgrade_to_access_recordings_description"),
},
{
icon: <Icon name="eye-off" className="h-5 w-5 text-indigo-500" />,
icon: <EyeOffIcon className="h-5 w-5 text-indigo-500" />,
title: t("disable_cal_branding", { appName: APP_NAME }),
description: t("disable_cal_branding_description", { appName: APP_NAME }),
},
@@ -175,7 +183,7 @@ export function TeamsListing({
)}
<p className="text-subtle mb-8 mt-4 flex w-full items-center gap-1 text-sm md:justify-center md:text-center">
<Icon className="hidden sm:block" name="info" /> {t("tip_username_plus")}
<InfoIcon className="hidden sm:block" /> {t("tip_username_plus")}
</p>
</>
);
apps/web/modules/ee/teams/views/team-profile-view.tsx
+2 -2
View File
@@ -32,8 +32,8 @@ import { Editor } from "@calcom/ui/components/editor";
import { Form } from "@calcom/ui/components/form";
import { Label } from "@calcom/ui/components/form";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { ImageUploader } from "@calcom/ui/components/image-uploader";
import { CopyIcon } from "@coss/ui/icons";
import {
SkeletonButton,
SkeletonContainer,
@@ -445,7 +445,7 @@ const TeamProfileForm = ({ team, teamId }: TeamProfileFormProps) => {
type="button"
aria-label="copy team id"
onClick={() => handleCopy(teamId.toString())}>
<Icon name="copy" className="ml-1 h-4 w-4" />
<CopyIcon className="ml-1 h-4 w-4" />
</Button>
</Tooltip>
}
apps/web/modules/ee/users/components/UsersTable.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ import {
ConfirmationDialogContent,
} from "@calcom/ui/components/dialog";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { BuildingIcon, LockIcon } from "@coss/ui/icons";
import { DropdownActions, Table } from "@calcom/ui/components/table";
import { showToast } from "@calcom/ui/components/toast";
@@ -209,11 +209,11 @@ function UsersTableBare() {
<span>/{user.username}</span>
{user.profiles[0]?.username && (
<span className="flex items-center gap-1">
<Icon name="building" className="text-subtle size-5" />
<BuildingIcon className="text-subtle size-5" />
<span>{user.profiles[0]?.username}</span>
</span>
)}
{user.locked && <Icon name="lock" />}
{user.locked && <LockIcon />}
<br />
</div>
<span className="break-all">{user.email}</span>
apps/web/modules/ee/workflows/components/AddActionDialog.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ import { CheckboxField } from "@calcom/ui/components/form";
import { Form } from "@calcom/ui/components/form";
import { Label } from "@calcom/ui/components/form";
import { Input } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { InfoIcon } from "@coss/ui/icons";
import { Tooltip } from "@calcom/ui/components/tooltip";
interface IAddActionDialog {
@@ -230,7 +230,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
<Label>{t("sender_id")}</Label>
<Tooltip content={t("sender_id_info")}>
<span>
<Icon name="info" className="mb-2 ml-2 mr-1 mt-0.5 h-4 w-4 text-gray-500" />
<InfoIcon className="mb-2 ml-2 mr-1 mt-0.5 h-4 w-4 text-gray-500" />
</span>
</Tooltip>
</div>
apps/web/modules/ee/workflows/components/CallDetailsSheet.tsx
+2 -2
View File
@@ -4,7 +4,6 @@ import type { CallDetailsAction, CallDetailsState } from "@calcom/features/ee/wo
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
import {
Sheet,
SheetContent,
@@ -13,6 +12,7 @@ import {
SheetFooter,
SheetClose,
} from "@calcom/ui/components/sheet";
import { UserIcon } from "@coss/ui/icons";
interface CallDetailsSheetProps {
state: CallDetailsState;
@@ -150,7 +150,7 @@ export function CallDetailsSheet({ state, dispatch }: CallDetailsSheetProps) {
return (
<div key={index} className="stack-y-1">
<div className="flex items-center gap-2">
<Icon name="user" className={isAgent ? "text-info" : "text-success"} />
<UserIcon className={isAgent ? "text-info" : "text-success"} />
<span className={`text-sm font-medium ${isAgent ? "text-info" : "text-success"}`}>
{isAgent ? t("agent") : t("user")}
</span>
apps/web/modules/ee/workflows/components/SkeletonLoaderList.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { Icon } from "@calcom/ui/components/icon";
import { SkeletonText } from "@calcom/ui/components/skeleton";
import { BellIcon, LinkIcon } from "@coss/ui/icons";
function SkeletonLoader() {
return (
@@ -21,9 +21,9 @@ function SkeletonItem() {
<div className="flex flex-col stack-y-2">
<SkeletonText className="h-4 w-16 sm:w-24" />
<div className="flex">
<Icon name="bell" className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
<BellIcon className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
<SkeletonText className="h-4 w-16 ltr:mr-2 rtl:ml-2 sm:w-28" />
<Icon name="link" className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
<LinkIcon className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
<SkeletonText className="h-4 w-28 sm:w-36" />
</div>
</div>
apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
import { Label } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { PhoneIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
interface TestPhoneCallDialogProps {
@@ -99,7 +99,7 @@ export function TestPhoneCallDialog({
onClick={handleTestCall}
loading={testCallMutation.isPending}
disabled={!testPhoneNumber}>
<Icon name="phone" className="mr-2 h-4 w-4" />
<PhoneIcon className="mr-2 h-4 w-4" />
{t("make_test_call")}
</Button>
</DialogFooter>
apps/web/modules/ee/workflows/components/TimeTimeUnitInput.tsx
+2 -2
View File
@@ -3,8 +3,8 @@ import { useFormContext } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { TimeUnit } from "@calcom/prisma/enums";
import { Icon } from "@calcom/ui/components/icon";
import { TextField } from "@calcom/ui/components/form";
import { ChevronDownIcon, ChevronUpIcon } from "@coss/ui/icons";
import {
Dropdown,
DropdownItem,
@@ -38,7 +38,7 @@ const TimeUnitAddonSuffix = ({
<button className="flex items-center">
<div className="mr-1 w-3/5">{timeUnit ? timeUnitOptions[timeUnit] : "undefined"}</div>
<div className="w-1/4 pt-1">
{isDropdownOpen ? <Icon name="chevron-up" /> : <Icon name="chevron-down" />}
{isDropdownOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
</div>
</button>
</DropdownMenuTrigger>
apps/web/modules/ee/workflows/components/VoiceSelectionDialog.tsx
+4 -4
View File
@@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { Dialog, DialogContent, DialogHeader } from "@calcom/ui/components/dialog";
import { Icon } from "@calcom/ui/components/icon";
import { PauseIcon, PlayIcon, UserIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
type Voice = {
@@ -89,14 +89,14 @@ function VoiceSelectionContent({
onClick={() => handlePlayVoice(row.original.preview_audio_url, row.original.voice_id)}
className="rounded-full">
{playingVoiceId === row.original.voice_id ? (
<Icon name="pause" className="text-default h-3 w-3" />
<PauseIcon className="text-default h-3 w-3" />
) : (
<Icon name="play" className="text-default h-3 w-3" />
<PlayIcon className="text-default h-3 w-3" />
)}
</Button>
<div className="flex items-center gap-2">
<div className="bg-subtle flex h-10 w-10 items-center justify-center rounded-full">
<Icon name="user" className="text-default h-5 w-5" />
<UserIcon className="text-default h-5 w-5" />
</div>
<span className="text-emphasis font-medium">{row.original.voice_name}</span>
</div>
apps/web/modules/ee/workflows/components/WebCallDialog.tsx
+18 -10
View File
@@ -12,6 +12,14 @@ import { Alert } from "@calcom/ui/components/alert";
import { Button } from "@calcom/ui/components/button";
import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
import { Icon } from "@calcom/ui/components/icon";
import {
LoaderIcon,
MessageCircleIcon,
PhoneIcon,
PhoneOffIcon,
TrashIcon,
TriangleAlertIcon,
} from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -260,15 +268,15 @@ export function WebCallDialog({
const getStatusIcon = () => {
switch (callStatus) {
case "connecting":
return <Icon name="loader" className="h-4 w-4 animate-spin rounded-full" />;
return <LoaderIcon className="h-4 w-4 animate-spin rounded-full" />;
case "active":
return <Icon name="phone" className="text-success h-4 w-4" />;
return <PhoneIcon className="text-success h-4 w-4" />;
case "ended":
return <Icon name="phone-off" className="text-muted h-4 w-4" />;
return <PhoneOffIcon className="text-muted h-4 w-4" />;
case "error":
return <Icon name="triangle-alert" className="text-error h-4 w-4" />;
return <TriangleAlertIcon className="text-error h-4 w-4" />;
default:
return <Icon name="phone" className="text-subtle h-4 w-4" />;
return <PhoneIcon className="text-subtle h-4 w-4" />;
}
};
@@ -396,7 +404,7 @@ export function WebCallDialog({
variant="icon"
onClick={() => setTranscript([])}
disabled={callStatus === "active"}>
<Icon name="trash" className="h-4 w-4" />
<TrashIcon className="h-4 w-4" />
</Button>
)}
</div>
@@ -405,7 +413,7 @@ export function WebCallDialog({
{transcript.length === 0 ? (
<div className="flex h-40 items-center justify-center text-center">
<div>
<Icon name="message-circle" className="text-subtle mx-auto h-8 w-8" />
<MessageCircleIcon className="text-subtle mx-auto h-8 w-8" />
<p className="text-subtle mt-2 text-sm">
{callStatus === "idle"
? t("start_call_to_see_conversation")
@@ -441,7 +449,7 @@ export function WebCallDialog({
{error && callStatus === "error" && (
<div className="border-error bg-error/10 rounded-lg p-3">
<div className="flex items-center gap-2">
<Icon name="triangle-alert" className="text-error h-6 w-6" />
<TriangleAlertIcon className="text-error h-6 w-6" />
<span className="text-error text-sm">{error}</span>
</div>
</div>
@@ -465,7 +473,7 @@ export function WebCallDialog({
onClick={handleStartCall}
loading={createWebCallMutation.isPending || callStatus === "connecting"}
disabled={!hasCredits || createWebCallMutation.isPending || callStatus === "connecting"}>
<Icon name="phone" className="mr-2 h-4 w-4" />
<PhoneIcon className="mr-2 h-4 w-4" />
{callStatus === "connecting" ? t("connecting") : t("start_web_call")}
</Button>
</Tooltip>
@@ -475,7 +483,7 @@ export function WebCallDialog({
color="destructive"
onClick={handleEndCall}
disabled={callStatus !== "active"}>
<Icon name="phone-off" className="mr-2 h-4 w-4" />
<PhoneOffIcon className="mr-2 h-4 w-4" />
{t("end_call")}
</Button>
)}
apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx
+12 -14
View File
@@ -1,29 +1,27 @@
import { useSearchParams } from "next/navigation";
import type { Dispatch, SetStateAction } from "react";
import { useState, useEffect } from "react";
import type { UseFormReturn } from "react-hook-form";
import { useAgentsData } from "@calcom/web/modules/ee/workflows/hooks/useAgentsData";
import {
isCalAIAction,
isSMSAction,
isFormTrigger,
isSMSAction,
} from "@calcom/features/ee/workflows/lib/actionHelperFunctions";
import { ALLOWED_FORM_WORKFLOW_ACTIONS } from "@calcom/features/ee/workflows/lib/constants";
import emailReminderTemplate from "@calcom/features/ee/workflows/lib/reminders/templates/emailReminderTemplate";
import type { FormValues } from "@calcom/features/ee/workflows/lib/types";
import type { WorkflowPermissions } from "@calcom/features/workflows/repositories/WorkflowPermissionsRepository";
import { SENDER_ID, SENDER_NAME, SCANNING_WORKFLOW_STEPS } from "@calcom/lib/constants";
import { SCANNING_WORKFLOW_STEPS, SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { getTimeFormatStringFromUserTimeFormat } from "@calcom/lib/timeFormat";
import { WorkflowActions } from "@calcom/prisma/enums";
import { WorkflowTemplates } from "@calcom/prisma/enums";
import { trpc, type RouterOutputs } from "@calcom/trpc/react";
import { WorkflowActions, WorkflowTemplates } from "@calcom/prisma/enums";
import { type RouterOutputs, trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { FormCard, FormCardBody } from "@calcom/ui/components/card";
import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { useHasPaidPlan, useHasActiveTeamPlan } from "@calcom/web/modules/billing/hooks/useHasPaidPlan";
import { useAgentsData } from "@calcom/web/modules/ee/workflows/hooks/useAgentsData";
import { ArrowRightIcon, ZapIcon } from "@coss/ui/icons";
import { useSearchParams } from "next/navigation";
import type { Dispatch, SetStateAction } from "react";
import { useEffect, useState } from "react";
import type { UseFormReturn } from "react-hook-form";
import { AddActionDialog } from "./AddActionDialog";
import WorkflowStepContainer from "./WorkflowStepContainer";
@@ -197,7 +195,7 @@ export default function WorkflowDetailsPage(props: Props) {
label={
<div className="flex items-center gap-2 pt-1 pb-2">
<div className="border-subtle text-subtle ml-1 rounded-lg border p-1">
<Icon name="zap" size="16" />
<ZapIcon size={16} />
</div>
<div className="text-sm font-medium leading-none">{t("trigger")}</div>
</div>
@@ -239,7 +237,7 @@ export default function WorkflowDetailsPage(props: Props) {
label={
<div className="flex items-center gap-2 pt-1 pb-2">
<div className="border-subtle text-subtle rounded-lg border p-1">
<Icon name="arrow-right" size="16" />
<ArrowRightIcon size={16} />
</div>
<div className="text-sm font-medium leading-none">{t("action")}</div>
</div>
apps/web/modules/ee/workflows/components/WorkflowListPage.tsx
+5 -5
View File
@@ -16,7 +16,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@calcom/ui/components/dropdown";
import { Icon } from "@calcom/ui/components/icon";
import { LinkIcon } from "@coss/ui/icons";
import { Tooltip } from "@calcom/ui/components/tooltip";
import { useAutoAnimate } from "@formkit/auto-animate/react";
import Link from "next/link";
@@ -137,7 +137,7 @@ export default function WorkflowListPage({ workflows }: Props) {
{/*active on all badge */}
{workflow.isActiveOnAll ? (
<div>
<Icon name="link" className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
<LinkIcon className="mr-1.5 inline h-3 w-3" />
{workflow.isOrg ? t("active_on_all_teams") : t("active_on_all_event_types")}
</div>
) : workflow.activeOn && workflow.activeOn.length > 0 ? (
@@ -147,7 +147,7 @@ export default function WorkflowListPage({ workflows }: Props) {
.filter((wf) => (workflow.teamId ? wf.eventType.parentId === null : true))
.map((activeOn, key) => <p key={key}>{activeOn.eventType.title}</p>)}>
<div>
<Icon name="link" className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
<LinkIcon className="mr-1.5 inline h-3 w-3" />
{t("active_on_event_types", {
count: workflow.activeOn.filter((wf) =>
workflow.teamId ? wf.eventType.parentId === null : true
@@ -162,7 +162,7 @@ export default function WorkflowListPage({ workflows }: Props) {
<p key={key}>{activeOn.team.name}</p>
))}>
<div>
<Icon name="link" className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
<LinkIcon className="mr-1.5 inline h-3 w-3" />
{t("active_on_teams", {
count: workflow.activeOnTeams?.length,
})}
@@ -171,7 +171,7 @@ export default function WorkflowListPage({ workflows }: Props) {
) : (
// active on no teams or event types
<div>
<Icon name="link" className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
<LinkIcon className="mr-1.5 inline h-3 w-3" />
{workflow.isOrg ? t("no_active_teams") : t("no_active_event_types")}
</div>
)}
apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx
+8 -8
View File
@@ -67,7 +67,7 @@ import { TextField } from "@calcom/ui/components/form";
import { Select } from "@calcom/ui/components/form";
import { MultiSelectCheckbox } from "@calcom/ui/components/form";
import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { CircleHelpIcon, InfoIcon, PhoneIcon } from "@coss/ui/icons";
import { SkeletonText } from "@calcom/ui/components/skeleton";
import { showToast } from "@calcom/ui/components/toast";
import { useHasPaidPlan, useHasActiveTeamPlan } from "@calcom/web/modules/billing/hooks/useHasPaidPlan";
@@ -688,7 +688,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
)}
{!!timeSectionText && steps.some((s) => isSMSAction(s.action)) && (
<div className="mt-1 flex text-gray-500">
<Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
<InfoIcon className="mr-1 mt-0.5 h-4 w-4" />
<p className="text-sm">{t("testing_sms_workflow_info_message")}</p>
</div>
)}
@@ -835,7 +835,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
{...form.register(`steps.${step.stepNumber - 1}.sender`)}
/>
<div className="mt-1.5 flex items-center gap-1">
<Icon name="info" size="10" className="text-gray-500" />
<InfoIcon size={10} className="text-gray-500" />
<div className="text-subtle text-xs">{t("sender_id_info")}</div>
</div>
</div>
@@ -910,7 +910,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
<h3 className="text-emphasis text-base font-medium">{t("cal_ai_agent")}</h3>
{arePhoneNumbersActive.length > 0 ? (
<div className="flex items-center gap-2">
<Icon name="phone" className="text-emphasis h-4 w-4" />
<PhoneIcon className="text-emphasis h-4 w-4" />
<span className="text-emphasis text-sm">
{formatPhoneNumber(arePhoneNumbersActive[0].phoneNumber)}
</span>
@@ -1437,7 +1437,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
<div className="ml-1 mt-2">
<button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
<div className="text-subtle ml-1 flex items-center gap-2">
<Icon name="circle-help" className="h-3 w-3" />
<CircleHelpIcon className="h-3 w-3" />
<p className="text-left text-xs">
{isFormTrigger(trigger)
? t("using_form_responses_as_variables")
@@ -1676,7 +1676,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
).length > 0 && (
<div className="bg-cal-muted rounded-lg p-3">
<div className="flex items-center gap-2">
<Icon name="phone" className="text-emphasis h-4 w-4" />
<PhoneIcon className="text-emphasis h-4 w-4" />
<span className="text-emphasis text-sm font-medium">
{formatPhoneNumber(
getActivePhoneNumbers(
@@ -1737,7 +1737,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
<>
<div className="bg-attention rounded-lg p-3">
<div className="flex items-start gap-2">
<Icon name="info" className="text-attention mt-0.5 h-4 w-4" />
<InfoIcon className="text-attention mt-0.5 h-4 w-4" />
<div className="stack-y-2">
<p className="text-attention text-sm font-medium">{t("this_action_will_also")}</p>
<ul className="text-attention stack-y-1 list-inside list-disc text-sm">
@@ -1752,7 +1752,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
{relevantPhoneNumbers.map((phone) => (
<div key={phone.phoneNumber} className="bg-cal-muted rounded-lg p-3">
<div className="flex items-center gap-2">
<Icon name="phone" className="text-emphasis h-4 w-4" />
<PhoneIcon className="text-emphasis h-4 w-4" />
<span className="text-emphasis text-sm font-medium">
{formatPhoneNumber(phone.phoneNumber)}
</span>
apps/web/modules/ee/workflows/components/agent-configuration/components/dialogs/ImportNumberDialog.tsx
+7 -7
View File
@@ -9,7 +9,7 @@ import { Button } from "@calcom/ui/components/button";
import { Dialog } from "@calcom/ui/components/dialog";
import { DialogContent, DialogHeader, DialogFooter as BaseDialogFooter } from "@calcom/ui/components/dialog";
import { Form, Label, Switch, TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { InfoIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -86,7 +86,7 @@ export function ImportNumberDialog({
<span className="flex items-center gap-1">
{t("phone_number")}
<Tooltip content={t("phone_number_info_tooltip")}>
<Icon name="info" className="text-muted h-4 w-4 cursor-pointer" />
<InfoIcon className="text-muted h-4 w-4 cursor-pointer" />
</Tooltip>
</span>
}
@@ -111,7 +111,7 @@ export function ImportNumberDialog({
<span className="flex items-center gap-1">
{t("termination_uri")}
<Tooltip content={t("termination_uri_info_tooltip")}>
<Icon name="info" className="text-muted h-4 w-4 cursor-pointer" />
<InfoIcon className="text-muted h-4 w-4 cursor-pointer" />
</Tooltip>
</span>
}
@@ -144,7 +144,7 @@ export function ImportNumberDialog({
<span className="flex items-center gap-1">
{t("sip_trunk_username")}
<Tooltip content={t("sip_trunk_username_info_tooltip")}>
<Icon name="info" className="text-muted h-4 w-4 cursor-pointer" />
<InfoIcon className="text-muted h-4 w-4 cursor-pointer" />
</Tooltip>
</span>
}
@@ -169,7 +169,7 @@ export function ImportNumberDialog({
<span className="flex items-center gap-1">
{t("sip_trunk_password")}
<Tooltip content={t("sip_trunk_password_info_tooltip")}>
<Icon name="info" className="text-muted h-4 w-4 cursor-pointer" />
<InfoIcon className="text-muted h-4 w-4 cursor-pointer" />
</Tooltip>
</span>
}
@@ -194,7 +194,7 @@ export function ImportNumberDialog({
<span className="flex items-center gap-1">
{t("nickname")}
<Tooltip content={t("nickname_info_tooltip")}>
<Icon name="info" className="text-muted h-4 w-4 cursor-pointer" />
<InfoIcon className="text-muted h-4 w-4 cursor-pointer" />
</Tooltip>
</span>
}
@@ -213,7 +213,7 @@ export function ImportNumberDialog({
{/* Having trouble importing section */}
<div className="rounded-lg border p-2">
<div className="flex items-start gap-3">
<Icon name="info" className="text-subtle mt-0.5 h-5 w-5 shrink-0" />
<InfoIcon className="text-subtle mt-0.5 h-5 w-5 shrink-0" />
<div className="flex-1">
<p className="text-emphasis text-sm font-medium">{t("having_trouble_importing")}</p>
<p className="text-subtle mt-1 text-sm leading-tight">
apps/web/modules/ee/workflows/components/agent-configuration/components/forms/VoiceSelector.tsx
+2 -2
View File
@@ -3,7 +3,7 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui/components/button";
import { Label } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { UserIcon } from "@coss/ui/icons";
interface VoiceSelectorProps {
selectedVoiceId?: string;
@@ -24,7 +24,7 @@ export function VoiceSelector({ selectedVoiceId, onVoiceDialogOpen, disabled = f
onClick={onVoiceDialogOpen}
disabled={disabled}
className="w-full justify-start">
<Icon name="user" className="mr-2 h-4 w-4" />
<UserIcon className="mr-2 h-4 w-4" />
{selectedVoiceId ? <span className="text-sm">{selectedVoiceId}</span> : t("select_voice")}
</Button>
</div>
apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/IncomingCallsTab.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { Label, Select } from "@calcom/ui/components/form";
import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { InfoIcon, PhoneIncomingIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import { VoiceSelectionDialog } from "../../../VoiceSelectionDialog";
@@ -91,7 +91,7 @@ export function IncomingCallsTab({
<div className="border-subtle rounded-xl border p-8">
<div className="stack-y-6 flex flex-col items-center text-center">
<div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-lg">
<Icon name="info" className="text-subtle h-8 w-8" />
<InfoIcon className="text-subtle h-8 w-8" />
</div>
<div className="stack-y-2">
<h3 className="text-emphasis text-lg font-semibold">{t("setup_incoming_agent")}</h3>
@@ -107,7 +107,7 @@ export function IncomingCallsTab({
<div className="border-subtle rounded-xl border p-8">
<div className="stack-y-6 flex flex-col items-center text-center">
<div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-lg">
<Icon name="phone-incoming" className="text-subtle h-8 w-8" />
<PhoneIncomingIcon className="text-subtle h-8 w-8" />
</div>
<div className="stack-y-2">
<h3 className="text-emphasis text-lg font-semibold">{t("setup_inbound_agent")}</h3>
apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@calcom/ui/components/dropdown";
import { Icon } from "@calcom/ui/components/icon";
import { LoaderIcon, PhoneIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import { WebCallDialog } from "@calcom/web/modules/ee/workflows/components/WebCallDialog";
@@ -131,7 +131,7 @@ export function PhoneNumberTab({
{updateAgentMutation.isPending && (
<div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-white/50">
<div className="flex items-center gap-2 text-sm text-gray-600">
<Icon name="loader" className="h-4 w-4 animate-spin" />
<LoaderIcon className="h-4 w-4 animate-spin" />
{t("updating")}...
</div>
</div>
@@ -279,7 +279,7 @@ export function PhoneNumberTab({
<div className="border-subtle rounded-xl border p-8">
<div className="stack-y-6 flex flex-col items-center text-center">
<div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-lg">
<Icon name="phone" className="text-subtle h-8 w-8" />
<PhoneIcon className="text-subtle h-8 w-8" />
</div>
<div className="stack-y-2">
<h3 className="text-emphasis text-lg font-semibold">{t("no_phone_numbers")}</h3>
apps/web/modules/ee/workflows/views/WorkflowPage.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui/components/form";
import { Form, Input } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { PencilIcon } from "@coss/ui/icons";
import { showToast } from "@calcom/ui/components/toast";
import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -476,7 +476,7 @@ function WorkflowPage({
disabled={isPending}
onClick={() => setIsEditingName(true)}
CustomStartIcon={
<Icon name="pencil" className="text-subtle group-hover:text-default h-3 w-3" />
<PencilIcon className="text-subtle group-hover:text-default h-3 w-3" />
}>
<span className="sr-only">{t("edit")}</span>
</Button>
apps/web/modules/embed/components/Embed.tsx
+3 -3
View File
@@ -38,7 +38,7 @@ import { Select, ColorPicker } from "@calcom/ui/components/form";
import { Label } from "@calcom/ui/components/form";
import { TextField } from "@calcom/ui/components/form";
import { Switch } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { ArrowLeftIcon, SunIcon } from "@coss/ui/icons";
import { HorizontalTabs } from "@calcom/ui/components/navigation";
import { showToast } from "@calcom/ui/components/toast";
@@ -190,7 +190,7 @@ const ThemeSelectControl = ({
}: ControlProps<{ value: EmbedTheme; label: string }, false>) => {
return (
<components.Control {...props}>
<Icon name="sun" className="text-subtle mr-2 h-4 w-4" />
<SunIcon className="text-subtle mr-2 h-4 w-4" />
{children}
</components.Control>
);
@@ -954,7 +954,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
className="text-emphasis mb-2.5 flex items-center text-xl font-semibold leading-5"
id="modal-title">
<button className="h-6 w-6" onClick={gotoEmbedTypeSelectionState}>
<Icon name="arrow-left" className="mr-4 w-4" />
<ArrowLeftIcon className="mr-4 w-4" />
</button>
{embed.title}
</h3>
apps/web/modules/event-types/components/EditWeightsForAllTeamMembers.tsx
+5 -5
View File
@@ -10,7 +10,7 @@ import type { AttributesQueryValue } from "@calcom/lib/raqb/types";
import { Avatar } from "@calcom/ui/components/avatar";
import { Button, buttonClasses } from "@calcom/ui/components/button";
import { TextField } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
import { ChevronDownIcon, InfoIcon, SearchIcon, UploadIcon } from "@coss/ui/icons";
import {
Sheet,
SheetBody,
@@ -272,7 +272,7 @@ export const EditWeightsForAllTeamMembers = ({
<SheetBody className="mt-4 flex h-full flex-col stack-y-6 p-1">
<div className="flex justify-start gap-2">
<label className={buttonClasses({ color: "secondary" })}>
<Icon name="upload" className="mr-2 h-4 w-4" />
<UploadIcon className="mr-2 h-4 w-4" />
<input type="file" accept=".csv" className="hidden" onChange={handleUploadCsv} />
{t("upload")}
</label>
@@ -285,7 +285,7 @@ export const EditWeightsForAllTeamMembers = ({
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value.toLowerCase())}
addOnLeading={
<Icon name="search" className="text-subtle h-4 w-4" aria-hidden="true" focusable="false" />
<SearchIcon className="text-subtle h-4 w-4" />
}
/>
@@ -304,10 +304,10 @@ export const EditWeightsForAllTeamMembers = ({
className="flex w-full items-center justify-between rounded-md border bg-red-50 p-3 text-sm text-red-900"
onClick={() => setIsErrorsExpanded(!isErrorsExpanded)}>
<div className="flex items-center space-x-2">
<Icon name="info" className="h-4 w-4" />
<InfoIcon className="h-4 w-4" />
<span>{t("csv_upload_errors", { count: uploadErrors.length })}</span>
</div>
<Icon name="chevron-down" className="h-4 w-4" />
<ChevronDownIcon className="h-4 w-4" />
</button>
{isErrorsExpanded && (
<div className="mt-2 stack-y-2">

Some files were not shown because too many files have changed in this diff Show More