Merge pull request #34 from storybookjs/welcome-modal-animation

Welcome modal animation
storybookjs · Jun 6, 2023 · d5c20f0 · d5c20f0
2 parents 9006d11 + 0b84104
commit d5c20f0
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 88 deletions.
diff --git a/src/components/Icons/StorybookLogo.tsx → src/features/WelcomeModal/StorybookLogo.tsx b/src/components/Icons/StorybookLogo.tsx → src/features/WelcomeModal/StorybookLogo.tsx
diff --git a/src/features/WelcomeModal/WelcomeModal.styled.tsx b/src/features/WelcomeModal/WelcomeModal.styled.tsx
@@ -1,95 +1,133 @@
 import { Icons } from "@storybook/components";
 import { keyframes, styled } from "@storybook/theming";
 
-export const Title = styled.h1`
-  color: #2e3438;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 20px;
-`;
-
-export const Description = styled.p`
-  text-align: center;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  color: #454e54;
-`;
-
-export const rainbowAnimation = keyframes`
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-`;
-
 export const ModalContentWrapper = styled.div`
-  background: radial-gradient(
-        circle at left,
-        #ffccd2,
-        #ffdbcb,
-        #ffe9c5,
-        #fff8c0,
-        #f2ffd8,
-        #d2f8e5,
-        #b3f0f1,
-        #a1e6f0,
-        #9fd8df
-      )
-      left,
-    radial-gradient(
-        circle at right,
-        #ffccd2,
-        #ffdbcb,
-        #ffe9c5,
-        #fff8c0,
-        #f2ffd8,
-        #d2f8e5,
-        #b3f0f1,
-        #a1e6f0,
-        #9fd8df
-      )
-      right,
-    linear-gradient(
-      45deg,
-      #ffccd2,
-      #ffdbcb,
-      #ffe9c5,
-      #fff8c0,
-      #f2ffd8,
-      #d2f8e5,
-      #b3f0f1,
-      #a1e6f0,
-      #9fd8df
-    );
-  background-size: 300% 300%;
-  background-repeat: no-repeat;
-  animation: ${rainbowAnimation} 10s linear infinite;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 100px;
-  padding-bottom: 20px;
+  height: 100%;
+  justify-content: space-between;
 `;
 
-export const StyledIcon = styled(Icons)`
-  margin-left: 2px;
-  height: 10px;
+export const TopContent = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Title = styled.h1`
+  margin: 0;
+  margin-top: 20px;
+  margin-bottom: 5px;
+  color: ${({ theme }) => theme.color.darkest};
+  font-weight: ${({ theme }) => theme.typography.weight.bold};
+  font-size: ${({ theme }) => theme.typography.size.m1}px;
+  line-height: ${({ theme }) => theme.typography.size.m3}px;
+`;
+
+export const Description = styled.p`
+  margin: 0;
+  margin-bottom: 20px;
+  max-width: 320px;
+  text-align: center;
+  font-size: ${({ theme }) => theme.typography.size.s2}px;
+  font-weight: ${({ theme }) => theme.typography.weight.regular};
+  line-height: ${({ theme }) => theme.typography.size.m1}px;
+  color: ${({ theme }) => theme.color.darker};
 `;
 
 export const SkipButton = styled.button`
   all: unset;
-  margin-top: 90px;
   cursor: pointer;
   font-size: 13px;
   color: #798186;
-  :focus-visible {
+  padding-bottom: 20px;
+
+  &:focus-visible {
     outline: auto;
   }
 `;
+
+export const StyledIcon = styled(Icons)`
+  margin-left: 2px;
+  height: 10px;
+`;
+
+export const Background = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  overflow: hidden;
+`;
+
+export const circle1Anim = keyframes`
+  0% { transform: translate(0px, 0px) }
+  50% { transform: translate(-200px, 0px) }
+  100% { transform: translate(0px, 0px) }
+`;
+
+export const Circle1 = styled.div`
+  position: absolute;
+  width: 1200px;
+  height: 1200px;
+  left: -200px;
+  top: -900px;
+  background: radial-gradient(
+    circle at center,
+    rgba(253, 255, 147, 1) 0%,
+    rgba(253, 255, 147, 0) 70%
+  );
+  animation: ${circle1Anim} 4s linear infinite;
+  animation-timing-function: ease-in-out;
+  z-index: 3;
+`;
+
+export const circle2Anim = keyframes`
+  0% { transform: translate(0px, 0px) }
+  50% { transform: translate(400px, 0px) }
+  100% { transform: translate(0px, 0px) }
+`;
+
+export const Circle2 = styled.div`
+  position: absolute;
+  width: 1200px;
+  height: 1200px;
+  left: -600px;
+  top: -840px;
+  background: radial-gradient(
+    circle at center,
+    rgba(255, 119, 119, 1) 0%,
+    rgba(255, 119, 119, 0) 70%
+  );
+  animation: ${circle2Anim} 6s linear infinite;
+  animation-timing-function: ease-in-out;
+  z-index: 2;
+`;
+
+export const circle3Anim = keyframes`
+  0% { transform: translate(600px, -40px) }
+  50% { transform: translate(600px, -200px) }
+  100% { transform: translate(600px, -40px) }
+`;
+
+export const Circle3 = styled.div`
+  position: absolute;
+  width: 1200px;
+  height: 1200px;
+  left: -600px;
+  top: -840px;
+  background: radial-gradient(
+    circle at center,
+    rgba(119, 255, 247, 0.8) 0%,
+    rgba(119, 255, 247, 0) 70%
+  );
+  animation: ${circle3Anim} 4s linear infinite;
+  animation-timing-function: ease-in-out;
+  z-index: 4;
+`;
diff --git a/src/features/WelcomeModal/WelcomeModal.tsx b/src/features/WelcomeModal/WelcomeModal.tsx
@@ -2,13 +2,18 @@ import React from "react";
 
 import { Button } from "../../components/Button/Button";
 import { Modal } from "../../components/Modal/Modal";
-import { StorybookLogo } from "../../components/Icons/StorybookLogo";
+import { StorybookLogo } from "./StorybookLogo";
 import {
   ModalContentWrapper,
   SkipButton,
   StyledIcon,
   Title,
   Description,
+  Background,
+  Circle1,
+  Circle2,
+  Circle3,
+  TopContent,
 } from "./WelcomeModal.styled";
 
 export const WelcomeModal = ({
@@ -19,25 +24,31 @@ export const WelcomeModal = ({
   onProceed: () => void;
 }) => {
   return (
-    <Modal width={540} defaultOpen>
+    <Modal width={540} height={430} defaultOpen>
       {({ Close }) => (
         <ModalContentWrapper data-chromatic="ignore">
-          <StorybookLogo />
-          <Title style={{ marginTop: 20 }}>Welcome to Storybook</Title>
-          <Description>
-            Storybook helps you develop UI components.
-            <br />
-            Learn the basics in a few simple steps.
-          </Description>
-          <Button style={{ marginTop: 4 }} onClick={onProceed}>
-            Start your 3 minute tour
-          </Button>
+          <TopContent>
+            <StorybookLogo />
+            <Title>Welcome to Storybook</Title>
+            <Description>
+              Storybook helps you develop UI components. Learn the basics in a
+              few simple steps.
+            </Description>
+            <Button style={{ marginTop: 4 }} onClick={onProceed}>
+              Start your 3 minute tour
+            </Button>
+          </TopContent>
           <Close asChild>
             <SkipButton onClick={onSkip}>
               Skip tour
               <StyledIcon icon="arrowright" />
             </SkipButton>
           </Close>
+          <Background>
+            <Circle1 />
+            <Circle2 />
+            <Circle3 />
+          </Background>
         </ModalContentWrapper>
       )}
     </Modal>

diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Button } from "../../components/Button/Button";
 
 import { Modal } from "../../components/Modal/Modal";
-import { StorybookLogo } from "../../components/Icons/StorybookLogo";
+import { StorybookLogo } from "../WelcomeModal/StorybookLogo";
 import { ModalContentWrapper } from "../WelcomeModal/WelcomeModal.styled";
 
 export function WriteStoriesModal({ onFinish }: { onFinish: () => void }) {