finishes them and color updates

0xBootleggers · Aug 23, 2023 · 52a964e · 52a964e
1 parent ba2797c
commit 52a964e
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 59 deletions.
diff --git a/src/components/customFields/SummonersField.tsx b/src/components/customFields/SummonersField.tsx
@@ -37,6 +37,10 @@ const RowWrapper = styled.div`
   }
 `;
 
+const CancelButton = styled(Button)`
+  margin-top: 3rem;
+`;
+
 export const SummonersField = (props: Buildable<Field>) => {
   const { unregister, getValues } = useFormContext();
 
@@ -104,15 +108,18 @@ export const SummonersField = (props: Buildable<Field>) => {
               placeholder="0"
             />
             {rows.length > 1 && (
-              <Button onClick={() => handleRemove(slotNumber)} variant="ghost">
+              <CancelButton
+                onClick={() => handleRemove(slotNumber)}
+                variant="ghost"
+              >
                 <RiCloseLine fontSize="3rem" />
-              </Button>
+              </CancelButton>
             )}
           </RowWrapper>
         );
       })}
       <div>
-        <Button onClick={handleAdd} variant="outline">
+        <Button onClick={handleAdd} color="secondary">
           Add
         </Button>
       </div>

diff --git a/src/formWizard/components/Collapser.tsx b/src/formWizard/components/Collapser.tsx
@@ -8,6 +8,7 @@ export const CollapseContainer = styled(Card)`
   border: none;
   width: 100%;
   margin: 3rem 0;
+  background-color: ${({ theme }: { theme: any }) => theme.collapser.bg};
 `;
 
 export const StyledUpArrow = styled(RiArrowUpSLine)`

diff --git a/src/formWizard/components/Confirmation.tsx b/src/formWizard/components/Confirmation.tsx
@@ -14,15 +14,6 @@ const ButtonRow = styled.div`
   gap: 2rem;
 `;
 
-const DataRow = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  padding: 2rem 2rem 0 2rem;
-`;
-
 const ConfirmTitle = styled.div`
   margin-bottom: 3rem;
 `;
@@ -76,10 +67,15 @@ export const Confirmation = ({
         <Button
           onClick={() => setCurrentStepIndex(currentStepIndex - 1)}
           disabled={submitDisabled || isLoading}
+          color="secondary"
         >
           Previous
         </Button>
-        <Button onClick={handleSubmit} disabled={submitDisabled || isLoading}>
+        <Button
+          onClick={handleSubmit}
+          disabled={submitDisabled || isLoading}
+          color="primary"
+        >
           {submitButtonText || "Deploy"}
         </Button>
       </ButtonRow>

diff --git a/src/formWizard/components/FormFooter.tsx b/src/formWizard/components/FormFooter.tsx
@@ -60,7 +60,10 @@ export const FormFooter = ({
 
       <ButtonRow>
         {currentStepIndex > 0 && (
-          <Button onClick={() => setCurrentStepIndex(currentStepIndex - 1)}>
+          <Button
+            onClick={() => setCurrentStepIndex(currentStepIndex - 1)}
+            color="secondary"
+          >
             Previous
           </Button>
         )}
@@ -69,13 +72,14 @@ export const FormFooter = ({
           <Button
             onClick={() => setCurrentStepIndex(currentStepIndex + 1)}
             disabled={submitDisabled}
+            color="primary"
           >
             Next
           </Button>
         )}
 
         {currentStepIndex === stepCount - 1 && (
-          <Button type="submit" disabled={submitDisabled}>
+          <Button type="submit" disabled={submitDisabled} color="primary">
             Next
           </Button>
         )}

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -117,7 +117,7 @@ export const Home = () => {
         </div>
       </Headlines>
       <ButtonLinks>
-        <Button variant="outline">
+        <Button color="primary">
           <RouterLinkButton to="/invoke">Create</RouterLinkButton>
         </Button>
         <Button color="secondary">

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -1,10 +1,11 @@
 import {
-  ButtonTheme,
   ThemeOverrides,
   dangerDarkBtn,
+  defaultDarkTheme,
+  primaryDarkBtn,
+  secondaryDarkBtn,
   successDarkBtn,
   warningDarkBtn,
-  defaultDarkTheme,
 } from "@daohaus/ui";
 
 export const grayDark = {
@@ -22,49 +23,60 @@ export const grayDark = {
   step12: "hsl(0, 0%, 93.5%)",
 };
 
-// export const invokeDarkBtn: ButtonTheme = {
-export const invokeDarkBtn = {
+export const invokeMono = {
+  step1: "hsl(0, 0%, 100%)",
+  step2: "hsl(0, 0%, 66%)",
+  step3: "hsl(0, 0%, 22%)",
+  step4: "hsl(0, 0%, 0%)",
+  step5: "rgba(255, 0, 0, 0)",
+};
+
+export const invokePrimaryBtn = {
+  ...primaryDarkBtn,
   solid: {
-    text: grayDark.step12,
-    bg: grayDark.step4,
-    border: grayDark.step12,
-    bgHover: grayDark.step10,
-    borderHover: grayDark.step10,
-    bgFocus: grayDark.step9,
-    borderFocus: grayDark.step11,
-    bgDisabled: grayDark.step6,
-    borderDisabled: grayDark.step6,
-  },
-  outline: {
-    text: grayDark.step12,
-    border: grayDark.step12,
-    hover: grayDark.step10,
-    focus: grayDark.step11,
-    disabled: grayDark.step6,
+    text: invokeMono.step1,
+    bg: invokeMono.step5,
+    border: invokeMono.step1,
+    bgHover: invokeMono.step5,
+    borderHover: invokeMono.step2,
+    bgFocus: invokeMono.step2,
+    borderFocus: invokeMono.step1,
+    bgDisabled: invokeMono.step5,
+    borderDisabled: invokeMono.step3,
   },
   ghost: {
-    text: grayDark.step10,
-    bgHover: grayDark.step3,
-    borderFocus: grayDark.step4,
-    disabled: grayDark.step8,
+    text: invokeMono.step1,
+    bgHover: invokeMono.step4,
+    borderFocus: invokeMono.step4,
+    disabled: invokeMono.step4,
   },
-  link: {
-    text: grayDark.step9,
-    hover: grayDark.step10,
-    focus: grayDark.step11,
-    disabled: grayDark.step6,
+};
+
+export const invokeSecondaryBtn = {
+  ...secondaryDarkBtn,
+  solid: {
+    text: invokeMono.step1,
+    bg: invokeMono.step3,
+    border: invokeMono.step3,
+    bgHover: invokeMono.step2,
+    borderHover: invokeMono.step2,
+    bgFocus: invokeMono.step3,
+    borderFocus: invokeMono.step1,
+    bgDisabled: invokeMono.step3,
+    borderDisabled: invokeMono.step3,
   },
 };
 
 export const invokeTheme: ThemeOverrides = {
   themeName: "invoke",
   rootBgColor: "rgba(0,0,0,0.5)",
-  rootFontColor: grayDark.step12,
+  rootFontColor: invokeMono.step1,
   border: {
     radius: "1px",
   },
   collapser: {
-    iconColor: grayDark.step9,
+    iconColor: invokeMono.step2,
+    bg: invokeMono.step3,
   },
   font: {
     family: {
@@ -92,25 +104,35 @@ export const invokeTheme: ThemeOverrides = {
     lineHeight: "150%",
     letterSpacing: "1.5px",
   },
+  field: {
+    ...defaultDarkTheme.field,
+    radius: "4px",
+  },
   button: {
-    primary: invokeDarkBtn,
-    secondary: invokeDarkBtn,
-    success: invokeDarkBtn,
-    warning: invokeDarkBtn,
-    danger: invokeDarkBtn,
+    primary: invokePrimaryBtn,
+    secondary: invokeSecondaryBtn,
+    success: successDarkBtn,
+    warning: warningDarkBtn,
+    danger: dangerDarkBtn,
+    radius: "4px",
   },
   card: {
-    bg: grayDark.step4,
-    border: grayDark.step4,
-    radius: "0rem",
+    bg: invokeMono.step4,
+    border: invokeMono.step1,
+    radius: "8px",
   },
   input: {
     ...defaultDarkTheme.input,
-    border: grayDark.step3,
-    bg: grayDark.step3,
+    border: invokeMono.step3,
+    bg: invokeMono.step3,
+    color: invokeMono.step1,
     hover: {
-      bg: grayDark.step4,
-      border: grayDark.step4,
+      bg: invokeMono.step3,
+      border: invokeMono.step1,
+    },
+    focus: {
+      bg: invokeMono.step3,
+      border: invokeMono.step1,
     },
   },
 };
diff --git a/vite.config.ts b/vite.config.ts
@@ -13,6 +13,7 @@ export default ({ mode }) => {
         NX_INFURA_PROJECT_ID: process.env.VITE_INFURA_PROJECT_ID,
         NX_ETHERSCAN_KEY: process.env.VITE_ETHERSCAN_KEY,
         NX_WALLET_CONNECT_ID: process.env.VITE_WALLET_CONNECT_ID,
+        NX_ARBISCAN_KEY: process.env.VITE_ARBISCAN_KEY,
       },
     },
     optimizeDeps: {