From 55a328436063c1668a3c32c682cd135d11c7bcd9 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Tue, 29 Sep 2026 01:01:16 +0200 Subject: [PATCH] refactor(web): move the app chrome from phosphor to material symbols Auth pages, dialogs, the command palette, the user menu, Applications, the rich-text toolbar, the stylesheet editor and the error screens use the Material Symbols set instead of Phosphor; the icon subset gains the 35 glyphs they need. Phosphor stays for brand logos, the landing page and the icons printed on resumes. Also removes the form field and test mock that only wrapped the old rich input. --- apps/web/src/components/input/chip-input.tsx | 6 +- apps/web/src/components/input/rich-input.tsx | 88 ++++++------------ apps/web/src/components/input/url-input.tsx | 4 +- .../src/components/layout/error-screen.tsx | 8 +- .../components/layout/not-found-screen.tsx | 8 +- apps/web/src/dialogs/auth/change-password.tsx | 12 ++- .../src/dialogs/auth/disable-two-factor.tsx | 6 +- .../src/dialogs/auth/enable-two-factor.tsx | 10 +- apps/web/src/dialogs/resume/index.tsx | 8 +- .../components/application-form-sheet.tsx | 8 +- .../applications/components/calendar-view.tsx | 23 ++--- .../components/file-attachment-field.tsx | 8 +- .../applications/components/insights-view.tsx | 4 +- .../components/interview-dialog.tsx | 4 +- .../ats-checker/report/report-view.tsx | 6 +- .../ats-checker/report/score-header.tsx | 4 +- .../features/auth/components/social-auth.tsx | 7 +- apps/web/src/features/auth/pages/error.tsx | 8 +- .../features/auth/pages/forgot-password.tsx | 4 +- apps/web/src/features/auth/pages/login.tsx | 6 +- apps/web/src/features/auth/pages/register.tsx | 8 +- .../features/auth/pages/reset-password.tsx | 4 +- .../features/auth/pages/resume-password.tsx | 6 +- .../src/features/auth/pages/verify-2fa.tsx | 6 +- .../features/command-palette/pages/ask.tsx | 4 +- .../command-palette/pages/navigation.tsx | 34 +++---- .../pages/preferences/index.tsx | 6 +- .../command-palette/pages/resumes.tsx | 18 ++-- .../resume/editor/write/picture-settings.tsx | 17 +--- .../src/features/resume/stylesheet/editor.tsx | 4 +- .../resume/stylesheet/legacy-banner.tsx | 6 +- .../src/features/resume/stylesheet/status.tsx | 12 +-- .../features/resume/stylesheet/toolbar.tsx | 23 ++--- apps/web/src/features/user/dropdown-menu.tsx | 7 +- apps/web/src/libs/tanstack-form.test.tsx | 20 +--- apps/web/src/libs/tanstack-form.tsx | 21 +---- .../-sidebar/right/sections/information.tsx | 4 +- .../-sidebar/right/sections/layout/pages.tsx | 24 ++--- .../src/icons/material-symbols-rounded.json | 37 +++++++- .../src/icons/material-symbols-rounded.woff2 | Bin 29868 -> 50344 bytes packages/ui/src/icons/names.ts | 35 +++++++ 41 files changed, 251 insertions(+), 277 deletions(-) diff --git a/apps/web/src/components/input/chip-input.tsx b/apps/web/src/components/input/chip-input.tsx index eab48aabb..196ba6428 100644 --- a/apps/web/src/components/input/chip-input.tsx +++ b/apps/web/src/components/input/chip-input.tsx @@ -12,11 +12,11 @@ import { rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useS import { CSS } from "@dnd-kit/utilities"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { PencilSimpleIcon, XIcon } from "@phosphor-icons/react"; import * as React from "react"; import { createPortal } from "react-dom"; import { Badge } from "@reactive-resume/ui/components/badge"; import { useFormControl } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { Kbd } from "@reactive-resume/ui/components/kbd"; import { cn } from "@reactive-resume/utils/style"; @@ -110,7 +110,7 @@ function ChipItem({ id, chip, index, isEditing, onEdit, onRemove }: ChipItemProp onEdit(index); }} > - + diff --git a/apps/web/src/components/input/rich-input.tsx b/apps/web/src/components/input/rich-input.tsx index a9ba5c5f5..df209a0be 100644 --- a/apps/web/src/components/input/rich-input.tsx +++ b/apps/web/src/components/input/rich-input.tsx @@ -2,35 +2,6 @@ import type { Editor, UseEditorOptions } from "@tiptap/react"; import { t } from "@lingui/core/macro"; import { useLingui } from "@lingui/react"; import { Trans } from "@lingui/react/macro"; -import { - ArrowsInSimpleIcon, - ArrowsOutSimpleIcon, - CodeSimpleIcon, - HighlighterCircleIcon, - KeyReturnIcon, - LinkBreakIcon, - LinkIcon, - ListBulletsIcon, - ListNumbersIcon, - MinusIcon, - ParagraphIcon, - TextAlignCenterIcon, - TextAlignJustifyIcon, - TextAlignLeftIcon, - TextAlignRightIcon, - TextBolderIcon, - TextHFiveIcon, - TextHFourIcon, - TextHOneIcon, - TextHSixIcon, - TextHThreeIcon, - TextHTwoIcon, - TextIndentIcon, - TextItalicIcon, - TextOutdentIcon, - TextStrikethroughIcon, - TextUnderlineIcon, -} from "@phosphor-icons/react"; import Color from "@tiptap/extension-color"; import Highlight from "@tiptap/extension-highlight"; import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table"; @@ -50,6 +21,7 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from "@reactive-resume/ui/components/dropdown-menu"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { PopoverHeader, PopoverTitle, PopoverTrigger } from "@reactive-resume/ui/components/popover"; import { toast } from "@reactive-resume/ui/components/toast"; import { Toggle } from "@reactive-resume/ui/components/toggle"; @@ -616,7 +588,7 @@ export function RichInput({ title={isFullscreen ? t`Exit Fullscreen` : t`Fullscreen`} onClick={() => setIsFullscreen(!isFullscreen)} > - {isFullscreen ? : } + {isFullscreen ? : } ); @@ -847,7 +819,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) { disabled={!state.canBold} onPressedChange={state.toggleBold} > - + - + - + - + - + - +
@@ -1019,15 +991,15 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) { className="rounded-none" > {match(state) - .with({ isParagraph: true }, () => ) - .with({ isHeading1: true }, () => ) - .with({ isHeading2: true }, () => ) - .with({ isHeading3: true }, () => ) - .with({ isHeading4: true }, () => ) - .with({ isHeading5: true }, () => ) - .with({ isHeading6: true }, () => ) + .with({ isParagraph: true }, () => ) + .with({ isHeading1: true }, () => ) + .with({ isHeading2: true }, () => ) + .with({ isHeading3: true }, () => ) + .with({ isHeading4: true }, () => ) + .with({ isHeading5: true }, () => ) + .with({ isHeading6: true }, () => ) .otherwise(() => ( - + ))} } @@ -1098,12 +1070,12 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) { className="rounded-none" > {match(state) - .with({ isLeftAlign: true }, () => ) - .with({ isCenterAlign: true }, () => ) - .with({ isRightAlign: true }, () => ) - .with({ isJustifyAlign: true }, () => ) + .with({ isLeftAlign: true }, () => ) + .with({ isCenterAlign: true }, () => ) + .with({ isRightAlign: true }, () => ) + .with({ isJustifyAlign: true }, () => ) .otherwise(() => ( - + ))} } @@ -1152,7 +1124,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) { disabled={!state.canBulletList} onPressedChange={state.toggleBulletList} > - + - +
@@ -1202,7 +1174,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) { title={t`Remove link`} onClick={state.unsetLink} > - + ) : ( )} @@ -1226,7 +1198,7 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) { disabled={!state.canInlineCode} onPressedChange={state.toggleInlineCode} > - + diff --git a/apps/web/src/components/input/url-input.tsx b/apps/web/src/components/input/url-input.tsx index 56d4e7e35..885f68c5e 100644 --- a/apps/web/src/components/input/url-input.tsx +++ b/apps/web/src/components/input/url-input.tsx @@ -1,8 +1,8 @@ import type { Website } from "@reactive-resume/schema/resume/data"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { TagIcon } from "@phosphor-icons/react"; import { useCallback } from "react"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { InputGroup, @@ -79,7 +79,7 @@ export function URLInput({ value, onChange, hideLabelBut message: "Add a label to the URL", })} > - + } /> diff --git a/apps/web/src/components/layout/error-screen.tsx b/apps/web/src/components/layout/error-screen.tsx index 38dd898d4..5fefb9a59 100644 --- a/apps/web/src/components/layout/error-screen.tsx +++ b/apps/web/src/components/layout/error-screen.tsx @@ -1,10 +1,10 @@ import type { ErrorComponentProps } from "@tanstack/react-router"; import { Trans } from "@lingui/react/macro"; -import { ArrowClockwiseIcon, HouseIcon, WarningIcon } from "@phosphor-icons/react"; import { Link } from "@tanstack/react-router"; import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert"; import { BrandIcon } from "@reactive-resume/ui/components/brand-icon"; import { Button, buttonVariants } from "@reactive-resume/ui/components/button"; +import { Icon } from "@reactive-resume/ui/components/icon"; export function ErrorScreen({ reset }: ErrorComponentProps) { return ( @@ -12,7 +12,7 @@ export function ErrorScreen({ reset }: ErrorComponentProps) { - + Something went wrong @@ -23,12 +23,12 @@ export function ErrorScreen({ reset }: ErrorComponentProps) {
- + Go to dashboard
diff --git a/apps/web/src/components/layout/not-found-screen.tsx b/apps/web/src/components/layout/not-found-screen.tsx index e439bc8eb..de561a455 100644 --- a/apps/web/src/components/layout/not-found-screen.tsx +++ b/apps/web/src/components/layout/not-found-screen.tsx @@ -1,9 +1,9 @@ import { Trans } from "@lingui/react/macro"; -import { HouseIcon, MagnifyingGlassIcon, WarningIcon } from "@phosphor-icons/react"; import { Link } from "@tanstack/react-router"; import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert"; import { BrandIcon } from "@reactive-resume/ui/components/brand-icon"; import { buttonVariants } from "@reactive-resume/ui/components/button"; +import { Icon } from "@reactive-resume/ui/components/icon"; export function NotFoundScreen() { return ( @@ -11,7 +11,7 @@ export function NotFoundScreen() { - + We couldn't find that page @@ -22,12 +22,12 @@ export function NotFoundScreen() {
- + Go to dashboard - + Go home
diff --git a/apps/web/src/dialogs/auth/change-password.tsx b/apps/web/src/dialogs/auth/change-password.tsx index bd6c38680..5521bc385 100644 --- a/apps/web/src/dialogs/auth/change-password.tsx +++ b/apps/web/src/dialogs/auth/change-password.tsx @@ -1,7 +1,6 @@ import type { DialogProps } from "../store"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { EyeIcon, EyeSlashIcon, PasswordIcon } from "@phosphor-icons/react"; import { useQueryClient } from "@tanstack/react-query"; import { useToggle } from "usehooks-ts"; import z from "zod"; @@ -14,6 +13,7 @@ import { DialogTitle, } from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { toast } from "@reactive-resume/ui/components/toast"; import { useFormBlocker } from "@/hooks/use-form-blocker"; @@ -82,7 +82,7 @@ export function ChangePasswordDialog(_: DialogProps<"auth.change-password">) { - + Update your password @@ -132,7 +132,11 @@ export function ChangePasswordDialog(_: DialogProps<"auth.change-password">) { message: "Show password", })} - {showCurrentPassword ? : } + {showCurrentPassword ? ( + + ) : ( + + )}
@@ -174,7 +178,7 @@ export function ChangePasswordDialog(_: DialogProps<"auth.change-password">) { message: "Show password", })} - {showNewPassword ? : } + {showNewPassword ? : }
diff --git a/apps/web/src/dialogs/auth/disable-two-factor.tsx b/apps/web/src/dialogs/auth/disable-two-factor.tsx index badd4f2d5..e94e6f6ca 100644 --- a/apps/web/src/dialogs/auth/disable-two-factor.tsx +++ b/apps/web/src/dialogs/auth/disable-two-factor.tsx @@ -1,7 +1,6 @@ import type { DialogProps } from "../store"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { EyeIcon, EyeSlashIcon, LockOpenIcon } from "@phosphor-icons/react"; import { useRouter } from "@tanstack/react-router"; import { useToggle } from "usehooks-ts"; import z from "zod"; @@ -14,6 +13,7 @@ import { DialogTitle, } from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { toast } from "@reactive-resume/ui/components/toast"; import { useFormBlocker } from "@/hooks/use-form-blocker"; @@ -74,7 +74,7 @@ export function DisableTwoFactorDialog(_: DialogProps<"auth.two-factor.disable"> - + Disable Two-Factor Authentication @@ -129,7 +129,7 @@ export function DisableTwoFactorDialog(_: DialogProps<"auth.two-factor.disable"> message: "Show password", })} - {showPassword ? : } + {showPassword ? : } diff --git a/apps/web/src/dialogs/auth/enable-two-factor.tsx b/apps/web/src/dialogs/auth/enable-two-factor.tsx index 6d6b3520e..de87b477d 100644 --- a/apps/web/src/dialogs/auth/enable-two-factor.tsx +++ b/apps/web/src/dialogs/auth/enable-two-factor.tsx @@ -1,7 +1,6 @@ import type { DialogProps } from "../store"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { ArrowDownIcon, CopyIcon, EyeIcon, EyeSlashIcon } from "@phosphor-icons/react"; import { useStore } from "@tanstack/react-form"; import { useRouter } from "@tanstack/react-router"; import { QRCodeSVG } from "qrcode.react"; @@ -18,6 +17,7 @@ import { DialogTitle, } from "@reactive-resume/ui/components/dialog"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { OTPField } from "@reactive-resume/ui/components/otp-field"; import { toast } from "@reactive-resume/ui/components/toast"; @@ -225,7 +225,7 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">) message: "Show password", })} - {showPassword ? : } + {showPassword ? : } @@ -255,7 +255,7 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">) message: "Copy secret", })} - + @@ -321,11 +321,11 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
diff --git a/apps/web/src/dialogs/resume/index.tsx b/apps/web/src/dialogs/resume/index.tsx index 9ee014d19..ec402dfa2 100644 --- a/apps/web/src/dialogs/resume/index.tsx +++ b/apps/web/src/dialogs/resume/index.tsx @@ -1,7 +1,6 @@ import type { DialogProps } from "../store"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { MagicWandIcon, PencilSimpleLineIcon } from "@phosphor-icons/react"; import { useMutation } from "@tanstack/react-query"; import { useNavigate, useParams } from "@tanstack/react-router"; import z from "zod"; @@ -14,6 +13,7 @@ import { DialogTitle, } from "@reactive-resume/ui/components/dialog"; import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { toast } from "@reactive-resume/ui/components/toast"; import { generateRandomName } from "@reactive-resume/utils/string"; @@ -85,7 +85,7 @@ export function UpdateResumeDialog({ data }: DialogProps<"resume.update">) { - + Update Resume @@ -150,7 +150,7 @@ export function DuplicateResumeDialog({ data }: DialogProps<"resume.duplicate">) - + Duplicate Resume @@ -208,7 +208,7 @@ const ResumeForm = withForm({ /> diff --git a/apps/web/src/features/applications/components/application-form-sheet.tsx b/apps/web/src/features/applications/components/application-form-sheet.tsx index d24e54c70..90ee4e161 100644 --- a/apps/web/src/features/applications/components/application-form-sheet.tsx +++ b/apps/web/src/features/applications/components/application-form-sheet.tsx @@ -3,12 +3,12 @@ import type { Application } from "../types"; import type { FileAttachment } from "./file-attachment-field"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { SparkleIcon, XIcon } from "@phosphor-icons/react"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useState } from "react"; import { STAGES } from "@reactive-resume/schema/applications/data"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@reactive-resume/ui/components/accordion"; import { Button } from "@reactive-resume/ui/components/button"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { Label } from "@reactive-resume/ui/components/label"; import { @@ -216,7 +216,7 @@ export function ApplicationFormSheet({ open, onOpenChange, application }: Props) - + Job description @@ -253,7 +253,7 @@ export function ApplicationFormSheet({ open, onOpenChange, application }: Props) disabled={form.jobDescription.trim().length < MIN_AUTOFILL_CHARS || autofill.isPending} onClick={() => runAutofill(form.jobDescription)} > - + Fill fields @@ -464,7 +464,7 @@ function TagsField({ value, suggestions, onChange }: TagsFieldProps) { className="hover:text-danger-text" onClick={() => onChange(value.filter((t) => t !== tag))} > - + ))} diff --git a/apps/web/src/features/applications/components/calendar-view.tsx b/apps/web/src/features/applications/components/calendar-view.tsx index be71d8bf6..fda1e469e 100644 --- a/apps/web/src/features/applications/components/calendar-view.tsx +++ b/apps/web/src/features/applications/components/calendar-view.tsx @@ -4,17 +4,10 @@ import type { Application } from "../types"; import { t } from "@lingui/core/macro"; import { useLingui } from "@lingui/react"; import { Trans } from "@lingui/react/macro"; -import { - CalendarBlankIcon, - CalendarPlusIcon, - CaretLeftIcon, - CaretRightIcon, - MapPinIcon, - PlusIcon, -} from "@phosphor-icons/react"; import { useMemo, useState } from "react"; import { INTERVIEW_KINDS } from "@reactive-resume/schema/applications/data"; import { Button } from "@reactive-resume/ui/components/button"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui/components/popover"; import { cn } from "@reactive-resume/utils/style"; import { @@ -101,7 +94,7 @@ export function ApplicationCalendar({ applications, allApplications, onOpen }: A
@@ -158,7 +151,7 @@ export function ApplicationCalendar({ applications, allApplications, onOpen }: A className="flex size-6 items-center justify-center rounded-md text-ink-3 opacity-0 transition-opacity hover:bg-sunken hover:text-ink focus-visible:opacity-100 group-hover/day:opacity-100 max-sm:hidden" onClick={() => schedule(day)} > - +
- +

@@ -237,7 +230,7 @@ export function ApplicationCalendar({ applications, allApplications, onOpen }: A

@@ -303,7 +296,7 @@ function UpcomingCard({ item, timeRange, locale, onEdit, onOpenApplication }: Up {item.interview.location && ( - + {item.interview.location} )} diff --git a/apps/web/src/features/applications/components/file-attachment-field.tsx b/apps/web/src/features/applications/components/file-attachment-field.tsx index e654a5e9e..6247ec1b9 100644 --- a/apps/web/src/features/applications/components/file-attachment-field.tsx +++ b/apps/web/src/features/applications/components/file-attachment-field.tsx @@ -1,8 +1,8 @@ import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { FilePdfIcon, UploadSimpleIcon, XIcon } from "@phosphor-icons/react"; import { useMutation } from "@tanstack/react-query"; import { useRef } from "react"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { toast } from "@reactive-resume/ui/components/toast"; import { orpc } from "@/libs/orpc/client"; @@ -57,7 +57,7 @@ export function FileAttachmentField({ value, onChange, attachLabel, disabled }: {value ? (
- + - +
) : ( @@ -84,7 +84,7 @@ export function FileAttachmentField({ value, onChange, attachLabel, disabled }: onClick={() => inputRef.current?.click()} className="flex w-full items-center gap-2 rounded-lg border border-line border-dashed p-2.5 text-ink-3 text-sm hover:bg-sunken/50 disabled:opacity-60" > - + {upload.isPending ? Uploading… : attachLabel} )} diff --git a/apps/web/src/features/applications/components/insights-view.tsx b/apps/web/src/features/applications/components/insights-view.tsx index 3fd42c003..11ec89dfa 100644 --- a/apps/web/src/features/applications/components/insights-view.tsx +++ b/apps/web/src/features/applications/components/insights-view.tsx @@ -2,10 +2,10 @@ import type { ApplicationTimelineEntry } from "@reactive-resume/schema/applicati import type { Application } from "../types"; import { t } from "@lingui/core/macro"; import { Plural, Trans } from "@lingui/react/macro"; -import { DownloadSimpleIcon } from "@phosphor-icons/react"; import { useQuery } from "@tanstack/react-query"; import { useMemo, useRef } from "react"; import { Button } from "@reactive-resume/ui/components/button"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { toast } from "@reactive-resume/ui/components/toast"; import { orpc } from "@/libs/orpc/client"; import { computeInsights, computeOutcomes, computeTimeline } from "../insights"; @@ -305,7 +305,7 @@ function PipelineFlow({ insights }: { insights: ReturnTypeWhere your applications went diff --git a/apps/web/src/features/applications/components/interview-dialog.tsx b/apps/web/src/features/applications/components/interview-dialog.tsx index 8fe83923b..0fee01b35 100644 --- a/apps/web/src/features/applications/components/interview-dialog.tsx +++ b/apps/web/src/features/applications/components/interview-dialog.tsx @@ -2,7 +2,6 @@ import type { InterviewKind, InterviewTimelineEntry } from "@reactive-resume/sch import type { Application } from "../types"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { TrashIcon } from "@phosphor-icons/react"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useEffect, useId, useState } from "react"; import { INTERVIEW_KINDS } from "@reactive-resume/schema/applications/data"; @@ -15,6 +14,7 @@ import { DialogHeader, DialogTitle, } from "@reactive-resume/ui/components/dialog"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { Label } from "@reactive-resume/ui/components/label"; import { Textarea } from "@reactive-resume/ui/components/textarea"; @@ -267,7 +267,7 @@ export function InterviewDialog({ if (confirmed) remove.mutate({ id: draft.applicationId, entryId: interview.id }); }} > - + Delete ) : ( diff --git a/apps/web/src/features/ats-checker/report/report-view.tsx b/apps/web/src/features/ats-checker/report/report-view.tsx index 5727308fe..f095237bf 100644 --- a/apps/web/src/features/ats-checker/report/report-view.tsx +++ b/apps/web/src/features/ats-checker/report/report-view.tsx @@ -1,9 +1,9 @@ import type { PdfAtsReport, PdfCategory, PdfCategoryScore } from "@reactive-resume/resume/ats-pdf"; import { Trans } from "@lingui/react/macro"; -import { CheckCircleIcon } from "@phosphor-icons/react"; import { useMemo } from "react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@reactive-resume/ui/components/accordion"; import { Badge } from "@reactive-resume/ui/components/badge"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { cn } from "@reactive-resume/utils/style"; import { getPdfCategoryDescription, getPdfCategoryLabel } from "../messages"; import { FindingRow } from "./finding-row"; @@ -106,7 +106,7 @@ function CategorySection({ category, findings }: CategorySectionProps) { {findings.length === 0 ? (
- + Nothing to fix here. @@ -145,7 +145,7 @@ function WritingSection({ tips }: WritingSectionProps) { {tips.length === 0 ? (
- + Nothing to suggest. diff --git a/apps/web/src/features/ats-checker/report/score-header.tsx b/apps/web/src/features/ats-checker/report/score-header.tsx index 670a425da..e7e29f0ba 100644 --- a/apps/web/src/features/ats-checker/report/score-header.tsx +++ b/apps/web/src/features/ats-checker/report/score-header.tsx @@ -1,7 +1,7 @@ import type { PdfAtsReport } from "@reactive-resume/resume/ats-pdf"; import type { CSSProperties } from "react"; import { Trans } from "@lingui/react/macro"; -import { InfoIcon } from "@phosphor-icons/react"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Tooltip, TooltipContent, TooltipTrigger } from "@reactive-resume/ui/components/tooltip"; import { cn } from "@reactive-resume/utils/style"; import { getPdfFindingMessage } from "../messages"; @@ -52,7 +52,7 @@ export function ScoreHeader({ report }: ScoreHeaderProps) { render={ {report.skippedChecks} skipped - + } /> diff --git a/apps/web/src/features/auth/components/social-auth.tsx b/apps/web/src/features/auth/components/social-auth.tsx index c66acc933..9ce1e05ad 100644 --- a/apps/web/src/features/auth/components/social-auth.tsx +++ b/apps/web/src/features/auth/components/social-auth.tsx @@ -1,10 +1,11 @@ import type { RouterOutput } from "@/libs/orpc/client"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { FingerprintIcon, GithubLogoIcon, GoogleLogoIcon, LinkedinLogoIcon, VaultIcon } from "@phosphor-icons/react"; +import { GithubLogoIcon, GoogleLogoIcon, LinkedinLogoIcon } from "@phosphor-icons/react"; import { useQuery } from "@tanstack/react-query"; import { useRouter, useSearch } from "@tanstack/react-router"; import { Button } from "@reactive-resume/ui/components/button"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Skeleton } from "@reactive-resume/ui/components/skeleton"; import { toast } from "@reactive-resume/ui/components/toast"; import { cn } from "@reactive-resume/utils/style"; @@ -91,7 +92,7 @@ function SocialAuthButtons({ providers }: SocialAuthButtonsProps) { } className={cn("hidden", "custom" in providers && "inline-flex")} > - + {providers.custom} @@ -102,7 +103,7 @@ function SocialAuthButtons({ providers }: SocialAuthButtonsProps) { } className={cn("hidden", "passkey" in providers && "inline-flex")} > - + Passkey diff --git a/apps/web/src/features/auth/pages/error.tsx b/apps/web/src/features/auth/pages/error.tsx index cca85048e..1b96d1377 100644 --- a/apps/web/src/features/auth/pages/error.tsx +++ b/apps/web/src/features/auth/pages/error.tsx @@ -1,9 +1,9 @@ import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { ArrowLeftIcon, WarningIcon } from "@phosphor-icons/react"; import { Link, useRouteContext } from "@tanstack/react-router"; import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert"; import { buttonVariants } from "@reactive-resume/ui/components/button"; +import { Icon } from "@reactive-resume/ui/components/icon"; function getErrorMessage(code: string | undefined): string { switch (code) { @@ -68,7 +68,7 @@ export function AuthErrorPage({ code, description }: AuthErrorPageProps) {
- + {getErrorMessage(code)} {description && ( @@ -84,14 +84,14 @@ export function AuthErrorPage({ code, description }: AuthErrorPageProps) { {returnsToSettings ? ( - + Back to authentication settings ) : ( - + Back to sign in diff --git a/apps/web/src/features/auth/pages/forgot-password.tsx b/apps/web/src/features/auth/pages/forgot-password.tsx index bbfe6ca2c..cabd1063b 100644 --- a/apps/web/src/features/auth/pages/forgot-password.tsx +++ b/apps/web/src/features/auth/pages/forgot-password.tsx @@ -1,11 +1,11 @@ import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { ArrowRightIcon } from "@phosphor-icons/react"; import { Link } from "@tanstack/react-router"; import { useState } from "react"; import z from "zod"; import { Button } from "@reactive-resume/ui/components/button"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { toast } from "@reactive-resume/ui/components/toast"; import { authClient } from "@/libs/auth/client"; @@ -67,7 +67,7 @@ export function ForgotPasswordPage() { render={ Sign in now{" "} - + } /> diff --git a/apps/web/src/features/auth/pages/login.tsx b/apps/web/src/features/auth/pages/login.tsx index 4008110d8..78a60cebb 100644 --- a/apps/web/src/features/auth/pages/login.tsx +++ b/apps/web/src/features/auth/pages/login.tsx @@ -1,6 +1,5 @@ import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { ArrowRightIcon, EyeIcon, EyeSlashIcon } from "@phosphor-icons/react"; import { useQuery } from "@tanstack/react-query"; import { Link, useNavigate, useRouter, useSearch } from "@tanstack/react-router"; import { useEffect, useRef } from "react"; @@ -8,6 +7,7 @@ import { useToggle } from "usehooks-ts"; import z from "zod"; import { Button } from "@reactive-resume/ui/components/button"; import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { toast } from "@reactive-resume/ui/components/toast"; import { authClient } from "@/libs/auth/client"; @@ -136,7 +136,7 @@ export function LoginPage({ disableEmailAuth, disableSignups }: Props) { Create one now {" "} - + } /> @@ -233,7 +233,7 @@ export function LoginPage({ disableEmailAuth, disableSignups }: Props) { }) } > - {showPassword ? : } + {showPassword ? : }
diff --git a/apps/web/src/features/auth/pages/register.tsx b/apps/web/src/features/auth/pages/register.tsx index e09e75be5..52599130b 100644 --- a/apps/web/src/features/auth/pages/register.tsx +++ b/apps/web/src/features/auth/pages/register.tsx @@ -1,6 +1,5 @@ import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { ArrowRightIcon, EyeIcon, EyeSlashIcon } from "@phosphor-icons/react"; import { Link, useSearch } from "@tanstack/react-router"; import { useState } from "react"; import { useToggle } from "usehooks-ts"; @@ -8,6 +7,7 @@ import z from "zod"; import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert"; import { Button } from "@reactive-resume/ui/components/button"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { toast } from "@reactive-resume/ui/components/toast"; import { authClient } from "@/libs/auth/client"; @@ -104,7 +104,7 @@ export function RegisterPage({ disableEmailAuth }: Props) { render={ Sign in now{" "} - + } /> @@ -241,7 +241,7 @@ export function RegisterPage({ disableEmailAuth }: Props) { }) } > - {showPassword ? : } + {showPassword ? : } @@ -287,7 +287,7 @@ function PostSignupScreen() { render={ Continue{" "} - + } /> diff --git a/apps/web/src/features/auth/pages/reset-password.tsx b/apps/web/src/features/auth/pages/reset-password.tsx index d2bd1a6c9..0a5a3ac8d 100644 --- a/apps/web/src/features/auth/pages/reset-password.tsx +++ b/apps/web/src/features/auth/pages/reset-password.tsx @@ -1,11 +1,11 @@ import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react"; import { useNavigate } from "@tanstack/react-router"; import { useToggle } from "usehooks-ts"; import z from "zod"; import { Button } from "@reactive-resume/ui/components/button"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { toast } from "@reactive-resume/ui/components/toast"; import { authClient } from "@/libs/auth/client"; @@ -113,7 +113,7 @@ export function ResetPasswordPage({ token }: Props) { }) } > - {showPassword ? : } + {showPassword ? : } diff --git a/apps/web/src/features/auth/pages/resume-password.tsx b/apps/web/src/features/auth/pages/resume-password.tsx index 5db257eef..d3b6e0f1f 100644 --- a/apps/web/src/features/auth/pages/resume-password.tsx +++ b/apps/web/src/features/auth/pages/resume-password.tsx @@ -1,13 +1,13 @@ import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; import { ORPCError } from "@orpc/client"; -import { EyeIcon, EyeSlashIcon, LockOpenIcon } from "@phosphor-icons/react"; import { useMutation } from "@tanstack/react-query"; import { useNavigate } from "@tanstack/react-router"; import { useToggle } from "usehooks-ts"; import z from "zod"; import { Button } from "@reactive-resume/ui/components/button"; import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { toast } from "@reactive-resume/ui/components/toast"; import { getReadableErrorMessage } from "@/libs/error-message"; @@ -132,7 +132,7 @@ export function ResumePasswordPage({ username, slug, redirectPath }: ResumePassw }) } > - {showPassword ? : } + {showPassword ? : } @@ -141,7 +141,7 @@ export function ResumePasswordPage({ username, slug, redirectPath }: ResumePassw diff --git a/apps/web/src/features/auth/pages/verify-2fa.tsx b/apps/web/src/features/auth/pages/verify-2fa.tsx index d91c5e0d0..7592cf316 100644 --- a/apps/web/src/features/auth/pages/verify-2fa.tsx +++ b/apps/web/src/features/auth/pages/verify-2fa.tsx @@ -1,10 +1,10 @@ import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { ArrowLeftIcon, CheckIcon } from "@phosphor-icons/react"; import { Link, useNavigate, useRouter, useSearch } from "@tanstack/react-router"; import z from "zod"; import { Button } from "@reactive-resume/ui/components/button"; import { FormControl, FormItem, FormMessage } from "@reactive-resume/ui/components/form"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Input } from "@reactive-resume/ui/components/input"; import { OTPField } from "@reactive-resume/ui/components/otp-field"; import { toast } from "@reactive-resume/ui/components/toast"; @@ -133,7 +133,7 @@ function TwoFactorVerificationPage({ backupCode = false }: TwoFactorVerification nativeButton={false} render={ - + {backupCode ? ( Go Back ) : ( @@ -144,7 +144,7 @@ function TwoFactorVerificationPage({ backupCode = false }: TwoFactorVerification /> @@ -125,7 +118,7 @@ function PicturePreviewControls({ onAutoSave(); }} > - {picture.hidden ? : } + {picture.hidden ? : } @@ -655,7 +648,7 @@ export function PictureSettings() { {zoom.toFixed(1)}×
- + - +
diff --git a/apps/web/src/features/resume/stylesheet/editor.tsx b/apps/web/src/features/resume/stylesheet/editor.tsx index 10f28c0b4..c8830710a 100644 --- a/apps/web/src/features/resume/stylesheet/editor.tsx +++ b/apps/web/src/features/resume/stylesheet/editor.tsx @@ -18,7 +18,6 @@ import { } from "@codemirror/view"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { BookOpenIcon } from "@phosphor-icons/react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { convertLegacyStyleRules } from "@reactive-resume/pdf/semantic-legacy"; import { @@ -28,6 +27,7 @@ import { shouldShowResumeHeader, } from "@reactive-resume/pdf/semantic-tree"; import { isFatalStylesheetDiagnostic } from "@reactive-resume/resume/stylesheet"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { PopoverTrigger } from "@reactive-resume/ui/components/popover"; import { Sheet, SheetContent, SheetTitle } from "@reactive-resume/ui/components/sheet"; import { ColorPicker } from "@/components/input/color-picker"; @@ -515,7 +515,7 @@ function StylesheetEditorShell({ readOnly = false }: StylesheetEditorShellProps) />

-

diff --git a/apps/web/src/features/resume/stylesheet/status.tsx b/apps/web/src/features/resume/stylesheet/status.tsx index 851072628..70acafc6b 100644 --- a/apps/web/src/features/resume/stylesheet/status.tsx +++ b/apps/web/src/features/resume/stylesheet/status.tsx @@ -1,9 +1,9 @@ import type { SemanticCssDiagnostic } from "@reactive-resume/resume/stylesheet"; import { Trans } from "@lingui/react/macro"; -import { WarningCircleIcon, WarningIcon } from "@phosphor-icons/react"; import { isFatalStylesheetDiagnostic } from "@reactive-resume/resume/stylesheet"; import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert"; import { Badge } from "@reactive-resume/ui/components/badge"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { ScrollArea } from "@reactive-resume/ui/components/scroll-area"; export type StylesheetStatusProps = { @@ -23,19 +23,19 @@ export function StylesheetStatus({ mode, status, diagnostics }: StylesheetStatus
{hasFatalErrors ? ( - + Fatal error ) : isPending ? ( {mode === "legacy" ? Checking draft : Checking} ) : hasRecoverableErrors ? ( - + {mode === "legacy" ? Ready to activate with errors : Valid with errors} ) : warnings.length > 0 ? ( - + {mode === "legacy" ? Ready to activate with warnings : Valid with warnings} ) : ( @@ -44,7 +44,7 @@ export function StylesheetStatus({ mode, status, diagnostics }: StylesheetStatus {hasFatalErrors && ( - + Stylesheet has fatal errors @@ -56,7 +56,7 @@ export function StylesheetStatus({ mode, status, diagnostics }: StylesheetStatus {hasRecoverableErrors && ( - + Some styles were ignored diff --git a/apps/web/src/features/resume/stylesheet/toolbar.tsx b/apps/web/src/features/resume/stylesheet/toolbar.tsx index daffa3a1f..90b73022f 100644 --- a/apps/web/src/features/resume/stylesheet/toolbar.tsx +++ b/apps/web/src/features/resume/stylesheet/toolbar.tsx @@ -1,13 +1,6 @@ import { t } from "@lingui/core/macro"; -import { - ArrowsInIcon, - ArrowsOutIcon, - ArrowUUpLeftIcon, - ArrowUUpRightIcon, - CopyIcon, - MagicWandIcon, -} from "@phosphor-icons/react"; import { Button } from "@reactive-resume/ui/components/button"; +import { Icon } from "@reactive-resume/ui/components/icon"; import { Tooltip, TooltipContent, TooltipTrigger } from "@reactive-resume/ui/components/tooltip"; import { copySourceToClipboard } from "./editor-extensions"; @@ -59,19 +52,23 @@ export function StylesheetToolbar({ return (
- + - + void copySourceToClipboard(source)}> - + - + - {focused ? : } + {focused ? ( + + ) : ( + + )}
); diff --git a/apps/web/src/features/user/dropdown-menu.tsx b/apps/web/src/features/user/dropdown-menu.tsx index 9ac3a5a53..f75207b53 100644 --- a/apps/web/src/features/user/dropdown-menu.tsx +++ b/apps/web/src/features/user/dropdown-menu.tsx @@ -2,7 +2,6 @@ import type { AuthSession } from "@reactive-resume/auth/types"; import { t } from "@lingui/core/macro"; import { useLingui } from "@lingui/react"; import { Trans } from "@lingui/react/macro"; -import { PaletteIcon, SignOutIcon, TranslateIcon } from "@phosphor-icons/react"; import { useRouter } from "@tanstack/react-router"; import { DropdownMenu, @@ -81,7 +80,7 @@ export function UserDropdownMenu({ children }: Props) { - + Language @@ -97,7 +96,7 @@ export function UserDropdownMenu({ children }: Props) { - + Theme @@ -119,7 +118,7 @@ export function UserDropdownMenu({ children }: Props) { - + Sign out diff --git a/apps/web/src/libs/tanstack-form.test.tsx b/apps/web/src/libs/tanstack-form.test.tsx index 51f743e58..de6faa13e 100644 --- a/apps/web/src/libs/tanstack-form.test.tsx +++ b/apps/web/src/libs/tanstack-form.test.tsx @@ -2,17 +2,11 @@ import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { beforeAll, describe, expect, it, vi } from "vitest"; +import { beforeAll, describe, expect, it } from "vitest"; import { i18n } from "@lingui/core"; import { I18nProvider } from "@lingui/react"; import { useAppForm } from "./tanstack-form"; -vi.mock("@/components/input/rich-input", () => ({ - RichInput: ({ value, onChange }: { value: string; onChange: (value: string) => void }) => ( -