Merge pull request #1381 from AmruthPillai/fix/issue-with-private-resumes

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

.dockerignore

@@ -2,7 +2,7 @@
 /app
 
 # Build Artifacts
-**/.turbo
+/schema/dist
 /server/dist
 /client/.next
 

.env.example

@@ -1,7 +1,3 @@
-# Turbo Cache (Optional)
-TURBO_TEAM=
-TURBO_TOKEN=
-
 # Server + Client
 TZ=UTC
 PUBLIC_URL=http://localhost:3000
@@ -15,7 +11,7 @@ POSTGRES_PASSWORD=postgres
 
 # Server
 SECRET_KEY=
-POSTGRES_HOST=postgres
+POSTGRES_HOST=localhost
 POSTGRES_PORT=5432
 POSTGRES_SSL_CERT=
 JWT_SECRET=
@@ -36,5 +32,5 @@ STORAGE_ACCESS_KEY=
 STORAGE_SECRET_KEY=
 PDF_DELETION_TIME=345600000
 
-# Flags (Client)
-PUBLIC_FLAG_DISABLE_SIGNUPS=false
+# Client
+PUBLIC_FLAG_DISABLE_SIGNUPS=false

.eslintrc.json

@@ -1,12 +1,23 @@
 {
-  "ignorePatterns": ["/app"],
   "parser": "@typescript-eslint/parser",
   "extends": ["plugin:@typescript-eslint/recommended"],
-  "plugins": ["@typescript-eslint/eslint-plugin", "simple-import-sort"],
+  "plugins": ["@typescript-eslint/eslint-plugin", "unused-imports", "simple-import-sort"],
   "rules": {
     // ESLint
     "no-unused-vars": "off",
 
+    // Unused Imports
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "args": "none",
+        "varsIgnorePattern": "^_",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+
     // Simple Import Sort
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
@@ -14,6 +25,7 @@
     // TypeScript ESLint
     "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off"

.github/workflows/build-deploy.yml

@@ -0,0 +1,85 @@
+name: Build and Deploy
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        image:
+          - client
+          - server
+        platform:
+          - linux/amd64
+          - linux/arm64
+
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v3.5.3
+
+      - name: Retrieve version from package.json
+        id: version
+        uses: martinbeentjes/npm-get-version-action@v1.3.1
+
+      - name: Docker Metadaata
+        id: meta
+        uses: docker/metadata-action@v4.6.0
+        with:
+          images: amruthpillai/reactive-resume
+          tags: |
+            type=raw,value=${{ matrix.image }}-latest
+            type=raw,value=${{ matrix.image }}-${{ steps.version.outputs.current-version }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.2.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.9.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.2.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2.2.0
+        with:
+          registry: ghcr.io
+          username: $GITHUB_REPOSITORY_OWNER
+          password: ${{ secrets.GH_TOKEN }}
+
+      - name: Build and Push
+        id: build
+        uses: docker/build-push-action@v4.1.1
+        with:
+          context: .
+          push: true
+          platforms: ${{ matrix.platform }}
+          file: ${{ matrix.image }}/Dockerfile
+          labels: ${{ steps.meta.outputs.labels }}
+          tags: ${{ steps.meta.outputs.tags }}
+          build-args: |
+            TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}
+
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+
+    needs: build
+
+    steps:
+      - name: Install DigitalOcean CLI
+        uses: digitalocean/action-doctl@v2.3.0
+        with:
+          token: ${{ secrets.DIGITALOCEAN_TOKEN }}
+
+      - name: Create Deployment with Latest Version
+        run: doctl apps create-deployment ${{ secrets.DIGITALOCEAN_APP_ID }} --wait --force-rebuild

.github/workflows/digitalocean-deploy.yml

@@ -1,28 +0,0 @@
-name: Deploy Latest Version on DigitalOcean
-
-on:
-  workflow_run:
-    workflows:
-      - Build and Push Docker Image
-    types:
-      - completed
-
-jobs:
-  on-success:
-    runs-on: ubuntu-latest
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
-    steps:
-      - name: Install DigitalOcean CLI
-        uses: digitalocean/action-doctl@v2.2.0
-        with:
-          token: ${{ secrets.DIGITALOCEAN_TOKEN }}
-
-      - name: Create Deployment with Latest Version
-        run: doctl apps create-deployment ${{ secrets.DIGITALOCEAN_APP_ID }} --wait --force-rebuild
-
-  on-failure:
-    runs-on: ubuntu-latest
-    if: ${{ github.event.workflow_run.conclusion == 'failure' }}
-    steps:
-      - name: Abruptly end the worklfow
-        run: exit 1

.github/workflows/docker-build-push.yml

@@ -1,62 +0,0 @@
-name: Build and Push Docker Image
-
-on:
-  workflow_dispatch:
-  release:
-    types: [published]
-
-jobs:
-  build_matrix:
-    name: Build and Push Docker Image
-    runs-on: ubuntu-latest
-
-    env:
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-
-    strategy:
-      matrix:
-        image: [client, server]
-
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v3.1.0
-
-      - id: version
-        name: App Version
-        uses: martinbeentjes/npm-get-version-action@v1.2.3
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.1.0
-        with:
-          platforms: amd64
-
-      - id: buildx
-        name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.2.1
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2.1.0
-        with:
-          registry: ghcr.io
-          username: $GITHUB_REPOSITORY_OWNER
-          password: ${{ secrets.GH_TOKEN }}
-
-      - name: Build and Push Docker Image
-        uses: docker/build-push-action@v3.2.0
-        with:
-          context: .
-          push: true
-          platforms: linux/amd64
-          file: ${{ matrix.image }}/Dockerfile
-          tags: |
-            amruthpillai/reactive-resume:${{ matrix.image }}-latest
-            amruthpillai/reactive-resume:${{ matrix.image }}-${{ steps.version.outputs.current-version }}
-            ghcr.io/amruthpillai/reactive-resume:${{ matrix.image }}-latest
-            ghcr.io/amruthpillai/reactive-resume:${{ matrix.image }}-${{ steps.version.outputs.current-version }}

.gitignore

@@ -1,6 +1,8 @@
 # Environment Variables
 .env
 .env.*
+*.env
+!.env.gitpod
 !.env.example
 
 # Project Dependencies
@@ -9,8 +11,8 @@ node_modules
 # macOS
 .DS_Store
 
-# Turbo
-.turbo
-
 # Intellij
 .idea
+
+# Turborepo
+.turbo

.gitpod.yml

@@ -0,0 +1,41 @@
+tasks:
+  - name: Run PostgreSQL Database
+    command: docker run --name postgres -p 5432:5432 -e POSTGRES_PASSWORD=postgres -d postgres
+
+  - name: Install Project Dependencies
+    command: |
+      pnpm install
+      pnpm dlx playwright install --with-deps chromium
+      gp sync-done deps
+
+  - name: Generate Environment Variables
+    init: gp sync-await deps
+    command: |
+      if [ -f .env ]; then
+        echo "Found .env in workspace, skipping generation"
+      else
+        pnpm generate-env
+      fi
+      gp sync-done env
+
+  - name: Build and Run Project
+    init: gp sync-await env
+    command: |
+      pnpm build
+      pnpm start
+
+ports:
+  # PostgreSQL
+  - port: 5432
+    onOpen: ignore
+    visibility: private
+
+  # Client
+  - port: 3100
+    onOpen: ignore
+    visibility: public
+
+  # Client
+  - port: 3000
+    onOpen: open-browser
+    visibility: public

README.md

@@ -1,4 +1,4 @@
-<img src="https://rxresu.me/images/logos/logo.png" alt="Reactive Resume" width="256px" height="256px" />
+<img src="/client/public/logo/dark.png" alt="Reactive Resume" width="256px" height="256px" />
 
 # Reactive Resume
 
@@ -6,7 +6,8 @@
 [![Project License](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume?style=flat-square)](https://github.com/AmruthPillai/Reactive-Resume/blob/main/LICENSE)
 [![Crowdin](https://badges.crowdin.net/reactive-resume/localized.svg)](https://translate.rxresu.me)
 [![Docker Pulls](https://img.shields.io/docker/pulls/amruthpillai/reactive-resume?style=flat-square)](https://hub.docker.com/r/amruthpillai/reactive-resume)
-![GitHub Workflow Status](https://img.shields.io/github/workflow/status/AmruthPillai/Reactive-Resume/Build%20and%20Push%20Docker%20Image?label=docker%20build&style=flat-square)
+![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/AmruthPillai/Reactive-Resume/docker-build-push.yml?branch=main&label=docker%20build&style=flat-square)
+[![Gitpod](https://img.shields.io/badge/Contribute%20with-Gitpod-908a85?logo=gitpod)](https://gitpod.io/#https://github.com/AmruthPillai/Reactive-Resume)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume?ref=badge_shield)
 
 ## [Go to App](https://rxresu.me) | [Docs](https://docs.rxresu.me)
@@ -18,7 +19,7 @@ You have complete control over what goes into your resume, how it looks, what co
 ## Table of Contents
 
 - [Reactive Resume](#reactive-resume)
-  - [Go to App Docs](https://docs.rxresu.me)
+  - [Go to App | Docs](#go-to-app--docs)
   - [Table of Contents](#table-of-contents)
   - [Features](#features)
   - [Languages](#languages)
@@ -29,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)
@@ -104,6 +106,10 @@ The docs include an extensive [Tutorial](https://docs.rxresu.me/tutorial) sectio
 
 ## Build from Source
 
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/AmruthPillai/Reactive-Resume)
+
+Initially building the image and project on Gitpod will take at least ~10 minutes, so please be patient on first launch.
+
 For extensive information on how to build the app on your local machine, head over to the docs [Source Code](https://docs.rxresu.me/source-code) section.
 
 ## Contributing
@@ -129,6 +135,10 @@ Reactive Resume would be nothing without the folks who supported me and kept the
 ### [GitHub Sponsor](https://github.com/sponsors/AmruthPillai)
 ### [PayPal](https://paypal.me/RajaRajanA)
 
+## GitHub Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=AmruthPillai/Reactive-Resume&type=Date)](https://star-history.com/#AmruthPillai/Reactive-Resume&Date)
+
 ## Infrastructure
 
 - [Next.js](https://nextjs.org/), frontend

app/app/build.gradle

@@ -12,8 +12,8 @@ android {
         targetSdk 32
         versionCode 3
         versionName "1.0"
+        resConfigs 'en'
 
-        resConfigs "en"
     }
 
     buildTypes {
@@ -38,6 +38,7 @@ android {
     buildFeatures {
         viewBinding true
     }
+    namespace 'me.rxresu.app'
 }
 
 dependencies {

app/app/src/main/AndroidManifest.xml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    package="me.rxresu.app">
+    xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET"/>
 

app/app/src/main/java/me/rxresu/app/MainActivity.kt

@@ -6,7 +6,6 @@ import android.webkit.WebView
 import androidx.appcompat.app.AppCompatActivity
 
 class MainActivity : AppCompatActivity() {
-
     private lateinit var webView: WebView
 
     private var url = "https://rxresu.me"

app/build.gradle

@@ -1,7 +1,7 @@
 plugins {
-    id 'com.android.application' version '7.1.2' apply false
-    id 'com.android.library' version '7.1.2' apply false
-    id 'org.jetbrains.kotlin.android' version '1.7.21' apply false
+    id 'com.android.application' version '7.4.2' apply false
+    id 'com.android.library' version '7.4.2' apply false
+    id 'org.jetbrains.kotlin.android' version '1.9.0' apply false
 }
 
 task clean(type: Delete) {

app/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 #Wed Mar 09 21:34:49 CET 2022
 distributionBase=GRADLE_USER_HOME
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-bin.zip
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME

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",
 

client/Dockerfile

@@ -2,12 +2,12 @@ FROM node:lts-alpine AS base
 
 WORKDIR /app
 
-RUN apk add --no-cache g++ git curl make python3 libc6-compat \
-  && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+RUN apk add --no-cache g++ git make curl python3 libc6-compat \
+  && corepack enable && corepack prepare pnpm@latest --activate
 
 FROM base as dependencies
 
-COPY package.json pnpm-*.yaml turbo.json ./
+COPY package.json pnpm-*.yaml ./
 COPY ./schema/package.json ./schema/package.json
 COPY ./client/package.json ./client/package.json
 
@@ -21,17 +21,14 @@ COPY --from=dependencies /app/node_modules ./node_modules
 COPY --from=dependencies /app/schema/node_modules ./schema/node_modules
 COPY --from=dependencies /app/client/node_modules ./client/node_modules
 
-ARG TURBO_TEAM
 ARG TURBO_TOKEN
+ENV TURBO_TOKEN=$TURBO_TOKEN
 
-ENV TURBO_TEAM $TURBO_TEAM
-ENV TURBO_TOKEN $TURBO_TOKEN
-
-RUN pnpm run build --filter client
+RUN pnpm exec turbo --filter client build
 
 FROM base as production
 
-COPY --from=builder /app/package.json /app/pnpm-*.yaml /app/turbo.json ./
+COPY --from=builder /app/package.json /app/pnpm-*.yaml ./
 COPY --from=builder /app/client/package.json ./client/package.json
 
 RUN pnpm install --filter client --prod --frozen-lockfile --workspace-root
@@ -45,7 +42,4 @@ EXPOSE 3000
 
 ENV PORT 3000
 
-HEALTHCHECK --interval=30s --timeout=20s --retries=3 --start-period=15s \
-    CMD curl -fSs localhost:3000 || exit 1
-
-CMD [ "pnpm", "run", "start", "--filter", "client" ]
+CMD [ "pnpm", "run", "--filter", "client", "start" ]

client/Dockerfile.standalone

@@ -0,0 +1,43 @@
+FROM node:20-alpine AS base
+
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn global add pnpm && pnpm build
+
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "client/server.js"]

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;
   }
 }

client/components/build/Center/ArtboardController.tsx

@@ -12,13 +12,12 @@ 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';
+import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
 import toast from 'react-hot-toast';
 import { useMutation } from 'react-query';
-import { ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';
+import { ReactZoomPanPinchHandlers } from 'react-zoom-pan-pinch';
 import { ActionCreators } from 'redux-undo';
 
 import { ServerError } from '@/services/axios';
@@ -26,10 +25,11 @@ 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';
 
-const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, centerView }) => {
+const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomOut, centerView }) => {
   const { t } = useTranslation();
 
   const theme = useTheme();
@@ -60,7 +60,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
     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<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
 
   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<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
 
         {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<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
               </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<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
           </>
         )}
 
-        <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,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

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

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

@@ -20,14 +20,13 @@ import {
   useMediaQuery,
   useTheme,
 } from '@mui/material';
-import { Resume } from '@reactive-resume/schema';
-import clsx from 'clsx';
 import get from 'lodash/get';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useMutation } from 'react-query';
+import { Resume } from 'schema';
 
 import { RESUMES_QUERY } from '@/constants/index';
 import { ServerError } from '@/services/axios';
@@ -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';
 
@@ -53,13 +53,12 @@ const Header = () => {
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
-  const { mutateAsync: duplicateMutation } = useMutation<Resume, ServerError, DuplicateResumeParams>(duplicateResume);
-
-  const { mutateAsync: deleteMutation } = useMutation<void, ServerError, DeleteResumeParams>(deleteResume);
-
   const resume = useAppSelector((state) => state.resume.present);
   const { left, right } = useAppSelector((state) => state.build.sidebar);
 
+  const { mutateAsync: deleteMutation } = useMutation<void, ServerError, DeleteResumeParams>(deleteResume);
+  const { mutateAsync: duplicateMutation } = useMutation<Resume, ServerError, DuplicateResumeParams>(duplicateResume);
+
   const name = useMemo(() => get(resume, 'name'), [resume]);
 
   useEffect(() => {
@@ -103,7 +102,7 @@ const Header = () => {
             },
           },
         },
-      })
+      }),
     );
   };
 
@@ -133,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,
@@ -166,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 ? (
@@ -181,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

@@ -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,10 +1,10 @@
 import { css } from '@emotion/css';
-import { CustomCSS, PageConfig, ThemeConfig, Typography } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { useTranslation } from 'next-i18next';
 import { useMemo } from 'react';
+import { CustomCSS, PageConfig, ThemeConfig, Typography } from 'schema';
 
 import { useAppSelector } from '@/store/hooks';
 import templateMap from '@/templates/templateMap';
@@ -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

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

@@ -1,14 +1,14 @@
 import { Add, Star } from '@mui/icons-material';
 import { Button, Divider, IconButton, SwipeableDrawer, Tooltip, useMediaQuery, useTheme } from '@mui/material';
-import { Section as SectionRecord } from '@reactive-resume/schema';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
 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';
@@ -27,6 +27,7 @@ const LeftSidebar = () => {
   const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
 
   const sections = useAppSelector((state) => state.resume.present.sections);
+
   const { open } = useAppSelector((state) => state.build.sidebar.left);
 
   const customSections = useMemo(() => getCustomSections(sections), [sections]);
@@ -68,7 +69,7 @@ const LeftSidebar = () => {
       sectionsComponents.push(
         <section key={id} id={id}>
           {component}
-        </section>
+        </section>,
       );
 
       if (addMore) {
@@ -88,7 +89,7 @@ const LeftSidebar = () => {
           elements.push(
             <section key={newId} id={`section-${newId}`}>
               {newComponent}
-            </section>
+            </section>,
           );
         }
         sectionsComponents.push(...elements);
@@ -108,10 +109,12 @@ const LeftSidebar = () => {
       variant={isDesktop ? 'persistent' : 'temporary'}
     >
       <div className={styles.container}>
-        <nav className="overflow-y-scroll">
+        <nav className="overflow-y-auto">
           <div>
             <Link href="/dashboard">
-              <Logo size={40} />
+              <IconButton>
+                <Icon size={24} />
+              </IconButton>
             </Link>
             <Divider />
           </div>
@@ -122,14 +125,19 @@ const LeftSidebar = () => {
                 arrow
                 key={id}
                 placement="right"
-                title={get(sections, `${id}.name`, t<string>(`builder.leftSidebar.sections.${id}.heading`)) as string}
+                title={t(`builder.leftSidebar.sections.${id}.heading`, get(sections, `${id}.name`))}
               >
                 <IconButton onClick={() => handleClick(id)}>{icon}</IconButton>
               </Tooltip>
             ))}
 
             {customSections.map(({ id }) => (
-              <Tooltip key={id} title={get(sections, `${id}.name`, '') as string} placement="right" arrow>
+              <Tooltip
+                key={id}
+                title={t(`builder.leftSidebar.sections.${id}.heading`, get(sections, `${id}.name`))}
+                placement="right"
+                arrow
+              >
                 <IconButton onClick={() => id && handleClick(id)}>
                   <Star />
                 </IconButton>
@@ -151,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

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

@@ -1,8 +1,8 @@
 import { Circle, Square, SquareRounded } from '@mui/icons-material';
 import { Checkbox, Divider, FormControlLabel, Slider, ToggleButton, ToggleButtonGroup } from '@mui/material';
-import { Photo, PhotoShape } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
+import { Photo, PhotoShape } from 'schema';
 
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { setResumeState } from '@/store/resume/resumeSlice';
@@ -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

@@ -1,11 +1,11 @@
 import { Avatar, IconButton, Skeleton, Tooltip } from '@mui/material';
-import { Photo, Resume } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { useTranslation } from 'next-i18next';
 import React, { useRef } from 'react';
 import toast from 'react-hot-toast';
 import { useMutation } from 'react-query';
+import { Photo, Resume } from 'schema';
 
 import { ServerError } from '@/services/axios';
 import { deletePhoto, DeletePhotoParams, uploadPhoto, UploadPhotoParams } from '@/services/resume';
@@ -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

@@ -1,7 +1,7 @@
 import { Add } from '@mui/icons-material';
 import { Button } from '@mui/material';
-import { ListItem } from '@reactive-resume/schema';
 import { useTranslation } from 'next-i18next';
+import { ListItem } from 'schema';
 
 import Heading from '@/components/shared/Heading';
 import List from '@/components/shared/List';
@@ -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

@@ -1,9 +1,9 @@
 import { Add } from '@mui/icons-material';
 import { Button } from '@mui/material';
-import { ListItem, Section as SectionRecord, SectionType } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
+import { ListItem, Section as SectionRecord, SectionType } from 'schema';
 import { validate } from 'uuid';
 
 import Heading from '@/components/shared/Heading';
@@ -98,14 +98,16 @@ const Section: React.FC<Props> = ({
         <SectionSettings path={path} />
 
         <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
-          {t<string>('builder.common.actions.add', { token: heading })}
+          {t('builder.common.actions.add', {
+            token: t(`builder.leftSidebar.${path}.heading`, { defaultValue: heading }),
+          })}
         </Button>
       </footer>
 
       {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) => (

client/components/build/RightSidebar/RightSidebar.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-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

@@ -1,5 +1,5 @@
 import { Divider, IconButton, SwipeableDrawer, Tooltip, useMediaQuery, useTheme } from '@mui/material';
-import { capitalize } from 'lodash';
+import capitalize from 'lodash/capitalize';
 import { useTranslation } from 'next-i18next';
 
 import Avatar from '@/components/shared/Avatar';
@@ -43,9 +43,9 @@ const RightSidebar = () => {
       variant={isDesktop ? 'persistent' : 'temporary'}
     >
       <div className={styles.container}>
-        <nav className="overflow-y-scroll">
+        <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

@@ -1,10 +1,10 @@
 import Editor from '@monaco-editor/react';
 import { useTheme } from '@mui/material';
-import { CustomCSS as CustomCSSType } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
 import React from 'react';
+import { CustomCSS as CustomCSSType } from 'schema';
 
 import Heading from '@/components/shared/Heading';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
@@ -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

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

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

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

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

@@ -3,7 +3,7 @@ import { Button } from '@mui/material';
 import { useTranslation } from 'next-i18next';
 
 import Heading from '@/components/shared/Heading';
-import { DOCS_URL, DONATION_URL, GITHUB_ISSUES_URL, GITHUB_URL } from '@/constants/index';
+import { DOCS_URL, DONATION_URL, GITHUB_ISSUES_URL, GITHUB_URL, REDDIT_URL } from '@/constants/index';
 
 import styles from './Links.module.scss';
 
@@ -12,47 +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('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

@@ -10,13 +10,13 @@ import {
   Switch,
   TextField,
 } from '@mui/material';
-import { DateConfig, PageConfig, Resume } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import get from 'lodash/get';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
+import { DateConfig, PageConfig, Resume } from 'schema';
 
 import Heading from '@/components/shared/Heading';
 import ThemeSwitch from '@/components/shared/ThemeSwitch';
@@ -51,11 +51,11 @@ const Settings = () => {
   const pageConfig: PageConfig | undefined = useMemo(() => get(resume, 'metadata.page'), [resume]);
 
   const isDarkMode = useMemo(() => theme === 'dark', [theme]);
-  const exampleDateString = useMemo(() => `Eg. ${dayjs().utc().format(dateConfig.format)}`, [dateConfig.format]);
+  const exampleDateString = useMemo(() => `Eg. ${dayjs().format(dateConfig.format)}`, [dateConfig.format]);
   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

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

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

@@ -1,6 +1,6 @@
-import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
+import { ThemeConfig } from 'schema';
 
 import ColorAvatar from '@/components/shared/ColorAvatar';
 import ColorPicker from '@/components/shared/ColorPicker';
@@ -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

@@ -1,9 +1,9 @@
 import { Autocomplete, Skeleton, Slider, TextField } from '@mui/material';
-import { Font, TypeCategory, TypeProperty, Typography as TypographyType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { useTranslation } from 'next-i18next';
 import { useQuery } from 'react-query';
+import { Font, TypeCategory, TypeProperty, Typography as TypographyType } from 'schema';
 
 import Heading from '@/components/shared/Heading';
 import { FONTS_QUERY } from '@/constants/index';
@@ -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

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

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

@@ -7,7 +7,6 @@ import {
   OpenInNew,
 } from '@mui/icons-material';
 import { ButtonBase, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip } from '@mui/material';
-import { Resume } from '@reactive-resume/schema';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -15,6 +14,7 @@ import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { useMutation } from 'react-query';
+import { Resume } from 'schema';
 
 import { RESUMES_QUERY } from '@/constants/index';
 import { ServerError } from '@/services/axios';
@@ -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

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

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

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

@@ -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/Pattern.tsx

@@ -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/home/Testimony.module.scss

@@ -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/home/sections/Logo.tsx

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

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

@@ -6,15 +6,17 @@ import { useState } from 'react';
 
 import { logout } from '@/store/auth/authSlice';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setModalState } from '@/store/modal/modalSlice';
 import getGravatarUrl from '@/utils/getGravatarUrl';
 
 import styles from './Avatar.module.scss';
 
 type Props = {
   size?: number;
+  interactive?: boolean;
 };
 
-const Avatar: React.FC<Props> = ({ size = 64 }) => {
+const Avatar: React.FC<Props> = ({ size = 64, interactive = true }) => {
   const router = useRouter();
 
   const { t } = useTranslation();
@@ -34,6 +36,11 @@ const Avatar: React.FC<Props> = ({ size = 64 }) => {
     setAnchorEl(null);
   };
 
+  const handleOpenProfile = () => {
+    dispatch(setModalState({ modal: 'auth.profile', state: { open: true } }));
+    handleClose();
+  };
+
   const handleLogout = () => {
     dispatch(logout());
     handleClose();
@@ -43,7 +50,7 @@ const Avatar: React.FC<Props> = ({ size = 64 }) => {
 
   return (
     <>
-      <IconButton onClick={handleOpen}>
+      <IconButton onClick={handleOpen} disabled={!interactive}>
         <Image
           width={size}
           height={size}
@@ -54,14 +61,14 @@ const Avatar: React.FC<Props> = ({ size = 64 }) => {
       </IconButton>
 
       <Menu anchorEl={anchorEl} onClose={handleClose} open={Boolean(anchorEl)}>
-        <MenuItem>
+        <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

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

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

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

@@ -62,7 +62,7 @@ const Heading: React.FC<Props> = ({
         {editMode ? (
           <TextField size="small" value={heading} className="w-3/4" onChange={handleChange} />
         ) : (
-          <h1>{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

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

@@ -1,4 +1,3 @@
-import { ListItem as ListItemType } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
@@ -8,6 +7,7 @@ import { useTranslation } from 'next-i18next';
 import { useCallback } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { ListItem as ListItemType } from 'schema';
 
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { deleteItem, setResumeState } from '@/store/resume/resumeSlice';
@@ -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,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

@@ -1,11 +1,11 @@
 import { DeleteOutline, DriveFileRenameOutline, FileCopy, MoreVert } from '@mui/icons-material';
 import { Divider, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip } from '@mui/material';
-import { ListItem as ListItemType } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import isFunction from 'lodash/isFunction';
 import { useTranslation } from 'next-i18next';
 import React, { useRef, useState } from 'react';
 import { DropTargetMonitor, useDrag, useDrop, XYCoord } from 'react-dnd';
+import { ListItem as ListItemType } from 'schema';
 
 import styles from './ListItem.module.scss';
 
@@ -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

@@ -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/shared/Markdown.tsx

@@ -1,6 +1,9 @@
 import clsx from 'clsx';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import ReactMarkdown from 'react-markdown';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
 
 type Props = {
   children?: string;
@@ -11,7 +14,11 @@ const Markdown: React.FC<Props> = ({ className, children }) => {
   if (!children || isEmpty(children)) return null;
 
   return (
-    <ReactMarkdown remarkPlugins={[]} className={clsx('markdown', className)}>
+    <ReactMarkdown
+      className={clsx('markdown', className)}
+      remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeKatex]}
+    >
       {children}
     </ReactMarkdown>
   );

client/components/shared/ResumeInput.tsx

@@ -1,7 +1,6 @@
 import { TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import dayjs from 'dayjs';
-import { isEmpty } from 'lodash';
 import get from 'lodash/get';
 import { useEffect, useState } from 'react';
 
@@ -22,7 +21,6 @@ const ResumeInput: React.FC<Props> = ({ type = 'text', label, path, className, m
   const dispatch = useAppDispatch();
 
   const stateValue = useAppSelector((state) => get(state.resume.present, path, ''));
-  const dateFormat = useAppSelector((state) => state.resume.present.metadata.date.format);
 
   useEffect(() => {
     setValue(stateValue);
@@ -57,16 +55,13 @@ const ResumeInput: React.FC<Props> = ({ type = 'text', label, path, className, m
   if (type === 'date') {
     return (
       <DatePicker
-        showToolbar
         openTo="year"
         label={label}
-        value={value}
-        toolbarFormat={dateFormat}
-        views={['year', 'month', 'day']}
-        renderInput={(params) => <TextField {...params} error={false} className={className} />}
-        onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-          isEmpty(keyboardInputValue) && onChangeValue('');
-          date && dayjs(date).isValid() && onChangeValue(dayjs(date).format('YYYY-MM-DD'));
+        value={dayjs(value)}
+        slots={{ textField: (params) => <TextField {...params} error={false} className={className} /> }}
+        onChange={(date: dayjs.Dayjs | null) => {
+          if (!date) return onChangeValue('');
+          if (dayjs(date).isValid()) return onChangeValue(dayjs(date).format('YYYY-MM-DD'));
         }}
       />
     );

client/components/ui/Separator.tsx

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

client/config/languages.ts

@@ -37,6 +37,7 @@ export const languages: Language[] = [
   { code: 'or', name: 'Odia', localName: 'ଓଡ଼ିଆ' },
   { code: 'pl', name: 'Polish', localName: 'Polski' },
   { code: 'pt', name: 'Portuguese', localName: 'Português' },
+  { code: 'pt-BR', name: 'Brazilian Portuguese', localName: 'Brasil' },
   { code: 'ro', name: 'Romanian', localName: 'limba română' },
   { code: 'ru', name: 'Russian', localName: 'русский' },
   { code: 'sr', name: 'Serbian', localName: 'српски језик' },

client/config/sections.tsx

@@ -23,8 +23,8 @@ import {
   VolunteerActivism,
   Work,
 } from '@mui/icons-material';
-import { Section as SectionRecord, SectionType } from '@reactive-resume/schema';
 import isEmpty from 'lodash/isEmpty';
+import { Section as SectionRecord, SectionType } from 'schema';
 
 import Basics from '@/components/build/LeftSidebar/sections/Basics';
 import Location from '@/components/build/LeftSidebar/sections/Location';

client/config/theme.ts

@@ -1,9 +1,10 @@
 import { createTheme, ThemeOptions } from '@mui/material/styles';
+import colors from 'tailwindcss/colors';
 
 const theme: ThemeOptions = {
   typography: {
     fontSize: 12,
-    fontFamily: 'Inter, sans-serif',
+    fontFamily: '"IBM Plex Sans", sans-serif',
   },
   components: {
     MuiButton: {
@@ -48,6 +49,15 @@ const theme: ThemeOptions = {
         },
       },
     },
+    MuiModal: {
+      defaultProps: {
+        componentsProps: {
+          backdrop: {
+            className: 'backdrop-blur-sm',
+          },
+        },
+      },
+    },
   },
 };
 
@@ -55,8 +65,9 @@ export const lightTheme = createTheme({
   ...theme,
   palette: {
     mode: 'light',
-    primary: { main: '#404040' }, // neutral[700]
-    secondary: { main: '#0d9488' }, // teal[600]
+    background: { default: colors.zinc[50], paper: colors.zinc[100] },
+    primary: { main: colors.zinc[900], ...colors.zinc },
+    secondary: { main: colors.teal[500], ...colors.teal },
   },
 });
 
@@ -64,7 +75,8 @@ export const darkTheme = createTheme({
   ...theme,
   palette: {
     mode: 'dark',
-    primary: { main: '#f5f5f5' }, // neutral[100]
-    secondary: { main: '#2dd4bf' }, // teal[400]
+    background: { default: colors.zinc[950], paper: colors.zinc[900] },
+    primary: { main: colors.zinc[100], ...colors.zinc },
+    secondary: { main: colors.teal[600], ...colors.teal },
   },
 });

client/constants/index.ts

@@ -13,6 +13,11 @@ export const DOCS_URL = 'https://docs.rxresu.me';
 export const DONATION_URL = 'https://paypal.me/RajaRajanA';
 export const TRANSLATE_URL = 'https://translate.rxresu.me/';
 export const DIGITALOCEAN_URL = 'https://pillai.xyz/digitalocean';
+export const REDDIT_URL = 'https://www.reddit.com/r/reactiveresume/';
 export const GITHUB_URL = 'https://github.com/AmruthPillai/Reactive-Resume';
 export const PRODUCT_HUNT_URL = 'https://www.producthunt.com/posts/reactive-resume-v3';
 export const GITHUB_ISSUES_URL = 'https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose';
+
+// Default Error Message
+export const DEFAULT_ERROR_MESSAGE =
+  'Something went wrong while performing this action, please report this issue on GitHub.';

client/constants/tilt.ts

@@ -0,0 +1,11 @@
+import { ReactParallaxTiltProps } from 'react-parallax-tilt';
+
+export const defaultTiltProps: ReactParallaxTiltProps = {
+  scale: 1.05,
+  tiltMaxAngleX: 8,
+  tiltMaxAngleY: 8,
+  perspective: 1400,
+  glareEnable: true,
+  glareMaxOpacity: 0.1,
+  glareColor: '#fafafa',
+};

client/modals/auth/ForgotPasswordModal.tsx

@@ -54,16 +54,16 @@ const ForgotPasswordModal: React.FC = () => {
       <BaseModal
         icon={<Password />}
         isOpen={isOpen}
-        heading={t<string>('modals.auth.forgot-password.heading')}
+        heading={t('modals.auth.forgot-password.heading')}
         handleClose={handleClose}
         footerChildren={
           <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}>
-            {t<string>('modals.auth.forgot-password.actions.send-email')}
+            {t('modals.auth.forgot-password.actions.send-email')}
           </Button>
         }
       >
         <div className="grid gap-4">
-          <p>{t<string>('modals.auth.forgot-password.body')}</p>
+          <p>{t('modals.auth.forgot-password.body')}</p>
 
           <form className="grid gap-4 xl:w-2/3">
             <Controller
@@ -72,7 +72,7 @@ const ForgotPasswordModal: React.FC = () => {
               render={({ field, fieldState }) => (
                 <TextField
                   autoFocus
-                  label={t<string>('modals.auth.forgot-password.form.email.label')}
+                  label={t('modals.auth.forgot-password.form.email.label')}
                   error={!!fieldState.error}
                   helperText={fieldState.error?.message}
                   {...field}
@@ -81,7 +81,7 @@ const ForgotPasswordModal: React.FC = () => {
             />
           </form>
 
-          <p className="text-xs">{t<string>('modals.auth.forgot-password.help-text')}</p>
+          <p className="text-xs">{t('modals.auth.forgot-password.help-text')}</p>
         </div>
       </BaseModal>
     </>

client/modals/auth/LoginModal.tsx

@@ -4,7 +4,7 @@ import { Login, Visibility, VisibilityOff } from '@mui/icons-material';
 import { Button, IconButton, InputAdornment, TextField } from '@mui/material';
 import { CredentialResponse, GoogleLogin } from '@react-oauth/google';
 import Joi from 'joi';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { Trans, useTranslation } from 'next-i18next';
 import { useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -53,7 +53,7 @@ const LoginModal: React.FC = () => {
   const { mutateAsync: loginMutation } = useMutation<void, ServerError, LoginParams>(login);
 
   const { mutateAsync: loginWithGoogleMutation } = useMutation<void, ServerError, LoginWithGoogleParams>(
-    loginWithGoogle
+    loginWithGoogle,
   );
 
   const handleClose = () => {
@@ -62,14 +62,7 @@ const LoginModal: React.FC = () => {
   };
 
   const onSubmit = async ({ identifier, password }: FormData) => {
-    await loginMutation(
-      { identifier, password },
-      {
-        onError: (error) => {
-          toast.error(error.message);
-        },
-      }
-    );
+    await loginMutation({ identifier, password });
 
     handleClose();
   };
@@ -86,14 +79,14 @@ const LoginModal: React.FC = () => {
 
   const handleLoginWithGoogle = async (response: CredentialResponse) => {
     if (response.credential) {
-      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleLoginWithGoogleError });
+      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleGoogleLoginError });
 
       handleClose();
     }
   };
 
-  const handleLoginWithGoogleError = () => {
-    toast("Please try logging in using email/password, or use another browser that supports Google's One Tap API.");
+  const handleGoogleLoginError = () => {
+    toast.error("Google doesn't seem to be responding, please try logging in using email/password instead.");
   };
 
   const PasswordVisibility = (): React.ReactElement => {
@@ -112,21 +105,21 @@ const LoginModal: React.FC = () => {
     <BaseModal
       icon={<Login />}
       isOpen={isOpen}
-      heading={t<string>('modals.auth.login.heading')}
+      heading={t('modals.auth.login.heading')}
       handleClose={handleClose}
       footerChildren={
         <div className="flex gap-4">
           {!isEmpty(env('GOOGLE_CLIENT_ID')) && (
-            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleLoginWithGoogleError} />
+            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleGoogleLoginError} />
           )}
 
           <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}>
-            {t<string>('modals.auth.login.actions.login')}
+            {t('modals.auth.login.actions.login')}
           </Button>
         </div>
       }
     >
-      <p>{t<string>('modals.auth.login.body')}</p>
+      <p>{t('modals.auth.login.body')}</p>
 
       <form className="grid gap-4 xl:w-2/3">
         <Controller
@@ -135,9 +128,9 @@ const LoginModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               autoFocus
-              label={t<string>('modals.auth.login.form.username.label')}
+              label={t('modals.auth.login.form.username.label')}
               error={!!fieldState.error}
-              helperText={fieldState.error?.message || t<string>('modals.auth.login.form.username.help-text')}
+              helperText={fieldState.error?.message || t('modals.auth.login.form.username.help-text')}
               {...field}
             />
           )}
@@ -149,7 +142,7 @@ const LoginModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               type={showPassword ? 'text' : 'password'}
-              label={t<string>('modals.auth.login.form.password.label')}
+              label={t('modals.auth.login.form.password.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               InputProps={{ endAdornment: <PasswordVisibility /> }}

client/modals/auth/RegisterModal.tsx

@@ -4,7 +4,7 @@ import { HowToReg } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
 import { CredentialResponse, GoogleLogin } from '@react-oauth/google';
 import Joi from 'joi';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { Trans, useTranslation } from 'next-i18next';
 import { Controller, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
@@ -61,7 +61,7 @@ const RegisterModal: React.FC = () => {
   const { mutateAsync, isLoading } = useMutation<void, ServerError, RegisterParams>(registerUser);
 
   const { mutateAsync: loginWithGoogleMutation } = useMutation<void, ServerError, LoginWithGoogleParams>(
-    loginWithGoogle
+    loginWithGoogle,
   );
 
   const handleClose = () => {
@@ -81,35 +81,35 @@ const RegisterModal: React.FC = () => {
 
   const handleLoginWithGoogle = async (response: CredentialResponse) => {
     if (response.credential) {
-      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleLoginWithGoogleError });
+      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleGoogleLoginError });
 
       handleClose();
     }
   };
 
-  const handleLoginWithGoogleError = () => {
-    toast("Please try logging in using email/password, or use another browser that supports Google's One Tap API.");
+  const handleGoogleLoginError = () => {
+    toast("Google doesn't seem to be responding, please try logging in using email/password instead.");
   };
 
   return (
     <BaseModal
       icon={<HowToReg />}
       isOpen={isOpen}
-      heading={t<string>('modals.auth.register.heading')}
+      heading={t('modals.auth.register.heading')}
       handleClose={handleClose}
       footerChildren={
         <div className="flex gap-4">
           {!isEmpty(env('GOOGLE_CLIENT_ID')) && (
-            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleLoginWithGoogleError} />
+            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleGoogleLoginError} />
           )}
 
           <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}>
-            {t<string>('modals.auth.register.actions.register')}
+            {t('modals.auth.register.actions.register')}
           </Button>
         </div>
       }
     >
-      <p>{t<string>('modals.auth.register.body')}</p>
+      <p>{t('modals.auth.register.body')}</p>
 
       <form className="grid gap-4 md:grid-cols-2">
         <Controller
@@ -118,7 +118,7 @@ const RegisterModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               autoFocus
-              label={t<string>('modals.auth.register.form.name.label')}
+              label={t('modals.auth.register.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -131,7 +131,7 @@ const RegisterModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('modals.auth.register.form.username.label')}
+              label={t('modals.auth.register.form.username.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -145,7 +145,7 @@ const RegisterModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               type="email"
-              label={t<string>('modals.auth.register.form.email.label')}
+              label={t('modals.auth.register.form.email.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -160,7 +160,7 @@ const RegisterModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               type="password"
-              label={t<string>('modals.auth.register.form.password.label')}
+              label={t('modals.auth.register.form.password.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -174,7 +174,7 @@ const RegisterModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               type="password"
-              label={t<string>('modals.auth.register.form.confirm-password.label')}
+              label={t('modals.auth.register.form.confirm-password.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}

client/modals/auth/ResetPasswordModal.tsx

@@ -65,15 +65,15 @@ const ResetPasswordModal: React.FC = () => {
     <BaseModal
       icon={<LockReset />}
       isOpen={isOpen}
-      heading={t<string>('modals.auth.reset-password.heading')}
+      heading={t('modals.auth.reset-password.heading')}
       handleClose={handleClose}
       footerChildren={
         <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}>
-          {t<string>('modals.auth.reset-password.actions.set-password')}
+          {t('modals.auth.reset-password.actions.set-password')}
         </Button>
       }
     >
-      <p>{t<string>('modals.auth.reset-password.body')}</p>
+      <p>{t('modals.auth.reset-password.body')}</p>
 
       <form className="grid gap-4 md:grid-cols-2">
         <Controller
@@ -83,7 +83,7 @@ const ResetPasswordModal: React.FC = () => {
             <TextField
               autoFocus
               type="password"
-              label={t<string>('modals.auth.reset-password.form.password.label')}
+              label={t('modals.auth.reset-password.form.password.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -97,7 +97,7 @@ const ResetPasswordModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               type="password"
-              label={t<string>('modals.auth.reset-password.form.confirm-password.label')}
+              label={t('modals.auth.reset-password.form.confirm-password.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}

client/modals/auth/UserProfileModal.tsx

@@ -0,0 +1,159 @@
+import { joiResolver } from '@hookform/resolvers/joi';
+import { CrisisAlert, ManageAccounts } from '@mui/icons-material';
+import { Button, Divider, TextField } from '@mui/material';
+import Joi from 'joi';
+import { useRouter } from 'next/router';
+import { Trans, useTranslation } from 'next-i18next';
+import { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useMutation } from 'react-query';
+
+import Avatar from '@/components/shared/Avatar';
+import BaseModal from '@/components/shared/BaseModal';
+import { deleteAccount, updateProfile, UpdateProfileParams } from '@/services/auth';
+import { ServerError } from '@/services/axios';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setModalState } from '@/store/modal/modalSlice';
+
+type FormData = {
+  name: string;
+  email: string;
+};
+
+const defaultState: FormData = {
+  name: '',
+  email: '',
+};
+
+const schema = Joi.object({
+  name: Joi.string().required(),
+  email: Joi.string()
+    .email({ tlds: { allow: false } })
+    .required(),
+});
+
+const UserProfileModal = () => {
+  const router = useRouter();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const [deleteText, setDeleteText] = useState<string>('');
+  const isDeleteTextValid = useMemo(() => deleteText.toLowerCase() === 'delete', [deleteText]);
+
+  const user = useAppSelector((state) => state.auth.user);
+  const { open: isOpen } = useAppSelector((state) => state.modal['auth.profile']);
+
+  const { mutateAsync: deleteAccountMutation } = useMutation<void, ServerError>(deleteAccount);
+  const { mutateAsync: updateProfileMutation } = useMutation<void, ServerError, UpdateProfileParams>(updateProfile);
+
+  const { reset, getFieldState, control, handleSubmit } = useForm<FormData>({
+    defaultValues: defaultState,
+    resolver: joiResolver(schema),
+  });
+
+  useEffect(() => {
+    if (user && !getFieldState('name').isTouched && !getFieldState('email').isTouched) {
+      reset({ name: user.name, email: user.email });
+    }
+  }, [user]);
+
+  const handleClose = () => {
+    dispatch(setModalState({ modal: 'auth.profile', state: { open: false } }));
+  };
+
+  const handleUpdate = handleSubmit(async (data) => {
+    handleClose();
+    await updateProfileMutation({ name: data.name });
+  });
+
+  const handleDelete = async () => {
+    await deleteAccountMutation();
+    handleClose();
+
+    router.push('/');
+  };
+
+  return (
+    <BaseModal isOpen={isOpen} handleClose={handleClose} heading="Your Account" icon={<ManageAccounts />}>
+      <div className="grid gap-4">
+        <form className="grid gap-4 xl:w-2/3">
+          <div className="flex items-center gap-4">
+            <Avatar interactive={false} />
+
+            <div className="grid flex-1 gap-1.5">
+              <Controller
+                name="name"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <TextField
+                    autoFocus
+                    label={t('modals.auth.profile.form.name.label')}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message}
+                    {...field}
+                  />
+                )}
+              />
+
+              <p className="pl-4 text-[10.25px] opacity-50">
+                <Trans t={t} i18nKey="modals.auth.profile.form.avatar.help-text">
+                  You can update your profile picture on{' '}
+                  <a href="https://gravatar.com/" target="_blank" rel="noreferrer">
+                    Gravatar
+                  </a>
+                </Trans>
+              </p>
+            </div>
+          </div>
+
+          <Controller
+            name="email"
+            control={control}
+            render={({ field, fieldState }) => (
+              <TextField
+                disabled
+                label={t('modals.auth.profile.form.email.label')}
+                error={!!fieldState.error}
+                helperText={t('modals.auth.profile.form.email.help-text')}
+                {...field}
+              />
+            )}
+          />
+
+          <div>
+            <Button onClick={handleUpdate}>{t('modals.auth.profile.actions.save')}</Button>
+          </div>
+        </form>
+
+        <div className="my-2">
+          <Divider />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <CrisisAlert />
+          <h5 className="font-medium">{t('modals.auth.profile.delete-account.heading')}</h5>
+        </div>
+
+        <p className="text-xs opacity-75">{t('modals.auth.profile.delete-account.body', { keyword: 'delete' })}</p>
+
+        <div className="flex max-w-xs flex-col gap-4">
+          <TextField
+            value={deleteText}
+            placeholder="Type 'delete' to confirm"
+            onChange={(e) => setDeleteText(e.target.value)}
+          />
+
+          <div>
+            <Button variant="contained" color="error" disabled={!isDeleteTextValid} onClick={handleDelete}>
+              {t('modals.auth.profile.delete-account.actions.delete')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default UserProfileModal;

client/modals/builder/sections/AwardModal.tsx

@@ -1,8 +1,8 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-import { Award, SectionPath } from '@reactive-resume/schema';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { Award, SectionPath } from 'schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
 import get from 'lodash/get';
@@ -50,8 +50,8 @@ const AwardModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -73,7 +73,7 @@ const AwardModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -101,7 +101,7 @@ const AwardModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.common.form.title.label')}
+              label={t('builder.common.form.title.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -115,7 +115,7 @@ const AwardModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t<string>('builder.leftSidebar.sections.awards.form.awarder.label')}
+              label={t('builder.leftSidebar.sections.awards.form.awarder.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -128,21 +128,23 @@ const AwardModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -152,7 +154,7 @@ const AwardModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.url.label')}
+              label={t('builder.common.form.url.label')}
               placeholder="https://"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -169,7 +171,7 @@ const AwardModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t<string>('builder.common.form.summary.label')}
+              label={t('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/builder/sections/CertificateModal.tsx

@@ -1,8 +1,8 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-import { Certificate, SectionPath } from '@reactive-resume/schema';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { Certificate, SectionPath } from 'schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
 import get from 'lodash/get';
@@ -50,8 +50,8 @@ const CertificateModal: React.FC = () => {
 
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -73,7 +73,7 @@ const CertificateModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -101,7 +101,7 @@ const CertificateModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.common.form.name.label')}
+              label={t('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -115,7 +115,7 @@ const CertificateModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t<string>('builder.leftSidebar.sections.certifications.form.issuer.label')}
+              label={t('builder.leftSidebar.sections.certifications.form.issuer.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -128,21 +128,23 @@ const CertificateModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -152,7 +154,7 @@ const CertificateModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.url.label')}
+              label={t('builder.common.form.url.label')}
               placeholder="https://"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -169,7 +171,7 @@ const CertificateModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t<string>('builder.common.form.summary.label')}
+              label={t('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/builder/sections/CustomModal.tsx

@@ -1,8 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, Slider, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-import { Custom } from '@reactive-resume/schema';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import dayjs from 'dayjs';
 import Joi from 'joi';
 import get from 'lodash/get';
@@ -10,6 +9,7 @@ import isEmpty from 'lodash/isEmpty';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { Custom } from 'schema';
 
 import ArrayInput from '@/components/shared/ArrayInput';
 import BaseModal from '@/components/shared/BaseModal';
@@ -68,8 +68,8 @@ const CustomModal: React.FC = () => {
 
   const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`));
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -91,7 +91,7 @@ const CustomModal: React.FC = () => {
       setModalState({
         modal: 'builder.sections.custom',
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -119,7 +119,7 @@ const CustomModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.common.form.title.label')}
+              label={t('builder.common.form.title.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -132,7 +132,7 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.subtitle.label')}
+              label={t('builder.common.form.subtitle.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -145,21 +145,23 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.start-date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.start-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -169,21 +171,23 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.end-date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.end-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || t('builder.common.form.end-date.help-text')}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || 'Leave this field blank, if still present'}
-                />
-              )}
             />
           )}
         />
@@ -193,7 +197,7 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.url.label')}
+              label={t('builder.common.form.url.label')}
               placeholder="https://"
               className="col-span-2"
               error={!!fieldState.error}
@@ -208,7 +212,7 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.level.label')}
+              label={t('builder.common.form.level.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -222,11 +226,13 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field }) => (
             <div className="col-span-2">
-              <h4 className="mb-3 font-semibold">{t<string>('builder.common.form.levelNum.label')}</h4>
+              <h4 className="mb-3 font-semibold">{t('builder.common.form.levelNum.label')}</h4>
 
               <div className="px-10">
                 <Slider
-                  {...field}
+                  name={field.name}
+                  value={field.value}
+                  onChange={(_, value) => field.onChange(value as number)}
                   marks={[
                     {
                       value: 0,
@@ -246,7 +252,7 @@ const CustomModal: React.FC = () => {
                   defaultValue={0}
                   color="secondary"
                   valueLabelDisplay="auto"
-                  aria-label={t<string>('builder.common.form.levelNum.label')}
+                  aria-label={t('builder.common.form.levelNum.label')}
                 />
               </div>
             </div>
@@ -263,7 +269,7 @@ const CustomModal: React.FC = () => {
               maxRows={6}
               className="col-span-2"
               error={!!fieldState.error}
-              label={t<string>('builder.common.form.summary.label')}
+              label={t('builder.common.form.summary.label')}
               helperText={fieldState.error?.message || <MarkdownSupported />}
               {...field}
             />
@@ -275,7 +281,7 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <ArrayInput
-              label={t<string>('builder.common.form.keywords.label')}
+              label={t('builder.common.form.keywords.label')}
               value={field.value as string[]}
               onChange={field.onChange}
               errors={fieldState.error}

client/modals/builder/sections/EducationModal.tsx

@@ -1,8 +1,8 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-import { Education, SectionPath } from '@reactive-resume/schema';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { Education, SectionPath } from 'schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
 import get from 'lodash/get';
@@ -63,8 +63,8 @@ const EducationModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -86,7 +86,7 @@ const EducationModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -114,7 +114,7 @@ const EducationModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.leftSidebar.sections.education.form.institution.label')}
+              label={t('builder.leftSidebar.sections.education.form.institution.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -128,7 +128,7 @@ const EducationModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t<string>('builder.leftSidebar.sections.education.form.degree.label')}
+              label={t('builder.leftSidebar.sections.education.form.degree.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -141,7 +141,7 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.leftSidebar.sections.education.form.area-study.label')}
+              label={t('builder.leftSidebar.sections.education.form.area-study.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -154,7 +154,7 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.leftSidebar.sections.education.form.grade.label')}
+              label={t('builder.leftSidebar.sections.education.form.grade.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -167,21 +167,23 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.start-date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.start-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -191,21 +193,23 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.end-date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.end-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || t('builder.common.form.end-date.help-text')}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
-                />
-              )}
             />
           )}
         />
@@ -215,7 +219,7 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.url.label')}
+              label={t('builder.common.form.url.label')}
               placeholder="https://"
               className="col-span-2"
               error={!!fieldState.error}
@@ -233,7 +237,7 @@ const EducationModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t<string>('builder.common.form.summary.label')}
+              label={t('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}
@@ -247,7 +251,7 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <ArrayInput
-              label={t<string>('builder.leftSidebar.sections.education.form.courses.label')}
+              label={t('builder.leftSidebar.sections.education.form.courses.label')}
               value={field.value as string[]}
               onChange={field.onChange}
               errors={fieldState.error}

client/modals/builder/sections/InterestModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { Interest, SectionPath } from '@reactive-resume/schema';
+import { Interest, SectionPath } from 'schema';
 import Joi from 'joi';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -41,8 +41,8 @@ const InterestModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -64,7 +64,7 @@ const InterestModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -92,7 +92,7 @@ const InterestModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.common.form.name.label')}
+              label={t('builder.common.form.name.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -106,7 +106,7 @@ const InterestModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <ArrayInput
-              label={t<string>('builder.common.form.keywords.label')}
+              label={t('builder.common.form.keywords.label')}
               value={field.value as string[]}
               onChange={field.onChange}
               errors={fieldState.error}

client/modals/builder/sections/LanguageModal.tsx

@@ -1,13 +1,13 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, Slider, TextField } from '@mui/material';
-import { Language, SectionPath } from '@reactive-resume/schema';
 import Joi from 'joi';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { Language, SectionPath } from 'schema';
 
 import BaseModal from '@/components/shared/BaseModal';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
@@ -42,8 +42,8 @@ const LanguageModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -65,7 +65,7 @@ const LanguageModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -93,7 +93,7 @@ const LanguageModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.common.form.name.label')}
+              label={t('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -107,7 +107,7 @@ const LanguageModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t<string>('builder.common.form.level.label')}
+              label={t('builder.common.form.level.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -120,11 +120,13 @@ const LanguageModal: React.FC = () => {
           control={control}
           render={({ field }) => (
             <div className="col-span-2">
-              <h4 className="mb-3 font-semibold">{t<string>('builder.common.form.levelNum.label')}</h4>
+              <h4 className="mb-3 font-semibold">{t('builder.common.form.levelNum.label')}</h4>
 
               <div className="px-10">
                 <Slider
-                  {...field}
+                  name={field.name}
+                  value={field.value}
+                  onChange={(_, value) => field.onChange(value as number)}
                   marks={[
                     {
                       value: 0,
@@ -144,7 +146,7 @@ const LanguageModal: React.FC = () => {
                   defaultValue={0}
                   color="secondary"
                   valueLabelDisplay="auto"
-                  aria-label={t<string>('builder.common.form.levelNum.label')}
+                  aria-label={t('builder.common.form.levelNum.label')}
                 />
               </div>
             </div>

client/modals/builder/sections/ProfileModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, AlternateEmail, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { Profile } from '@reactive-resume/schema';
+import { Profile } from 'schema';
 import Joi from 'joi';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -42,11 +42,11 @@ const ProfileModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = t<string>('builder.common.actions.add', {
-    token: t<string>('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
+  const addText = t('builder.common.actions.add', {
+    token: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
   });
-  const editText = t<string>('builder.common.actions.edit', {
-    token: t<string>('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
+  const editText = t('builder.common.actions.edit', {
+    token: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
   });
 
   const { reset, control, handleSubmit } = useForm<FormData>({
@@ -69,7 +69,7 @@ const ProfileModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -97,7 +97,7 @@ const ProfileModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.leftSidebar.sections.profiles.form.network.label')}
+              label={t('builder.leftSidebar.sections.profiles.form.network.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -111,7 +111,7 @@ const ProfileModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t<string>('builder.leftSidebar.sections.profiles.form.username.label')}
+              label={t('builder.leftSidebar.sections.profiles.form.username.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               InputProps={{
@@ -127,7 +127,7 @@ const ProfileModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.url.label')}
+              label={t('builder.common.form.url.label')}
               className="col-span-2"
               placeholder="https://"
               error={!!fieldState.error}

client/modals/builder/sections/ProjectModal.tsx

@@ -1,8 +1,8 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-import { Project, SectionPath } from '@reactive-resume/schema';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { Project, SectionPath } from 'schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
 import get from 'lodash/get';
@@ -59,8 +59,8 @@ const ProjectModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -82,7 +82,7 @@ const ProjectModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -110,7 +110,7 @@ const ProjectModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.common.form.name.label')}
+              label={t('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -124,7 +124,7 @@ const ProjectModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t<string>('builder.common.form.description.label')}
+              label={t('builder.common.form.description.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -137,21 +137,23 @@ const ProjectModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.start-date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.start-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -161,21 +163,23 @@ const ProjectModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.end-date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.end-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || t('builder.common.form.end-date.help-text')}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || 'Leave this field blank, if still present'}
-                />
-              )}
             />
           )}
         />
@@ -185,7 +189,7 @@ const ProjectModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.url.label')}
+              label={t('builder.common.form.url.label')}
               placeholder="https://"
               className="col-span-2"
               error={!!fieldState.error}
@@ -203,7 +207,7 @@ const ProjectModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t<string>('builder.common.form.summary.label')}
+              label={t('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}
@@ -217,7 +221,7 @@ const ProjectModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <ArrayInput
-              label={t<string>('builder.common.form.keywords.label')}
+              label={t('builder.common.form.keywords.label')}
               value={field.value as string[]}
               onChange={field.onChange}
               errors={fieldState.error}

client/modals/builder/sections/PublicationModal.tsx

@@ -1,8 +1,8 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-import { Publication, SectionPath } from '@reactive-resume/schema';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { Publication, SectionPath } from 'schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
 import get from 'lodash/get';
@@ -50,8 +50,8 @@ const PublicationModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -73,7 +73,7 @@ const PublicationModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -101,7 +101,7 @@ const PublicationModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.common.form.name.label')}
+              label={t('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -115,7 +115,7 @@ const PublicationModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t<string>('builder.leftSidebar.sections.publications.form.publisher.label')}
+              label={t('builder.leftSidebar.sections.publications.form.publisher.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -128,21 +128,23 @@ const PublicationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -152,7 +154,7 @@ const PublicationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.url.label')}
+              label={t('builder.common.form.url.label')}
               placeholder="https://"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -169,7 +171,7 @@ const PublicationModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t<string>('builder.common.form.summary.label')}
+              label={t('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/builder/sections/ReferenceModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { Reference, SectionPath } from '@reactive-resume/schema';
+import { Reference, SectionPath } from 'schema';
 import Joi from 'joi';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -47,8 +47,8 @@ const ReferenceModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -70,7 +70,7 @@ const ReferenceModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -98,7 +98,7 @@ const ReferenceModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.common.form.name.label')}
+              label={t('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -112,7 +112,7 @@ const ReferenceModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t<string>('builder.leftSidebar.sections.references.form.relationship.label')}
+              label={t('builder.leftSidebar.sections.references.form.relationship.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -125,7 +125,7 @@ const ReferenceModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.phone.label')}
+              label={t('builder.common.form.phone.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -138,7 +138,7 @@ const ReferenceModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.email.label')}
+              label={t('builder.common.form.email.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -154,7 +154,7 @@ const ReferenceModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t<string>('builder.common.form.summary.label')}
+              label={t('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/builder/sections/SkillModal.tsx

@@ -1,13 +1,13 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, Slider, TextField } from '@mui/material';
-import { SectionPath, Skill } from '@reactive-resume/schema';
 import Joi from 'joi';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { SectionPath, Skill } from 'schema';
 
 import ArrayInput from '@/components/shared/ArrayInput';
 import BaseModal from '@/components/shared/BaseModal';
@@ -45,8 +45,8 @@ const SkillModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -68,7 +68,7 @@ const SkillModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -96,7 +96,7 @@ const SkillModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.common.form.name.label')}
+              label={t('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -109,7 +109,7 @@ const SkillModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.level.label')}
+              label={t('builder.common.form.level.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -122,11 +122,13 @@ const SkillModal: React.FC = () => {
           control={control}
           render={({ field }) => (
             <div className="col-span-2">
-              <h4 className="mb-3 font-semibold">{t<string>('builder.common.form.levelNum.label')}</h4>
+              <h4 className="mb-3 font-semibold">{t('builder.common.form.levelNum.label')}</h4>
 
               <div className="px-3">
                 <Slider
-                  {...field}
+                  name={field.name}
+                  value={field.value}
+                  onChange={(_, value) => field.onChange(value as number)}
                   marks={[
                     {
                       value: 0,
@@ -146,7 +148,7 @@ const SkillModal: React.FC = () => {
                   defaultValue={0}
                   color="secondary"
                   valueLabelDisplay="auto"
-                  aria-label={t<string>('builder.common.form.levelNum.label')}
+                  aria-label={t('builder.common.form.levelNum.label')}
                 />
               </div>
             </div>
@@ -158,7 +160,7 @@ const SkillModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <ArrayInput
-              label={t<string>('builder.common.form.keywords.label')}
+              label={t('builder.common.form.keywords.label')}
               value={field.value}
               onChange={field.onChange}
               errors={fieldState.error}

client/modals/builder/sections/VolunteerModal.tsx

@@ -1,8 +1,8 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-import { SectionPath, Volunteer } from '@reactive-resume/schema';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { SectionPath, Volunteer } from 'schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
 import get from 'lodash/get';
@@ -56,8 +56,8 @@ const VolunteerModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
+  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -79,7 +79,7 @@ const VolunteerModal: React.FC = () => {
       setModalState({
         modal: `builder.${path}`,
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -107,7 +107,7 @@ const VolunteerModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.leftSidebar.sections.volunteer.form.organization.label')}
+              label={t('builder.leftSidebar.sections.volunteer.form.organization.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -121,7 +121,7 @@ const VolunteerModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t<string>('builder.common.form.position.label')}
+              label={t('builder.common.form.position.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -134,21 +134,23 @@ const VolunteerModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.start-date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.start-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -158,21 +160,23 @@ const VolunteerModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.end-date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.end-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || t('builder.common.form.end-date.help-text')}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || 'Leave this field blank, if still present'}
-                />
-              )}
             />
           )}
         />
@@ -182,7 +186,7 @@ const VolunteerModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.url.label')}
+              label={t('builder.common.form.url.label')}
               placeholder="https://"
               className="col-span-2"
               error={!!fieldState.error}
@@ -200,7 +204,7 @@ const VolunteerModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t<string>('builder.common.form.summary.label')}
+              label={t('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/builder/sections/WorkModal.tsx

@@ -1,8 +1,8 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-import { WorkExperience } from '@reactive-resume/schema';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { WorkExperience } from 'schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
 import get from 'lodash/get';
@@ -56,8 +56,20 @@ const WorkModal: React.FC = () => {
 
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(
+    () =>
+      t('builder.common.actions.add', {
+        token: t(`builder.leftSidebar.${path}.heading`, { defaultValue: heading }),
+      }),
+    [t, heading],
+  );
+  const editText = useMemo(
+    () =>
+      t('builder.common.actions.edit', {
+        token: t(`builder.leftSidebar.${path}.heading`, { defaultValue: heading }),
+      }),
+    [t, heading],
+  );
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -79,7 +91,7 @@ const WorkModal: React.FC = () => {
       setModalState({
         modal: 'builder.sections.work',
         state: { open: false },
-      })
+      }),
     );
 
     reset(defaultState);
@@ -107,7 +119,7 @@ const WorkModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t<string>('builder.common.form.name.label')}
+              label={t('builder.leftSidebar.sections.experience.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -121,7 +133,7 @@ const WorkModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t<string>('builder.common.form.position.label')}
+              label={t('builder.common.form.position.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -134,21 +146,23 @@ const WorkModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.start-date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.start-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -158,21 +172,23 @@ const WorkModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
-              label={t<string>('builder.common.form.end-date.label')}
+              inputRef={field.ref}
+              label={t('builder.common.form.end-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || t('builder.common.form.end-date.help-text')}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
-                />
-              )}
             />
           )}
         />
@@ -182,7 +198,7 @@ const WorkModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('builder.common.form.url.label')}
+              label={t('builder.common.form.url.label')}
               placeholder="https://"
               className="col-span-2"
               error={!!fieldState.error}
@@ -200,7 +216,7 @@ const WorkModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t<string>('builder.common.form.summary.label')}
+              label={t('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/dashboard/CreateResumeModal.tsx

@@ -1,12 +1,11 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add } from '@mui/icons-material';
 import { Button, FormControlLabel, FormGroup, Switch, TextField } from '@mui/material';
-import { Resume } from '@reactive-resume/schema';
+import { Resume } from 'schema';
 import Joi from 'joi';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
 import { useMutation } from 'react-query';
 
 import BaseModal from '@/components/shared/BaseModal';
@@ -66,15 +65,10 @@ const CreateResumeModal: React.FC = () => {
   }, [name, setValue]);
 
   const onSubmit = async ({ name, slug, isPublic }: FormData) => {
-    try {
-      await mutateAsync({ name, slug, public: isPublic });
+    await mutateAsync({ name, slug, public: isPublic });
+    await queryClient.invalidateQueries(RESUMES_QUERY);
 
-      await queryClient.invalidateQueries(RESUMES_QUERY);
-
-      handleClose();
-    } catch (error: any) {
-      toast.error(error.message);
-    }
+    handleClose();
   };
 
   const handleClose = () => {
@@ -86,15 +80,15 @@ const CreateResumeModal: React.FC = () => {
     <BaseModal
       isOpen={isOpen}
       icon={<Add />}
-      heading={t<string>('modals.dashboard.create-resume.heading')}
+      heading={t('modals.dashboard.create-resume.heading')}
       handleClose={handleClose}
       footerChildren={
         <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}>
-          {t<string>('modals.dashboard.create-resume.actions.create-resume')}
+          {t('modals.dashboard.create-resume.actions.create-resume')}
         </Button>
       }
     >
-      <p>{t<string>('modals.dashboard.create-resume.body')}</p>
+      <p>{t('modals.dashboard.create-resume.body')}</p>
 
       <form className="grid gap-4">
         <Controller
@@ -103,7 +97,7 @@ const CreateResumeModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               autoFocus
-              label={t<string>('modals.dashboard.create-resume.form.name.label')}
+              label={t('modals.dashboard.create-resume.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -116,7 +110,7 @@ const CreateResumeModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('modals.dashboard.create-resume.form.slug.label')}
+              label={t('modals.dashboard.create-resume.form.slug.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -126,7 +120,7 @@ const CreateResumeModal: React.FC = () => {
 
         <FormGroup>
           <FormControlLabel
-            label={t<string>('modals.dashboard.create-resume.form.public.label')}
+            label={t('modals.dashboard.create-resume.form.public.label')}
             control={
               <Controller
                 name="isPublic"

client/modals/dashboard/ImportExternalModal.tsx

@@ -1,6 +1,6 @@
 import { Code, ImportExport, LinkedIn, TrackChanges, UploadFile } from '@mui/icons-material';
 import { Button, Divider } from '@mui/material';
-import { Integration, Resume } from '@reactive-resume/schema';
+import { Integration, Resume } from 'schema';
 import { Trans, useTranslation } from 'next-i18next';
 import { useRef } from 'react';
 import toast from 'react-hot-toast';
@@ -63,13 +63,13 @@ const ImportExternalModal: React.FC = () => {
       const file = event.target.files[0];
 
       if (file.size > FILE_UPLOAD_MAX_SIZE) {
-        toast.error(t<string>('common.toast.error.upload-file-size'));
+        toast.error(t('common.toast.error.upload-file-size'));
         return;
       }
 
       await mutateAsync({ integration, file });
-
       queryClient.invalidateQueries(RESUMES_QUERY);
+
       handleClose();
     }
   };
@@ -78,13 +78,13 @@ const ImportExternalModal: React.FC = () => {
     <BaseModal
       isOpen={isOpen}
       icon={<ImportExport />}
-      heading={t<string>('modals.dashboard.import-external.heading')}
+      heading={t('modals.dashboard.import-external.heading')}
       handleClose={handleClose}
     >
       <div className="grid gap-5">
         <h2 className="inline-flex items-center gap-2 text-lg font-medium">
           <LinkedIn />
-          {t<string>('modals.dashboard.import-external.linkedin.heading')}
+          {t('modals.dashboard.import-external.linkedin.heading')}
         </h2>
 
         <p className="mb-2">
@@ -110,7 +110,7 @@ const ImportExternalModal: React.FC = () => {
             startIcon={<UploadFile />}
             onClick={() => handleClick('linkedin')}
           >
-            {t<string>('modals.dashboard.import-external.linkedin.actions.upload-archive')}
+            {t('modals.dashboard.import-external.linkedin.actions.upload-archive')}
           </Button>
 
           <input
@@ -128,7 +128,7 @@ const ImportExternalModal: React.FC = () => {
       <div className="grid gap-5">
         <h2 className="inline-flex items-center gap-2 text-lg font-medium">
           <Code />
-          {t<string>('modals.dashboard.import-external.json-resume.heading')}
+          {t('modals.dashboard.import-external.json-resume.heading')}
         </h2>
 
         <p className="mb-2">
@@ -154,7 +154,7 @@ const ImportExternalModal: React.FC = () => {
             startIcon={<UploadFile />}
             onClick={() => handleClick('json-resume')}
           >
-            {t<string>('modals.dashboard.import-external.json-resume.actions.upload-json')}
+            {t('modals.dashboard.import-external.json-resume.actions.upload-json')}
           </Button>
 
           <input
@@ -172,10 +172,10 @@ const ImportExternalModal: React.FC = () => {
       <div className="grid gap-5">
         <h2 className="inline-flex items-center gap-2 text-lg font-medium">
           <TrackChanges />
-          {t<string>('modals.dashboard.import-external.reactive-resume.heading')}
+          {t('modals.dashboard.import-external.reactive-resume.heading')}
         </h2>
 
-        <p className="mb-2">{t<string>('modals.dashboard.import-external.reactive-resume.body')}</p>
+        <p className="mb-2">{t('modals.dashboard.import-external.reactive-resume.body')}</p>
 
         <div className="flex gap-4">
           <Button
@@ -184,7 +184,7 @@ const ImportExternalModal: React.FC = () => {
             startIcon={<UploadFile />}
             onClick={() => handleClick('reactive-resume')}
           >
-            {t<string>('modals.dashboard.import-external.reactive-resume.actions.upload-json')}
+            {t('modals.dashboard.import-external.reactive-resume.actions.upload-json')}
           </Button>
 
           <Button
@@ -193,7 +193,7 @@ const ImportExternalModal: React.FC = () => {
             startIcon={<UploadFile />}
             onClick={() => handleClick('reactive-resume-v2')}
           >
-            {t<string>('modals.dashboard.import-external.reactive-resume.actions.upload-json-v2')}
+            {t('modals.dashboard.import-external.reactive-resume.actions.upload-json-v2')}
           </Button>
 
           <input

client/modals/dashboard/RenameResumeModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { Resume } from '@reactive-resume/schema';
+import { Resume } from 'schema';
 import Joi from 'joi';
 import get from 'lodash/get';
 import noop from 'lodash/noop';
@@ -92,11 +92,11 @@ const RenameResumeModal: React.FC = () => {
     <BaseModal
       icon={<DriveFileRenameOutline />}
       isOpen={isOpen}
-      heading={t<string>('modals.dashboard.rename-resume.heading')}
+      heading={t('modals.dashboard.rename-resume.heading')}
       handleClose={handleClose}
       footerChildren={
         <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}>
-          {t<string>('modals.dashboard.rename-resume.actions.rename-resume')}
+          {t('modals.dashboard.rename-resume.actions.rename-resume')}
         </Button>
       }
     >
@@ -107,7 +107,7 @@ const RenameResumeModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               autoFocus
-              label={t<string>('modals.dashboard.rename-resume.form.name.label')}
+              label={t('modals.dashboard.rename-resume.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -120,7 +120,7 @@ const RenameResumeModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t<string>('modals.dashboard.rename-resume.form.slug.label')}
+              label={t('modals.dashboard.rename-resume.form.slug.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}