From a67369460aee20921ccee75a595dd58fecb47ba4 Mon Sep 17 00:00:00 2001
From: Udit Takkar <udit222001@gmail.com>
Date: Wed, 8 Nov 2023 15:18:15 +0530
Subject: [PATCH] fix: ui fixes

---
 .../components/eventtype/EventAdvancedTab.tsx | 32 +++++++++----------
 .../pages/settings/my-account/calendars.tsx   | 22 +++++++------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 620fd274c11375..2b35584cef6fd9 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -135,8 +135,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           <div className="flex flex-col">
             <div className="flex justify-between">
               <div>
-                <Label className="font-medium">{t("add_to_calendar")}</Label>
-                <p className="text-subtle -mt-2 text-sm">{t("add_to_calendar_description")}</p>
+                <Label className="text-emphasis mb-0 font-medium">{t("add_to_calendar")}</Label>
               </div>
               <Link
                 href="/apps/categories/calendar"
@@ -145,21 +144,20 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 {t("add_another_calendar")}
               </Link>
             </div>
-            <div className="-mt-1 w-full">
-              <Controller
-                control={formMethods.control}
-                name="destinationCalendar"
-                defaultValue={eventType.destinationCalendar || undefined}
-                render={({ field: { onChange, value } }) => (
-                  <DestinationCalendarSelector
-                    destinationCalendar={eventType.destinationCalendar}
-                    value={value ? value.externalId : undefined}
-                    onChange={onChange}
-                    hidePlaceholder
-                  />
-                )}
-              />
-            </div>
+            <Controller
+              control={formMethods.control}
+              name="destinationCalendar"
+              defaultValue={eventType.destinationCalendar || undefined}
+              render={({ field: { onChange, value } }) => (
+                <DestinationCalendarSelector
+                  destinationCalendar={eventType.destinationCalendar}
+                  value={value ? value.externalId : undefined}
+                  onChange={onChange}
+                  hidePlaceholder
+                  hideAdvancedText
+                />
+              )}
+            />
             <p className="text-subtle text-sm">{t("select_which_cal")}</p>
           </div>
         )}
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index b12e8a13897d1c..0bdeeadf98fcb1 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -25,6 +25,7 @@ import {
   SkeletonContainer,
   SkeletonText,
   showToast,
+  Label,
 } from "@calcom/ui";
 import { Plus, Calendar } from "@calcom/ui/components/icon";
 
@@ -113,17 +114,20 @@ const CalendarsView = () => {
                 <h2 className="text-emphasis mb-1 text-base font-bold leading-5 tracking-wide">
                   {t("add_to_calendar")}
                 </h2>
-                <p className="text-default text-sm leading-tight">{t("add_to_calendar_description")}</p>
+                <p className="text-subtle text-sm leading-tight">{t("add_to_calendar_description")}</p>
               </div>
               <div className="border-subtle flex w-full flex-col space-y-3 border border-x border-y-0 px-4 py-6 sm:px-6">
-                <DestinationCalendarSelector
-                  hidePlaceholder
-                  value={selectedDestinationCalendarOption?.externalId}
-                  onChange={(option) => {
-                    setSelectedDestinationCalendar(option);
-                  }}
-                  isLoading={mutation.isLoading}
-                />
+                <div>
+                  <Label className="text-default mb-0 font-medium">{t("add_events_to")}</Label>
+                  <DestinationCalendarSelector
+                    hidePlaceholder
+                    value={selectedDestinationCalendarOption?.externalId}
+                    onChange={(option) => {
+                      setSelectedDestinationCalendar(option);
+                    }}
+                    isLoading={mutation.isLoading}
+                  />
+                </div>
               </div>
               <SectionBottomActions align="end">
                 <Button