diff --git a/README.md b/README.md index 10341ee7..bd20b03c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Reactive Resume +Reactive Resume # Reactive Resume @@ -30,6 +30,7 @@ You have complete control over what goes into your resume, how it looks, what co - [Donations](#donations) - [GitHub Sponsor](#github-sponsor) - [PayPal](#paypal) + - [GitHub Star History](#github-star-history) - [Infrastructure](#infrastructure) - [Contributors Wall](#contributors-wall) - [License](#license) diff --git a/client/.eslintrc.json b/client/.eslintrc.json index cbc0003e..823a26af 100644 --- a/client/.eslintrc.json +++ b/client/.eslintrc.json @@ -12,6 +12,9 @@ "@next/next/no-img-element": "off", "@next/next/no-sync-scripts": "off", + // React + "react/no-unescaped-entities": "off", + // React Hooks "react-hooks/exhaustive-deps": "off", diff --git a/client/components/build/Center/ArtboardController.module.scss b/client/components/build/Center/ArtboardController.module.scss index c8a0367d..a4a47d4d 100644 --- a/client/components/build/Center/ArtboardController.module.scss +++ b/client/components/build/Center/ArtboardController.module.scss @@ -15,7 +15,7 @@ .controller { @apply z-20 flex items-center justify-center shadow-lg; @apply flex rounded-l-full rounded-r-full px-4; - @apply bg-neutral-50 dark:bg-neutral-800; + @apply bg-zinc-50 dark:bg-zinc-900; @apply opacity-70 transition-opacity duration-200 hover:opacity-100; > button { @@ -23,6 +23,6 @@ } > hr { - @apply mx-3 h-5 w-0.5 bg-neutral-900/40 dark:bg-neutral-50/20; + @apply mx-3 h-5 w-0.5 bg-zinc-900/40 dark:bg-zinc-50/20; } } diff --git a/client/components/build/Center/ArtboardController.tsx b/client/components/build/Center/ArtboardController.tsx index 57322739..7cbd0b52 100644 --- a/client/components/build/Center/ArtboardController.tsx +++ b/client/components/build/Center/ArtboardController.tsx @@ -12,7 +12,6 @@ import { ZoomOut, } from '@mui/icons-material'; import { ButtonBase, Divider, Tooltip, useMediaQuery, useTheme } from '@mui/material'; -import clsx from 'clsx'; import dayjs from 'dayjs'; import get from 'lodash/get'; import { useTranslation } from 'next-i18next'; @@ -26,6 +25,7 @@ import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer'; import { togglePageBreakLine, togglePageOrientation, toggleSidebar } from '@/store/build/buildSlice'; import { useAppDispatch, useAppSelector } from '@/store/hooks'; import getResumeUrl from '@/utils/getResumeUrl'; +import { cn } from '@/utils/styles'; import styles from './ArtboardController.module.scss'; @@ -60,7 +60,7 @@ const ArtboardController: React.FC = ({ zoomIn, zoomO const url = getResumeUrl(resume, { withHost: true }); await navigator.clipboard.writeText(url); - toast.success(t('common.toast.success.resume-link-copied')); + toast.success(t('common.toast.success.resume-link-copied')); }; const handleExportPDF = async () => { @@ -77,40 +77,40 @@ const ArtboardController: React.FC = ({ zoomIn, zoomO return (
- ('builder.controller.tooltip.undo')}> - + + - ('builder.controller.tooltip.redo')}> - + + - ('builder.controller.tooltip.zoom-in')}> + zoomIn(0.25)}> - ('builder.controller.tooltip.zoom-out')}> + zoomOut(0.25)}> - ('builder.controller.tooltip.center-artboard')}> + centerView(0.95)}> @@ -120,10 +120,10 @@ const ArtboardController: React.FC = ({ zoomIn, zoomO {isDesktop && ( <> - ('builder.controller.tooltip.toggle-orientation')}> + {orientation === 'vertical' ? ( @@ -133,13 +133,13 @@ const ArtboardController: React.FC = ({ zoomIn, zoomO - ('builder.controller.tooltip.toggle-page-break-line')}> + - ('builder.controller.tooltip.toggle-sidebars')}> + @@ -149,13 +149,13 @@ const ArtboardController: React.FC = ({ zoomIn, zoomO )} - ('builder.controller.tooltip.copy-link')}> + - ('builder.controller.tooltip.export-pdf')}> + diff --git a/client/components/build/Center/Center.module.scss b/client/components/build/Center/Center.module.scss index db0e887c..1c86ed27 100644 --- a/client/components/build/Center/Center.module.scss +++ b/client/components/build/Center/Center.module.scss @@ -1,7 +1,7 @@ .center { @apply mx-0 flex flex-grow pt-12 lg:pt-16; @apply transition-[margin-left,margin-right] duration-200; - @apply bg-neutral-200 dark:bg-neutral-900; + @apply bg-zinc-100 dark:bg-zinc-900; } .wrapper { diff --git a/client/components/build/Center/Center.tsx b/client/components/build/Center/Center.tsx index f9390505..92c8984d 100644 --- a/client/components/build/Center/Center.tsx +++ b/client/components/build/Center/Center.tsx @@ -1,9 +1,9 @@ -import clsx from 'clsx'; import get from 'lodash/get'; import isEmpty from 'lodash/isEmpty'; import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'; import { useAppSelector } from '@/store/hooks'; +import { cn } from '@/utils/styles'; import ArtboardController from './ArtboardController'; import styles from './Center.module.scss'; @@ -19,7 +19,7 @@ const Center = () => { if (isEmpty(resume)) return null; return ( -
+
{ <>
svg { - @apply text-base text-neutral-100; + @apply text-base text-zinc-100; } } diff --git a/client/components/build/Center/Header.tsx b/client/components/build/Center/Header.tsx index 604d1c3e..18a8d0f6 100644 --- a/client/components/build/Center/Header.tsx +++ b/client/components/build/Center/Header.tsx @@ -20,7 +20,6 @@ import { useMediaQuery, useTheme, } from '@mui/material'; -import clsx from 'clsx'; import get from 'lodash/get'; import { useRouter } from 'next/router'; import { useTranslation } from 'next-i18next'; @@ -37,6 +36,7 @@ import { setSidebarState, toggleSidebar } from '@/store/build/buildSlice'; import { useAppDispatch, useAppSelector } from '@/store/hooks'; import { setModalState } from '@/store/modal/modalSlice'; import getResumeUrl from '@/utils/getResumeUrl'; +import { cn } from '@/utils/styles'; import styles from './Header.module.scss'; @@ -102,7 +102,7 @@ const Header = () => { }, }, }, - }) + }), ); }; @@ -132,14 +132,14 @@ const Header = () => { const url = getResumeUrl(resume, { withHost: true }); await navigator.clipboard.writeText(url); - toast.success(t('common.toast.success.resume-link-copied')); + toast.success(t('common.toast.success.resume-link-copied')); }; return ( { - {t('builder.header.menu.rename')} + {t('builder.header.menu.rename')} - {t('builder.header.menu.duplicate')} + {t('builder.header.menu.duplicate')} {resume.public ? ( @@ -180,27 +180,27 @@ const Header = () => { - {t('builder.header.menu.share-link')} + {t('builder.header.menu.share-link')} ) : ( - ('builder.header.menu.tooltips.share-link')}> +
- {t('builder.header.menu.share-link')} + {t('builder.header.menu.share-link')}
)} - ('builder.header.menu.tooltips.delete')}> + - {t('builder.header.menu.delete')} + {t('builder.header.menu.delete')} diff --git a/client/components/build/Center/Page.module.scss b/client/components/build/Center/Page.module.scss index dffed45d..e8489134 100644 --- a/client/components/build/Center/Page.module.scss +++ b/client/components/build/Center/Page.module.scss @@ -18,8 +18,8 @@ content: 'Page Break'; top: calc(297mm - 19px); - @apply absolute w-full border-b border-dashed border-neutral-800/75; - @apply flex items-end justify-end pr-2 pb-0.5 text-xs font-bold text-neutral-800/75; + @apply absolute w-full border-b border-dashed border-zinc-900/75; + @apply flex items-end justify-end pr-2 pb-0.5 text-xs font-bold text-zinc-900/75; @apply print:hidden; :global(.preview-mode) &, diff --git a/client/components/build/Center/Page.tsx b/client/components/build/Center/Page.tsx index 32542ccc..3d8e3bf9 100644 --- a/client/components/build/Center/Page.tsx +++ b/client/components/build/Center/Page.tsx @@ -49,9 +49,7 @@ const Page: React.FC = ({ page, showPageNumbers = false }) => { {TemplatePage && }
- {showPageNumbers && ( -

{`${t('builder.common.glossary.page')} ${page + 1}`}

- )} + {showPageNumbers &&

{`${t('builder.common.glossary.page')} ${page + 1}`}

}
); }; diff --git a/client/components/build/LeftSidebar/LeftSidebar.module.scss b/client/components/build/LeftSidebar/LeftSidebar.module.scss index 086d3895..d335048b 100644 --- a/client/components/build/LeftSidebar/LeftSidebar.module.scss +++ b/client/components/build/LeftSidebar/LeftSidebar.module.scss @@ -1,12 +1,12 @@ .container { @apply h-screen w-[95vw] md:w-[70vw] lg:w-[50vw] xl:w-[30vw] 2xl:w-[28vw]; - @apply bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-50; - @apply relative flex border-r-2 border-neutral-50/10; + @apply bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100; + @apply relative flex border-r-2 border-zinc-100/10; nav { @apply absolute inset-y-0 left-0; @apply w-14 py-4 md:w-16 md:px-2; - @apply bg-neutral-100 shadow dark:bg-neutral-800; + @apply bg-zinc-100 shadow dark:bg-zinc-900; @apply flex flex-col items-center justify-between; hr { @@ -29,7 +29,7 @@ > section { @apply grid gap-4; @apply pt-5 pb-7 first:pt-0; - @apply border-b border-neutral-900/10 last:border-b-0 dark:border-neutral-50/10; + @apply border-b border-zinc-900/10 last:border-b-0 dark:border-zinc-100/10; hr { @apply my-2; diff --git a/client/components/build/LeftSidebar/LeftSidebar.tsx b/client/components/build/LeftSidebar/LeftSidebar.tsx index bdc9f41d..47cbdf6b 100644 --- a/client/components/build/LeftSidebar/LeftSidebar.tsx +++ b/client/components/build/LeftSidebar/LeftSidebar.tsx @@ -8,7 +8,7 @@ import React, { ReactComponentElement, useMemo } from 'react'; import { Section as SectionRecord } from 'schema'; import { validate } from 'uuid'; -import Logo from '@/components/shared/Logo'; +import Icon from '@/components/shared/Icon'; import { getCustomSections, getSectionsByType, left } from '@/config/sections'; import { setSidebarState } from '@/store/build/buildSlice'; import { useAppDispatch, useAppSelector } from '@/store/hooks'; @@ -69,7 +69,7 @@ const LeftSidebar = () => { sectionsComponents.push(
{component} -
+ , ); if (addMore) { @@ -89,7 +89,7 @@ const LeftSidebar = () => { elements.push(
{newComponent} -
+ , ); } sectionsComponents.push(...elements); @@ -112,7 +112,9 @@ const LeftSidebar = () => {