Fixed dark mode bugs in the availability section (calcom#8630)

* Fixed dark mode bugs in the availability section * Reverted the tooltip change for delete button * Updated tooltip of delete button conditionally based on isLastSchedule flag * fix: disabled button state Signed-off-by: Udit Takkar <[email protected]> --------- Signed-off-by: Udit Takkar <[email protected]> Co-authored-by: Udit Takkar <[email protected]> Co-authored-by: sean-brydon <[email protected]>
SehgalNeeraj · May 14, 2023 · 69bc121 · 69bc121
1 parent 5e77253
commit 69bc121
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
@@ -212,7 +212,7 @@ export default function Availability() {
                 aria-label={t("delete")}
                 className="hidden sm:inline"
                 disabled={schedule?.isLastSchedule}
-                tooltip={t("requires_at_least_one_schedule")}
+                tooltip={schedule?.isLastSchedule ? t("requires_at_least_one_schedule") : t("delete")}
               />
             </DialogTrigger>
             <ConfirmationDialogContent

diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
@@ -215,6 +215,7 @@ const RemoveTimeButton = ({
   remove: UseFieldArrayRemove;
   className?: string;
 }) => {
+  const { t } = useLocale();
   return (
     <Button
       type="button"
@@ -223,6 +224,7 @@ const RemoveTimeButton = ({
       StartIcon={Trash}
       onClick={() => remove(index)}
       className={className}
+      tooltip={t("delete")}
     />
   );
 };

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
@@ -115,19 +115,14 @@ const buttonClasses = cva(
           "hover:bg-subtle focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis",
       }),
       // Destructive variants
-      {
-        disabled: true,
-        color: "destructive",
-        className: "text-red-700/30 hover:text-red-700/30 border border-default text-emphasis",
-      },
       {
         loading: true,
         color: "destructive",
         className:
           "text-red-700/30 dark:text-red-700/30 hover:text-red-700/30  border border-default text-emphasis",
       },
       ...applyStyleToMultipleVariants({
-        disabled: [false, undefined],
+        disabled: [false, true, undefined],
         color: "destructive",
         className:
           "border border-default text-emphasis hover:text-red-700 focus-visible:text-red-700  hover:border-red-100 focus-visible:border-red-100 hover:bg-error  focus-visible:bg-error focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-red-700",