fix: frontend issues and dark mode regressions (#8373)

apps/web/components/booking/AvailableEventLocations.tsx

@@ -41,7 +41,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
     return (
       <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
         {eventLocationType.iconUrl === "/link.svg" ? (
-          <Link className="text-default min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] " />
+          <Link className="text-default ml-[2px] h-4 w-4  ltr:mr-[10px] rtl:ml-[10px] " />
         ) : (
           <img
             src={eventLocationType.iconUrl}

apps/web/components/dialog/EditLocationDialog.tsx

@@ -174,7 +174,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               id="locationInput"
               placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
               required
-              className="border-default block w-full rounded-sm text-sm"
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               defaultValue={
                 defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined

apps/web/components/eventtype/EventSetupTab.tsx

@@ -12,6 +12,7 @@ import { z } from "zod";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import cx from "@calcom/lib/classNames";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
@@ -277,7 +278,13 @@ export const EventSetupTab = (
                     <div className="flex items-center">
                       <img
                         src={eventLocationType.iconUrl}
-                        className="h-4 w-4"
+                        className={cx(
+                          "h-4 w-4",
+                          // invert all the icons except app icons
+                          eventLocationType.iconUrl &&
+                            !eventLocationType.iconUrl.startsWith("/api") &&
+                            "dark:invert"
+                        )}
                         alt={`${eventLocationType.label} logo`}
                       />
                       <span className="line-clamp-1 ms-1 text-sm">{eventLabel}</span>

apps/web/components/ui/form/CheckboxField.tsx

@@ -49,7 +49,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     {...rest}
                     ref={ref}
                     type="checkbox"
-                    className="text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded"
+                    className="text-primary-600 focus:ring-primary-500 border-default bg-default h-4 w-4 rounded"
                   />
                 </div>
                 <span className="ms-3 text-sm">{description}</span>

apps/web/components/ui/form/LocationSelect.tsx

@@ -3,6 +3,7 @@ import { components } from "react-select";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
+import cx from "@calcom/lib/classNames";
 import { Select } from "@calcom/ui";
 
 export type LocationOption = {
@@ -19,10 +20,14 @@ export type GroupOptionType = GroupBase<LocationOption>;
 const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
   return (
     <div className="flex items-center gap-3">
-      {/* TODO: figure out a way to invert icons when in dark mode. We can't just
-        dark:invert due to google meet cal etc all breaking when we do this
-      */}
-      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5 dark:hidden" />}
+      {icon && (
+        <img
+          src={icon}
+          alt="cover"
+          // invert all the icons except app icons
+          className={cx("h-3.5 w-3.5", icon && !icon.startsWith("/api") && "dark:invert")}
+        />
+      )}
       <span className={classNames("text-sm font-medium")}>{label}</span>
     </div>
   );