chore: fixing darkmode data table (#11195)

apps/web/public/static/locales/en/common.json

@@ -2045,5 +2045,6 @@
   "recently_added":"Recently added",
   "no_members_found": "No members found",
   "event_setup_length_error":"Event Setup: The duration must be at least 1 minute.",
+  "availability_schedules":"Availability Schedules",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

apps/web/styles/globals.css

@@ -93,6 +93,12 @@
   --cal-brand-text: black;
 }
 
+@layer base {
+  * {
+    @apply border-default 
+  }
+}
+
 ::-moz-selection {
   color: var(--cal-brand-text);
   background: var(--cal-brand);

packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx

@@ -103,7 +103,7 @@ export function AvailabilitySliderTable() {
             .padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
 
           return (
-            <div className="flex flex-col">
+            <div className="flex flex-col text-center">
               <span className="text-default text-sm font-medium">{time}</span>
               <span className="text-subtle text-xs leading-none">GMT {offsetFormatted}</span>
             </div>

packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx

@@ -5,7 +5,7 @@ import { useOrgBranding } from "@calcom/ee/organizations/context/provider";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Sheet, SheetContent, SheetFooter, Avatar, Skeleton, Loader } from "@calcom/ui";
+import { Sheet, SheetContent, SheetFooter, Avatar, Skeleton, Loader, Label } from "@calcom/ui";
 
 import type { State, Action } from "../UserListTable";
 import { DisplayInfo } from "./DisplayInfo";
@@ -69,14 +69,23 @@ export function EditUserSheet({ state, dispatch }: { state: State; dispatch: Dis
                   />
                   <DisplayInfo label={t("role")} value={loadedUser?.role ?? ""} asBadge badgeColor="blue" />
                   <DisplayInfo label={t("timezone")} value={loadedUser?.timeZone ?? ""} />
-                  <DisplayInfo
-                    label={t("availability_schedules")}
-                    value={
-                      schedulesNames && schedulesNames?.length === 0
-                        ? [t("user_has_no_schedules")]
-                        : schedulesNames ?? "" // TS wtf
-                    }
-                  />
+                  <div className="flex flex-col">
+                    <Label className="text-subtle mb-1 text-xs font-semibold uppercase leading-none">
+                      {t("availability_schedules")}
+                    </Label>
+                    <div className="flex flex-col">
+                      {schedulesNames
+                        ? schedulesNames.map((scheduleName) => (
+                            <span
+                              key={scheduleName}
+                              className="text-emphasis inline-flex items-center gap-1 text-sm font-normal leading-5">
+                              {scheduleName}
+                            </span>
+                          ))
+                        : t("user_has_no_schedules")}
+                    </div>
+                  </div>
+
                   <DisplayInfo
                     label={t("teams")}
                     displayCount={teamNames?.length ?? 0}

packages/ui/components/command/index.tsx

@@ -108,7 +108,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={classNames(
-      "aria-selected:bg-subtle aria-selected:text-emphasis relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "aria-selected:bg-muted aria-selected:text-emphasis relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}

packages/ui/components/table/TableNew.tsx

@@ -36,10 +36,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
-      className={classNames(
-        "hover:bg-subtle data-[state=selected]:bg-subtle border-subtle border-b",
-        className
-      )}
+      className={classNames("hover:muted data-[state=selected]:bg-muted border-subtle border-b", className)}
       {...props}
     />
   )