Clean up colors in theme and fix redundant backgroundSize

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"