fix: ui fixes

hm-edu · Nov 9, 2023 · a673694 · a673694
1 parent b252630
commit a673694
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 26 deletions.
diff --git 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
@@ -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