From 9b4e36b2c39d26e8fa2ccbeb0fea5a9280e7e77e Mon Sep 17 00:00:00 2001
From: Hammad Jutt <jutt@ualberta.ca>
Date: Mon, 17 Aug 2020 14:14:54 -0600
Subject: [PATCH] Clean up colors in theme and fix redundant backgroundSize

---
 packages/design-system/src/theme.ts     | 6 ++----
 packages/web/components/Container.tsx   | 1 -
 packages/web/components/SetupHeader.tsx | 2 +-
 packages/web/pages/index.tsx            | 2 +-
 packages/web/pages/login.tsx            | 5 +----
 5 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/src/theme.ts b/packages/design-system/src/theme.ts
index fe394e4a..52069d6c 100644
--- a/packages/design-system/src/theme.ts
+++ b/packages/design-system/src/theme.ts
@@ -2,14 +2,13 @@ import chakraTheme, { Theme as ChakraTheme } from '@chakra-ui/theme';
 
 interface MetaColors {
   offwhite: string;
-  blue02: string;
+  blue20: string;
   dark: string;
   purpleBoxDark: string;
   purpleBoxLight: string;
   purpleTag: string;
   blueLight: string;
   cyanText: string;
-  dark60: string;
   diamond: string;
   platinum: string;
   gold: string;
@@ -65,8 +64,7 @@ export const theme: Theme = {
     silver: '#b0b0b0',
     bronze: '#a97142',
     offwhite: '#F6F8F9',
-    blue02: 'rgba(79, 105, 205, 0.2)',
-    dark60: 'rgba(0,0,0, 0.6)',
+    blue20: 'rgba(79, 105, 205, 0.2)',
     dark: '#1B0D2A',
     purpleBoxDark: '#261943',
     purpleBoxLight: '#392373',
diff --git a/packages/web/components/Container.tsx b/packages/web/components/Container.tsx
index 50da3cd9..6ce389ce 100644
--- a/packages/web/components/Container.tsx
+++ b/packages/web/components/Container.tsx
@@ -11,7 +11,6 @@ export const PageContainer: React.FC<Props> = ({ children, ...props }) => (
     p={12}
     direction="column"
     align="center"
-    backgroundSize="cover"
     {...props}
   >
     {children}
diff --git a/packages/web/components/SetupHeader.tsx b/packages/web/components/SetupHeader.tsx
index 394902a1..50bd1f0a 100644
--- a/packages/web/components/SetupHeader.tsx
+++ b/packages/web/components/SetupHeader.tsx
@@ -67,7 +67,7 @@ export const StepProgress: React.FC<StepProps> = ({
       {title}
     </Text>
     <Flex
-      bgColor="blue02"
+      bgColor="blue20"
       w="100%"
       h="0.5rem"
       borderRadius="0.25rem"
diff --git a/packages/web/pages/index.tsx b/packages/web/pages/index.tsx
index 0a65523b..470b5572 100644
--- a/packages/web/pages/index.tsx
+++ b/packages/web/pages/index.tsx
@@ -43,7 +43,7 @@ const Home: React.FC<Props> = ({ players }) => (
                   backgroundColor={p.rank?.toLowerCase()}
                   mr="3"
                   size="md"
-                  color="dark60"
+                  color="blackAlpha.600"
                 >
                   {p.rank}
                 </MetaTag>
diff --git a/packages/web/pages/login.tsx b/packages/web/pages/login.tsx
index fd73172d..bcd327cd 100644
--- a/packages/web/pages/login.tsx
+++ b/packages/web/pages/login.tsx
@@ -11,10 +11,7 @@ import MetaGameImage from '../public/images/metagame.png';
 const Login: React.FC = () => {
   const [step, setStep] = useState(0);
   return (
-    <PageContainer
-      backgroundImage={`url(${BackgroundImage})`}
-      backgroundSize="cover"
-    >
+    <PageContainer backgroundImage={`url(${BackgroundImage})`}>
       <SimpleGrid
         columns={3}
         alignItems="center"