Clean up colors in theme and fix redundant backgroundSize

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',

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}

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"

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>

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"