feat/navigation

- add styles for nav buttons

Author: audi2014

src/components/ContinueButton.tsx

@@ -1,4 +1,5 @@
-import { Button, ModalFooter } from "@chakra-ui/react"
+import { Button, ModalFooter, useStyleConfig } from "@chakra-ui/react"
+import { themeOverrides } from "../theme"
 
 type ContinueButtonProps = {
   onContinue: (val: any) => void
@@ -8,15 +9,18 @@ type ContinueButtonProps = {
   isLoading?: boolean
 }
 
-export const ContinueButton = ({ onContinue, onBack, title, backTitle, isLoading }: ContinueButtonProps) => (
-  <ModalFooter justifyContent={onBack && "space-between"}>
-    {onBack && (
-      <Button size="lg" w="21rem" onClick={onBack} isLoading={isLoading}>
-        {backTitle}
+export const ContinueButton = ({ onContinue, onBack, title, backTitle, isLoading }: ContinueButtonProps) => {
+  const styles = useStyleConfig("Modal") as (typeof themeOverrides)["components"]["Modal"]["baseStyle"]
+  return (
+    <ModalFooter justifyContent={onBack && "space-between"}>
+      {onBack && (
+        <Button size="lg" w="21rem" sx={styles.backButton} onClick={onBack} isLoading={isLoading}>
+          {backTitle}
+        </Button>
+      )}
+      <Button size="lg" w="21rem" sx={styles.continueButton} onClick={onContinue} isLoading={isLoading}>
+        {title}
       </Button>
-    )}
-    <Button size="lg" w="21rem" onClick={onContinue} isLoading={isLoading}>
-      {title}
-    </Button>
-  </ModalFooter>
-)
+    </ModalFooter>
+  )
+}

src/theme.ts

@@ -313,6 +313,8 @@ export const themeOverrides = {
           color: "textColor",
         },
         closeModalButton: {},
+        backButton: {},
+        continueButton: {},
       },
       variants: {
         rsi: {