From 078ca46a28484d3f4da11ae339bba1eb2153f5f0 Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Mon, 12 Sep 2022 06:27:35 -0400
Subject: [PATCH] Fixes design issues in settings/appearance (#4375)

---
 .../v2/settings/my-account/appearance.tsx     | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/apps/web/pages/v2/settings/my-account/appearance.tsx b/apps/web/pages/v2/settings/my-account/appearance.tsx
index 078c30856c..dfa4d386a6 100644
--- a/apps/web/pages/v2/settings/my-account/appearance.tsx
+++ b/apps/web/pages/v2/settings/my-account/appearance.tsx
@@ -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>
           </>
         )}