feat: more atoms styles (#22976)

* feat: availability override classnames * feat: availability time picker styles * feat: calendar settings headers styles * feat: destination and connected calendars * feat: date override title,description,button * feat: selected calendars list * example styles * docs * chanegest * refactor: change import path to relative * fix: make all classnames optional * docs: time picker docs --------- Co-authored-by: Somay Chauhan <somaychauhan98@gmail.com>
2025-08-12 21:35:06 +09:00
parent 6c6cf0433a
commit abe92cd693
13 changed files with 355 additions and 51 deletions
@@ -1,6 +1,6 @@
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
-import { useRef, useCallback, useState } from "react";
+import { useRef, useCallback } from "react";

 import type { AvailabilitySettingsFormRef } from "@calcom/atoms";
 import { AvailabilitySettings } from "@calcom/atoms";
@@ -57,6 +57,27 @@ export default function Availability(props: { calUsername: string; calEmail: str
            ctaClassName: "border p-4 rounded-md",
            editableHeadingClassName: "underline font-semibold",
            hiddenSwitchClassname: { thumb: "bg-red-500" },
+            scheduleClassNames: {
+              schedule: "bg-blue-50 border-2 border-blue-200 rounded-lg p-4",
+              scheduleDay: "bg-green-50 border border-green-300 rounded-md mb-2",
+              dayRanges: "bg-yellow-50 p-3 rounded border-l-4 border-yellow-400",
+              timeRangeField: "!text-2xl bg-red-50 border-2 border-red-300 rounded-xl px-4 py-2",
+              labelAndSwitchContainer: "bg-purple-50 border border-purple-200 rounded p-2",
+              scheduleContainer: "bg-gray-100 border-4 border-gray-400 rounded-2xl shadow-lg",
+              timePicker: {
+                container: "!bg-blue-900",
+                valueContainer: "!bg-pink-500",
+                value: "!bg-yellow-500",
+                input: "!bg-green-500",
+                dropdown: "!bg-cyan-500",
+              },
+            },
+            dateOverrideClassNames: {
+              container: "p-4 bg-gray-900 rounded-md",
+              title: "text-red-500 font-bold",
+              description: "text-white",
+              button: "text-black",
+            },
          }}
          onFormStateChange={handleFormStateChange}
          onUpdateSuccess={() => {
@@ -10,7 +10,43 @@ export default function Calendars(props: { calUsername: string; calEmail: string
    <main className={`flex min-h-screen flex-col ${inter.className}`}>
      <Navbar username={props.calUsername} />
      <div>
-        <CalendarSettings allowDelete={true} />
+        <CalendarSettings
+          allowDelete={true}
+          classNames={{
+            destinationCalendarSettingsClassNames: {
+              container: "bg-red-200",
+              header: {
+                container: "bg-gray-200",
+                title: "text-green-500",
+                description: "text-red-500",
+              },
+            },
+            selectedCalendarSettingsClassNames: {
+              container: "mx-5 mb-6",
+              header: {
+                container: "bg-gray-200 rounded-md",
+                title: "text-green-500",
+                description: "text-red-500",
+              },
+              noSelectedCalendarsMessage: "text-blue-500",
+              selectedCalendarsListClassNames: {
+                container: "bg-yellow-100",
+                selectedCalendar: {
+                  container: "bg-yellow-200",
+                  header: {
+                    container: "bg-yellow-500",
+                    title: "text-green-500",
+                    description: "text-red-500",
+                  },
+                  body: {
+                    container: "bg-yellow-500",
+                    description: "text-red-500",
+                  },
+                },
+              },
+            },
+          }}
+        />
      </div>
    </main>
  );