maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes design issues in settings/appearance (#4375)

This commit is contained in:
Carina Wollendorfer 2022-09-12 06:27:35 -04:00 committed by GitHub
parent ef7863ad0b
commit 078ca46a28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
apps/web/pages/v2/settings/my-account/appearance.tsx
View File

@ -54,20 +54,24 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
defaultValue={user.theme}
render={({ field: { value } }) => (
<>
<div className="flex items-center">
<div>
<p className="font-semibold">{t("follow_system_preferences")}</p>
<p className="text-gray-600">
<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>
<Switch
onCheckedChange={(checked) => formMethods.setValue("theme", checked ? null : themeOptions[0])}
checked={!value}
/>
<div className="flex-none">
<Switch
onCheckedChange={(checked) =>
formMethods.setValue("theme", checked ? null : themeOptions[0])
}
checked={!value}
/>
</div>
</div>
<div>
<Select
@ -76,6 +80,7 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
if (event) formMethods.setValue("theme", { ...event });
}}
isDisabled={!value}
className="mt-2 w-full sm:w-56"
defaultValue={value || themeOptions[0]}
value={value || themeOptions[0]}
/>
@ -85,21 +90,21 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
/>
<hr className="border-1 my-8 border-neutral-200" />
<div className="mb-6 flex items-center">
<div className="mb-6 flex items-center text-sm">
<div>
<p className="font-semibold">{t("custom_brand_colors")}</p>
<p className="text-gray-600">{t("customize_your_brand_colors")}</p>
<p className="mt-0.5 leading-5 text-gray-600">{t("customize_your_brand_colors")}</p>
</div>
</div>
<div className="flex justify-between">
<div className="block justify-between sm:flex">
<Controller
name="brandColor"
control={formMethods.control}
defaultValue={user.brandColor}
render={({ field: { value } }) => (
<div>
<p className="block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
<p className="mb-2 block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
<ColorPicker
defaultValue={user.brandColor}
onChange={(value) => formMethods.setValue("brandColor", value)}
@ -112,8 +117,8 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
control={formMethods.control}
defaultValue={user.darkBrandColor}
render={({ field: { value } }) => (
<div>
<p className="block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
<div className="mt-6 sm:mt-0">
<p className="mb-2 block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
<ColorPicker
defaultValue={user.darkBrandColor}
onChange={(value) => formMethods.setValue("darkBrandColor", value)}
@ -139,18 +144,20 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
defaultValue={user.hideBranding}
render={({ field: { value } }) => (
<>
<div className="flex w-full items-center justify-between">
<div>
<div className="flex w-full text-sm">
<div className="mr-1 flex-grow">
<div className="flex items-center">
<p className="mr-2 font-semibold">{t("disable_cal_branding")}</p>{" "}
<Badge variant="gray">{t("pro")}</Badge>
</div>
<p className="text-gray-600">{t("removes_cal_branding")}</p>
<p className="mt-0.5 text-gray-600">{t("removes_cal_branding")}</p>
</div>
<div className="flex-none">
<Switch
onCheckedChange={(checked) => formMethods.setValue("hideBranding", checked)}
checked={value}
/>
</div>
<Switch
onCheckedChange={(checked) => formMethods.setValue("hideBranding", checked)}
checked={value}
/>
</div>
</>
)}