fix(ui): Fixing some color issues.

monetr · Nov 10, 2022 · 8698d43 · 8698d43
1 parent bc66e9a
commit 8698d43
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -15,6 +15,20 @@ module.exports = {
     'text-gray-500',
   ],
   theme: {
+    colors: {
+      purple: {
+        "50": "#EDE5FB",
+        "100": "#D8C6F6",
+        "200": "#B591ED",
+        "300": "#8E58E4",
+        "400": "#6823D7",
+        "500": "#4E1AA0",
+        "600": "#3E157F",
+        "700": "#2F1060",
+        "800": "#200B42",
+        "900": "#0F051F"
+      },
+    },
     screens: {
       'sm': '640px',
       // => @media (min-width: 640px) { ... }

diff --git a/ui/components/Plaid/PlaidButton.tsx b/ui/components/Plaid/PlaidButton.tsx
@@ -1,12 +1,11 @@
-import MButton from 'components/MButton';
 import React, { Fragment, useEffect, useState } from 'react';
 import {
   PlaidLinkOnEvent,
   PlaidLinkOnExit,   PlaidLinkOnLoad,
   PlaidLinkOnSuccess,
   PlaidLinkOptionsWithLinkToken,
   usePlaidLink } from 'react-plaid-link';
-import { Button, ButtonBase, ButtonProps, CircularProgress } from '@mui/material';
+import { Button, ButtonProps, CircularProgress } from '@mui/material';
 import * as Sentry from '@sentry/react';
 import classnames from 'classnames';
 import { useSnackbar } from 'notistack';
@@ -136,7 +135,7 @@ const HookedPlaidButton = (props: HookedPropTypes) => {
   };
 
   return (
-    <MButton { ...newProps } />
+    <Button { ...newProps } />
   );
 };
 

diff --git a/ui/theme.ts b/ui/theme.ts
@@ -1,11 +1,13 @@
 import { createTheme, darken } from '@mui/material';
-import resolveConfig from 'tailwindcss/resolveConfig';
+
 import tailwindConfig from '../tailwind.config.js';
 
+import resolveConfig from 'tailwindcss/resolveConfig';
+
 const fullConfig = resolveConfig(tailwindConfig);
 const darkMode = false; // window.localStorage.getItem('darkMode') === 'true';
 const inputHeight = 56; // Default is 56
-const defaultPrimary = '#4E1AA0';
+const defaultPrimary = fullConfig.theme.colors['purple']['500']; // '#4E1AA0';
 const defaultSecondary = '#FF5798';
 
 const theme = createTheme({

diff --git a/ui/views/Setup/InitialPlaidSetup.tsx b/ui/views/Setup/InitialPlaidSetup.tsx
@@ -188,6 +188,7 @@ export default function InitialPlaidSetup(): JSX.Element {
             </div>
             <div className="w-full pt-2.5 pb-2.5">
               <PlaidButton
+                className='w-full'
                 color="primary"
                 disabled={ state.loading }
                 plaidOnSuccess={ onPlaidSuccess }
@@ -204,7 +205,7 @@ export default function InitialPlaidSetup(): JSX.Element {
         <div className="flex-initial w-full pt-2.5 pb-2.5">
           <Button
             onClick={ logout }
-            className="w-full opacity-50"
+            className="w-full"
           >
             Logout
           </Button>