Theme skip setup card

src/components/overlays/Modal.tsx

@@ -19,7 +19,7 @@ export function useModal(id: string) {
 export function ModalCard(props: { children?: ReactNode }) {
   return (
     <div className="w-full max-w-[30rem] m-4">
-      <div className="w-full bg-dropdown-background rounded-xl p-8 pointer-events-auto">
+      <div className="w-full bg-modal-background rounded-xl p-8 pointer-events-auto">
         {props.children}
       </div>
     </div>

src/pages/onboarding/Onboarding.tsx

@@ -31,18 +31,20 @@ export function OnboardingPage() {
       <PageTitle subpage k="global.pages.onboarding" />
       <Modal id={skipModal.id}>
         <ModalCard>
-          <ModalCard>
+          <Heading1 className="!mt-0 !mb-4 !text-2xl">
-            <Heading1 className="!mt-0">
             {t("onboarding.defaultConfirm.title")}
           </Heading1>
-            <Paragraph>{t("onboarding.defaultConfirm.description")}</Paragraph>
+          <Paragraph className="!mt-1 !mb-12">
+            {t("onboarding.defaultConfirm.description")}
+          </Paragraph>
+          <div className="flex items-end justify-between">
             <Button theme="secondary" onClick={skipModal.hide}>
               {t("onboarding.defaultConfirm.cancel")}
             </Button>
-            <Button theme="danger" onClick={() => completeAndRedirect()}>
+            <Button theme="purple" onClick={() => completeAndRedirect()}>
               {t("onboarding.defaultConfirm.confirm")}
             </Button>
-          </ModalCard>
+          </div>
         </ModalCard>
       </Modal>
       <CenterContainer>

themes/default.ts

@@ -138,6 +138,11 @@ export const defaultTheme = {
         accentB: tokens.blue.c500,
       },
 
+      // Modals
+      modal: {
+        background: tokens.shade.c800,
+      },
+      
       // typography
       type: {
         logo: tokens.purple.c100,

themes/list/blue.ts

@@ -95,6 +95,10 @@ export default createTheme({
         accentB: tokens.blue.c500
       },
 
+      modal: {
+        background: tokens.shade.c800,
+      },
+
       type: {
         logo: tokens.purple.c100,
         text: tokens.shade.c50,

themes/list/gray.ts

@@ -95,6 +95,10 @@ export default createTheme({
         accentB: tokens.blue.c500
       },
 
+      modal: {
+        background: tokens.shade.c800,
+      },
+
       type: {
         logo: tokens.purple.c100,
         text: tokens.shade.c50,

themes/list/red.ts

@@ -95,6 +95,10 @@ export default createTheme({
         accentB: tokens.blue.c500
       },
 
+      modal: {
+        background: tokens.shade.c800,
+      },
+
       type: {
         logo: tokens.purple.c100,
         text: tokens.shade.c50,

themes/list/teal.ts

@@ -95,6 +95,10 @@ export default createTheme({
         accentB: tokens.blue.c500
       },
 
+      modal: {
+        background: tokens.shade.c800,
+      },
+
       type: {
         logo: tokens.purple.c100,
         text: tokens.shade.c50,