Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes design issues in settings/appearance #4375

Merged
merged 7 commits into from
Sep 12, 2022
Merged

Fixes design issues in settings/appearance #4375

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
895b754
fixes design issues
Sep 12, 2022
d01b2d2
small design fix
Sep 12, 2022
3e5a37b
fixes mobile view
Sep 12, 2022
41a4fe7
make select full with for mobile
Sep 12, 2022
f9c6dee
Merge branch 'main' into fix/design-appearance-settings
baileypumfleet Sep 12, 2022
1f82be2
Merge branch 'main' into fix/design-appearance-settings
kodiakhq[bot] Sep 12, 2022
2e0413e
Merge branch 'main' into fix/design-appearance-settings
kodiakhq[bot] Sep 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 28 additions & 21 deletions apps/web/pages/v2/settings/my-account/appearance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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]}
/>
Expand All @@ -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)}
Expand All @@ -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)}
Expand All @@ -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>
</>
)}
Expand Down