Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-23 05:01:49 +10:00
Code Issues Packages Projects Releases Wiki Activity

Update dependencies and refactor icon imports across the codebase

Browse Source
This commit is contained in:
Amruth Pillai
2025-10-01 10:38:50 +02:00
parent c525f8d2cc
commit 6d37769e38
72 changed files with 6496 additions and 5107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/client/src/components/ai-actions.tsx
View File

@ -1,11 +1,11 @@
import { t } from "@lingui/macro";
import {
CaretDown,
ChatTeardropText,
CircleNotch,
Exam,
MagicWand,
PenNib,
CaretDownIcon,
ChatTeardropTextIcon,
CircleNotchIcon,
ExamIcon,
MagicWandIcon,
PenNibIcon,
} from "@phosphor-icons/react";
import {
Badge,
@ -75,27 +75,31 @@ export const AiActions = ({ value, onChange, className }: Props) => {
variant="primary"
className="-rotate-90 bg-background px-2 text-[10px] leading-[10px]"
>
<MagicWand size={10} className="mr-1" />
<MagicWandIcon size={10} className="mr-1" />
{t`AI`}
</Badge>
</div>
<Button size="sm" variant="outline" disabled={!!loading} onClick={() => onClick("improve")}>
{loading === "improve" ? <CircleNotch className="animate-spin" /> : <PenNib />}
{loading === "improve" ? <CircleNotchIcon className="animate-spin" /> : <PenNibIcon />}
<span className="ml-2 text-xs">{t`Improve Writing`}</span>
</Button>
<Button size="sm" variant="outline" disabled={!!loading} onClick={() => onClick("fix")}>
{loading === "fix" ? <CircleNotch className="animate-spin" /> : <Exam />}
{loading === "fix" ? <CircleNotchIcon className="animate-spin" /> : <ExamIcon />}
<span className="ml-2 text-xs">{t`Fix Spelling & Grammar`}</span>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="outline" disabled={!!loading}>
{loading === "tone" ? <CircleNotch className="animate-spin" /> : <ChatTeardropText />}
{loading === "tone" ? (
<CircleNotchIcon className="animate-spin" />
) : (
<ChatTeardropTextIcon />
)}
<span className="mx-2 text-xs">{t`Change Tone`}</span>
<CaretDown />
<CaretDownIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>

6
apps/client/src/components/locale-combobox.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { CaretDown, Check } from "@phosphor-icons/react";
import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
import {
Button,
Command,
@ -61,7 +61,7 @@ export const LocaleCombobox = ({ value, onValueChange }: Props) => {
onValueChange(result.original.locale);
}}
>
<Check
<CheckIcon
className={cn(
"mr-2 size-4 opacity-0",
value === original.locale && "opacity-100",
@ -104,7 +104,7 @@ export const LocaleComboboxPopover = ({ value, onValueChange }: Props) => {
<span className="line-clamp-1 text-left font-normal">
{selected?.name} <span className="ml-1 text-xs opacity-50">({selected?.locale})</span>
</span>
<CaretDown
<CaretDownIcon
className={cn(
"ml-2 size-4 shrink-0 rotate-0 opacity-50 transition-transform",
open && "rotate-180",

4
apps/client/src/components/locale-switch.tsx
View File

@ -1,5 +1,5 @@
import { useLingui } from "@lingui/react";
import { Translate } from "@phosphor-icons/react";
import { TranslateIcon } from "@phosphor-icons/react";
import { Button, Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui";
import { useState } from "react";
@ -14,7 +14,7 @@ export const LocaleSwitch = () => {
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button size="icon" variant="ghost">
<Translate size={20} />
<TranslateIcon size={20} />
</Button>
</PopoverTrigger>
<PopoverContent align="end" className="p-0">

8
apps/client/src/components/theme-switch.tsx
View File

@ -1,4 +1,4 @@
import { CloudSun, Moon, Sun } from "@phosphor-icons/react";
import { CloudSunIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
import { useTheme } from "@reactive-resume/hooks";
import { Button } from "@reactive-resume/ui";
import type { Variants } from "framer-motion";
@ -25,9 +25,9 @@ export const ThemeSwitch = ({ size = 20, className }: Props) => {
<Button size="icon" variant="ghost" className={className} onClick={toggleTheme}>
<div className="cursor-pointer overflow-hidden" style={{ width: size, height: size }}>
<motion.div animate={theme} variants={variants} className="flex">
<Sun size={size} className="shrink-0" />
<CloudSun size={size} className="shrink-0" />
<Moon size={size} className="shrink-0" />
<SunIcon size={size} className="shrink-0" />
<CloudSunIcon size={size} className="shrink-0" />
<MoonIcon size={size} className="shrink-0" />
</motion.div>
</div>
</Button>

8
apps/client/src/pages/auth/_components/social-auth.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { Fingerprint, GithubLogo, GoogleLogo } from "@phosphor-icons/react";
import { FingerprintIcon, GithubLogoIcon, GoogleLogoIcon } from "@phosphor-icons/react";
import { Button } from "@reactive-resume/ui";
import { useAuthProviders } from "@/client/services/auth/providers";
@ -14,7 +14,7 @@ export const SocialAuth = () => {
{providers.includes("github") && (
<Button asChild size="lg" className="w-full !bg-[#222] !text-white hover:!bg-[#222]/80">
<a href="/api/auth/github">
<GithubLogo className="mr-3 size-4" />
<GithubLogoIcon className="mr-3 size-4" />
{t`GitHub`}
</a>
</Button>
@ -27,7 +27,7 @@ export const SocialAuth = () => {
className="w-full !bg-[#4285F4] !text-white hover:!bg-[#4285F4]/80"
>
<a href="/api/auth/google">
<GoogleLogo className="mr-3 size-4" />
<GoogleLogoIcon className="mr-3 size-4" />
{t`Google`}
</a>
</Button>
@ -40,7 +40,7 @@ export const SocialAuth = () => {
className="w-full !bg-[#dc2626] !text-white hover:!bg-[#dc2626]/80"
>
<a href="/api/auth/openid">
<Fingerprint className="mr-3 size-4" />
<FingerprintIcon className="mr-3 size-4" />
{import.meta.env.VITE_OPENID_NAME}
</a>
</Button>

4
apps/client/src/pages/auth/backup-otp/page.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro";
import { ArrowLeft } from "@phosphor-icons/react";
import { ArrowLeftIcon } from "@phosphor-icons/react";
import { twoFactorBackupSchema } from "@reactive-resume/dto";
import { usePasswordToggle } from "@reactive-resume/hooks";
import {
@ -95,7 +95,7 @@ export const BackupOtpPage = () => {
void navigate(-1);
}}
>
<ArrowLeft size={14} className="mr-2" />
<ArrowLeftIcon size={14} className="mr-2" />
<span>{t`Back`}</span>
</Button>

4
apps/client/src/pages/auth/forgot-password/page.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro";
import { ArrowLeft } from "@phosphor-icons/react";
import { ArrowLeftIcon } from "@phosphor-icons/react";
import { forgotPasswordSchema } from "@reactive-resume/dto";
import {
Alert,
@ -96,7 +96,7 @@ export const ForgotPasswordPage = () => {
void navigate(-1);
}}
>
<ArrowLeft size={14} className="mr-2" />
<ArrowLeftIcon size={14} className="mr-2" />
<span>{t`Back`}</span>
</Button>

4
apps/client/src/pages/auth/login/page.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t, Trans } from "@lingui/macro";
import { ArrowRight } from "@phosphor-icons/react";
import { ArrowRightIcon } from "@phosphor-icons/react";
import { loginSchema } from "@reactive-resume/dto";
import { usePasswordToggle } from "@reactive-resume/hooks";
import {
@ -63,7 +63,7 @@ export const LoginPage = () => {
<Button asChild variant="link" className="px-1.5">
<Link to="/auth/register">
{t({ message: "Create one now", context: "This is a link to create a new account" })}{" "}
<ArrowRight className="ml-1" />
<ArrowRightIcon className="ml-1" />
</Link>
</Button>
</h6>

4
apps/client/src/pages/auth/register/page.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t, Trans } from "@lingui/macro";
import { ArrowRight } from "@phosphor-icons/react";
import { ArrowRightIcon } from "@phosphor-icons/react";
import { registerSchema } from "@reactive-resume/dto";
import { usePasswordToggle } from "@reactive-resume/hooks";
import {
@ -71,7 +71,7 @@ export const RegisterPage = () => {
<span className="opacity-75">{t`Already have an account?`}</span>
<Button asChild variant="link" className="px-1.5">
<Link to="/auth/login">
{t`Sign in now`} <ArrowRight className="ml-1" />
{t`Sign in now`} <ArrowRightIcon className="ml-1" />
</Link>
</Button>
</h6>

8
apps/client/src/pages/auth/verify-email/page.tsx
View File

@ -1,5 +1,5 @@
import { t, Trans } from "@lingui/macro";
import { ArrowRight, Info, SealCheck } from "@phosphor-icons/react";
import { ArrowRightIcon, InfoIcon, SealCheckIcon } from "@phosphor-icons/react";
import { Alert, AlertDescription, AlertTitle, Button } from "@reactive-resume/ui";
import { useEffect } from "react";
import { Helmet } from "react-helmet-async";
@ -24,7 +24,7 @@ export const VerifyEmailPage = () => {
toast({
variant: "success",
icon: <SealCheck size={16} weight="bold" />,
icon: <SealCheckIcon size={16} weight="bold" />,
title: t`Your email address has been verified successfully.`,
});
@ -55,7 +55,7 @@ export const VerifyEmailPage = () => {
</div>
<Alert variant="info">
<Info size={18} />
<InfoIcon size={18} />
<AlertTitle>{t`Please note that this step is completely optional.`}</AlertTitle>
<AlertDescription>
{t`We verify your email address only to ensure that we can send you a password reset link in case you forget your password.`}
@ -65,7 +65,7 @@ export const VerifyEmailPage = () => {
<Button asChild disabled={loading}>
<Link to="/dashboard">
{t`Go to Dashboard`}
<ArrowRight className="ml-2" />
<ArrowRightIcon className="ml-2" />
</Link>
</Button>
</div>

4
apps/client/src/pages/auth/verify-otp/page.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro";
import { ArrowRight } from "@phosphor-icons/react";
import { ArrowRightIcon } from "@phosphor-icons/react";
import { twoFactorSchema } from "@reactive-resume/dto";
import { usePasswordToggle } from "@reactive-resume/hooks";
import {
@ -61,7 +61,7 @@ export const VerifyOtpPage = () => {
</span>
<Button asChild variant="link" className="px-1.5">
<Link to="/auth/backup-otp">
{t`Lost your device?`} <ArrowRight className="ml-1" />
{t`Lost your device?`} <ArrowRightIcon className="ml-1" />
</Link>
</Button>
</h6>

10
apps/client/src/pages/builder/_components/header.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { HouseSimple, Lock, SidebarSimple } from "@phosphor-icons/react";
import { HouseSimpleIcon, LockIcon, SidebarSimpleIcon } from "@phosphor-icons/react";
import { Button, Tooltip } from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { Link } from "react-router";
@ -39,13 +39,13 @@ export const BuilderHeader = () => {
onToggle("left");
}}
>
<SidebarSimple />
<SidebarSimpleIcon />
</Button>
<div className="flex items-center justify-center gap-x-1 lg:mx-auto">
<Button asChild size="icon" variant="ghost">
<Link to="/dashboard/resumes">
<HouseSimple />
<HouseSimpleIcon />
</Link>
</Button>
@ -55,7 +55,7 @@ export const BuilderHeader = () => {
{locked && (
<Tooltip content={t`This resume is locked, please unlock to make further changes.`}>
<Lock size={14} className="ml-2 opacity-75" />
<LockIcon size={14} className="ml-2 opacity-75" />
</Tooltip>
)}
</div>
@ -68,7 +68,7 @@ export const BuilderHeader = () => {
onToggle("right");
}}
>
<SidebarSimple className="-scale-x-100" />
<SidebarSimpleIcon className="-scale-x-100" />
</Button>
</div>
</div>

48
apps/client/src/pages/builder/_components/toolbar.tsx
View File

@ -1,18 +1,18 @@
import { t } from "@lingui/macro";
import {
ArrowClockwise,
ArrowCounterClockwise,
ArrowsOutCardinal,
CircleNotch,
ClockClockwise,
CubeFocus,
FilePdf,
Hash,
LineSegment,
LinkSimple,
MagnifyingGlass,
MagnifyingGlassMinus,
MagnifyingGlassPlus,
ArrowClockwiseIcon,
ArrowCounterClockwiseIcon,
ArrowsOutCardinalIcon,
CircleNotchIcon,
ClockClockwiseIcon,
CubeFocusIcon,
FilePdfIcon,
HashIcon,
LineSegmentIcon,
LinkSimpleIcon,
MagnifyingGlassIcon,
MagnifyingGlassMinusIcon,
MagnifyingGlassPlusIcon,
} from "@phosphor-icons/react";
import { Button, Separator, Toggle, Tooltip } from "@reactive-resume/ui";
import { motion } from "framer-motion";
@ -82,7 +82,7 @@ export const BuilderToolbar = () => {
undo();
}}
>
<ArrowCounterClockwise />
<ArrowCounterClockwiseIcon />
</Button>
</Tooltip>
@ -95,7 +95,7 @@ export const BuilderToolbar = () => {
redo();
}}
>
<ArrowClockwise />
<ArrowClockwiseIcon />
</Button>
</Tooltip>
@ -103,7 +103,7 @@ export const BuilderToolbar = () => {
<Tooltip content={panMode ? t`Scroll to Pan` : t`Scroll to Zoom`}>
<Toggle className="rounded-none" pressed={panMode} onPressedChange={onTogglePanMode}>
{panMode ? <ArrowsOutCardinal /> : <MagnifyingGlass />}
{panMode ? <ArrowsOutCardinalIcon /> : <MagnifyingGlassIcon />}
</Toggle>
</Tooltip>
@ -111,25 +111,25 @@ export const BuilderToolbar = () => {
<Tooltip content={t`Zoom In`}>
<Button size="icon" variant="ghost" className="rounded-none" onClick={onZoomIn}>
<MagnifyingGlassPlus />
<MagnifyingGlassPlusIcon />
</Button>
</Tooltip>
<Tooltip content={t`Zoom Out`}>
<Button size="icon" variant="ghost" className="rounded-none" onClick={onZoomOut}>
<MagnifyingGlassMinus />
<MagnifyingGlassMinusIcon />
</Button>
</Tooltip>
<Tooltip content={t`Reset Zoom`}>
<Button size="icon" variant="ghost" className="rounded-none" onClick={onResetView}>
<ClockClockwise />
<ClockClockwiseIcon />
</Button>
</Tooltip>
<Tooltip content={t`Center Artboard`}>
<Button size="icon" variant="ghost" className="rounded-none" onClick={onCenterView}>
<CubeFocus />
<CubeFocusIcon />
</Button>
</Tooltip>
@ -143,7 +143,7 @@ export const BuilderToolbar = () => {
setValue("metadata.page.options.breakLine", pressed);
}}
>
<LineSegment />
<LineSegmentIcon />
</Toggle>
</Tooltip>
@ -155,7 +155,7 @@ export const BuilderToolbar = () => {
setValue("metadata.page.options.pageNumbers", pressed);
}}
>
<Hash />
<HashIcon />
</Toggle>
</Tooltip>
@ -169,7 +169,7 @@ export const BuilderToolbar = () => {
disabled={!isPublic}
onClick={onCopy}
>
<LinkSimple />
<LinkSimpleIcon />
</Button>
</Tooltip>
@ -181,7 +181,7 @@ export const BuilderToolbar = () => {
className="rounded-none"
onClick={onPrint}
>
{loading ? <CircleNotch className="animate-spin" /> : <FilePdf />}
{loading ? <CircleNotchIcon className="animate-spin" /> : <FilePdfIcon />}
</Button>
</Tooltip>
</div>

4
apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro";
import { X } from "@phosphor-icons/react";
import { XIcon } from "@phosphor-icons/react";
import type { CustomSection } from "@reactive-resume/schema";
import { customSectionSchema, defaultCustomSection } from "@reactive-resume/schema";
import {
@ -183,7 +183,7 @@ export const CustomSectionDialog = () => {
}}
>
<span className="mr-1">{item}</span>
<X size={12} weight="bold" />
<XIcon size={12} weight="bold" />
</Badge>
</motion.div>
))}

4
apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro";
import { X } from "@phosphor-icons/react";
import { XIcon } from "@phosphor-icons/react";
import { defaultInterest, interestSchema } from "@reactive-resume/schema";
import {
Badge,
@ -87,7 +87,7 @@ export const InterestsDialog = () => {
}}
>
<span className="mr-1">{item}</span>
<X size={12} weight="bold" />
<XIcon size={12} weight="bold" />
</Badge>
</motion.div>
))}

4
apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro";
import { X } from "@phosphor-icons/react";
import { XIcon } from "@phosphor-icons/react";
import { defaultProject, projectSchema } from "@reactive-resume/schema";
import {
Badge,
@ -186,7 +186,7 @@ export const ProjectsDialog = () => {
>
<Badge className="cursor-move">
<span className="mr-1">{item}</span>
<X
<XIcon
className="cursor-pointer"
size={12}
weight="bold"

4
apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro";
import { X } from "@phosphor-icons/react";
import { XIcon } from "@phosphor-icons/react";
import { defaultSkill, skillSchema } from "@reactive-resume/schema";
import {
Badge,
@ -133,7 +133,7 @@ export const SkillsDialog = () => {
}}
>
<span className="mr-1">{item}</span>
<X size={12} weight="bold" />
<XIcon size={12} weight="bold" />
</Badge>
</motion.div>
))}

6
apps/client/src/pages/builder/sidebars/left/index.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { Plus, PlusCircle } from "@phosphor-icons/react";
import { PlusCircleIcon, PlusIcon } from "@phosphor-icons/react";
import type {
Award,
Certification,
@ -144,7 +144,7 @@ export const LeftSidebar = () => {
id="custom"
variant="outline"
name={t`Add a new section`}
icon={<Plus size={14} />}
icon={<PlusIcon size={14} />}
onClick={() => {
addSection();
// eslint-disable-next-line lingui/no-unlocalized-strings
@ -259,7 +259,7 @@ export const LeftSidebar = () => {
<Separator />
<Button size="lg" variant="outline" onClick={addSection}>
<PlusCircle />
<PlusCircleIcon />
<span className="ml-2">{t`Add a new section`}</span>
</Button>
</div>

10
apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx
View File

@ -1,6 +1,6 @@
import { t, Trans } from "@lingui/macro";
import { createId } from "@paralleldrive/cuid2";
import { DotsSixVertical, Envelope, Plus, X } from "@phosphor-icons/react";
import { DotsSixVerticalIcon, EnvelopeIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
import type { CustomField as ICustomField } from "@reactive-resume/schema";
import {
Button,
@ -46,14 +46,14 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
controls.start(event);
}}
>
<DotsSixVertical />
<DotsSixVerticalIcon />
</Button>
<Popover>
<Tooltip content={t`Icon`}>
<PopoverTrigger asChild>
<Button size="icon" variant="ghost" className="shrink-0">
{field.icon ? <i className={cn(`ph ph-${field.icon}`)} /> : <Envelope />}
{field.icon ? <i className={cn(`ph ph-${field.icon}`)} /> : <EnvelopeIcon />}
</Button>
</PopoverTrigger>
</Tooltip>
@ -109,7 +109,7 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
onRemove(field.id);
}}
>
<X />
<XIcon />
</Button>
</div>
</Reorder.Item>
@ -171,7 +171,7 @@ export const CustomFieldsSection = ({ className }: Props) => {
</AnimatePresence>
<Button variant="link" onClick={onAddCustomField}>
<Plus className="mr-2" />
<PlusIcon className="mr-2" />
<span>{t`Add a custom field`}</span>
</Button>
</div>

8
apps/client/src/pages/builder/sidebars/left/sections/picture/section.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { Aperture, Trash, UploadSimple } from "@phosphor-icons/react";
import { ApertureIcon, TrashIcon, UploadSimpleIcon } from "@phosphor-icons/react";
import {
Avatar,
AvatarImage,
@ -56,11 +56,11 @@ export const PictureSection = () => {
{isValidUrl ? (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-background/30 opacity-0 transition-opacity group-hover:opacity-100">
<Trash size={16} weight="bold" />
<TrashIcon size={16} weight="bold" />
</div>
) : (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-background/30 opacity-0 transition-opacity group-hover:opacity-100">
<UploadSimple size={16} weight="bold" />
<UploadSimpleIcon size={16} weight="bold" />
</div>
)}
</div>
@ -88,7 +88,7 @@ export const PictureSection = () => {
exit={{ opacity: 0 }}
className={cn(buttonVariants({ size: "icon", variant: "ghost" }))}
>
<Aperture />
<ApertureIcon />
</motion.button>
</PopoverTrigger>
<PopoverContent className="w-[360px]">

6
apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx
View File

@ -15,7 +15,7 @@ import {
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { t } from "@lingui/macro";
import { Plus } from "@phosphor-icons/react";
import { PlusIcon } from "@phosphor-icons/react";
import type { SectionItem, SectionKey, SectionWithItem } from "@reactive-resume/schema";
import { Button } from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
@ -114,7 +114,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
className="gap-x-2 border-dashed py-6 leading-relaxed hover:bg-secondary-accent"
onClick={onCreate}
>
<Plus size={14} />
<PlusIcon size={14} />
<span className="font-medium">
{t({
message: "Add a new item",
@ -165,7 +165,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
className="ml-auto gap-x-2 text-xs lg:text-sm"
onClick={onCreate}
>
<Plus />
<PlusIcon />
<span>
{t({
message: "Add a new item",

8
apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx
View File

@ -1,6 +1,6 @@
import { t } from "@lingui/macro";
import { createId } from "@paralleldrive/cuid2";
import { CopySimple, PencilSimple, Plus } from "@phosphor-icons/react";
import { CopySimpleIcon, PencilSimpleIcon, PlusIcon } from "@phosphor-icons/react";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import type { SectionItem, SectionWithItem } from "@reactive-resume/schema";
import {
@ -156,9 +156,9 @@ export const SectionDialog = <T extends SectionItem>({
<DialogHeader>
<DialogTitle>
<div className="flex items-center space-x-2.5">
{isCreate && <Plus />}
{isUpdate && <PencilSimple />}
{isDuplicate && <CopySimple />}
{isCreate && <PlusIcon />}
{isUpdate && <PencilSimpleIcon />}
{isDuplicate && <CopySimpleIcon />}
<h2>
{isCreate && t`Create a new item`}
{isUpdate && t`Update an existing item`}

56
apps/client/src/pages/builder/sidebars/left/sections/shared/section-icon.tsx
View File

@ -1,19 +1,19 @@
import type { IconProps } from "@phosphor-icons/react";
import {
Article,
Books,
Briefcase,
Certificate,
CompassTool,
GameController,
GraduationCap,
HandHeart,
Medal,
PuzzlePiece,
ShareNetwork,
Translate,
User,
Users,
ArticleIcon,
BooksIcon,
BriefcaseIcon,
CertificateIcon,
CompassToolIcon,
GameControllerIcon,
GraduationCapIcon,
HandHeartIcon,
MedalIcon,
PuzzlePieceIcon,
ShareNetworkIcon,
TranslateIcon,
UserIcon,
UsersIcon,
} from "@phosphor-icons/react";
import type { SectionKey, SectionWithItem } from "@reactive-resume/schema";
import { defaultSection } from "@reactive-resume/schema";
@ -27,46 +27,46 @@ const getSectionIcon = (id: SectionKey, props: IconProps = {}) => {
switch (id) {
// Left Sidebar
case "basics": {
return <User size={18} {...props} />;
return <UserIcon size={18} {...props} />;
}
case "summary": {
return <Article size={18} {...props} />;
return <ArticleIcon size={18} {...props} />;
}
case "awards": {
return <Medal size={18} {...props} />;
return <MedalIcon size={18} {...props} />;
}
case "profiles": {
return <ShareNetwork size={18} {...props} />;
return <ShareNetworkIcon size={18} {...props} />;
}
case "experience": {
return <Briefcase size={18} {...props} />;
return <BriefcaseIcon size={18} {...props} />;
}
case "education": {
return <GraduationCap size={18} {...props} />;
return <GraduationCapIcon size={18} {...props} />;
}
case "certifications": {
return <Certificate size={18} {...props} />;
return <CertificateIcon size={18} {...props} />;
}
case "interests": {
return <GameController size={18} {...props} />;
return <GameControllerIcon size={18} {...props} />;
}
case "languages": {
return <Translate size={18} {...props} />;
return <TranslateIcon size={18} {...props} />;
}
case "volunteer": {
return <HandHeart size={18} {...props} />;
return <HandHeartIcon size={18} {...props} />;
}
case "projects": {
return <PuzzlePiece size={18} {...props} />;
return <PuzzlePieceIcon size={18} {...props} />;
}
case "publications": {
return <Books size={18} {...props} />;
return <BooksIcon size={18} {...props} />;
}
case "skills": {
return <CompassTool size={18} {...props} />;
return <CompassToolIcon size={18} {...props} />;
}
case "references": {
return <Users size={18} {...props} />;
return <UsersIcon size={18} {...props} />;
}
default: {

15
apps/client/src/pages/builder/sidebars/left/sections/shared/section-list-item.tsx
View File

@ -1,7 +1,12 @@
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { t } from "@lingui/macro";
import { CopySimple, DotsSixVertical, PencilSimple, TrashSimple } from "@phosphor-icons/react";
import {
CopySimpleIcon,
DotsSixVerticalIcon,
PencilSimpleIcon,
TrashSimpleIcon,
} from "@phosphor-icons/react";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
@ -65,7 +70,7 @@ export const SectionListItem = ({
!isDragging && "hover:bg-secondary",
)}
>
<DotsSixVertical weight="bold" size={12} />
<DotsSixVerticalIcon weight="bold" size={12} />
</div>
{/* List Item */}
@ -88,15 +93,15 @@ export const SectionListItem = ({
</DropdownMenuCheckboxItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={onUpdate}>
<PencilSimple size={14} />
<PencilSimpleIcon size={14} />
<span className="ml-2">{t`Edit`}</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={onDuplicate}>
<CopySimple size={14} />
<CopySimpleIcon size={14} />
<span className="ml-2">{t`Copy`}</span>
</DropdownMenuItem>
<DropdownMenuItem className="text-error" onClick={onDelete}>
<TrashSimple size={14} />
<TrashSimpleIcon size={14} />
<span className="ml-2">{t`Remove`}</span>
</DropdownMenuItem>
</DropdownMenuContent>

34
apps/client/src/pages/builder/sidebars/left/sections/shared/section-options.tsx
View File

@ -1,14 +1,14 @@
import { plural, t } from "@lingui/macro";
import {
ArrowCounterClockwise,
Broom,
Columns,
Eye,
EyeSlash,
List,
PencilSimple,
Plus,
TrashSimple,
ArrowCounterClockwiseIcon,
BroomIcon,
ColumnsIcon,
EyeIcon,
EyeSlashIcon,
ListIcon,
PencilSimpleIcon,
PlusIcon,
TrashSimpleIcon,
} from "@phosphor-icons/react";
import type { SectionKey, SectionWithItem } from "@reactive-resume/schema";
import { defaultSections } from "@reactive-resume/schema";
@ -80,14 +80,14 @@ export const SectionOptions = ({ id }: Props) => {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<List weight="bold" />
<ListIcon weight="bold" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="mr-4 w-48">
{hasItems && (
<>
<DropdownMenuItem onClick={onCreate}>
<Plus />
<PlusIcon />
<span className="ml-2">{t`Add a new item`}</span>
</DropdownMenuItem>
<DropdownMenuCheckboxItem
@ -102,12 +102,12 @@ export const SectionOptions = ({ id }: Props) => {
<DropdownMenuGroup>
<DropdownMenuItem onClick={toggleVisibility}>
{section.visible ? <Eye /> : <EyeSlash />}
{section.visible ? <EyeIcon /> : <EyeSlashIcon />}
<span className="ml-2">{section.visible ? t`Hide` : t`Show`}</span>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<PencilSimple />
<PencilSimpleIcon />
<span className="ml-2">{t`Rename`}</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
@ -125,14 +125,14 @@ export const SectionOptions = ({ id }: Props) => {
className="absolute inset-y-0 right-0"
onClick={onResetName}
>
<ArrowCounterClockwise />
<ArrowCounterClockwiseIcon />
</Button>
</div>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Columns />
<ColumnsIcon />
<span className="ml-2">{t`Columns`}</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
@ -148,12 +148,12 @@ export const SectionOptions = ({ id }: Props) => {
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem disabled={!hasItems} onClick={onResetItems}>
<Broom />
<BroomIcon />
<span className="ml-2">{t`Reset`}</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-error" disabled={!isCustomSection} onClick={onRemove}>
<TrashSimple />
<TrashSimpleIcon />
<span className="ml-2">{t`Remove`}</span>
</DropdownMenuItem>
</DropdownMenuContent>

4
apps/client/src/pages/builder/sidebars/left/sections/shared/url-input.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { Tag } from "@phosphor-icons/react";
import { TagIcon } from "@phosphor-icons/react";
import type { URL } from "@reactive-resume/schema";
import { urlSchema } from "@reactive-resume/schema";
import {
@ -42,7 +42,7 @@ export const URLInput = forwardRef<HTMLInputElement, Props>(
<Tooltip content={t`Label`}>
<PopoverTrigger asChild>
<Button size="icon" variant="ghost">
<Tag />
<TagIcon />
</Button>
</PopoverTrigger>
</Tooltip>

10
apps/client/src/pages/builder/sidebars/right/sections/export.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { CircleNotch, FileJs, FilePdf } from "@phosphor-icons/react";
import { CircleNotchIcon, FileJsIcon, FilePdfIcon } from "@phosphor-icons/react";
import { buttonVariants, Card, CardContent, CardDescription, CardTitle } from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { saveAs } from "file-saver";
@ -49,7 +49,7 @@ export const ExportSection = () => {
)}
onClick={onJsonExport}
>
<FileJs size={22} />
<FileJsIcon size={22} />
<CardContent className="flex-1">
<CardTitle className="text-sm">{t`JSON`}</CardTitle>
<CardDescription className="font-normal">
@ -66,7 +66,11 @@ export const ExportSection = () => {
)}
onClick={onPdfExport}
>
{loading ? <CircleNotch size={22} className="animate-spin" /> : <FilePdf size={22} />}
{loading ? (
<CircleNotchIcon size={22} className="animate-spin" />
) : (
<FilePdfIcon size={22} />
)}
<CardContent className="flex-1">
<CardTitle className="text-sm">{t`PDF`}</CardTitle>

15
apps/client/src/pages/builder/sidebars/right/sections/information.tsx
View File

@ -1,5 +1,10 @@
import { t, Trans } from "@lingui/macro";
import { Book, EnvelopeSimpleOpen, GithubLogo, HandHeart } from "@phosphor-icons/react";
import {
BookIcon,
EnvelopeSimpleOpenIcon,
GithubLogoIcon,
HandHeartIcon,
} from "@phosphor-icons/react";
import {
buttonVariants,
Card,
@ -36,7 +41,7 @@ const DonateCard = () => (
rel="noopener noreferrer nofollow"
target="_blank"
>
<HandHeart size={14} weight="bold" className="mr-2" />
<HandHeartIcon size={14} weight="bold" className="mr-2" />
<span className="line-clamp-1">{t`Donate to Reactive Resume`}</span>
</a>
</CardFooter>
@ -65,12 +70,12 @@ const IssuesCard = () => (
rel="noopener noreferrer nofollow"
target="_blank"
>
<GithubLogo size={14} weight="bold" className="mr-2" />
<GithubLogoIcon size={14} weight="bold" className="mr-2" />
<span className="line-clamp-1">{t`Raise an issue`}</span>
</a>
<a className={cn(buttonVariants({ size: "sm" }))} href="mailto:hello@amruthpillai.com">
<EnvelopeSimpleOpen size={14} weight="bold" className="mr-2" />
<EnvelopeSimpleOpenIcon size={14} weight="bold" className="mr-2" />
<span className="line-clamp-1">{t`Send me a message`}</span>
</a>
</CardFooter>
@ -101,7 +106,7 @@ const DocumentationCard = () => (
target="_blank"
rel="noopener noreferrer nofollow"
>
<Book size={14} weight="bold" className="mr-2" />
<BookIcon size={14} weight="bold" className="mr-2" />
<span className="line-clamp-1">{t`Documentation`}</span>
</a>
</CardFooter>

15
apps/client/src/pages/builder/sidebars/right/sections/layout.tsx
View File

@ -17,7 +17,12 @@ import {
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { t } from "@lingui/macro";
import { ArrowCounterClockwise, DotsSixVertical, Plus, TrashSimple } from "@phosphor-icons/react";
import {
ArrowCounterClockwiseIcon,
DotsSixVerticalIcon,
PlusIcon,
TrashSimpleIcon,
} from "@phosphor-icons/react";
import { defaultMetadata } from "@reactive-resume/schema";
import { Button, Portal, Tooltip } from "@reactive-resume/ui";
import type { LayoutLocator, SortablePayload } from "@reactive-resume/utils";
@ -95,7 +100,7 @@ const Section = ({ id, isDragging = false }: SectionProps) => {
)}
>
<div className="flex items-center gap-x-2">
<DotsSixVertical size={12} weight="bold" />
<DotsSixVerticalIcon size={12} weight="bold" />
<p className="flex-1 truncate text-xs font-medium">{name}</p>
</div>
</div>
@ -200,7 +205,7 @@ export const LayoutSection = () => {
<Tooltip content={t`Reset Layout`}>
<Button size="icon" variant="ghost" onClick={onResetLayout}>
<ArrowCounterClockwise />
<ArrowCounterClockwiseIcon />
</Button>
</Tooltip>
</header>
@ -237,7 +242,7 @@ export const LayoutSection = () => {
onRemovePage(pageIndex);
}}
>
<TrashSimple size={12} className="text-error" />
<TrashSimpleIcon size={12} className="text-error" />
</Button>
</Tooltip>
)}
@ -257,7 +262,7 @@ export const LayoutSection = () => {
</DndContext>
<Button variant="outline" className="ml-auto" onClick={onAddPage}>
<Plus />
<PlusIcon />
<span className="ml-2 text-xs lg:text-sm">{t`Add New Page`}</span>
</Button>
</main>

4
apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { CopySimple } from "@phosphor-icons/react";
import { CopySimpleIcon } from "@phosphor-icons/react";
import { Button, Input, Label, Switch, Tooltip } from "@reactive-resume/ui";
import { AnimatePresence, motion } from "framer-motion";
@ -77,7 +77,7 @@ export const SharingSection = () => {
<Tooltip content={t`Copy to Clipboard`}>
<Button size="icon" variant="ghost" onClick={onCopy}>
<CopySimple />
<CopySimpleIcon />
</Button>
</Tooltip>
</div>

4
apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { Info } from "@phosphor-icons/react";
import { InfoIcon } from "@phosphor-icons/react";
import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { AnimatePresence, motion } from "framer-motion";
@ -34,7 +34,7 @@ export const StatisticsSection = () => {
exit={{ opacity: 0, y: -50, filter: "blur(10px)" }}
>
<Alert variant="info">
<Info size={18} />
<InfoIcon size={18} />
<AlertTitle>{t`Statistics are available only for public resumes.`}</AlertTitle>
<AlertDescription className="text-xs leading-relaxed">
{t`You can track the number of views your resume has received, or how many people have downloaded the resume by enabling public sharing.`}

48
apps/client/src/pages/builder/sidebars/right/shared/section-icon.tsx
View File

@ -1,17 +1,17 @@
import type { IconProps } from "@phosphor-icons/react";
import {
Code,
DiamondsFour,
DownloadSimple,
Info,
Layout,
Note,
Palette,
ReadCvLogo,
ShareFat,
TextT,
Translate,
TrendUp,
CodeIcon,
DiamondsFourIcon,
DownloadSimpleIcon,
InfoIcon,
LayoutIcon,
NoteIcon,
PaletteIcon,
ReadCvLogoIcon,
ShareFatIcon,
TextTIcon,
TranslateIcon,
TrendUpIcon,
} from "@phosphor-icons/react";
import type { ButtonProps } from "@reactive-resume/ui";
import { Button, Tooltip } from "@reactive-resume/ui";
@ -34,40 +34,40 @@ const getSectionIcon = (id: MetadataKey, props: IconProps = {}) => {
switch (id) {
// Left Sidebar
case "notes": {
return <Note size={18} {...props} />;
return <NoteIcon size={18} {...props} />;
}
case "template": {
return <DiamondsFour size={18} {...props} />;
return <DiamondsFourIcon size={18} {...props} />;
}
case "layout": {
return <Layout size={18} {...props} />;
return <LayoutIcon size={18} {...props} />;
}
case "typography": {
return <TextT size={18} {...props} />;
return <TextTIcon size={18} {...props} />;
}
case "theme": {
return <Palette size={18} {...props} />;
return <PaletteIcon size={18} {...props} />;
}
case "css": {
return <Code size={18} {...props} />;
return <CodeIcon size={18} {...props} />;
}
case "page": {
return <ReadCvLogo size={18} {...props} />;
return <ReadCvLogoIcon size={18} {...props} />;
}
case "locale": {
return <Translate size={18} {...props} />;
return <TranslateIcon size={18} {...props} />;
}
case "sharing": {
return <ShareFat size={18} {...props} />;
return <ShareFatIcon size={18} {...props} />;
}
case "statistics": {
return <TrendUp size={18} {...props} />;
return <TrendUpIcon size={18} {...props} />;
}
case "export": {
return <DownloadSimple size={18} {...props} />;
return <DownloadSimpleIcon size={18} {...props} />;
}
case "information": {
return <Info size={18} {...props} />;
return <InfoIcon size={18} {...props} />;
}
default: {

6
apps/client/src/pages/dashboard/_components/sidebar.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { FadersHorizontal, ReadCvLogo } from "@phosphor-icons/react";
import { FadersHorizontalIcon, ReadCvLogoIcon } from "@phosphor-icons/react";
import { Button, KeyboardShortcut, Separator } from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { motion } from "framer-motion";
@ -85,13 +85,13 @@ export const Sidebar = ({ setOpen }: SidebarProps) => {
path: "/dashboard/resumes",
name: t`Resumes`,
shortcut: "⇧R",
icon: <ReadCvLogo />,
icon: <ReadCvLogoIcon />,
},
{
path: "/dashboard/settings",
name: t`Settings`,
shortcut: "⇧S",
icon: <FadersHorizontal />,
icon: <FadersHorizontalIcon />,
},
];

6
apps/client/src/pages/dashboard/layout.tsx
View File

@ -1,4 +1,4 @@
import { SidebarSimple } from "@phosphor-icons/react";
import { SidebarSimpleIcon } from "@phosphor-icons/react";
import { Button, Sheet, SheetClose, SheetContent, SheetTrigger } from "@reactive-resume/ui";
import { motion } from "framer-motion";
import { useState } from "react";
@ -15,14 +15,14 @@ export const DashboardLayout = () => {
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>
<Button size="icon" variant="ghost" className="bg-background">
<SidebarSimple />
<SidebarSimpleIcon />
</Button>
</SheetTrigger>
<SheetContent showClose={false} side="left" className="focus-visible:outline-none">
<SheetClose asChild className="absolute left-4 top-4">
<Button size="icon" variant="ghost">
<SidebarSimple />
<SidebarSimpleIcon />
</Button>
</SheetClose>

6
apps/client/src/pages/dashboard/resumes/_dialogs/import.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro";
import { Check, DownloadSimple } from "@phosphor-icons/react";
import { CheckIcon, DownloadSimpleIcon } from "@phosphor-icons/react";
import type { JsonResume, LinkedIn, ReactiveResumeV3 } from "@reactive-resume/parser";
import {
JsonResumeParser,
@ -204,7 +204,7 @@ export const ImportDialog = () => {
<DialogHeader>
<DialogTitle>
<div className="flex items-center space-x-2.5">
<DownloadSimple />
<DownloadSimpleIcon />
<h2>{t`Import an existing resume`}</h2>
</div>
</DialogTitle>
@ -310,7 +310,7 @@ export const ImportDialog = () => {
</Button>
<Button disabled type="button" variant="success">
<Check size={16} weight="bold" className="mr-2" />
<CheckIcon size={16} weight="bold" className="mr-2" />
{t`Validated`}
</Button>
</>

10
apps/client/src/pages/dashboard/resumes/_dialogs/resume.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro";
import { CaretDown, Flask, MagicWand, Plus } from "@phosphor-icons/react";
import { CaretDownIcon, FlaskIcon, MagicWandIcon, PlusIcon } from "@phosphor-icons/react";
import type { ResumeDto } from "@reactive-resume/dto";
import { createResumeSchema } from "@reactive-resume/dto";
import { idSchema, sampleResume } from "@reactive-resume/schema";
@ -173,7 +173,7 @@ export const ResumeDialog = () => {
<DialogHeader>
<DialogTitle>
<div className="flex items-center space-x-2.5">
<Plus />
<PlusIcon />
<h2>
{isCreate && t`Create a new resume`}
{isUpdate && t`Update an existing resume`}
@ -206,7 +206,7 @@ export const ResumeDialog = () => {
variant="outline"
onClick={onGenerateRandomName}
>
<MagicWand />
<MagicWandIcon />
</Button>
</Tooltip>
)}
@ -250,12 +250,12 @@ export const ResumeDialog = () => {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button type="button" size="icon" className="rounded-l-none border-l">
<CaretDown />
<CaretDownIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="right" align="center">
<DropdownMenuItem onClick={onCreateSample}>
<Flask className="mr-2" />
<FlaskIcon className="mr-2" />
{t`Create Sample Resume`}
</DropdownMenuItem>
</DropdownMenuContent>

4
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/create-card.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { Plus } from "@phosphor-icons/react";
import { PlusIcon } from "@phosphor-icons/react";
import { KeyboardShortcut } from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
@ -16,7 +16,7 @@ export const CreateResumeCard = () => {
open("create");
}}
>
<Plus size={64} weight="thin" />
<PlusIcon size={64} weight="thin" />
<div
className={cn(

4
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/import-card.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { DownloadSimple } from "@phosphor-icons/react";
import { DownloadSimpleIcon } from "@phosphor-icons/react";
import { KeyboardShortcut } from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
@ -16,7 +16,7 @@ export const ImportResumeCard = () => {
open("create");
}}
>
<DownloadSimple size={64} weight="thin" />
<DownloadSimpleIcon size={64} weight="thin" />
<div
className={cn(

26
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx
View File

@ -1,11 +1,11 @@
import { t } from "@lingui/macro";
import {
CopySimple,
FolderOpen,
Lock,
LockOpen,
PencilSimple,
TrashSimple,
CopySimpleIcon,
FolderOpenIcon,
LockIcon,
LockOpenIcon,
PencilSimpleIcon,
TrashSimpleIcon,
} from "@phosphor-icons/react";
import type { ResumeDto } from "@reactive-resume/dto";
import {
@ -68,7 +68,7 @@ export const ResumeCard = ({ resume }: Props) => {
exit={{ opacity: 0 }}
className="absolute inset-0 flex items-center justify-center bg-background/75 backdrop-blur-sm"
>
<Lock size={42} />
<LockIcon size={42} />
</motion.div>
)}
</AnimatePresence>
@ -93,31 +93,31 @@ export const ResumeCard = ({ resume }: Props) => {
<DropdownMenuContent>
<DropdownMenuItem onClick={onOpen}>
<FolderOpen size={14} className="mr-2" />
<FolderOpenIcon size={14} className="mr-2" />
{t`Open`}
</DropdownMenuItem>
<DropdownMenuItem onClick={onUpdate}>
<PencilSimple size={14} className="mr-2" />
<PencilSimpleIcon size={14} className="mr-2" />
{t`Rename`}
</DropdownMenuItem>
<DropdownMenuItem onClick={onDuplicate}>
<CopySimple size={14} className="mr-2" />
<CopySimpleIcon size={14} className="mr-2" />
{t`Duplicate`}
</DropdownMenuItem>
{resume.locked ? (
<DropdownMenuItem onClick={onLockChange}>
<LockOpen size={14} className="mr-2" />
<LockOpenIcon size={14} className="mr-2" />
{t`Unlock`}
</DropdownMenuItem>
) : (
<DropdownMenuItem onClick={onLockChange}>
<Lock size={14} className="mr-2" />
<LockIcon size={14} className="mr-2" />
{t`Lock`}
</DropdownMenuItem>
)}
<DropdownMenuSeparator />
<DropdownMenuItem className="text-error" onClick={onDelete}>
<TrashSimple size={14} className="mr-2" />
<TrashSimpleIcon size={14} className="mr-2" />
{t`Delete`}
</DropdownMenuItem>
</DropdownMenuContent>

4
apps/client/src/pages/dashboard/resumes/_layouts/list/_components/create-item.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { Plus } from "@phosphor-icons/react";
import { PlusIcon } from "@phosphor-icons/react";
import type { ResumeDto } from "@reactive-resume/dto";
import { KeyboardShortcut } from "@reactive-resume/ui";
@ -12,7 +12,7 @@ export const CreateResumeListItem = () => {
return (
<BaseListItem
start={<Plus size={18} />}
start={<PlusIcon size={18} />}
title={
<>
<span>{t`Create a new resume`}</span>

4
apps/client/src/pages/dashboard/resumes/_layouts/list/_components/import-item.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { DownloadSimple } from "@phosphor-icons/react";
import { DownloadSimpleIcon } from "@phosphor-icons/react";
import { KeyboardShortcut } from "@reactive-resume/ui";
import { useDialog } from "@/client/stores/dialog";
@ -11,7 +11,7 @@ export const ImportResumeListItem = () => {
return (
<BaseListItem
start={<DownloadSimple size={18} />}
start={<DownloadSimpleIcon size={18} />}
title={
<>
<span>{t`Import an existing resume`}</span>

40
apps/client/src/pages/dashboard/resumes/_layouts/list/_components/resume-item.tsx
View File

@ -1,12 +1,12 @@
import { t } from "@lingui/macro";
import {
CopySimple,
DotsThreeVertical,
FolderOpen,
Lock,
LockOpen,
PencilSimple,
TrashSimple,
CopySimpleIcon,
DotsThreeVerticalIcon,
FolderOpenIcon,
LockIcon,
LockOpenIcon,
PencilSimpleIcon,
TrashSimpleIcon,
} from "@phosphor-icons/react";
import type { ResumeDto } from "@reactive-resume/dto";
import {
@ -63,7 +63,7 @@ export const ResumeListItem = ({ resume }: Props) => {
<DropdownMenu>
<DropdownMenuTrigger asChild className="aspect-square">
<Button size="icon" variant="ghost">
<DotsThreeVertical />
<DotsThreeVerticalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
@ -73,7 +73,7 @@ export const ResumeListItem = ({ resume }: Props) => {
onOpen();
}}
>
<FolderOpen size={14} className="mr-2" />
<FolderOpenIcon size={14} className="mr-2" />
{t`Open`}
</DropdownMenuItem>
<DropdownMenuItem
@ -82,7 +82,7 @@ export const ResumeListItem = ({ resume }: Props) => {
onUpdate();
}}
>
<PencilSimple size={14} className="mr-2" />
<PencilSimpleIcon size={14} className="mr-2" />
{t`Rename`}
</DropdownMenuItem>
<DropdownMenuItem
@ -91,7 +91,7 @@ export const ResumeListItem = ({ resume }: Props) => {
onDuplicate();
}}
>
<CopySimple size={14} className="mr-2" />
<CopySimpleIcon size={14} className="mr-2" />
{t`Duplicate`}
</DropdownMenuItem>
{resume.locked ? (
@ -101,7 +101,7 @@ export const ResumeListItem = ({ resume }: Props) => {
onLockChange();
}}
>
<LockOpen size={14} className="mr-2" />
<LockOpenIcon size={14} className="mr-2" />
{t`Unlock`}
</DropdownMenuItem>
) : (
@ -111,7 +111,7 @@ export const ResumeListItem = ({ resume }: Props) => {
onLockChange();
}}
>
<Lock size={14} className="mr-2" />
<LockIcon size={14} className="mr-2" />
{t`Lock`}
</DropdownMenuItem>
)}
@ -123,7 +123,7 @@ export const ResumeListItem = ({ resume }: Props) => {
onDelete();
}}
>
<TrashSimple size={14} className="mr-2" />
<TrashSimpleIcon size={14} className="mr-2" />
{t`Delete`}
</DropdownMenuItem>
</DropdownMenuContent>
@ -144,31 +144,31 @@ export const ResumeListItem = ({ resume }: Props) => {
<ContextMenuContent>
<ContextMenuItem onClick={onOpen}>
<FolderOpen size={14} className="mr-2" />
<FolderOpenIcon size={14} className="mr-2" />
{t`Open`}
</ContextMenuItem>
<ContextMenuItem onClick={onUpdate}>
<PencilSimple size={14} className="mr-2" />
<PencilSimpleIcon size={14} className="mr-2" />
{t`Rename`}
</ContextMenuItem>
<ContextMenuItem onClick={onDuplicate}>
<CopySimple size={14} className="mr-2" />
<CopySimpleIcon size={14} className="mr-2" />
{t`Duplicate`}
</ContextMenuItem>
{resume.locked ? (
<ContextMenuItem onClick={onLockChange}>
<LockOpen size={14} className="mr-2" />
<LockOpenIcon size={14} className="mr-2" />
{t`Unlock`}
</ContextMenuItem>
) : (
<ContextMenuItem onClick={onLockChange}>
<Lock size={14} className="mr-2" />
<LockIcon size={14} className="mr-2" />
{t`Lock`}
</ContextMenuItem>
)}
<ContextMenuSeparator />
<ContextMenuItem className="text-error" onClick={onDelete}>
<TrashSimple size={14} className="mr-2" />
<TrashSimpleIcon size={14} className="mr-2" />
{t`Delete`}
</ContextMenuItem>
</ContextMenuContent>

6
apps/client/src/pages/dashboard/resumes/page.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { List, SquaresFour } from "@phosphor-icons/react";
import { ListIcon, SquaresFourIcon } from "@phosphor-icons/react";
import { ScrollArea, Tabs, TabsContent, TabsList, TabsTrigger } from "@reactive-resume/ui";
import { motion } from "framer-motion";
import { useState } from "react";
@ -39,11 +39,11 @@ export const ResumesPage = () => {
<TabsList>
<TabsTrigger value="grid" className="size-8 p-0 sm:h-8 sm:w-auto sm:px-4">
<SquaresFour />
<SquaresFourIcon />
<span className="ml-2 hidden sm:block">{t`Grid`}</span>
</TabsTrigger>
<TabsTrigger value="list" className="size-8 p-0 sm:h-8 sm:w-auto sm:px-4">
<List />
<ListIcon />
<span className="ml-2 hidden sm:block">{t`List`}</span>
</TabsTrigger>
</TabsList>

4
apps/client/src/pages/dashboard/settings/_dialogs/two-factor.tsx
View File

@ -1,7 +1,7 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { i18n } from "@lingui/core";
import { msg, t } from "@lingui/macro";
import { QrCode } from "@phosphor-icons/react";
import { QrCodeIcon } from "@phosphor-icons/react";
import {
Alert,
AlertDescription,
@ -154,7 +154,7 @@ export const TwoFactorDialog = () => {
<DialogHeader>
<DialogTitle>
<div className="flex items-center space-x-2.5">
<QrCode />
<QrCodeIcon />
<h2>
{mode === "create" && t`Setup two-factor authentication on your account`}
{mode === "update" &&

6
apps/client/src/pages/dashboard/settings/_sections/account.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro";
import { Check, UploadSimple, Warning } from "@phosphor-icons/react";
import { CheckIcon, UploadSimpleIcon, WarningIcon } from "@phosphor-icons/react";
import type { UpdateUserDto } from "@reactive-resume/dto";
import { updateUserSchema } from "@reactive-resume/dto";
import {
@ -137,7 +137,7 @@ export const AccountSettings = () => {
className={cn(buttonVariants({ size: "icon", variant: "ghost" }))}
onClick={() => inputRef.current?.click()}
>
<UploadSimple />
<UploadSimpleIcon />
</motion.button>
</>
)}
@ -188,7 +188,7 @@ export const AccountSettings = () => {
user.emailVerified ? "text-success-accent" : "text-warning-accent",
)}
>
{user.emailVerified ? <Check size={12} /> : <Warning size={12} />}
{user.emailVerified ? <CheckIcon size={12} /> : <WarningIcon size={12} />}
{user.emailVerified ? t`Verified` : t`Unverified`}
{!user.emailVerified && (
<Button

6
apps/client/src/pages/dashboard/settings/_sections/openai.tsx
View File

@ -1,6 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { t, Trans } from "@lingui/macro";
import { FloppyDisk, TrashSimple } from "@phosphor-icons/react";
import { FloppyDiskIcon, TrashSimpleIcon } from "@phosphor-icons/react";
import {
Alert,
Button,
@ -172,13 +172,13 @@ export const OpenAISettings = () => {
/>
<div className="flex items-center space-x-2 self-end sm:col-start-2">
<Button type="submit" disabled={!form.formState.isValid}>
{isEnabled && <FloppyDisk className="mr-2" />}
{isEnabled && <FloppyDiskIcon className="mr-2" />}
{isEnabled ? t`Saved` : t`Save Locally`}
</Button>
{isEnabled && (
<Button type="reset" variant="ghost" onClick={onRemove}>
<TrashSimple className="mr-2" />
<TrashSimpleIcon className="mr-2" />
{t`Forget`}
</Button>
)}

2
apps/client/src/pages/dashboard/settings/_sections/security.tsx
View File

@ -91,7 +91,7 @@ export const SecuritySettings = () => {
<FormField
name="newPassword"
control={form.control}
render={({ field, fieldState }) => (
render={({ field }) => (
<FormItem>
<FormLabel>{t`New Password`}</FormLabel>
<FormControl>

4
apps/client/src/pages/home/components/donation-banner.tsx
View File

@ -1,6 +1,6 @@
/* eslint-disable lingui/no-unlocalized-strings */
import { HandHeart } from "@phosphor-icons/react";
import { HandHeartIcon } from "@phosphor-icons/react";
import { motion } from "framer-motion";
export const DonationBanner = () => (
@ -12,7 +12,7 @@ export const DonationBanner = () => (
animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
className="hidden w-screen items-center justify-center gap-x-2 bg-zinc-800 text-xs font-bold leading-relaxed text-zinc-50 lg:flex"
>
<HandHeart weight="bold" size={14} className="shrink-0" />
<HandHeartIcon weight="bold" size={14} className="shrink-0" />
<span>
If this project has helped you, please consider donating to Reactive Resume as we're running
out of server resources with the increasing number of users.

94
apps/client/src/pages/home/sections/features/index.tsx
View File

@ -1,29 +1,29 @@
import { t } from "@lingui/macro";
import {
Brain,
Cloud,
CloudSun,
CurrencyDollarSimple,
EnvelopeSimple,
Eye,
File,
Files,
Folder,
GitBranch,
GithubLogo,
GoogleChromeLogo,
GoogleLogo,
BrainIcon,
CloudIcon,
CloudSunIcon,
CurrencyDollarSimpleIcon,
EnvelopeSimpleIcon,
EyeIcon,
FileIcon,
FilesIcon,
FolderIcon,
GitBranchIcon,
GithubLogoIcon,
GoogleChromeLogoIcon,
GoogleLogoIcon,
IconContext,
Layout,
Lock,
Note,
Prohibit,
Scales,
StackSimple,
Star,
Swatches,
TextAa,
Translate,
LayoutIcon,
LockIcon,
NoteIcon,
ProhibitIcon,
ScalesIcon,
StackSimpleIcon,
StarIcon,
SwatchesIcon,
TextAaIcon,
TranslateIcon,
} from "@phosphor-icons/react";
import { cn, languages, templatesList } from "@reactive-resume/utils";
import { motion } from "framer-motion";
@ -43,30 +43,30 @@ export const FeaturesSection = () => {
const templatesCount = templatesList.length;
const features: Feature[] = [
{ icon: <CurrencyDollarSimple />, title: t`Free, forever` },
{ icon: <GitBranch />, title: t`Open Source` },
{ icon: <Scales />, title: t`MIT License` },
{ icon: <Prohibit />, title: t`No user tracking or advertising` },
{ icon: <Cloud />, title: t`Self-host with Docker` },
{ icon: <Translate />, title: t`Available in ${languagesCount} languages` },
{ icon: <Brain />, title: t`OpenAI Integration` },
{ icon: <GithubLogo />, title: t`Sign in with GitHub` },
{ icon: <GoogleLogo />, title: t`Sign in with Google` },
{ icon: <EnvelopeSimple />, title: t`Sign in with Email` },
{ icon: <Lock />, title: t`Secure with two-factor authentication` },
{ icon: <StackSimple />, title: t`${templatesCount} resume templates to choose from` },
{ icon: <Files />, title: t`Design single/multi page resumes` },
{ icon: <Folder />, title: t`Manage multiple resumes` },
{ icon: <Swatches />, title: t`Customisable colour palettes` },
{ icon: <Layout />, title: t`Customisable layouts` },
{ icon: <Star />, title: t`Custom resume sections` },
{ icon: <Note />, title: t`Personal notes for each resume` },
{ icon: <Lock />, title: t`Lock a resume to prevent editing` },
{ icon: <File />, title: t`Supports A4/Letter page formats` },
{ icon: <TextAa />, title: t`Pick any font from Google Fonts` },
{ icon: <GoogleChromeLogo />, title: t`Host your resume publicly` },
{ icon: <Eye />, title: t`Track views and downloads` },
{ icon: <CloudSun />, title: t`Light or dark theme` },
{ icon: <CurrencyDollarSimpleIcon />, title: t`Free, forever` },
{ icon: <GitBranchIcon />, title: t`Open Source` },
{ icon: <ScalesIcon />, title: t`MIT License` },
{ icon: <ProhibitIcon />, title: t`No user tracking or advertising` },
{ icon: <CloudIcon />, title: t`Self-host with Docker` },
{ icon: <TranslateIcon />, title: t`Available in ${languagesCount} languages` },
{ icon: <BrainIcon />, title: t`OpenAI Integration` },
{ icon: <GithubLogoIcon />, title: t`Sign in with GitHub` },
{ icon: <GoogleLogoIcon />, title: t`Sign in with Google` },
{ icon: <EnvelopeSimpleIcon />, title: t`Sign in with Email` },
{ icon: <LockIcon />, title: t`Secure with two-factor authentication` },
{ icon: <StackSimpleIcon />, title: t`${templatesCount} resume templates to choose from` },
{ icon: <FilesIcon />, title: t`Design single/multi page resumes` },
{ icon: <FolderIcon />, title: t`Manage multiple resumes` },
{ icon: <SwatchesIcon />, title: t`Customisable colour palettes` },
{ icon: <LayoutIcon />, title: t`Customisable layouts` },
{ icon: <StarIcon />, title: t`Custom resume sections` },
{ icon: <NoteIcon />, title: t`Personal notes for each resume` },
{ icon: <LockIcon />, title: t`Lock a resume to prevent editing` },
{ icon: <FileIcon />, title: t`Supports A4/Letter page formats` },
{ icon: <TextAaIcon />, title: t`Pick any font from Google Fonts` },
{ icon: <GoogleChromeLogoIcon />, title: t`Host your resume publicly` },
{ icon: <EyeIcon />, title: t`Track views and downloads` },
{ icon: <CloudSunIcon />, title: t`Light or dark theme` },
{
icon: (
<div className="flex items-center space-x-1">

6
apps/client/src/pages/home/sections/hero/call-to-action.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { Book, SignOut } from "@phosphor-icons/react";
import { BookIcon, SignOutIcon } from "@phosphor-icons/react";
import { Button } from "@reactive-resume/ui";
import { Link } from "react-router";
@ -19,7 +19,7 @@ export const HeroCTA = () => {
</Button>
<Button size="lg" variant="link" onClick={() => logout()}>
<SignOut className="mr-3" />
<SignOutIcon className="mr-3" />
{t`Logout`}
</Button>
</>
@ -34,7 +34,7 @@ export const HeroCTA = () => {
<Button asChild size="lg" variant="link">
<a href="https://docs.rxresu.me" target="_blank" rel="noopener noreferrer nofollow">
<Book className="mr-3" />
<BookIcon className="mr-3" />
{t`Learn more`}
</a>
</Button>

4
apps/client/src/pages/home/sections/hero/index.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { ArrowRight } from "@phosphor-icons/react";
import { ArrowRightIcon } from "@phosphor-icons/react";
import { Badge, buttonVariants } from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { motion } from "framer-motion";
@ -30,7 +30,7 @@ export const HeroSection = () => (
className={cn(buttonVariants({ variant: "link" }), "space-x-2 text-left")}
>
<p>{t`What's new in the latest version`}</p>
<ArrowRight />
<ArrowRightIcon />
</a>
</div>

4
apps/client/src/pages/home/sections/testimonials/index.tsx
View File

@ -2,7 +2,7 @@
/* eslint-disable lingui/no-unlocalized-strings */
import { t, Trans } from "@lingui/macro";
import { Quotes } from "@phosphor-icons/react";
import { QuotesIcon } from "@phosphor-icons/react";
import { cn } from "@reactive-resume/utils";
import { motion } from "framer-motion";
@ -92,7 +92,7 @@ export const TestimonialsSection = () => (
index > 0 && "hidden lg:block",
)}
>
<Quotes size={64} className="absolute -right-3 bottom-0 opacity-20" />
<QuotesIcon size={64} className="absolute -right-3 bottom-0 opacity-20" />
<blockquote className="italic leading-relaxed">
&ldquo;{testimonial.quote}&rdquo;
</blockquote>

8
apps/client/src/pages/public/page.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { CircleNotch, FilePdf } from "@phosphor-icons/react";
import { CircleNotchIcon, FilePdfIcon } from "@phosphor-icons/react";
import type { ResumeDto } from "@reactive-resume/dto";
import { Button } from "@reactive-resume/ui";
import { pageSizeMap } from "@reactive-resume/utils";
@ -100,7 +100,11 @@ export const PublicResumePage = () => {
<div className="fixed bottom-5 right-5 z-0 hidden sm:block print:hidden">
<div className="flex flex-col items-center gap-y-2">
<Button size="icon" variant="ghost" onClick={onDownloadPdf}>
{loading ? <CircleNotch size={20} className="animate-spin" /> : <FilePdf size={20} />}
{loading ? (
<CircleNotchIcon size={20} className="animate-spin" />
) : (
<FilePdfIcon size={20} />
)}
</Button>
<ThemeSwitch />

2
apps/client/src/services/user/user.ts
View File

@ -11,7 +11,7 @@ export const fetchUser = async () => {
"/user/me",
);
return response.data;
return response.data ?? null;
};
export const useUser = () => {