chore: update styles in playground

devrnt · devrnt · commit a865f0d771d3 · 2021-01-03T10:23:29.000+01:00
diff --git a/playground/components/asyncStep.tsx b/playground/components/asyncStep.tsx
@@ -32,7 +32,7 @@ const Container = styled('div')`
 `;
 
 const P = styled('p')`
-  color: white;
+  color: var(--text);
 `;
 
 const AsyncStep: React.FC<Props> = React.memo(({ number }) => {
diff --git a/playground/components/footer.tsx b/playground/components/footer.tsx
@@ -5,17 +5,31 @@ import { useWizard } from '../../dist';
 import { Button } from '../modules/common';
 
 const Actions = styled('div')`
-  display: grid;
+  display: flex;
   justify-content: center;
   margin: 1rem 0;
-  grid-template-columns: min-content min-content;
   gap: 1rem;
+  flex-direction: row;
 `;
 
 const Info = styled('div')`
   display: flex;
   justify-content: center;
-  gap: 1rem;
+  flex-direction: column;
+  gap: 0;
+
+  & > p {
+    margin: 0.25rem 0;
+  }
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+    gap: 1rem;
+
+    & > p {
+      margin: initial;
+    }
+  }
 `;
 
 const Footer: React.FC = React.memo(() => {
diff --git a/playground/components/step.tsx b/playground/components/step.tsx
@@ -21,7 +21,7 @@ const Container = styled('div')`
 `;
 
 const P = styled('p')`
-  color: white;
+  color: var(--text);
 `;
 
 const Step: React.FC<Props> = React.memo(({ number, withCallback = true }) => {
diff --git a/playground/modules/common/button.tsx b/playground/modules/common/button.tsx
@@ -12,7 +12,7 @@ const Container = styled('button')`
   border: 1px solid var(--purple);
   padding: 0.7rem 1.75rem;
   border-radius: 6px;
-  color: white;
+  color: var(--text);
   font-size: 1.1rem;
   font-weight: 700;
   background-color: var(--dark);
@@ -27,6 +27,7 @@ const Container = styled('button')`
   &:disabled {
     opacity: 0.4;
     background-image: initial;
+    cursor: initial;
   }
 `;
 
diff --git a/playground/modules/common/page.tsx b/playground/modules/common/page.tsx
@@ -14,6 +14,7 @@ const Container = styled('main')`
   display: flex;
   justify-content: center;
   background: var(--dark);
+  overflow: hidden;
 `;
 
 const Wrapper = styled('div')`
@@ -27,29 +28,35 @@ const Body = styled('div')`
 const Description = styled('div')`
   font-size: 1.1rem;
   font-weight: 200;
+  line-height: 1.5rem;
 `;
 
 const Divider = styled('div')`
   height: 2px;
-  width: 7%;
+  width: 15%;
   background-image: linear-gradient(48.66deg, var(--purple), var(--blue));
-  margin: 2.5rem 0;
+  margin: 2.5rem auto;
   display: flex;
+
+  @media screen and (min-width: 800px) {
+    max-width: 7%;
+  }
 `;
 
 const TopBar = styled('header')`
   position: sticky;
   top: 0;
   left: 0;
   right: 0;
-  padding: 1.5rem 1.75rem;
+  padding: 1.75rem 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 4rem;
+  margin-bottom: 5rem;
   background-color: var(--nav);
   backdrop-filter: blur(20px);
   z-index: 1000;
+  width: 100%;
 `;
 
 const Logo = styled('img')`
@@ -62,11 +69,19 @@ const GithubLogo = styled('img')`
 `;
 
 const MaxWidth = styled('div')`
-  max-width: 53rem;
+  width: 100%;
   padding: 0 2rem;
   margin: 0 auto;
   justify-content: space-between;
-  width: 100%;
+
+  @media screen and (min-width: 800px) {
+    max-width: 53rem;
+    padding: 0 2rem;
+  }
+`;
+
+const H1 = styled('h1')`
+  font-size: 2.25rem;
 `;
 
 const Page = ({ title, description, children }: Props) => {
@@ -77,6 +92,7 @@ const Page = ({ title, description, children }: Props) => {
           <MaxWidth
             style={{
               display: 'flex',
+              alignItems: 'center',
             }}
           >
             <Logo src={logoPath} />
@@ -90,7 +106,7 @@ const Page = ({ title, description, children }: Props) => {
           </MaxWidth>
         </TopBar>
         <MaxWidth>
-          <h1>{title}</h1>
+          <H1>{title}</H1>
           <Description>{description}</Description>
           <Divider />
           <Body>{children}</Body>
diff --git a/playground/modules/common/style.tsx b/playground/modules/common/style.tsx
@@ -11,6 +11,11 @@ const GlobalStyle = createGlobalStyles`
     --blue: #08D8F4;
     --code:#260949;
     --step:#170231;
+    --text: #cccccc;
+  }
+
+  * {
+    box-sizing: border-box;
   }
 
   html {
@@ -31,7 +36,7 @@ const GlobalStyle = createGlobalStyles`
   body {
     font-family: 'Inter', Helvetica, sans-serif;
     text-rendering: optimizeLegibility;
-    color: white;
+    color: var(--text);
   }
 
   i {
@@ -44,7 +49,7 @@ const GlobalStyle = createGlobalStyles`
     border-radius: 2px;
     font-family: 'Fira Code', monospace;
     font-size: 0.95rem;
-    padding: 0.75rem 0.35rem;
+    padding: 0.75rem 1rem;
   }
 `;
 
diff --git a/playground/modules/wizard/wizard.tsx b/playground/modules/wizard/wizard.tsx
@@ -1,12 +1,12 @@
-import { styled } from 'goober';
+import { css, styled } from 'goober';
 import * as React from 'react';
 
 import { Wizard } from '../../../dist';
 import { AnimatedStep, AsyncStep, Footer, Step } from '../../components';
 
-const Grid = styled('section')`
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
+const Container = styled('section')`
+  display: flex;
+  flex-direction: column;
   width: 100%;
 `;
 
@@ -21,27 +21,45 @@ const Title = styled('h2')`
   }
 `;
 
-const Item = styled('div')`
-  display: grid;
-  grid-template-rows: min-content;
+const Item = styled('div')<{ showDivider: boolean }>`
+  display: flex;
+  flex-direction: column;
 
   &::after {
-    content: '';
     margin: 3rem 0 2rem;
+    content: '';
     background-image: linear-gradient(48.66deg, var(--purple), var(--blue));
     width: 100%;
     position: relative;
-    height: 1px;
+    height: ${({ showDivider }) => (showDivider ? '1px' : 0)};
   }
+
+  ${({ showDivider }) =>
+    showDivider
+      ? `
+          &::after {
+            margin: 3rem 0 2rem;
+            content: '';
+            background-image: linear-gradient(
+              48.66deg,
+              var(--purple),
+              var(--blue)
+            );
+            width: 100%;
+            position: relative;
+            height: 1px;
+          }
+        `
+      : ''}
 `;
 
 const WizardModule = () => {
   return (
-    <Grid>
+    <Container>
       <Title>
         Simple wizard <span>mix of async and sync steps</span>
       </Title>
-      <Item>
+      <Item showDivider>
         <Wizard footer={<Footer />}>
           <AsyncStep number={1} />
           <Step number={2} />
@@ -51,9 +69,9 @@ const WizardModule = () => {
       </Item>
 
       <Title>
-        Animated wizard <span>animations by framer motion</span>
+        Animated wizard <span>animation by framer motion</span>
       </Title>
-      <Item>
+      <Item showDivider={false}>
         <Wizard footer={<Footer />}>
           <AnimatedStep>
             <Step number={1} withCallback={false} />
@@ -69,7 +87,7 @@ const WizardModule = () => {
           </AnimatedStep>
         </Wizard>
       </Item>
-    </Grid>
+    </Container>
   );
 };
 
