vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.1k Packages Projects Releases Wiki Activity

feat: 4232 - new theme toggle design. (#4371)

Browse Source 
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
This commit is contained in:
Jeroen Reumkens
2022-09-14 08:15:13 +01:00
committed by GitHub
co-authored by Peer Richelsen Joe Au-Yeung
parent 6f807930f6
commit 0907d154c7
5 changed files with 211 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/pages/v2/settings/my-account/appearance.tsx
+66 -50
View File
@@ -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>
);
};
apps/web/public/static/locales/en/common.json
+5
View File
@@ -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",
apps/web/public/theme-dark.svg
+40
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

apps/web/public/theme-light.svg
+39
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

apps/web/public/theme-system.svg
+61
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB