Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-07-27 10:24:48 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix(client): 🐛 do not allow private resumes to be viewable or downloadable through the link

Browse Source
This commit is contained in:
Amruth Pillai
2023-07-12 15:59:22 +02:00
parent 5ef4bfcb6b
commit 1c2d796c50
121 changed files with 3193 additions and 2068 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/components/build/Center/ArtboardController.module.scss
+2 -2
View File
@@ -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;
}
}
client/components/build/Center/ArtboardController.tsx
+16 -16
View File
@@ -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<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomO
const url = getResumeUrl(resume, { withHost: true });
await navigator.clipboard.writeText(url);
toast.success(t<string>('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<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomO
return (
<div
className={clsx({
className={cn({
[styles.container]: true,
[styles.pushLeft]: left.open,
[styles.pushRight]: right.open,
})}
>
<div className={styles.controller}>
<Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.undo')}>
<ButtonBase onClick={handleUndo} className={clsx({ 'pointer-events-none opacity-50': past.length < 2 })}>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.undo')}>
<ButtonBase onClick={handleUndo} className={cn({ 'pointer-events-none opacity-50': past.length < 2 })}>
<UndoOutlined fontSize="medium" />
</ButtonBase>
</Tooltip>
<Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.redo')}>
<ButtonBase onClick={handleRedo} className={clsx({ 'pointer-events-none opacity-50': future.length === 0 })}>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.redo')}>
<ButtonBase onClick={handleRedo} className={cn({ 'pointer-events-none opacity-50': future.length === 0 })}>
<RedoOutlined fontSize="medium" />
</ButtonBase>
</Tooltip>
<Divider />
<Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.zoom-in')}>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-in')}>
<ButtonBase onClick={() => zoomIn(0.25)}>
<ZoomIn fontSize="medium" />
</ButtonBase>
</Tooltip>
<Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.zoom-out')}>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-out')}>
<ButtonBase onClick={() => zoomOut(0.25)}>
<ZoomOut fontSize="medium" />
</ButtonBase>
</Tooltip>
<Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.center-artboard')}>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.center-artboard')}>
<ButtonBase onClick={() => centerView(0.95)}>
<FilterCenterFocus fontSize="medium" />
</ButtonBase>
@@ -120,10 +120,10 @@ const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomO
{isDesktop && (
<>
<Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-orientation')}>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation')}>
<ButtonBase
onClick={handleTogglePageOrientation}
className={clsx({ 'pointer-events-none opacity-50': pages.length === 1 })}
className={cn({ 'pointer-events-none opacity-50': pages.length === 1 })}
>
{orientation === 'vertical' ? (
<AlignHorizontalCenter fontSize="medium" />
@@ -133,13 +133,13 @@ const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomO
</ButtonBase>
</Tooltip>
<Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-page-break-line')}>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line')}>
<ButtonBase onClick={handleTogglePageBreakLine}>
<InsertPageBreak fontSize="medium" />
</ButtonBase>
</Tooltip>
<Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-sidebars')}>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-sidebars')}>
<ButtonBase onClick={handleToggleSidebar}>
<ViewSidebar fontSize="medium" />
</ButtonBase>
@@ -149,13 +149,13 @@ const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomO
</>
)}
<Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.copy-link')}>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.copy-link')}>
<ButtonBase onClick={handleCopyLink}>
<Link fontSize="medium" />
</ButtonBase>
</Tooltip>
<Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.export-pdf')}>
<Tooltip arrow placement="top" title={t('builder.controller.tooltip.export-pdf')}>
<ButtonBase onClick={handleExportPDF} disabled={isLoading}>
<Download fontSize="medium" />
</ButtonBase>
client/components/build/Center/Center.module.scss
+1 -1
View File
@@ -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 {
client/components/build/Center/Center.tsx
+3 -3
View File
@@ -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 (
<div className={clsx(styles.center)}>
<div className={cn(styles.center)}>
<Header />
<TransformWrapper
@@ -35,7 +35,7 @@ const Center = () => {
<>
<TransformComponent wrapperClass={styles.wrapper}>
<div
className={clsx({
className={cn({
[styles.artboard]: true,
'flex-col': orientation === 'vertical',
})}
client/components/build/Center/Header.module.scss
+2 -2
View File
@@ -1,10 +1,10 @@
.header {
@apply mx-0 flex justify-between shadow;
@apply bg-neutral-800 text-neutral-100;
@apply bg-zinc-900 text-zinc-100;
@apply transition-[margin-left,margin-right] duration-200;
button > svg {
@apply text-base text-neutral-100;
@apply text-base text-zinc-100;
}
}
client/components/build/Center/Header.tsx
+11 -11
View File
@@ -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<string>('common.toast.success.resume-link-copied'));
toast.success(t('common.toast.success.resume-link-copied'));
};
return (
<AppBar elevation={0} position="fixed">
<Toolbar
variant="regular"
className={clsx({
className={cn({
[styles.header]: true,
[styles.pushLeft]: left.open,
[styles.pushRight]: right.open,
@@ -165,14 +165,14 @@ const Header = () => {
<ListItemIcon>
<DriveFileRenameOutline className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('builder.header.menu.rename')}</ListItemText>
<ListItemText>{t('builder.header.menu.rename')}</ListItemText>
</MenuItem>
<MenuItem onClick={handleDuplicate}>
<ListItemIcon>
<CopyAll className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('builder.header.menu.duplicate')}</ListItemText>
<ListItemText>{t('builder.header.menu.duplicate')}</ListItemText>
</MenuItem>
{resume.public ? (
@@ -180,27 +180,27 @@ const Header = () => {
<ListItemIcon>
<LinkIcon className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('builder.header.menu.share-link')}</ListItemText>
<ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
</MenuItem>
) : (
<Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.share-link')}>
<Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.share-link')}>
<div>
<MenuItem>
<ListItemIcon>
<LinkIcon className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('builder.header.menu.share-link')}</ListItemText>
<ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
</MenuItem>
</div>
</Tooltip>
)}
<Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.delete')}>
<Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.delete')}>
<MenuItem onClick={handleDelete}>
<ListItemIcon>
<Delete className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('builder.header.menu.delete')}</ListItemText>
<ListItemText>{t('builder.header.menu.delete')}</ListItemText>
</MenuItem>
</Tooltip>
</Menu>
client/components/build/Center/Page.module.scss
+2 -2
View File
@@ -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) &,
client/components/build/Center/Page.tsx
+1 -3
View File
@@ -49,9 +49,7 @@ const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
{TemplatePage && <TemplatePage page={page} />}
</div>
{showPageNumbers && (
<h4 className={styles.pageNumber}>{`${t<string>('builder.common.glossary.page')} ${page + 1}`}</h4>
)}
{showPageNumbers && <h4 className={styles.pageNumber}>{`${t('builder.common.glossary.page')} ${page + 1}`}</h4>}
</div>
);
};
client/components/build/LeftSidebar/LeftSidebar.module.scss
+4 -4
View File
@@ -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;
client/components/build/LeftSidebar/LeftSidebar.tsx
+10 -8
View File
@@ -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(
<section key={id} id={id}>
{component}
</section>
</section>,
);
if (addMore) {
@@ -89,7 +89,7 @@ const LeftSidebar = () => {
elements.push(
<section key={newId} id={`section-${newId}`}>
{newComponent}
</section>
</section>,
);
}
sectionsComponents.push(...elements);
@@ -112,7 +112,9 @@ const LeftSidebar = () => {
<nav className="overflow-y-auto">
<div>
<Link href="/dashboard">
<Logo size={40} />
<IconButton>
<Icon size={24} />
</IconButton>
</Link>
<Divider />
</div>
@@ -123,7 +125,7 @@ const LeftSidebar = () => {
arrow
key={id}
placement="right"
title={t<string>(`builder.leftSidebar.sections.${id}.heading`, get(sections, `${id}.name`))}
title={t(`builder.leftSidebar.sections.${id}.heading`, get(sections, `${id}.name`))}
>
<IconButton onClick={() => handleClick(id)}>{icon}</IconButton>
</Tooltip>
@@ -132,7 +134,7 @@ const LeftSidebar = () => {
{customSections.map(({ id }) => (
<Tooltip
key={id}
title={t<string>(`builder.leftSidebar.sections.${id}.heading`, get(sections, `${id}.name`))}
title={t(`builder.leftSidebar.sections.${id}.heading`, get(sections, `${id}.name`))}
placement="right"
arrow
>
@@ -157,8 +159,8 @@ const LeftSidebar = () => {
<div className="py-6 text-right">
<Button fullWidth variant="outlined" startIcon={<Add />} onClick={handleAddSection}>
{t<string>('builder.common.actions.add', {
token: t<string>('builder.leftSidebar.sections.section.heading'),
{t('builder.common.actions.add', {
token: t('builder.leftSidebar.sections.section.heading'),
})}
</Button>
</div>
client/components/build/LeftSidebar/sections/Basics.tsx
+9 -13
View File
@@ -24,7 +24,7 @@ const Basics = () => {
return (
<>
<Heading path="sections.basics" name={t<string>('builder.leftSidebar.sections.basics.heading')} />
<Heading path="sections.basics" name={t('builder.leftSidebar.sections.basics.heading')} />
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div className="grid items-center gap-4 sm:col-span-2 sm:grid-cols-3">
@@ -33,10 +33,10 @@ const Basics = () => {
</div>
<div className="grid w-full gap-2 sm:col-span-2">
<ResumeInput label={t<string>('builder.leftSidebar.sections.basics.name.label')} path="basics.name" />
<ResumeInput label={t('builder.leftSidebar.sections.basics.name.label')} path="basics.name" />
<Button variant="outlined" startIcon={<PhotoFilter />} onClick={handleClick}>
{t<string>('builder.leftSidebar.sections.basics.actions.photo-filters')}
{t('builder.leftSidebar.sections.basics.actions.photo-filters')}
</Button>
<Popover
@@ -59,28 +59,24 @@ const Basics = () => {
<ResumeInput
type="date"
label={t<string>('builder.leftSidebar.sections.basics.birthdate.label')}
label={t('builder.leftSidebar.sections.basics.birthdate.label')}
path="basics.birthdate"
className="sm:col-span-2"
/>
<ResumeInput
label={t<string>('builder.common.form.email.label')}
path="basics.email"
className="sm:col-span-2"
/>
<ResumeInput label={t<string>('builder.common.form.phone.label')} path="basics.phone" />
<ResumeInput label={t<string>('builder.common.form.url.label')} path="basics.website" />
<ResumeInput label={t('builder.common.form.email.label')} path="basics.email" className="sm:col-span-2" />
<ResumeInput label={t('builder.common.form.phone.label')} path="basics.phone" />
<ResumeInput label={t('builder.common.form.url.label')} path="basics.website" />
<Divider className="sm:col-span-2" />
<ResumeInput
label={t<string>('builder.leftSidebar.sections.basics.headline.label')}
label={t('builder.leftSidebar.sections.basics.headline.label')}
path="basics.headline"
className="sm:col-span-2"
/>
<ResumeInput
type="textarea"
label={t<string>('builder.common.form.summary.label')}
label={t('builder.common.form.summary.label')}
path="basics.summary"
className="sm:col-span-2"
markdownSupported
client/components/build/LeftSidebar/sections/Location.tsx
+6 -15
View File
@@ -8,28 +8,19 @@ const Location = () => {
return (
<>
<Heading path="sections.location" name={t<string>('builder.leftSidebar.sections.location.heading')} />
<Heading path="sections.location" name={t('builder.leftSidebar.sections.location.heading')} />
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<ResumeInput
label={t<string>('builder.leftSidebar.sections.location.address.label')}
label={t('builder.leftSidebar.sections.location.address.label')}
path="basics.location.address"
className="sm:col-span-2"
/>
<ResumeInput label={t('builder.leftSidebar.sections.location.city.label')} path="basics.location.city" />
<ResumeInput label={t('builder.leftSidebar.sections.location.region.label')} path="basics.location.region" />
<ResumeInput label={t('builder.leftSidebar.sections.location.country.label')} path="basics.location.country" />
<ResumeInput
label={t<string>('builder.leftSidebar.sections.location.city.label')}
path="basics.location.city"
/>
<ResumeInput
label={t<string>('builder.leftSidebar.sections.location.region.label')}
path="basics.location.region"
/>
<ResumeInput
label={t<string>('builder.leftSidebar.sections.location.country.label')}
path="basics.location.country"
/>
<ResumeInput
label={t<string>('builder.leftSidebar.sections.location.postal-code.label')}
label={t('builder.leftSidebar.sections.location.postal-code.label')}
path="basics.location.postalCode"
/>
</div>
client/components/build/LeftSidebar/sections/PhotoFilters.tsx
+6 -8
View File
@@ -30,9 +30,9 @@ const PhotoFilters = () => {
const handleSetBorder = (value: boolean) => dispatch(setResumeState({ path: 'basics.photo.filters.border', value }));
return (
<div className="flex flex-col gap-2 p-5 dark:bg-neutral-800">
<div className="flex flex-col gap-2 p-5 dark:bg-zinc-900">
<div>
<h4 className="font-medium">{t<string>('builder.leftSidebar.sections.basics.photo-filters.size.heading')}</h4>
<h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.size.heading')}</h4>
<div className="mx-2">
<Slider
@@ -54,20 +54,18 @@ const PhotoFilters = () => {
<Divider />
<div>
<h4 className="font-medium">
{t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.heading')}
</h4>
<h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.effects.heading')}</h4>
<div className="flex items-center">
<FormControlLabel
label={t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.grayscale.label')}
label={t('builder.leftSidebar.sections.basics.photo-filters.effects.grayscale.label')}
control={
<Checkbox color="secondary" checked={grayscale} onChange={(_, value) => handleSetGrayscale(value)} />
}
/>
<FormControlLabel
label={t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.border.label')}
label={t('builder.leftSidebar.sections.basics.photo-filters.effects.border.label')}
control={<Checkbox color="secondary" checked={border} onChange={(_, value) => handleSetBorder(value)} />}
/>
</div>
@@ -76,7 +74,7 @@ const PhotoFilters = () => {
<Divider />
<div className="flex flex-col gap-2">
<h4 className="font-medium">{t<string>('builder.leftSidebar.sections.basics.photo-filters.shape.heading')}</h4>
<h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.shape.heading')}</h4>
<ToggleButtonGroup exclusive value={shape} onChange={(_, value) => handleChangeShape(value)}>
<ToggleButton size="small" value="square" className="w-14">
client/components/build/LeftSidebar/sections/PhotoUpload.tsx
+3 -3
View File
@@ -49,7 +49,7 @@ const PhotoUpload: React.FC = () => {
const file = event.target.files[0];
if (file.size > FILE_UPLOAD_MAX_SIZE) {
toast.error(t<string>('common.toast.error.upload-photo-size'));
toast.error(t('common.toast.error.upload-photo-size'));
return;
}
@@ -67,8 +67,8 @@ const PhotoUpload: React.FC = () => {
<Tooltip
title={
isEmpty(photo.url)
? (t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload') as string)
: (t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove') as string)
? (t('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload') as string)
: (t('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove') as string)
}
>
<Avatar sx={{ width: 96, height: 96 }} src={photo.url} />
client/components/build/LeftSidebar/sections/Profiles.tsx
+3 -3
View File
@@ -28,7 +28,7 @@ const Profiles = () => {
return (
<>
<Heading path="sections.profiles" name={t<string>('builder.leftSidebar.sections.profiles.heading')} />
<Heading path="sections.profiles" name={t('builder.leftSidebar.sections.profiles.heading')} />
<List
path="basics.profiles"
@@ -40,8 +40,8 @@ const Profiles = () => {
<footer className="flex justify-end">
<Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
{t<string>('builder.common.actions.add', {
token: t<string>('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
{t('builder.common.actions.add', {
token: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
})}
</Button>
</footer>
client/components/build/LeftSidebar/sections/Section.tsx
+3 -3
View File
@@ -98,8 +98,8 @@ const Section: React.FC<Props> = ({
<SectionSettings path={path} />
<Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
{t<string>('builder.common.actions.add', {
token: t<string>(`builder.leftSidebar.${path}.heading`, { defaultValue: heading }),
{t('builder.common.actions.add', {
token: t(`builder.leftSidebar.${path}.heading`, { defaultValue: heading }),
})}
</Button>
</footer>
@@ -107,7 +107,7 @@ const Section: React.FC<Props> = ({
{addMore ? (
<div className="py-6 text-right">
<Button fullWidth variant="outlined" startIcon={<Add />} onClick={handleDuplicateSection}>
{t<string>('builder.common.actions.duplicate')}
{t('builder.common.actions.duplicate')}
</Button>
</div>
) : (
client/components/build/LeftSidebar/sections/SectionSettings.tsx
+3 -3
View File
@@ -32,7 +32,7 @@ const SectionSettings: React.FC<Props> = ({ path }) => {
return (
<div>
<Tooltip title={t<string>('builder.common.columns.tooltip')}>
<Tooltip title={t('builder.common.columns.tooltip')}>
<ButtonBase onClick={handleClick} sx={{ padding: 1, borderRadius: 1 }} className="opacity-50 hover:opacity-75">
<ViewWeek /> <span className="ml-1.5 text-xs">{columns}</span>
</ButtonBase>
@@ -47,8 +47,8 @@ const SectionSettings: React.FC<Props> = ({ path }) => {
horizontal: 'left',
}}
>
<div className="p-5 dark:bg-neutral-800">
<h4 className="mb-2 font-medium">{t<string>('builder.common.columns.heading')}</h4>
<div className="p-5 dark:bg-zinc-900">
<h4 className="mb-2 font-medium">{t('builder.common.columns.heading')}</h4>
<ToggleButtonGroup exclusive value={columns} onChange={(_, value: number) => handleSetColumns(value)}>
{[1, 2, 3, 4].map((index) => (
client/components/build/RightSidebar/RightSidebar.module.scss
+4 -4
View File
@@ -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-l-2 border-neutral-50/10;
@apply bg-zinc-50 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-50;
@apply relative flex border-l-2 border-zinc-50/10;
nav {
@apply absolute inset-y-0 right-0;
@apply w-12 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-50/10;
hr {
@apply my-2;
client/components/build/RightSidebar/RightSidebar.tsx
+2 -2
View File
@@ -45,7 +45,7 @@ const RightSidebar = () => {
<div className={styles.container}>
<nav className="overflow-y-auto">
<div>
<Avatar size={40} />
<Avatar size={24} />
<Divider />
</div>
@@ -55,7 +55,7 @@ const RightSidebar = () => {
key={id}
arrow
placement="right"
title={t<string>(`builder.rightSidebar.sections.${id}.heading`, { defaultValue: capitalize(id) })}
title={t(`builder.rightSidebar.sections.${id}.heading`, { defaultValue: capitalize(id) })}
>
<IconButton onClick={() => handleClick(id)}>{icon}</IconButton>
</Tooltip>
client/components/build/RightSidebar/sections/CustomCSS.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ const CustomCSS = () => {
const dispatch = useAppDispatch();
const customCSS: CustomCSSType = useAppSelector((state) =>
get(state.resume.present, 'metadata.css', {} as CustomCSSType)
get(state.resume.present, 'metadata.css', {} as CustomCSSType),
);
const handleChange = (value: string | undefined) => {
@@ -27,7 +27,7 @@ const CustomCSS = () => {
return (
<>
<Heading path="metadata.css" name={t<string>('builder.rightSidebar.sections.css.heading')} isHideable />
<Heading path="metadata.css" name={t('builder.rightSidebar.sections.css.heading')} isHideable />
<Editor
height="200px"
client/components/build/RightSidebar/sections/Export.tsx
+7 -7
View File
@@ -20,12 +20,12 @@ const Export = () => {
const pdfListItemText = {
normal: {
primary: t<string>('builder.rightSidebar.sections.export.pdf.normal.primary'),
secondary: t<string>('builder.rightSidebar.sections.export.pdf.normal.secondary'),
primary: t('builder.rightSidebar.sections.export.pdf.normal.primary'),
secondary: t('builder.rightSidebar.sections.export.pdf.normal.secondary'),
},
loading: {
primary: t<string>('builder.rightSidebar.sections.export.pdf.loading.primary'),
secondary: t<string>('builder.rightSidebar.sections.export.pdf.loading.secondary'),
primary: t('builder.rightSidebar.sections.export.pdf.loading.primary'),
secondary: t('builder.rightSidebar.sections.export.pdf.loading.secondary'),
},
};
@@ -55,7 +55,7 @@ const Export = () => {
return (
<>
<Heading path="metadata.export" name={t<string>('builder.rightSidebar.sections.export.heading')} />
<Heading path="metadata.export" name={t('builder.rightSidebar.sections.export.heading')} />
<List sx={{ padding: 0 }}>
<ListItem sx={{ padding: 0 }}>
@@ -63,8 +63,8 @@ const Export = () => {
<Schema />
<ListItemText
primary={t<string>('builder.rightSidebar.sections.export.json.primary')}
secondary={t<string>('builder.rightSidebar.sections.export.json.secondary')}
primary={t('builder.rightSidebar.sections.export.json.primary')}
secondary={t('builder.rightSidebar.sections.export.json.secondary')}
/>
</ListItemButton>
</ListItem>
client/components/build/RightSidebar/sections/Layout.module.scss
+4 -4
View File
@@ -1,6 +1,6 @@
.page {
@apply relative border pl-4 pb-4 dark:border-neutral-100/10;
@apply rounded bg-neutral-100 dark:bg-neutral-800;
@apply relative border pl-4 pb-4 dark:border-zinc-100/10;
@apply rounded bg-zinc-100 dark:bg-zinc-900;
.delete {
@apply opacity-50 hover:opacity-75;
@@ -28,14 +28,14 @@
.base {
@apply absolute inset-0 w-4/5;
@apply rounded bg-neutral-200 dark:bg-neutral-700;
@apply rounded bg-zinc-200 dark:bg-zinc-800;
}
}
.section {
@apply relative my-3 w-full px-4 py-2;
@apply cursor-move break-all rounded text-xs capitalize;
@apply bg-neutral-800/90 text-neutral-50 dark:bg-neutral-50/90 dark:text-neutral-800;
@apply bg-zinc-900/90 text-zinc-50 dark:bg-zinc-50/90 dark:text-zinc-900;
&.disabled {
@apply opacity-60;
client/components/build/RightSidebar/sections/Layout.tsx
+6 -6
View File
@@ -60,9 +60,9 @@ const Layout = () => {
<>
<Heading
path="metadata.layout"
name={t<string>('builder.rightSidebar.sections.layout.heading')}
name={t('builder.rightSidebar.sections.layout.heading')}
action={
<Tooltip title={t<string>('builder.rightSidebar.sections.layout.tooltip.reset-layout')}>
<Tooltip title={t('builder.rightSidebar.sections.layout.tooltip.reset-layout')}>
<IconButton onClick={handleResetLayout}>
<Restore />
</IconButton>
@@ -76,14 +76,14 @@ const Layout = () => {
<div key={pageIndex} className={styles.page}>
<div className="flex items-center justify-between pr-3">
<p className={styles.heading}>
{t<string>('builder.common.glossary.page')} {pageIndex + 1}
{t('builder.common.glossary.page')} {pageIndex + 1}
</p>
<div className={clsx(styles.delete, { hidden: pageIndex === 0 })}>
<Tooltip
title={
t<string>('builder.common.actions.delete', {
token: t<string>('builder.common.glossary.page'),
t('builder.common.actions.delete', {
token: t('builder.common.glossary.page'),
}) as string
}
>
@@ -136,7 +136,7 @@ const Layout = () => {
<div className="flex items-center justify-end">
<Button variant="outlined" startIcon={<Add />} onClick={handleAddPage}>
{t<string>('builder.common.actions.add', { token: t<string>('builder.common.glossary.page') })}
{t('builder.common.actions.add', { token: t('builder.common.glossary.page') })}
</Button>
</div>
</DragDropContext>
client/components/build/RightSidebar/sections/Links.module.scss
+1 -1
View File
@@ -3,7 +3,7 @@
.section {
@apply grid gap-2 rounded p-6;
@apply bg-neutral-100 dark:bg-neutral-800;
@apply bg-zinc-100 dark:bg-zinc-900;
h2 {
@apply inline-flex items-center gap-2 text-base font-medium;
client/components/build/RightSidebar/sections/Links.tsx
+10 -12
View File
@@ -12,53 +12,51 @@ const Links = () => {
return (
<>
<Heading path="metadata.links" name={t<string>('builder.rightSidebar.sections.links.heading')} />
<Heading path="metadata.links" name={t('builder.rightSidebar.sections.links.heading')} />
<div className={styles.container}>
<div className={styles.section}>
<h2>
<Savings fontSize="small" />
{t<string>('builder.rightSidebar.sections.links.donate.heading')}
{t('builder.rightSidebar.sections.links.donate.heading')}
</h2>
<p>{t<string>('builder.rightSidebar.sections.links.donate.body')}</p>
<p>{t('builder.rightSidebar.sections.links.donate.body')}</p>
<a href={DONATION_URL} target="_blank" rel="noreferrer">
<Button startIcon={<Coffee />}>{t<string>('builder.rightSidebar.sections.links.donate.button')}</Button>
<Button startIcon={<Coffee />}>{t('builder.rightSidebar.sections.links.donate.button')}</Button>
</a>
</div>
<div className={styles.section}>
<h2>
<BugReport fontSize="small" />
{t<string>('builder.rightSidebar.sections.links.bugs-features.heading')}
{t('builder.rightSidebar.sections.links.bugs-features.heading')}
</h2>
<p>{t<string>('builder.rightSidebar.sections.links.bugs-features.body')}</p>
<p>{t('builder.rightSidebar.sections.links.bugs-features.body')}</p>
<a href={GITHUB_ISSUES_URL} target="_blank" rel="noreferrer">
<Button startIcon={<GitHub />}>
{t<string>('builder.rightSidebar.sections.links.bugs-features.button')}
</Button>
<Button startIcon={<GitHub />}>{t('builder.rightSidebar.sections.links.bugs-features.button')}</Button>
</a>
</div>
<div>
<a href={GITHUB_URL} target="_blank" rel="noreferrer">
<Button variant="text" startIcon={<Link />}>
{t<string>('builder.rightSidebar.sections.links.github')}
{t('builder.rightSidebar.sections.links.github')}
</Button>
</a>
<a href={REDDIT_URL} target="_blank" rel="noreferrer">
<Button variant="text" startIcon={<Link />}>
{t<string>('builder.rightSidebar.sections.links.reddit')}
{t('builder.rightSidebar.sections.links.reddit')}
</Button>
</a>
<a href={DOCS_URL} target="_blank" rel="noreferrer">
<Button variant="text" startIcon={<Link />}>
{t<string>('builder.rightSidebar.sections.links.docs')}
{t('builder.rightSidebar.sections.links.docs')}
</Button>
</a>
</div>
client/components/build/RightSidebar/sections/Settings.tsx
+21 -23
View File
@@ -55,7 +55,7 @@ const Settings = () => {
const themeString = useMemo(() => (isDarkMode ? 'Matte Black Everything' : 'As bright as your future'), [isDarkMode]);
const { mutateAsync: loadSampleDataMutation } = useMutation<Resume, ServerError, LoadSampleDataParams>(
loadSampleData
loadSampleData,
);
const { mutateAsync: resetResumeMutation } = useMutation<Resume, ServerError, ResetResumeParams>(resetResume);
@@ -96,13 +96,13 @@ const Settings = () => {
return (
<>
<Heading path="metadata.settings" name={t<string>('builder.rightSidebar.sections.settings.heading')} />
<Heading path="metadata.settings" name={t('builder.rightSidebar.sections.settings.heading')} />
<List disablePadding>
{/* Global Settings */}
<>
<ListSubheader disableSticky className="rounded">
{t<string>('builder.rightSidebar.sections.settings.global.heading')}
{t('builder.rightSidebar.sections.settings.global.heading')}
</ListSubheader>
<ListItem>
@@ -110,7 +110,7 @@ const Settings = () => {
<Palette />
</ListItemIcon>
<ListItemText
primary={t<string>('builder.rightSidebar.sections.settings.global.theme.primary')}
primary={t('builder.rightSidebar.sections.settings.global.theme.primary')}
secondary={themeString}
/>
<ThemeSwitch checked={isDarkMode} onChange={(_, value: boolean) => handleSetTheme(value)} />
@@ -119,8 +119,8 @@ const Settings = () => {
<ListItem className="flex-col">
<ListItemText
className="w-full"
primary={t<string>('builder.rightSidebar.sections.settings.global.date.primary')}
secondary={t<string>('builder.rightSidebar.sections.settings.global.date.secondary')}
primary={t('builder.rightSidebar.sections.settings.global.date.primary')}
secondary={t('builder.rightSidebar.sections.settings.global.date.secondary')}
/>
<Autocomplete<string, false, true, false>
disableClearable
@@ -135,8 +135,8 @@ const Settings = () => {
<ListItem className="flex-col">
<ListItemText
className="w-full"
primary={t<string>('builder.rightSidebar.sections.settings.global.language.primary')}
secondary={t<string>('builder.rightSidebar.sections.settings.global.language.secondary')}
primary={t('builder.rightSidebar.sections.settings.global.language.primary')}
secondary={t('builder.rightSidebar.sections.settings.global.language.secondary')}
/>
<Autocomplete<Language, false, true, false>
disableClearable
@@ -160,14 +160,14 @@ const Settings = () => {
{/* Page Settings */}
<>
<ListSubheader disableSticky className="rounded">
{t<string>('builder.rightSidebar.sections.settings.page.heading')}
{t('builder.rightSidebar.sections.settings.page.heading')}
</ListSubheader>
<ListItem className="flex-col">
<ListItemText
className="w-full"
primary={t<string>('builder.rightSidebar.sections.settings.page.format.primary')}
secondary={t<string>('builder.rightSidebar.sections.settings.page.format.secondary')}
primary={t('builder.rightSidebar.sections.settings.page.format.primary')}
secondary={t('builder.rightSidebar.sections.settings.page.format.secondary')}
/>
<Autocomplete<PageConfig['format'], false, true, false>
disableClearable
@@ -182,11 +182,11 @@ const Settings = () => {
<ListItem>
<ListItemText
primary={t<string>('builder.rightSidebar.sections.settings.page.orientation.primary')}
primary={t('builder.rightSidebar.sections.settings.page.orientation.primary')}
secondary={
pages.length === 1
? t<string>('builder.rightSidebar.sections.settings.page.orientation.disabled')
: t<string>('builder.rightSidebar.sections.settings.page.orientation.secondary')
? t('builder.rightSidebar.sections.settings.page.orientation.disabled')
: t('builder.rightSidebar.sections.settings.page.orientation.secondary')
}
/>
<Switch
@@ -199,8 +199,8 @@ const Settings = () => {
<ListItem>
<ListItemText
primary={t<string>('builder.rightSidebar.sections.settings.page.break-line.primary')}
secondary={t<string>('builder.rightSidebar.sections.settings.page.break-line.secondary')}
primary={t('builder.rightSidebar.sections.settings.page.break-line.primary')}
secondary={t('builder.rightSidebar.sections.settings.page.break-line.secondary')}
/>
<Switch color="secondary" checked={breakLine} onChange={() => dispatch(togglePageBreakLine())} />
</ListItem>
@@ -209,7 +209,7 @@ const Settings = () => {
{/* Resume Settings */}
<>
<ListSubheader disableSticky className="rounded">
{t<string>('builder.rightSidebar.sections.settings.resume.heading')}
{t('builder.rightSidebar.sections.settings.resume.heading')}
</ListSubheader>
<ListItem disableGutters>
@@ -218,8 +218,8 @@ const Settings = () => {
<Anchor />
</ListItemIcon>
<ListItemText
primary={t<string>('builder.rightSidebar.sections.settings.resume.sample.primary')}
secondary={t<string>('builder.rightSidebar.sections.settings.resume.sample.secondary')}
primary={t('builder.rightSidebar.sections.settings.resume.sample.primary')}
secondary={t('builder.rightSidebar.sections.settings.resume.sample.secondary')}
/>
</ListItemButton>
</ListItem>
@@ -231,11 +231,9 @@ const Settings = () => {
</ListItemIcon>
<ListItemText
primary={
confirmReset
? 'Are you sure?'
: t<string>('builder.rightSidebar.sections.settings.resume.reset.primary')
confirmReset ? 'Are you sure?' : t('builder.rightSidebar.sections.settings.resume.reset.primary')
}
secondary={t<string>('builder.rightSidebar.sections.settings.resume.reset.secondary')}
secondary={t('builder.rightSidebar.sections.settings.resume.reset.secondary')}
/>
</ListItemButton>
</ListItem>
client/components/build/RightSidebar/sections/Sharing.tsx
+5 -5
View File
@@ -29,19 +29,19 @@ const Sharing = () => {
await navigator.clipboard.writeText(text);
toast.success(t<string>('common.toast.success.resume-link-copied'));
toast.success(t('common.toast.success.resume-link-copied'));
};
return (
<>
<Heading path="metadata.sharing" name={t<string>('builder.rightSidebar.sections.sharing.heading')} />
<Heading path="metadata.sharing" name={t('builder.rightSidebar.sections.sharing.heading')} />
<List sx={{ padding: 0 }}>
<ListItem className="flex flex-col" sx={{ padding: 0 }}>
<div className="flex w-full items-center justify-between">
<ListItemText
primary={t<string>('builder.rightSidebar.sections.sharing.visibility.title')}
secondary={t<string>('builder.rightSidebar.sections.sharing.visibility.subtitle')}
primary={t('builder.rightSidebar.sections.sharing.visibility.title')}
secondary={t('builder.rightSidebar.sections.sharing.visibility.subtitle')}
/>
<Switch color="secondary" checked={isPublic} onChange={(_, value) => handleSetVisibility(value)} />
</div>
@@ -63,7 +63,7 @@ const Sharing = () => {
<div className="mt-1 flex w-full">
<FormControlLabel
label={t<string>('builder.rightSidebar.sections.sharing.short-url.label')}
label={t('builder.rightSidebar.sections.sharing.short-url.label')}
control={
<Checkbox className="mr-1" checked={showShortUrl} onChange={(_, value) => setShowShortUrl(value)} />
}
client/components/build/RightSidebar/sections/Templates.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ const Templates = () => {
return (
<>
<Heading path="metadata.templates" name={t<string>('builder.rightSidebar.sections.templates.heading')} />
<Heading path="metadata.templates" name={t('builder.rightSidebar.sections.templates.heading')} />
<div className={styles.container}>
{Object.values(templateMap).map((template) => (
client/components/build/RightSidebar/sections/Theme.tsx
+5 -5
View File
@@ -17,7 +17,7 @@ const Theme = () => {
const dispatch = useAppDispatch();
const { background, text, primary } = useAppSelector<ThemeConfig>((state) =>
get(state.resume.present, 'metadata.theme')
get(state.resume.present, 'metadata.theme'),
);
const handleChange = (property: string, color: string) => {
@@ -26,7 +26,7 @@ const Theme = () => {
return (
<>
<Heading path="metadata.theme" name={t<string>('builder.rightSidebar.sections.theme.heading')} />
<Heading path="metadata.theme" name={t('builder.rightSidebar.sections.theme.heading')} />
<div className={styles.container}>
<div className={styles.colorOptions}>
@@ -36,18 +36,18 @@ const Theme = () => {
</div>
<ColorPicker
label={t<string>('builder.rightSidebar.sections.theme.form.primary.label')}
label={t('builder.rightSidebar.sections.theme.form.primary.label')}
color={primary}
className="col-span-2"
onChange={(color) => handleChange('primary', color)}
/>
<ColorPicker
label={t<string>('builder.rightSidebar.sections.theme.form.background.label')}
label={t('builder.rightSidebar.sections.theme.form.background.label')}
color={background}
onChange={(color) => handleChange('background', color)}
/>
<ColorPicker
label={t<string>('builder.rightSidebar.sections.theme.form.text.label')}
label={t('builder.rightSidebar.sections.theme.form.text.label')}
color={text}
onChange={(color) => handleChange('text', color)}
/>
client/components/build/RightSidebar/sections/Typography.tsx
+6 -12
View File
@@ -46,7 +46,7 @@ const Widgets: React.FC<WidgetProps> = ({ label, category }) => {
setResumeState({
path: `metadata.typography.${property}.${category}`,
value: property === 'family' ? (value as Font).family : value,
})
}),
);
};
@@ -64,7 +64,7 @@ const Widgets: React.FC<WidgetProps> = ({ label, category }) => {
step={1}
marks={[
{ value: 12, label: '12px' },
{ value: 24, label: t<string>('builder.rightSidebar.sections.typography.form.font-size.label') },
{ value: 24, label: t('builder.rightSidebar.sections.typography.form.font-size.label') },
{ value: 36, label: '36px' },
]}
valueLabelDisplay="auto"
@@ -82,10 +82,7 @@ const Widgets: React.FC<WidgetProps> = ({ label, category }) => {
value={fonts.find((font) => font.family === family[category])}
onChange={(_, font: Font | null) => handleChange('family', font)}
renderInput={(params) => (
<TextField
{...params}
label={t<string>('builder.rightSidebar.sections.typography.form.font-family.label')}
/>
<TextField {...params} label={t('builder.rightSidebar.sections.typography.form.font-family.label')} />
)}
/>
</div>
@@ -98,13 +95,10 @@ const Typography = () => {
return (
<>
<Heading path="metadata.typography" name={t<string>('builder.rightSidebar.sections.typography.heading')} />
<Heading path="metadata.typography" name={t('builder.rightSidebar.sections.typography.heading')} />
<Widgets
label={t<string>('builder.rightSidebar.sections.typography.widgets.headings.label')}
category="heading"
/>
<Widgets label={t<string>('builder.rightSidebar.sections.typography.widgets.body.label')} category="body" />
<Widgets label={t('builder.rightSidebar.sections.typography.widgets.headings.label')} category="heading" />
<Widgets label={t('builder.rightSidebar.sections.typography.widgets.body.label')} category="body" />
</>
);
};
client/components/dashboard/ResumeCard.module.scss
+1 -1
View File
@@ -5,7 +5,7 @@
aspect-ratio: 1 / 1.41;
@apply flex items-center justify-center shadow;
@apply cursor-pointer rounded-sm bg-neutral-100 transition-opacity hover:opacity-80 dark:bg-neutral-800;
@apply cursor-pointer rounded-sm bg-zinc-100 transition-opacity hover:opacity-80 dark:bg-zinc-900;
}
footer {
client/components/dashboard/ResumePreview.module.scss
+1 -1
View File
@@ -5,7 +5,7 @@
aspect-ratio: 1 / 1.41;
@apply relative cursor-pointer rounded-sm shadow;
@apply bg-neutral-100 transition-opacity hover:opacity-80 dark:bg-neutral-800;
@apply bg-zinc-100 transition-opacity hover:opacity-80 dark:bg-zinc-900;
}
footer {
client/components/dashboard/ResumePreview.tsx
+11 -11
View File
@@ -76,7 +76,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
},
},
},
})
}),
);
};
@@ -94,7 +94,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
const url = getResumeUrl(resume, { withHost: true });
await navigator.clipboard.writeText(url);
toast.success(t<string>('common.toast.success.resume-link-copied'));
toast.success(t('common.toast.success.resume-link-copied'));
};
const handleDelete = async () => {
@@ -122,7 +122,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
<footer>
<div className={styles.meta}>
<p>{resume.name}</p>
<p>{t<string>('dashboard.resume.timestamp', { timestamp: getRelativeTime(resume.updatedAt) })}</p>
<p>{t('dashboard.resume.timestamp', { timestamp: getRelativeTime(resume.updatedAt) })}</p>
</div>
<ButtonBase className={styles.menu} onClick={handleOpenMenu}>
@@ -134,21 +134,21 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
<ListItemIcon>
<OpenInNew className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('dashboard.resume.menu.open')}</ListItemText>
<ListItemText>{t('dashboard.resume.menu.open')}</ListItemText>
</MenuItem>
<MenuItem onClick={handleRename}>
<ListItemIcon>
<DriveFileRenameOutline className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('dashboard.resume.menu.rename')}</ListItemText>
<ListItemText>{t('dashboard.resume.menu.rename')}</ListItemText>
</MenuItem>
<MenuItem onClick={handleDuplicate}>
<ListItemIcon>
<ContentCopy className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('dashboard.resume.menu.duplicate')}</ListItemText>
<ListItemText>{t('dashboard.resume.menu.duplicate')}</ListItemText>
</MenuItem>
{resume.public ? (
@@ -156,27 +156,27 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
<ListItemIcon>
<LinkIcon className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('dashboard.resume.menu.share-link')}</ListItemText>
<ListItemText>{t('dashboard.resume.menu.share-link')}</ListItemText>
</MenuItem>
) : (
<Tooltip arrow placement="right" title={t<string>('dashboard.resume.menu.tooltips.share-link')}>
<Tooltip arrow placement="right" title={t('dashboard.resume.menu.tooltips.share-link')}>
<div>
<MenuItem>
<ListItemIcon>
<LinkIcon className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('dashboard.resume.menu.share-link')}</ListItemText>
<ListItemText>{t('dashboard.resume.menu.share-link')}</ListItemText>
</MenuItem>
</div>
</Tooltip>
)}
<Tooltip arrow placement="right" title={t<string>('dashboard.resume.menu.tooltips.delete')}>
<Tooltip arrow placement="right" title={t('dashboard.resume.menu.tooltips.delete')}>
<MenuItem onClick={handleDelete}>
<ListItemIcon>
<DeleteOutline className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('dashboard.resume.menu.delete')}</ListItemText>
<ListItemText>{t('dashboard.resume.menu.delete')}</ListItemText>
</MenuItem>
</Tooltip>
</Menu>
client/components/home/Actions.tsx
+44
View File
@@ -0,0 +1,44 @@
import { Button } from '@mui/material';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';
import { FLAG_DISABLE_SIGNUPS } from '@/constants/flags';
import { logout } from '@/store/auth/authSlice';
import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { setModalState } from '@/store/modal/modalSlice';
const HomeActions = () => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const isLoggedIn = useAppSelector((state) => state.auth.isLoggedIn);
const handleLogin = () => dispatch(setModalState({ modal: 'auth.login', state: { open: true } }));
const handleRegister = () => dispatch(setModalState({ modal: 'auth.register', state: { open: true } }));
const handleLogout = () => dispatch(logout());
return isLoggedIn ? (
<>
<Link href="/dashboard" passHref>
<Button size="large">{t('landing.actions.app')}</Button>
</Link>
<Button size="large" variant="outlined" onClick={handleLogout}>
{t('landing.actions.logout')}
</Button>
</>
) : (
<>
<Button size="large" onClick={handleLogin}>
{t('landing.actions.login')}
</Button>
<Button size="large" variant="outlined" onClick={handleRegister} disabled={FLAG_DISABLE_SIGNUPS}>
{t('landing.actions.register')}
</Button>
</>
);
};
export default HomeActions;
client/components/home/Background.tsx
+16
View File
@@ -0,0 +1,16 @@
const HeroBackground = () => (
<div
aria-hidden="true"
className="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
>
<div
className="aspect-[1108/632] h-96 w-[69.25rem] bg-gradient-to-r from-[#6f8cbb] to-[#c93b37] opacity-40 dark:opacity-20"
style={{
clipPath:
'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
}}
/>
</div>
);
export default HeroBackground;
client/components/home/Footer.tsx
+47
View File
@@ -0,0 +1,47 @@
import GitHubButton from 'react-github-btn';
import { useAppSelector } from '@/store/hooks';
import { Copyright } from '../shared/Copyright';
import Logo from '../shared/Logo';
import { Separator } from '../ui/Separator';
const Footer = () => {
const theme = useAppSelector((state) => state.build.theme);
return (
<footer className="fixed inset-x-0 bottom-0 -z-50 h-[450px] bg-zinc-50 dark:bg-zinc-950">
<Separator />
<div className="container grid py-12 sm:grid-cols-3 lg:grid-cols-4">
<div className="flex flex-col gap-y-2">
<Logo size={96} className="-ml-2" />
<h2 className="text-xl font-medium">Reactive Resume</h2>
<p className="prose prose-sm prose-zinc leading-relaxed opacity-60 dark:prose-invert">
A free and open-source resume builder that simplifies the tasks of creating, updating, and sharing your
resume.
</p>
<div className="mt-6">
<GitHubButton
data-size="large"
data-show-count="true"
data-icon="octicon-star"
data-color-scheme={theme ? 'dark' : 'light'}
href="https://github.com/AmruthPillai/Reactive-Resume"
aria-label="Star AmruthPillai/Reactive-Resume on GitHub"
>
Star
</GitHubButton>
</div>
<Copyright className="mt-4" />
</div>
</div>
</footer>
);
};
export default Footer;
client/components/home/Header.tsx
+24
View File
@@ -0,0 +1,24 @@
import Link from 'next/link';
import Logo from '../shared/Logo';
import HomeActions from './Actions';
const Header = () => (
<header className="fixed inset-x-0 top-0 z-50">
<nav className="bg-gradient-to-b from-zinc-50 to-transparent py-3 dark:from-zinc-950">
<div className="container flex items-center justify-between">
<div className="lg:flex-1">
<Link href="/">
<Logo size={48} />
</Link>
</div>
<div className="space-x-4">
<HomeActions />
</div>
</div>
</nav>
</header>
);
export default Header;
client/components/home/Hero.tsx
View File
client/components/home/Pattern.tsx
+28
View File
@@ -0,0 +1,28 @@
const HeroPattern = () => (
<svg
aria-hidden="true"
className="absolute inset-0 -z-10 h-full w-full stroke-zinc-950/10 opacity-60 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-zinc-50/10 dark:opacity-40"
>
<defs>
<pattern
id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
width={200}
height={200}
x="50%"
y={-1}
patternUnits="userSpaceOnUse"
>
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<svg x="50%" y={-1} className="overflow-visible fill-zinc-100/20 dark:fill-zinc-900/20">
<path
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
strokeWidth={0}
/>
</svg>
<rect width="100%" height="100%" strokeWidth={0} fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" />
</svg>
);
export default HeroPattern;
client/components/landing/Testimony.module.scss → client/components/home/Testimony.module.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.testimony {
@apply grid gap-2;
@apply rounded border-2 p-4 dark:border-neutral-800;
@apply rounded border-2 p-4 dark:border-zinc-900;
blockquote {
@apply text-justify text-xs leading-normal opacity-90;
client/components/landing/Testimony.tsx → client/components/home/Testimony.tsx
View File
client/components/home/sections/Logo.tsx
+51
View File
@@ -0,0 +1,51 @@
import { cn } from '@/utils/styles';
type LogoProps = { brand: string };
const Logo = ({ brand }: LogoProps) => (
<div className={cn('col-span-2 col-start-2 sm:col-start-auto lg:col-span-1', brand === 'twilio' && 'sm:col-start-2')}>
{/* Show on Light Theme */}
<img
className="block max-h-12 object-contain dark:hidden"
src={`/images/brand-logos/dark/${brand}.svg`}
alt={brand}
width={212}
height={48}
/>
{/* Show on Dark Theme */}
<img
className="hidden max-h-12 object-contain dark:block"
src={`/images/brand-logos/light/${brand}.svg`}
alt={brand}
width={212}
height={48}
/>
</div>
);
const logoList: string[] = ['amazon', 'google', 'postman', 'twilio', 'zalando'];
const LogoSection = () => (
<section className="relative py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<p className="text-center text-lg leading-relaxed">
Reactive Resume has helped people land jobs at these great companies:
</p>
<div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
{logoList.map((brand) => (
<Logo key={brand} brand={brand} />
))}
</div>
<p className="mx-auto mt-8 max-w-sm text-center leading-relaxed">
If this app has helped you with your job hunt, let me know by reaching out through{' '}
<a href="https://www.amruthpillai.com/#contact" target="_blank" rel="noreferrer" className="hover:underline">
this contact form
</a>
.
</p>
</div>
</section>
);
export default LogoSection;
client/components/home/sections/Stats.tsx
+27
View File
@@ -0,0 +1,27 @@
type Statistic = {
name: string;
value: string;
};
const stats: Statistic[] = [
{ name: 'GitHub Stars', value: '11,800+' },
{ name: 'Users Signed Up', value: '300,000+' },
{ name: 'Resumes Generated', value: '400,000+' },
];
const StatsSection = () => (
<section className="relative py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<dl className="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
{stats.map((stat, index) => (
<div key={index} className="mx-auto flex max-w-xs flex-col gap-y-4">
<dt className="text-base leading-7 opacity-60">{stat.name}</dt>
<dd className="order-first text-3xl font-semibold tracking-tight sm:text-5xl">{stat.value}</dd>
</div>
))}
</dl>
</div>
</section>
);
export default StatsSection;
client/components/shared/Avatar.tsx
+2 -2
View File
@@ -63,12 +63,12 @@ const Avatar: React.FC<Props> = ({ size = 64, interactive = true }) => {
<Menu anchorEl={anchorEl} onClose={handleClose} open={Boolean(anchorEl)}>
<MenuItem onClick={handleOpenProfile}>
<div>
<span className="text-xs opacity-50">{t<string>('common.avatar.menu.greeting')},</span>
<span className="text-xs opacity-50">{t('common.avatar.menu.greeting')},</span>
<p>{user?.name}</p>
</div>
</MenuItem>
<Divider />
<MenuItem onClick={handleLogout}>{t<string>('common.avatar.menu.logout')}</MenuItem>
<MenuItem onClick={handleLogout}>{t('common.avatar.menu.logout')}</MenuItem>
</Menu>
</>
);
client/components/shared/BaseModal.module.scss
+3 -3
View File
@@ -1,7 +1,7 @@
.content {
@apply rounded px-6 text-sm shadow lg:w-1/2 xl:w-2/5;
@apply absolute inset-4 sm:inset-x-4 sm:inset-y-auto lg:inset-auto;
@apply overflow-scroll bg-neutral-50 dark:bg-neutral-900 lg:overflow-auto;
@apply overflow-scroll bg-zinc-100 dark:bg-zinc-900 lg:overflow-auto;
@apply max-h-[90vh] min-h-fit;
&::-webkit-scrollbar {
@@ -10,7 +10,7 @@
}
.header {
@apply sticky top-0 left-0 right-0 z-50 bg-neutral-50 pt-6 dark:bg-neutral-900;
@apply sticky top-0 left-0 right-0 z-50 bg-zinc-100 pt-6 dark:bg-zinc-900;
@apply flex items-center justify-between;
@apply w-full border-b pb-5 dark:border-white/10;
@@ -33,7 +33,7 @@
}
.footer {
@apply sticky bottom-0 left-0 right-0 z-50 bg-neutral-50 pb-6 dark:bg-neutral-900;
@apply sticky bottom-0 left-0 right-0 z-50 bg-zinc-100 pb-6 dark:bg-zinc-900;
@apply flex items-center justify-end gap-x-4;
@apply w-full border-t pt-5 dark:border-white/10;
}
client/components/shared/Copyright.tsx
+19
View File
@@ -0,0 +1,19 @@
import clsx from 'clsx';
type Props = {
className?: string;
};
export const Copyright = ({ className }: Props) => (
<div
className={clsx('prose prose-sm prose-zinc flex flex-col gap-y-1 text-xs opacity-40 dark:prose-invert', className)}
>
<span className="font-medium">v4.0.0</span>
<span>
Licensed under <a href="https://github.com/AmruthPillai/Reactive-Resume/blob/main/LICENSE">MIT</a>
</span>
<span>
A passion project by <a href="https://www.amruthpillai.com/">Amruth Pillai</a>
</span>
</div>
);
client/components/shared/Footer.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ const Footer: React.FC<Props> = ({ className }) => {
return (
<div className={clsx('text-xs', className)}>
<p>{t<string>('common.footer.license')}</p>
<p>{t('common.footer.license')}</p>
<p>
<Trans t={t} i18nKey="common.footer.credit">
client/components/shared/Heading.tsx
+4 -4
View File
@@ -62,7 +62,7 @@ const Heading: React.FC<Props> = ({
{editMode ? (
<TextField size="small" value={heading} className="w-3/4" onChange={handleChange} />
) : (
<h1>{t<string>(`builder.leftSidebar.${path}.heading`, { defaultValue: heading })}</h1>
<h1>{t(`builder.leftSidebar.${path}.heading`, { defaultValue: heading })}</h1>
)}
</div>
@@ -72,19 +72,19 @@ const Heading: React.FC<Props> = ({
})}
>
{isEditable && (
<Tooltip title={t<string>('builder.common.tooltip.rename-section')}>
<Tooltip title={t('builder.common.tooltip.rename-section')}>
<IconButton onClick={toggleEditMode}>{editMode ? <Check /> : <DriveFileRenameOutline />}</IconButton>
</Tooltip>
)}
{isHideable && (
<Tooltip title={t<string>('builder.common.tooltip.toggle-visibility')}>
<Tooltip title={t('builder.common.tooltip.toggle-visibility')}>
<IconButton onClick={toggleVisibility}>{visibility ? <Visibility /> : <VisibilityOff />}</IconButton>
</Tooltip>
)}
{isDeletable && (
<Tooltip title={t<string>('builder.common.tooltip.delete-section')}>
<Tooltip title={t('builder.common.tooltip.delete-section')}>
<IconButton onClick={handleDelete}>
<Delete />
</IconButton>
client/components/shared/Icon.tsx
+27
View File
@@ -0,0 +1,27 @@
import clsx from 'clsx';
import Image from 'next/image';
import { useAppSelector } from '@/store/hooks';
type Props = {
className?: string;
size?: 256 | 96 | 64 | 48 | 40 | 32 | 24 | 16;
};
const Icon: React.FC<Props> = ({ size = 64, className }) => {
const theme = useAppSelector((state) => state.build.theme);
const iconTheme = theme === 'light' ? 'dark' : 'light';
return (
<Image
alt="Reactive Resume"
src={`/icon/${iconTheme}.svg`}
className={clsx('rounded', className)}
width={size}
height={size}
priority
/>
);
};
export default Icon;
client/components/shared/List.module.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.container {
@apply rounded-lg border dark:border-neutral-50/10;
@apply rounded-lg border dark:border-zinc-50/10;
.empty {
@apply py-8 text-center;
client/components/shared/List.tsx
+2 -2
View File
@@ -60,13 +60,13 @@ const List: React.FC<Props> = ({
dispatch(setResumeState({ path, value: newList }));
},
[list, dispatch, path]
[list, dispatch, path],
);
return (
<DndProvider backend={HTML5Backend}>
<div className={clsx(styles.container, className)}>
{isEmpty(list) && <div className={styles.empty}>{t<string>('builder.common.list.empty-text')}</div>}
{isEmpty(list) && <div className={styles.empty}>{t('builder.common.list.empty-text')}</div>}
{list.map((item, index) => {
const title = get(item, titleKey, '');
client/components/shared/ListItem.module.scss
+1 -1
View File
@@ -1,7 +1,7 @@
.item {
@apply flex items-center justify-between;
@apply py-5 pl-5 pr-2;
@apply border-b border-neutral-900/10 last:border-0 dark:border-neutral-50/10;
@apply border-b border-zinc-900/10 last:border-0 dark:border-zinc-50/10;
@apply cursor-move transition-opacity;
.meta {
client/components/shared/ListItem.tsx
+4 -4
View File
@@ -126,25 +126,25 @@ const ListItem: React.FC<Props> = ({ item, path, index, title, subtitle, onMove,
<ListItemIcon>
<DriveFileRenameOutline className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('builder.common.list.actions.edit')}</ListItemText>
<ListItemText>{t('builder.common.list.actions.edit')}</ListItemText>
</MenuItem>
<MenuItem onClick={() => handleDuplicate(item)}>
<ListItemIcon>
<FileCopy className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('builder.common.list.actions.duplicate')}</ListItemText>
<ListItemText>{t('builder.common.list.actions.duplicate')}</ListItemText>
</MenuItem>
<Divider />
<Tooltip arrow placement="right" title={t<string>('builder.common.tooltip.delete-item')}>
<Tooltip arrow placement="right" title={t('builder.common.tooltip.delete-item')}>
<div>
<MenuItem onClick={() => handleDelete(item)}>
<ListItemIcon>
<DeleteOutline className="scale-90" />
</ListItemIcon>
<ListItemText>{t<string>('builder.common.list.actions.delete')}</ListItemText>
<ListItemText>{t('builder.common.list.actions.delete')}</ListItemText>
</MenuItem>
</div>
</Tooltip>
client/components/shared/Logo.tsx
+19 -4
View File
@@ -1,11 +1,26 @@
import clsx from 'clsx';
import Image from 'next/image';
import { useAppSelector } from '@/store/hooks';
type Props = {
size?: 256 | 64 | 48 | 40 | 32;
className?: string;
size?: 256 | 96 | 64 | 48 | 40 | 32 | 24 | 16;
};
const Logo: React.FC<Props> = ({ size = 64 }) => (
<Image alt="Reactive Resume" src="/images/logos/logo.svg" className="rounded" width={size} height={size} priority />
);
const Logo: React.FC<Props> = ({ size = 64, className }) => {
const theme = useAppSelector((state) => state.build.theme);
return (
<Image
alt="Reactive Resume"
src={`/logo/${theme}.svg`}
className={clsx('rounded', className)}
width={size}
height={size}
priority
/>
);
};
export default Logo;
client/components/ui/Separator.tsx
+25
View File
@@ -0,0 +1,25 @@
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import * as React from 'react';
import { cn } from '@/utils/styles';
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
'shrink-0 dark:bg-zinc-900 bg-zinc-100',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className,
)}
{...props}
/>
));
Separator.displayName = SeparatorPrimitive.Root.displayName;
export { Separator };