Tweaks requested by Ciarán (#3009)

* Tweaks requested

* Missing recurring event details in mobile view

* Removing bg-white

apps/web/components/AdditionalCalendarSelector.tsx

@@ -61,9 +61,15 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
                   marginLeft: "3px",
                 };
               },
+              control: (defaultStyles) => {
+                return {
+                  ...defaultStyles,
+                  borderRadius: "2px",
+                };
+              },
             }}
             isSearchable={false}
-            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 font-medium text-gray-700 sm:text-sm"
+            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 font-medium text-gray-700 sm:text-sm"
             isLoading={isLoading}
             components={{ Option: ImageOption }}
           />

apps/web/components/App.tsx

@@ -93,7 +93,7 @@ export default function App({
     <>
       <Shell large isPublic>
         <div className="-mx-4 md:-mx-8">
-          <div className="bg-gray-50 px-4">
+          <div className="bg-gray-50 px-8">
             <Link href="/apps">
               <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
                 <ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
@@ -103,7 +103,7 @@ export default function App({
               <div className="flex">
                 {
                   // eslint-disable-next-line @next/next/no-img-element
-                  <img className="h-16 w-16" src={logo} alt={name} />
+                  <img className="h-16 w-16 rounded-sm" src={logo} alt={name} />
                 }
                 <header className="px-4 py-2">
                   <h1 className="font-cal text-xl text-gray-900">{name}</h1>
@@ -158,7 +158,7 @@ export default function App({
             <NavTabs tabs={tabs} linkProps={{ shallow: true }} /> */}
           </div>
 
-          <div className="justify-between px-4 py-10 md:flex">
+          <div className="justify-between px-8 py-10 md:flex">
             <div className="prose-sm prose mb-6">{body}</div>
             <div className="md:max-w-80 flex-1 md:ml-8">
               <h4 className="font-medium text-gray-900 ">{t("categories")}</h4>

apps/web/components/DestinationCalendarSelector.tsx

@@ -85,10 +85,16 @@ const DestinationCalendarSelector = ({
               ? "var(--brand-color-dark-mode)"
               : "var(--brand-text-color)",
           }),
+          control: (defaultStyles) => {
+            return {
+              ...defaultStyles,
+              borderRadius: "2px",
+            };
+          },
         }}
         isSearchable={false}
         className={classNames(
-          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 sm:text-sm",
+          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm",
           !hidePlaceholder && "font-medium"
         )}
         onChange={(option) => {

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -338,6 +338,36 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                             </IntlProvider>
                           </div>
                         )}
+                        {!rescheduleUid && eventType.recurringEvent?.count && eventType.recurringEvent?.freq && (
+                          <div className="text-gray-600 dark:text-white">
+                            <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                            <p className="mb-1 -ml-2 inline px-2 py-1">
+                              {t("every_for_freq", {
+                                freq: t(
+                                  `${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`
+                                ),
+                              })}
+                            </p>
+                            <input
+                              type="number"
+                              min="1"
+                              max={eventType.recurringEvent.count}
+                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                              defaultValue={eventType.recurringEvent.count}
+                              onChange={(event) => {
+                                setRecurringEventCount(parseInt(event?.target.value));
+                              }}
+                            />
+                            <p className="inline text-gray-600 dark:text-white">
+                              {t(
+                                `${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`,
+                                {
+                                  count: recurringEventCount,
+                                }
+                              )}
+                            </p>
+                          </div>
+                        )}
                         <TimezoneDropdown />
 
                         <div className="md:hidden">

apps/web/components/integrations/CalendarListContainer.tsx

@@ -125,6 +125,9 @@ function ConnectedCalendarsList(props: Props) {
                         onOpenChange={props.onChanged}
                       />
                     }>
+                    <p className="px-4 pt-4 text-sm text-neutral-500">
+                      Toggle the calendar(s) you want to check for conflicts to prevent double bookings.
+                    </p>
                     <ul className="space-y-2 p-4">
                       {item.calendars.map((cal) => (
                         <CalendarSwitch