From 0907d154c764770151b133fa3ef9c9154ca4c7d4 Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Wed, 14 Sep 2022 09:15:13 +0200
Subject: [PATCH] feat: 4232 - new theme toggle design. (#4371)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
---
 .../v2/settings/my-account/appearance.tsx     | 116 ++++++++++--------
 apps/web/public/static/locales/en/common.json |   5 +
 apps/web/public/theme-dark.svg                |  40 ++++++
 apps/web/public/theme-light.svg               |  39 ++++++
 apps/web/public/theme-system.svg              |  61 +++++++++
 5 files changed, 211 insertions(+), 50 deletions(-)
 create mode 100644 apps/web/public/theme-dark.svg
 create mode 100644 apps/web/public/theme-light.svg
 create mode 100644 apps/web/public/theme-system.svg

diff --git a/apps/web/pages/v2/settings/my-account/appearance.tsx b/apps/web/pages/v2/settings/my-account/appearance.tsx
index dfa4d386a6..011fe61d4a 100644
--- a/apps/web/pages/v2/settings/my-account/appearance.tsx
+++ b/apps/web/pages/v2/settings/my-account/appearance.tsx
@@ -1,5 +1,4 @@
 import { GetServerSidePropsContext } from "next";
-import { Trans } from "next-i18next";
 import { Controller, useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -10,7 +9,6 @@ import { Button } from "@calcom/ui/v2/core/Button";
 import Meta from "@calcom/ui/v2/core/Meta";
 import Switch from "@calcom/ui/v2/core/Switch";
 import ColorPicker from "@calcom/ui/v2/core/colorpicker";
-import Select from "@calcom/ui/v2/core/form/Select";
 import { Form } from "@calcom/ui/v2/core/form/fields";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
@@ -31,11 +29,6 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
     },
   });
 
-  const themeOptions = [
-    { value: "light", label: t("light") },
-    { value: "dark", label: t("dark") },
-  ];
-
   const formMethods = useForm();
 
   return (
@@ -44,50 +37,41 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
       handleSubmit={(values) => {
         mutation.mutate({
           ...values,
-          theme: values.theme.value,
+          // Radio values don't support null as values, therefore we convert an empty string
+          // back to null here.
+          theme: values.theme || null,
         });
       }}>
       <Meta title="appearance" description="appearance_description" />
-      <Controller
-        name="theme"
-        control={formMethods.control}
-        defaultValue={user.theme}
-        render={({ field: { value } }) => (
-          <>
-            <div className="flex items-center text-sm ">
-              <div className="mr-1 flex-grow">
-                <p className="font-semibold ">{t("follow_system_preferences")}</p>
-                <p className="mt-0.5 leading-5  text-gray-600">
-                  <Trans i18nKey="system_preference_description">
-                    Automatically adjust theme based on invitee system preferences. Note: This only applies to
-                    the booking pages.
-                  </Trans>
-                </p>
-              </div>
-              <div className="flex-none">
-                <Switch
-                  onCheckedChange={(checked) =>
-                    formMethods.setValue("theme", checked ? null : themeOptions[0])
-                  }
-                  checked={!value}
-                />
-              </div>
-            </div>
-            <div>
-              <Select
-                options={themeOptions}
-                onChange={(event) => {
-                  if (event) formMethods.setValue("theme", { ...event });
-                }}
-                isDisabled={!value}
-                className="mt-2 w-full sm:w-56"
-                defaultValue={value || themeOptions[0]}
-                value={value || themeOptions[0]}
-              />
-            </div>
-          </>
-        )}
-      />
+      <div className="mb-6 flex items-center text-sm">
+        <div>
+          <p className="font-semibold">{t("theme")}</p>
+          <p className="text-gray-600">{t("theme_applies_note")}</p>
+        </div>
+      </div>
+      <div className="flex flex-col justify-between sm:flex-row">
+        <ThemeLabel
+          variant="system"
+          value={null}
+          label={t("theme_system")}
+          defaultChecked={user.theme === null}
+          register={formMethods.register}
+        />
+        <ThemeLabel
+          variant="light"
+          value="light"
+          label={t("theme_light")}
+          defaultChecked={user.theme === "light"}
+          register={formMethods.register}
+        />
+        <ThemeLabel
+          variant="dark"
+          value="dark"
+          label={t("theme_dark")}
+          defaultChecked={user.theme === "dark"}
+          register={formMethods.register}
+        />
+      </div>
 
       <hr className="border-1 my-8 border-neutral-200" />
       <div className="mb-6 flex items-center text-sm">
@@ -127,7 +111,6 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
           )}
         />
       </div>
-
       {/* TODO future PR to preview brandColors */}
       {/* <Button
         color="secondary"
@@ -136,7 +119,6 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
         onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
         Preview
       </Button> */}
-
       <hr className="border-1 my-8 border-neutral-200" />
       <Controller
         name="hideBranding"
@@ -211,3 +193,37 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     },
   };
 };
+
+interface ThemeLabelProps {
+  variant: "light" | "dark" | "system";
+  value?: "light" | "dark" | null;
+  label: string;
+  defaultChecked?: boolean;
+  register: any;
+}
+
+const ThemeLabel = ({ variant, label, value, defaultChecked, register }: ThemeLabelProps) => {
+  return (
+    <label
+      className="relative mb-4 flex-1 cursor-pointer text-center last:mb-0 last:mr-0 sm:mr-4 sm:mb-0"
+      htmlFor={`theme-${variant}`}>
+      <input
+        className="peer absolute top-8 left-8"
+        type="radio"
+        value={value}
+        id={`theme-${variant}`}
+        defaultChecked={defaultChecked}
+        {...register("theme")}
+      />
+      <div className="relative z-10 rounded-lg ring-black transition-all peer-checked:ring-2">
+        <img
+          aria-hidden="true"
+          className="cover w-full rounded-lg"
+          src={`/theme-${variant}.svg`}
+          alt={`theme ${variant}`}
+        />
+      </div>
+      <p className="mt-2 text-sm font-medium text-gray-600 peer-checked:text-gray-900">{label}</p>
+    </label>
+  );
+};
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 17abcc3044..19ebed1c33 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1204,6 +1204,11 @@
   "add_new_form": "Add new form",
   "form_description": "Create your form to route a booker",
   "copy_link_to_form": "Copy link to form",
+  "theme": "Theme",
+  "theme_applies_note": "This only applies to your public booking pages",
+  "theme_light": "Light",
+  "theme_dark": "Dark",
+  "theme_system": "System default",
   "add_a_team": "Add a team",
   "saml_config": "SAML Config",
   "add_webhook_description": "Receive meeting data in real-time when something happens in Cal.com",
diff --git a/apps/web/public/theme-dark.svg b/apps/web/public/theme-dark.svg
new file mode 100644
index 0000000000..9dda6fd95b
--- /dev/null
+++ b/apps/web/public/theme-dark.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="208" height="120" fill="none">
+  <g clip-path="url(#a)">
+    <path fill="url(#b)" d="M0 0h208v120H0z"/>
+    <path d="M18 27.6c0-3.36 0-5.04.65-6.32a6 6 0 0 1 2.63-2.63C22.56 18 24.24 18 27.6 18H208v102H18V27.6Z" fill="#101010"/>
+    <path d="M55 75a3 3 0 0 1 3-3h131a3 3 0 0 1 3 3v14H55V75ZM55 90h137v17H55V90ZM55 108h137v17H55v-17Z" fill="#1C1C1C"/>
+    <circle cx="123.74" cy="46.58" r="6" fill="#2B2B2B"/>
+    <rect x="112.17" y="56.25" width="23.15" height="2" rx="1" fill="#444"/>
+    <rect x="100.17" y="60.25" width="47.15" height="2" rx="1" fill="#2B2B2B"/>
+    <rect x="59.24" y="77.58" width="24" height="2" rx="1" fill="#444"/>
+    <rect x="59.24" y="95.58" width="24" height="2" rx="1" fill="#444"/>
+    <rect x="59.24" y="113.58" width="24" height="2" rx="1" fill="#444"/>
+    <rect x="59.24" y="81.88" width="58" height="2" rx="1" fill="#2B2B2B"/>
+    <rect x="59.24" y="99.88" width="58" height="2" rx="1" fill="#2B2B2B"/>
+    <rect x="59.24" y="117.88" width="58" height="2" rx="1" fill="#2B2B2B"/>
+  </g>
+  <defs>
+    <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(145.4 103.67 32.3) scale(465.773 828.954)">
+      <stop stop-color="#282E39"/>
+      <stop offset="1" stop-color="#D4D4D5"/>
+    </radialGradient>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h208v120H0z"/>
+    </clipPath>
+  </defs>
+  <defs>
+    <radialGradient id="c" r=".1"/>
+    <filter id="d" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feTurbulence type="fractalNoise" baseFrequency=".7" numOctaves="2" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>
+      <feColorMatrix type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="colormatrix"/>
+      <feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="colormatrix" result="componentTransfer">
+        <feFuncR type="linear" slope="3"/>
+        <feFuncG type="linear" slope="3"/>
+        <feFuncB type="linear" slope="3"/>
+      </feComponentTransfer>
+      <feColorMatrix x="0%" y="0%" width="100%" height="100%" in="componentTransfer" result="colormatrix2" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -7"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#c)"/>
+  <rect width="100%" height="100%" fill="transparent" filter="url(#d)" opacity=".1" style="mix-blend-mode:normal"/>
+</svg>
\ No newline at end of file
diff --git a/apps/web/public/theme-light.svg b/apps/web/public/theme-light.svg
new file mode 100644
index 0000000000..19123b67bd
--- /dev/null
+++ b/apps/web/public/theme-light.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="208" height="120" fill="none">
+  <g clip-path="url(#a)">
+    <path fill="url(#b)" d="M0 0h208v120H0z"/>
+    <path d="M18 27.6c0-3.36 0-5.04.65-6.32a6 6 0 0 1 2.63-2.63C22.56 18 24.24 18 27.6 18H208v102H18V27.6Z" fill="#F3F4F6"/>
+    <path d="M55 75a3 3 0 0 1 3-3h131a3 3 0 0 1 3 3v14H55V75ZM55 90h137v17H55V90ZM55 108h137v17H55v-17Z" fill="#fff"/>
+    <circle cx="123.74" cy="46.58" r="6" fill="#D1D5DB"/>
+    <rect x="112.17" y="56.25" width="23.15" height="2" rx="1" fill="#D1D5DB"/>
+    <rect x="100.17" y="60.25" width="47.15" height="2" rx="1" fill="#E5E7EB"/>
+    <rect x="59.24" y="77.58" width="24" height="2" rx="1" fill="#D1D5DB"/>
+    <rect x="59.24" y="95.58" width="24" height="2" rx="1" fill="#D1D5DB"/>
+    <rect x="59.24" y="113.58" width="24" height="2" rx="1" fill="#D1D5DB"/>
+    <rect x="59.24" y="81.88" width="58" height="2" rx="1" fill="#E5E7EB"/>
+    <rect x="59.24" y="99.88" width="58" height="2" rx="1" fill="#E5E7EB"/>
+    <rect x="59.24" y="117.88" width="58" height="2" rx="1" fill="#E5E7EB"/>
+  </g>
+  <defs>
+    <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-339.61518 178.07518 -289.08762 -551.332 385.55 -55)">
+      <stop stop-color="#A2ABBE"/>
+      <stop offset="1" stop-color="#D4D4D5"/>
+    </radialGradient>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h208v120H0z"/>
+    </clipPath>
+  </defs>
+  <defs>
+    <radialGradient id="c" r="1"/>
+    <filter id="d" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="2" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>
+      <feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="colormatrix" result="componentTransfer">
+        <feFuncR type="linear" slope="3"/>
+        <feFuncG type="linear" slope="3"/>
+        <feFuncB type="linear" slope="3"/>
+      </feComponentTransfer>
+      <feColorMatrix x="0%" y="0%" width="100%" height="100%" in="componentTransfer" result="colormatrix2" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -7"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#c)"/>
+  <rect width="100%" height="100%" fill="transparent" filter="url(#d)" opacity=".3" style="mix-blend-mode:normal"/>
+</svg>
\ No newline at end of file
diff --git a/apps/web/public/theme-system.svg b/apps/web/public/theme-system.svg
new file mode 100644
index 0000000000..8ad2de749d
--- /dev/null
+++ b/apps/web/public/theme-system.svg
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="208" height="120" fill="none">
+  <g clip-path="url(#a)">
+    <g clip-path="url(#b)">
+      <path d="M0 0h104v120H0V0Z" fill="url(#c)"/>
+      <path d="M18 27.6c0-3.36 0-5.04.65-6.32a6 6 0 0 1 2.63-2.63C22.56 18 24.24 18 27.6 18H104v102H18V27.6Z" fill="#F3F4F6"/>
+      <path d="M39 75a3 3 0 0 1 3-3h62v17H39V75ZM39 90h65v17H39V90ZM39 108h65v17H39v-17Z" fill="#fff"/>
+      <circle cx="107.74" cy="46.58" r="6" fill="#D1D5DB"/>
+      <rect x="96.17" y="56.25" width="23.15" height="2" rx="1" fill="#D1D5DB"/>
+      <rect x="84.17" y="60.25" width="47.15" height="2" rx="1" fill="#E5E7EB"/>
+      <rect x="43.24" y="77.58" width="24" height="2" rx="1" fill="#D1D5DB"/>
+      <rect x="43.24" y="95.58" width="24" height="2" rx="1" fill="#D1D5DB"/>
+      <rect x="43.24" y="113.58" width="24" height="2" rx="1" fill="#D1D5DB"/>
+      <rect x="43.24" y="81.88" width="58" height="2" rx="1" fill="#E5E7EB"/>
+      <rect x="43.24" y="99.88" width="58" height="2" rx="1" fill="#E5E7EB"/>
+      <rect x="43.24" y="117.88" width="58" height="2" rx="1" fill="#E5E7EB"/>
+    </g>
+    <path d="M104 0h104v120H104V0Z" fill="url(#d)"/>
+    <path d="M122 27.6c0-3.36 0-5.04.65-6.32a6 6 0 0 1 2.63-2.63c1.28-.65 2.96-.65 6.32-.65H208v102h-86V27.6Z" fill="#101010"/>
+    <path d="M143 75a3 3 0 0 1 3-3h62v17h-65V75ZM143 90h65v17h-65V90ZM143 108h65v17h-65v-17Z" fill="#1C1C1C"/>
+    <circle cx="211.74" cy="46.58" r="6" fill="#2B2B2B"/>
+    <rect x="200.17" y="56.25" width="23.15" height="2" rx="1" fill="#444"/>
+    <rect x="188.17" y="60.25" width="47.15" height="2" rx="1" fill="#2B2B2B"/>
+    <rect x="147.24" y="77.58" width="24" height="2" rx="1" fill="#444"/>
+    <rect x="147.24" y="95.58" width="24" height="2" rx="1" fill="#444"/>
+    <rect x="147.24" y="113.58" width="24" height="2" rx="1" fill="#444"/>
+    <rect x="147.24" y="81.88" width="58" height="2" rx="1" fill="#2B2B2B"/>
+    <rect x="147.24" y="99.88" width="58" height="2" rx="1" fill="#2B2B2B"/>
+    <rect x="147.24" y="117.88" width="58" height="2" rx="1" fill="#2B2B2B"/>
+  </g>
+  <defs>
+    <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-169.80904 178.07418 -351.05785 -334.76382 192.77 -55)">
+      <stop stop-color="#A2ABBE"/>
+      <stop offset="1" stop-color="#D4D4D5"/>
+    </radialGradient>
+    <radialGradient id="d" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(125.93 103.83 52.98) scale(326.659 590.989)">
+      <stop stop-color="#282E39"/>
+      <stop offset="1" stop-color="#D4D4D5"/>
+    </radialGradient>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h208v120H0z"/>
+    </clipPath>
+    <clipPath id="b">
+      <path d="M0 0h104v120H0V0Z" fill="#fff"/>
+    </clipPath>
+  </defs>
+  <defs>
+    <radialGradient id="e" r=".1"/>
+    <filter id="f" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feTurbulence type="fractalNoise" baseFrequency=".7" numOctaves="2" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"/>
+      <feColorMatrix type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="turbulence" result="colormatrix"/>
+      <feComponentTransfer x="0%" y="0%" width="100%" height="100%" in="colormatrix" result="componentTransfer">
+        <feFuncR type="linear" slope="3"/>
+        <feFuncG type="linear" slope="3"/>
+        <feFuncB type="linear" slope="3"/>
+      </feComponentTransfer>
+      <feColorMatrix x="0%" y="0%" width="100%" height="100%" in="componentTransfer" result="colormatrix2" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -7"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#e)"/>
+  <rect width="100%" height="100%" fill="transparent" filter="url(#f)" opacity=".1" style="mix-blend-mode:normal"/>
+</svg>
\ No newline at end of file