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

client/components/build/LeftSidebar/sections/Basics.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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) => (