From bf348ee20956e4de3d8149982c7708d84a6b4fd7 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Thu, 12 Feb 2026 14:30:27 +0100 Subject: [PATCH] refactor: migrate Icon to component icons from @coss/ui/icons (#27458) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 to 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 * refactor: migrate more static icons to @coss/ui/icons (batch 2) Migrated 18 files from to pattern: - Event meta, insights, shell, user table bulk actions - Webhooks, blocklist, form-builder, form components Co-Authored-By: Claude Opus 4.5 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 * 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 Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../routing-forms/[...pages]/FormEdit.tsx | 8 +- .../[...pages]/IncompleteBooking.tsx | 17 +- .../forms/[[...pages]]/Forms.tsx | 37 +- .../(use-page-wrapper)/auth/error/page.tsx | 4 +- .../availability/troubleshoot/layout.tsx | 4 +- .../insights/UpgradeTipWrapper.tsx | 8 +- .../SettingsLayoutAppDirClient.tsx | 16 +- .../_components/AdvancedPermissionGroup.tsx | 7 +- .../roles/_components/PbacOptInModal.tsx | 10 +- apps/web/components/AddToHomescreen.tsx | 4 +- apps/web/components/EnterprisePage.tsx | 14 +- apps/web/components/apps/AppPage.tsx | 24 +- apps/web/components/apps/alby/Setup.tsx | 4 +- .../components/apps/btcpayserver/Setup.tsx | 4 +- apps/web/components/apps/hitpay/Setup.tsx | 4 +- .../apps/ics-feedcalendar/Setup.tsx | 6 +- apps/web/components/apps/make/Setup.tsx | 4 +- apps/web/components/apps/paypal/Setup.tsx | 6 +- .../components/apps/routing-forms/Header.tsx | 12 +- .../apps/wipemycalother/confirmDialog.tsx | 4 +- apps/web/components/booking/CancelBooking.tsx | 6 +- .../web/components/dialog/AddGuestsDialog.tsx | 6 +- .../components/dialog/ChargeCardDialog.tsx | 6 +- .../components/dialog/EditLocationDialog.tsx | 4 +- apps/web/components/dialog/ReassignDialog.tsx | 6 +- .../components/dialog/RescheduleDialog.tsx | 4 +- .../components/AppConnectionItem.tsx | 6 +- .../security/TwoFactorModalHeader.tsx | 4 +- .../oauth-clients/oauth-client-form/index.tsx | 6 +- .../components/setup/EnterpriseLicense.tsx | 6 +- .../web/components/setup/LicenseSelection.tsx | 6 +- .../UsernameAvailability/PremiumTextfield.tsx | 5 +- .../UsernameTextfield.tsx | 4 +- apps/web/components/ui/form/DatePicker.tsx | 4 +- apps/web/modules/apps/apps-view.tsx | 4 +- .../apps/categories/categories-view.tsx | 6 +- .../modules/apps/components/AdminAppsList.tsx | 4 +- apps/web/modules/apps/components/AllApps.tsx | 6 +- .../modules/apps/components/Categories.tsx | 4 +- apps/web/modules/apps/components/Slider.tsx | 6 +- apps/web/modules/auth/logout-view.tsx | 4 +- .../modules/auth/oauth2/authorize-view.tsx | 6 +- .../modules/auth/platform/authorize-view.tsx | 8 +- apps/web/modules/auth/verify-view.tsx | 21 +- .../components/BlocklistEntryDetailsSheet.tsx | 4 +- .../components/BookingReportDetailsModal.tsx | 8 +- .../components/CreateBlocklistEntryModal.tsx | 6 +- .../bookings/components/AvailableTimes.tsx | 4 +- .../components/BookingCalendarContainer.tsx | 6 +- .../components/BookingDetailsSheet.tsx | 8 +- .../components/BookingSuccessCard.tsx | 4 +- .../components/DecoyBookingSuccessCard.tsx | 4 +- .../bookings/components/DryRunMessage.tsx | 4 +- .../components/HavingTroubleFindingTime.tsx | 6 +- .../components/SlotSelectionModalHeader.tsx | 4 +- .../bookings/components/VerifyCodeDialog.tsx | 4 +- .../bookings/components/ViewToggleButton.tsx | 6 +- .../event-meta/AvailableEventLocations.tsx | 6 +- .../components/event-meta/Duration.tsx | 6 +- .../components/event-meta/PriceIcon.tsx | 4 +- .../views/booking-dry-run-success-view.tsx | 4 +- .../bookings/views/bookings-single-view.tsx | 19 +- .../calendars/components/CalendarSwitch.tsx | 6 +- .../data-table/components/DataTable.tsx | 19 +- .../components/filters/AddFilterButton.tsx | 6 +- .../filters/BaseSelectFilterOptions.tsx | 4 +- .../filters/ColumnVisibilityButton.tsx | 4 +- .../components/filters/DateRangeFilter.tsx | 4 +- .../ee/dsync/components/GroupNameCell.tsx | 6 +- .../modules/ee/organizations/admin-api.tsx | 8 +- .../attributes/attributes-list-view.tsx | 4 +- .../components/AboutOrganizationForm.tsx | 4 +- .../new/_components/PaymentStatusView.tsx | 6 +- apps/web/modules/ee/organizations/profile.tsx | 6 +- .../ee/sso/components/ConnectionInfo.tsx | 8 +- .../components/IntercomContactForm.tsx | 8 +- .../ee/teams/components/EventTypesList.tsx | 4 +- .../components/InternalNotePresetsView.tsx | 6 +- .../components/MemberInvitationModal.tsx | 8 +- .../modules/ee/teams/components/TeamList.tsx | 21 +- .../ee/teams/components/TeamsListing.tsx | 24 +- .../ee/teams/views/team-profile-view.tsx | 4 +- .../ee/users/components/UsersTable.tsx | 6 +- .../workflows/components/AddActionDialog.tsx | 4 +- .../workflows/components/CallDetailsSheet.tsx | 4 +- .../components/SkeletonLoaderList.tsx | 6 +- .../components/TestPhoneCallDialog.tsx | 4 +- .../components/TimeTimeUnitInput.tsx | 4 +- .../components/VoiceSelectionDialog.tsx | 8 +- .../ee/workflows/components/WebCallDialog.tsx | 28 +- .../components/WorkflowDetailsPage.tsx | 26 +- .../workflows/components/WorkflowListPage.tsx | 10 +- .../components/WorkflowStepContainer.tsx | 16 +- .../components/dialogs/ImportNumberDialog.tsx | 14 +- .../components/forms/VoiceSelector.tsx | 4 +- .../components/tabs/IncomingCallsTab.tsx | 6 +- .../components/tabs/PhoneNumberTab.tsx | 6 +- .../ee/workflows/views/WorkflowPage.tsx | 4 +- apps/web/modules/embed/components/Embed.tsx | 6 +- .../EditWeightsForAllTeamMembers.tsx | 10 +- .../components/EventTypeLayout.tsx | 4 +- .../event-types/components/SkeletonLoader.tsx | 8 +- .../components/locations/HostLocations.tsx | 8 +- .../components/locations/Locations.tsx | 9 +- .../tabs/advanced/EventAdvancedTab.tsx | 9 +- .../components/tabs/advanced/FormBuilder.tsx | 10 +- .../components/tabs/ai/AIEventController.tsx | 4 +- .../assignment/EventTeamAssignmentTab.tsx | 4 +- .../availability/EventAvailabilityTab.tsx | 9 +- .../tabs/workflows/EventWorkflowsTab.tsx | 4 +- .../views/event-types-listing-view.tsx | 4 +- .../components/FeaturesSettings.tsx | 6 +- .../filters/components/TeamsFilter.tsx | 6 +- .../form-builder/components/Components.tsx | 4 +- .../components/FormBuilderField.tsx | 4 +- .../[[...step]]/onboarding-view.tsx | 4 +- .../insights/components/BookingAtCell.tsx | 4 +- .../components/booking/TimezoneBadge.tsx | 4 +- .../components/filters/DateTargetSelector.tsx | 4 +- .../components/filters/OrgTeamsFilter.tsx | 4 +- .../components/FieldMappingBuilder.tsx | 6 +- .../IntegrationAttributeSyncCard.tsx | 4 +- .../components/RuleBuilder.tsx | 4 +- .../onboarding/components/EmailInviteForm.tsx | 4 +- .../onboarding/components/InviteOptions.tsx | 8 +- .../onboarding-continuation-prompt.tsx | 4 +- ...nboarding-migrate-members-browser-view.tsx | 24 +- .../onboarding-migrate-teams-browser-view.tsx | 26 +- .../onboarding-teams-browser-view.tsx | 26 +- .../details/validated-organization-slug.tsx | 4 +- .../organization/invite/csv-upload-modal.tsx | 14 +- .../teams/organization-teams-view.tsx | 4 +- .../teams/details/validated-team-slug.tsx | 4 +- .../teams/invite/csv-upload-modal.tsx | 14 +- .../billing/components/BillingCredits.tsx | 4 +- .../settings/my-account/holidays-view.tsx | 6 +- .../settings/my-account/profile-view.tsx | 4 +- .../settings/oauth/OAuthClientsList.tsx | 6 +- .../oauth/view/OAuthClientFormFields.tsx | 8 +- .../outOfOffice/OutOfOfficeEntriesList.tsx | 4 +- .../compliance/ComplianceDocumentCard.tsx | 4 +- apps/web/modules/shell/Kbar.tsx | 23 +- apps/web/modules/shell/SideBar.tsx | 5 +- apps/web/modules/shell/TopNav.tsx | 4 +- .../shell/components/WelcomeToCalcomModal.tsx | 10 +- .../shell/user-dropdown/ProfileDropdown.tsx | 14 +- .../shell/user-dropdown/UserDropdown.tsx | 49 ++- apps/web/modules/signup-view.tsx | 7 +- .../components/TroubleshooterSidebar.tsx | 7 +- .../UserTable/BulkActions/EventTypesList.tsx | 4 +- .../BulkActions/MassAssignAttributes.tsx | 6 +- .../UserTable/BulkActions/TeamList.tsx | 4 +- .../videos-meeting-ended-single-view.tsx | 6 +- ...videos-meeting-not-started-single-view.tsx | 4 +- .../videos/views/videos-single-view.tsx | 7 +- .../webhooks/components/WebhookListItem.tsx | 4 +- .../webhooks/views/webhook-edit-view.tsx | 4 +- .../webhooks/views/webhook-new-view.tsx | 4 +- apps/web/public/static/locales/en/common.json | 1 + .../app-store/AppDependencyComponent.test.tsx | 75 ++-- packages/app-store/AppDependencyComponent.tsx | 17 +- packages/coss-ui/package.json | 10 + packages/coss-ui/src/icons.tsx | 324 ++++++++++++++++++ .../features/bookings/components/Header.tsx | 8 +- .../components/event-meta/PayIcon.tsx | 4 +- .../DestinationCalendarSelector.tsx | 4 +- .../form/components/LocationSelect.tsx | 16 +- .../schedules/components/ScheduleListItem.tsx | 4 +- .../settings/appDir/SettingsHeader.tsx | 4 +- .../atoms/src/components/ui/dialog.tsx | 4 +- .../atoms/src/components/ui/toast.tsx | 4 +- packages/ui/components/address/MultiEmail.tsx | 5 +- .../components/app-list-card/AppListCard.tsx | 8 +- .../components/arrow-button/ArrowButton.tsx | 6 +- packages/ui/components/badge/InfoBadge.tsx | 4 +- packages/ui/components/button/SplitButton.tsx | 4 +- .../calendar-switch/CalendarSwitch.tsx | 9 +- .../dialog/ConfirmationDialogContent.tsx | 30 +- .../editable-heading/EditableHeading.tsx | 8 +- .../editor/plugins/AddVariablesDropdown.tsx | 8 +- .../editor/plugins/ToolbarPlugin.tsx | 4 +- .../components/file-uploader/FileUploader.tsx | 9 +- .../ui/components/form/checkbox/Checkbox.tsx | 7 +- .../form/date-range-picker/Calendar.tsx | 12 +- packages/ui/components/form/inputs/Input.tsx | 186 +++++----- .../ui/components/form/inputs/InputError.tsx | 4 +- .../form/inputs/MultiOptionInput.tsx | 10 +- .../ui/components/form/inputs/TextField.tsx | 315 ++++++++--------- .../ui/components/form/select/components.tsx | 4 +- .../popover/MeetingTimeInTimezones.tsx | 8 +- .../ui/components/toast/ProgressToast.tsx | 10 +- packages/ui/components/toast/showToast.tsx | 15 +- 192 files changed, 1337 insertions(+), 1033 deletions(-) create mode 100644 packages/coss-ui/src/icons.tsx diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx index 704789d8db..0a8af24122 100644 --- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx +++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx @@ -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" )}> - {defaultValue?.label || "Select field type"} - + {defaultValue?.label || t("select_field_type")} + @@ -333,7 +333,7 @@ const FormEdit = ({ {/* Icon card - Top */}
- +
{/* Left fanned card */} diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx index da7c58be9d..348d50a487 100644 --- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx +++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx @@ -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 }) {
- +
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx index 1f0f4bc486..8b6b8d344b 100644 --- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx +++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx @@ -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: , title: t("create_your_first_form"), description: t("create_your_first_form_description"), }, { - icon: , + icon: , title: t("create_your_first_route"), description: t("route_to_the_right_person"), }, { - icon: , + icon: , title: t("reporting"), description: t("reporting_feature"), }, { - icon: , + icon: , title: t("test_routing_form"), description: t("test_preview_description"), }, { - icon: , + icon: , title: t("routing_forms_send_email_owner"), description: t("routing_forms_send_email_owner_description"), }, { - icon: , + icon: , title: t("download_responses"), description: t("download_responses_description"), }, diff --git a/apps/web/app/(use-page-wrapper)/auth/error/page.tsx b/apps/web/app/(use-page-wrapper)/auth/error/page.tsx index b19626fcba..b6289012d8 100644 --- a/apps/web/app/(use-page-wrapper)/auth/error/page.tsx +++ b/apps/web/app/(use-page-wrapper)/auth/error/page.tsx @@ -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) => {
- +
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx index 5c815f82aa..676bd0fb0a 100644 --- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx +++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx @@ -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({ } }}>
setIsExpanded(!isExpanded)}> - {isAutoEnabled && ( - + )}
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx index 373a9de136..0f0009d2dc 100644 --- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx +++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx @@ -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
- +

{t("pbac_opt_in_custom_roles_title")}

@@ -69,7 +69,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac
- +

@@ -81,7 +81,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac

- +

@@ -93,7 +93,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac

- +

diff --git a/apps/web/components/AddToHomescreen.tsx b/apps/web/components/AddToHomescreen.tsx index 00084c28ec..a0076649be 100644 --- a/apps/web/components/AddToHomescreen.tsx +++ b/apps/web/components/AddToHomescreen.tsx @@ -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"> {t("dismiss")} -

diff --git a/apps/web/components/EnterprisePage.tsx b/apps/web/components/EnterprisePage.tsx index 9a7b247eb2..5e530ddcb8 100644 --- a/apps/web/components/EnterprisePage.tsx +++ b/apps/web/components/EnterprisePage.tsx @@ -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: , title: t("branded_subdomain"), description: t("branded_subdomain_description"), }, { - icon: , + icon: , title: t("org_insights"), description: t("org_insights_description"), }, { - icon: , + icon: , title: t("extensive_whitelabeling"), description: t("extensive_whitelabeling_description"), }, { - icon: , + icon: , title: t("unlimited_teams"), description: t("unlimited_teams_description"), }, { - icon: , + icon: , title: t("unified_billing"), description: t("advanced_managed_events_description"), }, { - icon: , + icon: , title: t("advanced_managed_events"), description: t("advanced_managed_events_description"), }, diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx index 030798a63a..ca85f883b1 100644 --- a/apps/web/components/apps/AppPage.tsx +++ b/apps/web/components/apps/AppPage.tsx @@ -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 = ({
- +
{t("msteams_calendar_warning_body")} @@ -445,7 +453,7 @@ export const AppPage = ({ rel="noreferrer" className="text-emphasis text-sm font-normal no-underline hover:underline" href={docs}> - + {t("documentation")} @@ -457,7 +465,7 @@ export const AppPage = ({ rel="noreferrer" className="text-emphasis font-normal no-underline hover:underline" href={website}> - + {website.replace("https://", "")} @@ -469,7 +477,7 @@ export const AppPage = ({ rel="noreferrer" className="text-emphasis font-normal no-underline hover:underline" href={`mailto:${email}`}> - + {email} @@ -482,7 +490,7 @@ export const AppPage = ({ rel="noreferrer" className="text-emphasis font-normal no-underline hover:underline" href={tos}> - + {t("terms_of_service")} @@ -494,7 +502,7 @@ export const AppPage = ({ rel="noreferrer" className="text-emphasis font-normal no-underline hover:underline" href={privacy}> - + {t("privacy_policy")} @@ -505,7 +513,7 @@ export const AppPage = ({ {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })} - {t("report_app")} + {t("report_app")}
diff --git a/apps/web/components/apps/alby/Setup.tsx b/apps/web/components/apps/alby/Setup.tsx index 4d009286e2..2b581d6345 100644 --- a/apps/web/components/apps/alby/Setup.tsx +++ b/apps/web/components/apps/alby/Setup.tsx @@ -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 */}
- Your Alby lightning address will be + Your Alby lightning address will be used to generate invoices. If you update your lightning address, please disconnect and setup the Alby app again.
diff --git a/apps/web/components/apps/btcpayserver/Setup.tsx b/apps/web/components/apps/btcpayserver/Setup.tsx index 194c537964..557097d549 100644 --- a/apps/web/components/apps/btcpayserver/Setup.tsx +++ b/apps/web/components/apps/btcpayserver/Setup.tsx @@ -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 ? ( <> - + {t("connecting")} ) : ( diff --git a/apps/web/components/apps/hitpay/Setup.tsx b/apps/web/components/apps/hitpay/Setup.tsx index f2d3b96c2b..c0162cc2cb 100644 --- a/apps/web/components/apps/hitpay/Setup.tsx +++ b/apps/web/components/apps/hitpay/Setup.tsx @@ -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 ? (
- Create or connect to an existing + Create or connect to an existing HitPay account to receive payments for your paid bookings.
diff --git a/apps/web/components/apps/ics-feedcalendar/Setup.tsx b/apps/web/components/apps/ics-feedcalendar/Setup.tsx index 74c950c2ea..3b3cc8dd48 100644 --- a/apps/web/components/apps/ics-feedcalendar/Setup.tsx +++ b/apps/web/components/apps/ics-feedcalendar/Setup.tsx @@ -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))}> - + ) : null}
@@ -91,7 +91,7 @@ export default function ICSFeedSetup() { onClick={() => { setUrls((urls) => urls.concat("")); }}> - {t("add")} + {t("add")} {errorMessage && ( diff --git a/apps/web/components/apps/make/Setup.tsx b/apps/web/components/apps/make/Setup.tsx index f51599ce3d..6914156500 100644 --- a/apps/web/components/apps/make/Setup.tsx +++ b/apps/web/components/apps/make/Setup.tsx @@ -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"> - + {t("copy")} diff --git a/apps/web/components/apps/paypal/Setup.tsx b/apps/web/components/apps/paypal/Setup.tsx index e915b1bf23..4feb59bc10 100644 --- a/apps/web/components/apps/paypal/Setup.tsx +++ b/apps/web/components/apps/paypal/Setup.tsx @@ -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() {

- Important requirements: + Important requirements:

  • Paypal Business account
    • @@ -145,7 +145,7 @@ export default function PayPalSetup() {
  • You should be all setup after this.

    • - + Reminder:

    diff --git a/apps/web/components/apps/routing-forms/Header.tsx b/apps/web/components/apps/routing-forms/Header.tsx index 6aa28c2fc1..f301ac73c4 100644 --- a/apps/web/components/apps/routing-forms/Header.tsx +++ b/apps/web/components/apps/routing-forms/Header.tsx @@ -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={ - + }> Edit @@ -319,13 +319,13 @@ export function Header({ { value: "form-edit", label: {t("form")}, - iconLeft: , + iconLeft: , dataTestId: "toggle-group-item-form-edit", }, { value: "route-builder", label: {t("routing")}, - iconLeft: , + iconLeft: , }, ]} /> @@ -355,12 +355,12 @@ export function Header({ { value: "form-edit", label: {t("form")}, - iconLeft: , + iconLeft: , }, { value: "route-builder", label: {t("routing")}, - iconLeft: , + iconLeft: , }, ]} /> diff --git a/apps/web/components/apps/wipemycalother/confirmDialog.tsx b/apps/web/components/apps/wipemycalother/confirmDialog.tsx index f179edee33..ba71617fbc 100644 --- a/apps/web/components/apps/wipemycalother/confirmDialog.tsx +++ b/apps/web/components/apps/wipemycalother/confirmDialog.tsx @@ -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) => { e.preventDefault()}>

    - +
    diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx index 8b03a7c75c..104aa55595 100644 --- a/apps/web/components/booking/CancelBooking.tsx +++ b/apps/web/components/booking/CancelBooking.tsx @@ -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 && (
    - +
- +
diff --git a/apps/web/modules/auth/platform/authorize-view.tsx b/apps/web/modules/auth/platform/authorize-view.tsx index 3b3e5bedd5..9e6ca0b1fd 100644 --- a/apps/web/modules/auth/platform/authorize-view.tsx +++ b/apps/web/modules/auth/platform/authorize-view.tsx @@ -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 ? ( } + fallback={} className="items-center" imageSrc={client.logo} size="lg" @@ -75,7 +75,7 @@ export default function Authorize() { ) : ( } + fallback={} className="items-center" imageSrc="/cal-com-icon.svg" size="lg" @@ -98,7 +98,7 @@ export default function Authorize() {
    {permissions}
- +
diff --git a/apps/web/modules/auth/verify-view.tsx b/apps/web/modules/auth/verify-view.tsx index d75bab6ba6..e8d539a479 100644 --- a/apps/web/modules/auth/verify-view.tsx +++ b/apps/web/modules/auth/verify-view.tsx @@ -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 = () => (
- +
); @@ -106,9 +105,9 @@ const PaymentSuccess = () => (
); -const MailOpenIcon = () => ( +const MailOpenIconWrapper = () => (
- +
); @@ -170,7 +169,7 @@ export default function Verify({ EMAIL_FROM }: { EMAIL_FROM?: string }) { ) : isPremiumUsername ? ( ) : ( - + )}

{hasPaymentFailed diff --git a/apps/web/modules/blocklist/components/BlocklistEntryDetailsSheet.tsx b/apps/web/modules/blocklist/components/BlocklistEntryDetailsSheet.tsx index 74e8c48cf3..e7722d9274 100644 --- a/apps/web/modules/blocklist/components/BlocklistEntryDetailsSheet.tsx +++ b/apps/web/modules/blocklist/components/BlocklistEntryDetailsSheet.tsx @@ -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({
{report.booking.title} - +
); diff --git a/apps/web/modules/blocklist/components/BookingReportDetailsModal.tsx b/apps/web/modules/blocklist/components/BookingReportDetailsModal.tsx index 64f530743d..50f61a2722 100644 --- a/apps/web/modules/blocklist/components/BookingReportDetailsModal.tsx +++ b/apps/web/modules/blocklist/components/BookingReportDetailsModal.tsx @@ -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({
{report.booking.title || t("untitled")} - +
))} @@ -157,12 +157,12 @@ export function BookingReportDetailsModal({ { value: WatchlistType.EMAIL, label: t("block_this_email"), - iconLeft: , + iconLeft: , }, { value: WatchlistType.DOMAIN, label: t("block_all_from_domain"), - iconLeft: , + iconLeft: , }, ]} /> diff --git a/apps/web/modules/blocklist/components/CreateBlocklistEntryModal.tsx b/apps/web/modules/blocklist/components/CreateBlocklistEntryModal.tsx index dcee31db5a..a5630d16f1 100644 --- a/apps/web/modules/blocklist/components/CreateBlocklistEntryModal.tsx +++ b/apps/web/modules/blocklist/components/CreateBlocklistEntryModal.tsx @@ -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: }, - { label: t("domain"), value: WatchlistType.DOMAIN, iconLeft: }, + { label: t("email"), value: WatchlistType.EMAIL, iconLeft: }, + { label: t("domain"), value: WatchlistType.DOMAIN, iconLeft: }, ]; return ( diff --git a/apps/web/modules/bookings/components/AvailableTimes.tsx b/apps/web/modules/bookings/components/AvailableTimes.tsx index 2d606daf5b..5f495ad47e 100644 --- a/apps/web/modules/bookings/components/AvailableTimes.tsx +++ b/apps/web/modules/bookings/components/AvailableTimes.tsx @@ -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 = ({
- +

{t("all_booked_today")}

diff --git a/apps/web/modules/bookings/components/BookingCalendarContainer.tsx b/apps/web/modules/bookings/components/BookingCalendarContainer.tsx index 66f4cd086e..09f4a084f3 100644 --- a/apps/web/modules/bookings/components/BookingCalendarContainer.tsx +++ b/apps/web/modules/bookings/components/BookingCalendarContainer.tsx @@ -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({ diff --git a/apps/web/modules/bookings/components/BookingDetailsSheet.tsx b/apps/web/modules/bookings/components/BookingDetailsSheet.tsx index 11e1c0309f..ee9bdfc607 100644 --- a/apps/web/modules/bookings/components/BookingDetailsSheet.tsx +++ b/apps/web/modules/bookings/components/BookingDetailsSheet.tsx @@ -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({
{t("view_booking")} - +
@@ -798,7 +798,7 @@ function NewRescheduledBookingInfo({ booking }: { booking: BookingOutput }) {
{t("original_booking")} - +
@@ -894,7 +894,7 @@ function BookingHeaderBadges({ ) : null} {recurringInfo && ( - + {recurringInfo.count} )} diff --git a/apps/web/modules/bookings/components/BookingSuccessCard.tsx b/apps/web/modules/bookings/components/BookingSuccessCard.tsx index 557bee1f74..baac3864ae 100644 --- a/apps/web/modules/bookings/components/BookingSuccessCard.tsx +++ b/apps/web/modules/bookings/components/BookingSuccessCard.tsx @@ -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">
- +
diff --git a/apps/web/modules/bookings/components/DecoyBookingSuccessCard.tsx b/apps/web/modules/bookings/components/DecoyBookingSuccessCard.tsx index 1f6cfb7527..07edd2e9a3 100644 --- a/apps/web/modules/bookings/components/DecoyBookingSuccessCard.tsx +++ b/apps/web/modules/bookings/components/DecoyBookingSuccessCard.tsx @@ -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">
- +
diff --git a/apps/web/modules/bookings/components/DryRunMessage.tsx b/apps/web/modules/bookings/components/DryRunMessage.tsx index c0ec6b6378..e6b9ff9d28 100644 --- a/apps/web/modules/bookings/components/DryRunMessage.tsx +++ b/apps/web/modules/bookings/components/DryRunMessage.tsx @@ -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`}>
- +
{t("dry_run_mode_active")} diff --git a/apps/web/modules/bookings/components/HavingTroubleFindingTime.tsx b/apps/web/modules/bookings/components/HavingTroubleFindingTime.tsx index 8280c2255c..128718505b 100644 --- a/apps/web/modules/bookings/components/HavingTroubleFindingTime.tsx +++ b/apps/web/modules/bookings/components/HavingTroubleFindingTime.tsx @@ -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 (
- +

{t("having_trouble_finding_time")}

{/* 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")} + {t("show_more")}
); diff --git a/apps/web/modules/bookings/components/SlotSelectionModalHeader.tsx b/apps/web/modules/bookings/components/SlotSelectionModalHeader.tsx index 315a6cc688..75e867f03c 100644 --- a/apps/web/modules/bookings/components/SlotSelectionModalHeader.tsx +++ b/apps/web/modules/bookings/components/SlotSelectionModalHeader.tsx @@ -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 && }
- + {TimezoneSelect && (
- +

{error}

diff --git a/apps/web/modules/bookings/components/ViewToggleButton.tsx b/apps/web/modules/bookings/components/ViewToggleButton.tsx index baf80abb28..1ee291acea 100644 --- a/apps/web/modules/bookings/components/ViewToggleButton.tsx +++ b/apps/web/modules/bookings/components/ViewToggleButton.tsx @@ -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: , + iconLeft: , }, { value: "calendar", label: "", tooltip: t("calendar_view"), - iconLeft: , + iconLeft: , }, ]} /> diff --git a/apps/web/modules/bookings/components/event-meta/AvailableEventLocations.tsx b/apps/web/modules/bookings/components/event-meta/AvailableEventLocations.tsx index c7f6af874b..1e349ee231 100644 --- a/apps/web/modules/bookings/components/event-meta/AvailableEventLocations.tsx +++ b/apps/web/modules/bookings/components/event-meta/AvailableEventLocations.tsx @@ -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 (
{eventLocationType.iconUrl === "/link.svg" ? ( - + ) : ( )} @@ -98,7 +98,7 @@ export function AvailableEventLocations({ locations }: { locations: LocationObje return filteredLocations.length > 1 ? (
{isPlatform ? ( - + ) : ( = 60 minutes */ export const getDurationFormatted = (mins: number | undefined, t: TFunction) => { @@ -106,7 +106,7 @@ export const EventDuration = ({ {leftVisible && ( @@ -136,7 +136,7 @@ export const EventDuration = ({ )} diff --git a/apps/web/modules/bookings/components/event-meta/PriceIcon.tsx b/apps/web/modules/bookings/components/event-meta/PriceIcon.tsx index 2b31bceee7..a9424dee57 100644 --- a/apps/web/modules/bookings/components/event-meta/PriceIcon.tsx +++ b/apps/web/modules/bookings/components/event-meta/PriceIcon.tsx @@ -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 ; + if (currency !== "BTC") return ; return ; } diff --git a/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx b/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx index 83e5d1799d..559191f3ff 100644 --- a/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx +++ b/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx @@ -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() {
- +

{t("booking_dry_run_successful")} diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx index e77a8bf0e6..0effd86916 100644 --- a/apps/web/modules/bookings/views/bookings-single-view.tsx +++ b/apps/web/modules/bookings/views/bookings-single-view.tsx @@ -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"> - {t("back_to_bookings")} + {t("back_to_bookings")}

)} @@ -536,12 +543,12 @@ export default function Success(props: PageProps) { isCancelled ? "bg-error" : "" )}> {!giphyImage && !needsConfirmation && !isAwaitingPayment && isReschedulable && ( - + )} {(needsConfirmation || isAwaitingPayment) && isReschedulable && ( - + )} - {isCancelled && } + {isCancelled && }
@@ -1172,7 +1179,7 @@ const RescheduledToLink = ({ rescheduledToUid }: { rescheduledToUid: string }) =
{t("view_booking")} - +
@@ -1198,7 +1205,7 @@ const DisplayLocation = ({ className={classNames("text-default flex items-center gap-2", className)} rel="noreferrer"> {providerName || "Link"} - + ) : (

{locationToDisplay}

diff --git a/apps/web/modules/calendars/components/CalendarSwitch.tsx b/apps/web/modules/calendars/components/CalendarSwitch.tsx index f545d127d3..82b7d28836 100644 --- a/apps/web/modules/calendars/components/CalendarSwitch.tsx +++ b/apps/web/modules/calendars/components/CalendarSwitch.tsx @@ -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) => { {!!props.destination && ( - + {t("adding_events_to")} )} {mutation.isPending && ( - + )}
); diff --git a/apps/web/modules/data-table/components/DataTable.tsx b/apps/web/modules/data-table/components/DataTable.tsx index 7d56e956a4..e59f491f0e 100644 --- a/apps/web/modules/data-table/components/DataTable.tsx +++ b/apps/web/modules/data-table/components/DataTable.tsx @@ -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 = ({ header }: { header: Header }) }> {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
- {header.column.getIsSorted() === "asc" && } - {header.column.getIsSorted() === "desc" && } + {header.column.getIsSorted() === "asc" && } + {header.column.getIsSorted() === "desc" && }
- ({ header }: { header: Header }) header.column.toggleSorting(false, true); } }}> - + {t("asc")}
- {header.column.getIsSorted() === "asc" && } + {header.column.getIsSorted() === "asc" && } ({ header }: { header: Header }) header.column.toggleSorting(true, true); } }}> - + {t("desc")}
- {header.column.getIsSorted() === "desc" && } + {header.column.getIsSorted() === "desc" && } )} @@ -535,7 +534,7 @@ const TableHeadLabel = ({ header }: { header: Header }) header.column.toggleVisibility(false); setOpen(false); }}> - + {t("hide")} )} diff --git a/apps/web/modules/data-table/components/filters/AddFilterButton.tsx b/apps/web/modules/data-table/components/filters/AddFilterButton.tsx index 11767ba1b7..40f22f9335 100644 --- a/apps/web/modules/data-table/components/filters/AddFilterButton.tsx +++ b/apps/web/modules/data-table/components/filters/AddFilterButton.tsx @@ -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( @@ -81,7 +81,7 @@ function AddFilterButtonComponent( className="flex items-center justify-between rounded-none px-4 py-2" data-testid={`add-filter-item-${column.id}`}> {startCase(column.title)} - {showHiddenIndicator && } + {showHiddenIndicator && } ); })} diff --git a/apps/web/modules/data-table/components/filters/BaseSelectFilterOptions.tsx b/apps/web/modules/data-table/components/filters/BaseSelectFilterOptions.tsx index cbdc2cfc18..35aafd226e 100644 --- a/apps/web/modules/data-table/components/filters/BaseSelectFilterOptions.tsx +++ b/apps/web/modules/data-table/components/filters/BaseSelectFilterOptions.tsx @@ -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 {isOptionSelected(filterValue, optionValue) && ( - + )}
{optionLabel} diff --git a/apps/web/modules/data-table/components/filters/ColumnVisibilityButton.tsx b/apps/web/modules/data-table/components/filters/ColumnVisibilityButton.tsx index 19aa46c99a..edb7c052fe 100644 --- a/apps/web/modules/data-table/components/filters/ColumnVisibilityButton.tsx +++ b/apps/web/modules/data-table/components/filters/ColumnVisibilityButton.tsx @@ -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 { table: Table; @@ -66,7 +66,7 @@ function ColumnVisibilityButtonComponent( "border-subtle mr-2 flex h-4 w-4 items-center justify-center rounded-sm border", isVisible ? "text-emphasis" : "opacity-50 [&_svg]:invisible" )}> - +
{column.columnDef.header} diff --git a/apps/web/modules/data-table/components/filters/DateRangeFilter.tsx b/apps/web/modules/data-table/components/filters/DateRangeFilter.tsx index 6816213cce..d0b410b1fc 100644 --- a/apps/web/modules/data-table/components/filters/DateRangeFilter.tsx +++ b/apps/web/modules/data-table/components/filters/DateRangeFilter.tsx @@ -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); }}> {t(option.labelKey, option.i18nOptions)} - {selectedPreset.value === option.value && } + {selectedPreset.value === option.value && } ))} diff --git a/apps/web/modules/ee/dsync/components/GroupNameCell.tsx b/apps/web/modules/ee/dsync/components/GroupNameCell.tsx index ff1cd860de..369d7cae53 100644 --- a/apps/web/modules/ee/dsync/components/GroupNameCell.tsx +++ b/apps/web/modules/ee/dsync/components/GroupNameCell.tsx @@ -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)

{name}

- removeGroupName(name)} /> + removeGroupName(name)} />
@@ -111,7 +111,7 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)

{t("add_group_name")}

)}
- addGroupName(newGroupName)} /> + addGroupName(newGroupName)} />
diff --git a/apps/web/modules/ee/organizations/admin-api.tsx b/apps/web/modules/ee/organizations/admin-api.tsx index 300d3ae0c3..c1b646ea67 100644 --- a/apps/web/modules/ee/organizations/admin-api.tsx +++ b/apps/web/modules/ee/organizations/admin-api.tsx @@ -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: , title: t("admin_api"), description: t("leverage_our_api"), }, { - icon: , + icon: , title: `SCIM & ${t("directory_sync")}`, description: t("directory_sync_description"), }, { - icon: , + icon: , title: "Cal.ai", description: t("use_cal_ai_to_make_call_description"), }, diff --git a/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx b/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx index e026472d1c..8bae9b02b9 100644 --- a/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx +++ b/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx @@ -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({ ) : (
- +

{t("add_attributes")} diff --git a/apps/web/modules/ee/organizations/components/AboutOrganizationForm.tsx b/apps/web/modules/ee/organizations/components/AboutOrganizationForm.tsx index 1781f3e211..de1cd5af4d 100644 --- a/apps/web/modules/ee/organizations/components/AboutOrganizationForm.tsx +++ b/apps/web/modules/ee/organizations/components/AboutOrganizationForm.tsx @@ -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 = () => {
} + fallback={} className="items-center" imageSrc={value} size="lg" diff --git a/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx b/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx index 2fbb2f3a91..e9b00e86e4 100644 --- a/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx +++ b/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx @@ -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 (
- +

{t("payment_failed")}

@@ -52,7 +52,7 @@ const PaymentStatusView = () => { return (
- +

{t("payment_successful")}

diff --git a/apps/web/modules/ee/organizations/profile.tsx b/apps/web/modules/ee/organizations/profile.tsx index 65faa54271..4ef0c1b17b 100644 --- a/apps/web/modules/ee/organizations/profile.tsx +++ b/apps/web/modules/ee/organizations/profile.tsx @@ -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 }) => { } + fallback={} size="lg" />
@@ -453,7 +453,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => { type="button" aria-label="copy organization id" onClick={() => handleCopy(value.toString())}> - + } diff --git a/apps/web/modules/ee/sso/components/ConnectionInfo.tsx b/apps/web/modules/ee/sso/components/ConnectionInfo.tsx index 54aa01e372..5c878fa9c0 100644 --- a/apps/web/modules/ee/sso/components/ConnectionInfo.tsx +++ b/apps/web/modules/ee/sso/components/ConnectionInfo.tsx @@ -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 "> - + {t("copy")} @@ -124,7 +124,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin }} type="button" className="rounded-l-none py-[19px] text-base "> - + {t("copy")} @@ -160,7 +160,7 @@ const OIDCInfo = ({ callbackUrl }: { callbackUrl: string | null }) => { }} type="button" className="rounded-l-none py-[19px] text-base "> - + {t("copy")} diff --git a/apps/web/modules/ee/support/components/IntercomContactForm.tsx b/apps/web/modules/ee/support/components/IntercomContactForm.tsx index 46a2da72b8..313d2e282c 100644 --- a/apps/web/modules/ee/support/components/IntercomContactForm.tsx +++ b/apps/web/modules/ee/support/components/IntercomContactForm.tsx @@ -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 = () => { @@ -174,12 +174,12 @@ export const IntercomContactForm = () => {
{isSubmitting ? (
- + {t("sending")}
) : ( <> - + {t("send_message")} )} diff --git a/apps/web/modules/ee/teams/components/EventTypesList.tsx b/apps/web/modules/ee/teams/components/EventTypesList.tsx index 88406c3387..ff21babd30 100644 --- a/apps/web/modules/ee/teams/components/EventTypesList.tsx +++ b/apps/web/modules/ee/teams/components/EventTypesList.tsx @@ -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" )}> - +
); diff --git a/apps/web/modules/ee/teams/components/InternalNotePresetsView.tsx b/apps/web/modules/ee/teams/components/InternalNotePresetsView.tsx index f01c4543f0..0e214f1b32 100644 --- a/apps/web/modules/ee/teams/components/InternalNotePresetsView.tsx +++ b/apps/web/modules/ee/teams/components/InternalNotePresetsView.tsx @@ -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}> - +
- + , + iconLeft: , }, - { value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: }, + { value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: }, ]; if (canSeeOrganization) { array.unshift({ value: "ORGANIZATION", label: t("organization"), - iconLeft: , + iconLeft: , }); } return array; diff --git a/apps/web/modules/ee/teams/components/TeamList.tsx b/apps/web/modules/ee/teams/components/TeamList.tsx index 32465177b7..a5bf8ec50d 100644 --- a/apps/web/modules/ee/teams/components/TeamList.tsx +++ b/apps/web/modules/ee/teams/components/TeamList.tsx @@ -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) {
} + icon={} 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) { }} /> } + icon={} variant="basic" title={t("Get a clean subdomain")} description={t( @@ -96,7 +103,7 @@ export default function TeamList(props: Props) { }} /> } + icon={} variant="basic" title={t("Admin tools and analytics")} description={t( @@ -134,7 +141,7 @@ export default function TeamList(props: Props) {

{t("recommended_next_steps")}

} + icon={} 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) { }} /> } + icon={} variant="basic" title={t("collective_or_roundrobin")} description={t("book_your_team_members")} @@ -154,7 +161,7 @@ export default function TeamList(props: Props) { }} /> } + icon={} variant="basic" title={t("appearance")} description={t("appearance_description")} diff --git a/apps/web/modules/ee/teams/components/TeamsListing.tsx b/apps/web/modules/ee/teams/components/TeamsListing.tsx index a0a83f4e49..bdb3eab907 100644 --- a/apps/web/modules/ee/teams/components/TeamsListing.tsx +++ b/apps/web/modules/ee/teams/components/TeamsListing.tsx @@ -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: , title: t("collective_scheduling"), description: t("make_it_easy_to_book"), }, { - icon: , + icon: , title: t("round_robin"), description: t("find_the_best_person"), }, { - icon: , + icon: , title: t("fixed_round_robin"), description: t("add_one_fixed_attendee"), }, { - icon: , + icon: , title: t("sms_attendee_action"), description: t("send_reminder_sms"), }, { - icon: , + icon: , title: `Cal Video ${t("recordings_title")}`, description: t("upgrade_to_access_recordings_description"), }, { - icon: , + icon: , title: t("disable_cal_branding", { appName: APP_NAME }), description: t("disable_cal_branding_description", { appName: APP_NAME }), }, @@ -175,7 +183,7 @@ export function TeamsListing({ )}

- {t("tip_username_plus")} + {t("tip_username_plus")}

); diff --git a/apps/web/modules/ee/teams/views/team-profile-view.tsx b/apps/web/modules/ee/teams/views/team-profile-view.tsx index 1d0ce78c13..71b79947c8 100644 --- a/apps/web/modules/ee/teams/views/team-profile-view.tsx +++ b/apps/web/modules/ee/teams/views/team-profile-view.tsx @@ -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())}> - + } diff --git a/apps/web/modules/ee/users/components/UsersTable.tsx b/apps/web/modules/ee/users/components/UsersTable.tsx index 036b3f2f82..b0a8ed09bf 100644 --- a/apps/web/modules/ee/users/components/UsersTable.tsx +++ b/apps/web/modules/ee/users/components/UsersTable.tsx @@ -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() { /{user.username} {user.profiles[0]?.username && ( - + {user.profiles[0]?.username} )} - {user.locked && } + {user.locked && }
{user.email} diff --git a/apps/web/modules/ee/workflows/components/AddActionDialog.tsx b/apps/web/modules/ee/workflows/components/AddActionDialog.tsx index 43db82e54e..0a9db533a7 100644 --- a/apps/web/modules/ee/workflows/components/AddActionDialog.tsx +++ b/apps/web/modules/ee/workflows/components/AddActionDialog.tsx @@ -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) => { - +
diff --git a/apps/web/modules/ee/workflows/components/CallDetailsSheet.tsx b/apps/web/modules/ee/workflows/components/CallDetailsSheet.tsx index 9f3f7ae18c..6f1829b83b 100644 --- a/apps/web/modules/ee/workflows/components/CallDetailsSheet.tsx +++ b/apps/web/modules/ee/workflows/components/CallDetailsSheet.tsx @@ -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 (
- + {isAgent ? t("agent") : t("user")} diff --git a/apps/web/modules/ee/workflows/components/SkeletonLoaderList.tsx b/apps/web/modules/ee/workflows/components/SkeletonLoaderList.tsx index 41acf38caf..4cccd0c97b 100644 --- a/apps/web/modules/ee/workflows/components/SkeletonLoaderList.tsx +++ b/apps/web/modules/ee/workflows/components/SkeletonLoaderList.tsx @@ -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() {
- + - +
diff --git a/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx b/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx index 0320b527b7..5d52e6899f 100644 --- a/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx +++ b/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx @@ -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}> - + {t("make_test_call")} diff --git a/apps/web/modules/ee/workflows/components/TimeTimeUnitInput.tsx b/apps/web/modules/ee/workflows/components/TimeTimeUnitInput.tsx index 1087583dba..5aa472c101 100644 --- a/apps/web/modules/ee/workflows/components/TimeTimeUnitInput.tsx +++ b/apps/web/modules/ee/workflows/components/TimeTimeUnitInput.tsx @@ -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 = ({ diff --git a/apps/web/modules/ee/workflows/components/VoiceSelectionDialog.tsx b/apps/web/modules/ee/workflows/components/VoiceSelectionDialog.tsx index 18f8967154..7167f9a96b 100644 --- a/apps/web/modules/ee/workflows/components/VoiceSelectionDialog.tsx +++ b/apps/web/modules/ee/workflows/components/VoiceSelectionDialog.tsx @@ -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 ? ( - + ) : ( - + )}
- +
{row.original.voice_name}
diff --git a/apps/web/modules/ee/workflows/components/WebCallDialog.tsx b/apps/web/modules/ee/workflows/components/WebCallDialog.tsx index 1c2e0f7c49..f6056b188b 100644 --- a/apps/web/modules/ee/workflows/components/WebCallDialog.tsx +++ b/apps/web/modules/ee/workflows/components/WebCallDialog.tsx @@ -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 ; + return ; case "active": - return ; + return ; case "ended": - return ; + return ; case "error": - return ; + return ; default: - return ; + return ; } }; @@ -396,7 +404,7 @@ export function WebCallDialog({ variant="icon" onClick={() => setTranscript([])} disabled={callStatus === "active"}> - + )}
@@ -405,7 +413,7 @@ export function WebCallDialog({ {transcript.length === 0 ? (
- +

{callStatus === "idle" ? t("start_call_to_see_conversation") @@ -441,7 +449,7 @@ export function WebCallDialog({ {error && callStatus === "error" && (

- + {error}
@@ -465,7 +473,7 @@ export function WebCallDialog({ onClick={handleStartCall} loading={createWebCallMutation.isPending || callStatus === "connecting"} disabled={!hasCredits || createWebCallMutation.isPending || callStatus === "connecting"}> - + {callStatus === "connecting" ? t("connecting") : t("start_web_call")} @@ -475,7 +483,7 @@ export function WebCallDialog({ color="destructive" onClick={handleEndCall} disabled={callStatus !== "active"}> - + {t("end_call")} )} diff --git a/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx b/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx index 6318da5527..f564e5490a 100644 --- a/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx +++ b/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx @@ -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={
- +
{t("trigger")}
@@ -239,7 +237,7 @@ export default function WorkflowDetailsPage(props: Props) { label={
- +
{t("action")}
diff --git a/apps/web/modules/ee/workflows/components/WorkflowListPage.tsx b/apps/web/modules/ee/workflows/components/WorkflowListPage.tsx index 6b392a1d4d..81b72241c7 100644 --- a/apps/web/modules/ee/workflows/components/WorkflowListPage.tsx +++ b/apps/web/modules/ee/workflows/components/WorkflowListPage.tsx @@ -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 ? (
-
) : 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) =>

{activeOn.eventType.title}

)}>
-

diff --git a/apps/web/modules/event-types/components/EditWeightsForAllTeamMembers.tsx b/apps/web/modules/event-types/components/EditWeightsForAllTeamMembers.tsx index 54eee476aa..1ce9f2ff6d 100644 --- a/apps/web/modules/event-types/components/EditWeightsForAllTeamMembers.tsx +++ b/apps/web/modules/event-types/components/EditWeightsForAllTeamMembers.tsx @@ -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 = ({
@@ -285,7 +285,7 @@ export const EditWeightsForAllTeamMembers = ({ value={searchQuery} onChange={(e) => setSearchQuery(e.target.value.toLowerCase())} addOnLeading={ -