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

@@ -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">

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>
       )}