From 3bada22900785978b17a0f53a57f6b62288dbcd2 Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Wed, 14 Sep 2022 15:54:41 +0530
Subject: [PATCH] feat: make toggle button default (#4437)

* feat: make switch default

* fix: refetch invalidated query

* React-query caching the previous isDefault state.

* fix: switch label color

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/pages/v2/availability/[schedule].tsx | 20 ++++++++-----------
 packages/ui/v2/core/Switch.tsx                |  2 +-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/apps/web/pages/v2/availability/[schedule].tsx b/apps/web/pages/v2/availability/[schedule].tsx
index c8a7dcdf53..8315789a43 100644
--- a/apps/web/pages/v2/availability/[schedule].tsx
+++ b/apps/web/pages/v2/availability/[schedule].tsx
@@ -35,6 +35,7 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability.sc
   const updateMutation = trpc.useMutation("viewer.availability.schedule.update", {
     onSuccess: async ({ schedule }) => {
       await utils.invalidateQueries(["viewer.availability.schedule"]);
+      await utils.refetchQueries(["viewer.availability.schedule"]);
       await router.push("/availability");
       showToast(
         t("availability_updated_successfully", {
@@ -72,18 +73,13 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability.sc
         </div>
       </div>
       <div className="min-w-40 col-span-3 ml-2 space-y-2 lg:col-span-1">
-        {props.isDefault ? (
-          <span className="flex items-center">
-            <BadgeCheckIcon className="mr-1 h-4 w-4" /> {t("default")}
-          </span>
-        ) : (
-          <Controller
-            name="isDefault"
-            render={({ field: { onChange, value } }) => (
-              <Switch label={t("set_to_default")} onCheckedChange={onChange} checked={value} />
-            )}
-          />
-        )}
+        <Controller
+          name="isDefault"
+          render={({ field: { onChange, value } }) => (
+            <Switch label={t("set_to_default")} onCheckedChange={onChange} checked={value} />
+          )}
+        />
+
         <div className="xl:max-w-80 w-full">
           <div>
             <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
diff --git a/packages/ui/v2/core/Switch.tsx b/packages/ui/v2/core/Switch.tsx
index a077a66097..76fd5d4b43 100644
--- a/packages/ui/v2/core/Switch.tsx
+++ b/packages/ui/v2/core/Switch.tsx
@@ -42,7 +42,7 @@ const Switch = (
       {label && (
         <Label.Root
           htmlFor={id}
-          className="ml-2 cursor-pointer align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
+          className="ml-2 cursor-pointer align-text-top text-sm font-medium text-gray-900 ltr:ml-3 rtl:mr-3 dark:text-white">
           {label}
         </Label.Root>
       )}