From d416386d7b305d2a9655414838181e5b83e3ff3b Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Sat, 8 Apr 2023 17:50:17 +0100
Subject: [PATCH] Fix loading state - force subtle token to exist (#8153)

* Fix loading state - force subtle token to exist

* Add opacity
---
 apps/web/pages/auth/login.tsx                  | 1 +
 apps/web/pages/getting-started/[[...step]].tsx | 1 +
 apps/web/pages/signup.tsx                      | 1 +
 packages/ui/components/button/Button.tsx       | 4 ++--
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index 143e16a2dd..f841ec974c 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -131,6 +131,7 @@ export default function Login({
           "--cal-brand": "#111827",
           "--cal-brand-emphasis": "#101010",
           "--cal-brand-text": "white",
+          "--cal-brand-subtle": "#9CA3AF",
         } as CSSProperties
       }>
       <AuthContainer
diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index 0d80af7801..660517573b 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -88,6 +88,7 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
           "--cal-brand": "#111827",
           "--cal-brand-emphasis": "#101010",
           "--cal-brand-text": "white",
+          "--cal-brand-subtle": "#9CA3AF",
         } as CSSProperties
       }
       key={router.asPath}>
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index b8ce131b73..235e2cfb0f 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -80,6 +80,7 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
             "--cal-brand": "#111827",
             "--cal-brand-emphasis": "#101010",
             "--cal-brand-text": "white",
+            "--cal-brand-subtle": "#9CA3AF",
           } as CSSProperties
         }
         aria-labelledby="modal-title"
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 3a50f71df6..a6e948e80e 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -73,12 +73,12 @@ const buttonClasses = cva(
       {
         disabled: true,
         color: "primary",
-        className: "bg-brand-subtle bg-opacity-30",
+        className: "bg-brand-subtle text-brand-subtle opacity-40",
       },
       {
         loading: true,
         color: "primary",
-        className: "bg-brand-default bg-opacity-30 text-brand-subtle",
+        className: "bg-brand-subtle text-brand-subtle",
       },
       // Secondary variants
       {