added transition and images to user onboarding card

Author: Ayaan Farooqui

public/res/onBoardingImage1.png

@@ -4,6 +4,7 @@ import { getCookie } from "./helperFunctions";
 import OnBoardingScreen from "./onBoardingScreen/OnBoardingScreen";
 import { theme } from "./Theme";
 import { ThemeProvider } from '@mui/material/styles';
+import './onBoardingScreen/transitionStyles.css';
 
 const stepColors = {
   0: "#4abdac",

src/App.js

@@ -4,9 +4,8 @@ import Button from '@mui/material/Button';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import styled from '@emotion/styled';
-import OnBoardingScreen0 from './OnBoardingScreen0';
-import OnBoardingScreen1 from './OnBoardingScreen1';
-import OnBoardingScreen2 from './OnBoardingScreen2';
+import { CSSTransition } from 'react-transition-group';
+import OnBoardingScreenHandler from './OnBoardingScreenHandler';
 
 const StyledMobileStepper = styled(MobileStepper)({
     "& .MuiMobileStepper-dotActive": {
@@ -28,21 +27,17 @@ export default function OnBoardingScreen(props) {
     return (
         <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "center", height: "100vh" }}>
             <div></div>
-            {
-                props.activeStep === 0 &&
-                <OnBoardingScreen0 />
-            }
-            {
-                props.activeStep === 1 &&
-                <OnBoardingScreen1 />
-            }
-            {
-                props.activeStep === 2 &&
-                <OnBoardingScreen2 handleSkip={props.handleSkip} />
-            }
+            <CSSTransition
+                in={true}
+                appear={true}
+                timeout={1000}
+                classNames="fade"
+            >
+                <OnBoardingScreenHandler activeStep={props.activeStep} handleSkip={props.handleSkip} />
+            </CSSTransition>
             <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
                 {props.activeStep < 2
-                    &&
+                    ?
                     <StyledMobileStepper
                         variant="dots"
                         steps={3}
@@ -65,6 +60,8 @@ export default function OnBoardingScreen(props) {
                         </Button>
                         }
                     />
+                    :
+                    <span></span>
                 }
             </div>
         </div>

src/onBoardingScreen/OnBoardingScreen.js

@@ -0,0 +1,21 @@
+import { Button } from "@mui/material";
+
+export default function OnBoardingScreenCard(props) {
+    return (
+        <div style={{ width: "100%", display: "grid", gridTemplateColumns: "100%", gridTemplateRows: "60% 40%", height: "100%" }}>
+            <div>
+                <img src={props.imgURL} alt="onboarding user" width="100%" height="auto" />
+            </div>
+            <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-evenly", alignItems: "center" }}>
+                <h1 style={{ color: "white", marginBottom: "0px" }}>{props.header}</h1>
+                <p style={{ textAlign: "center", color: "white", fontSize: "0.9rem", width: "85%", opacity: "0.7" }}>{props.content}</p>
+                {
+                    props.showButton &&
+                    <Button style={{ backgroundColor: "white", width: "90%", borderRadius: "40px", height: "60px", color: "black", fontWeight: "bold", fontSize: "1.1rem" }} onClick={props.handleSkip}>
+                        Get started
+                </Button>
+                }
+            </div>
+        </div>
+    );
+};

src/onBoardingScreen/OnBoardingScreen0.js

@@ -0,0 +1,44 @@
+import OnBoardingScreenCard from './OnBoardingScreenCard';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+
+const cardContent = [{
+    id: "01",
+    header: "Lorem ipsum dolor",
+    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
+    showButton: false,
+    imgURL:"/res/onBoardingImage1.png"
+},
+{
+    id: "02",
+    header: "Lorem ipsum dolor",
+    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
+    showButton: false,
+    imgURL:"/res/onBoardingImage1.png"
+},
+{
+    id: "03",
+    header: "Lorem ipsum dolor",
+    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
+    showButton: true,
+    imgURL:"/res/onBoardingImage1.png"
+}]
+
+export default function OnBoardingScreenHandler(props) {
+    return (
+        <TransitionGroup style={{ height: "100%" }}>
+            <CSSTransition
+                timeout={1000}
+                classNames="fade"
+                key={cardContent[props.activeStep].id}
+            >
+                <OnBoardingScreenCard
+                    header={cardContent[props.activeStep].header}
+                    content={cardContent[props.activeStep].content}
+                    showButton={cardContent[props.activeStep].showButton}
+                    handleSkip={props.handleSkip}
+                    imgURL={cardContent[props.activeStep].imgURL}
+                />
+            </CSSTransition>
+        </TransitionGroup>
+    )
+};

src/onBoardingScreen/OnBoardingScreen1.js

@@ -1,20 +1,35 @@
-.alert-enter {
-    opacity: 0;
-    transform: scale(0.9);
+/* appear - on page load */
+.fade-appear {
+  opacity: 0;
+  z-index: 1;
 }
 
-.alert-enter-active {
-    opacity: 1;
-    transform: translateX(0);
-    transition: opacity 300ms, transform 300ms;
+.fade-appear.fade-appear-active {
+  opacity: 1;
+  transition: opacity 1000ms linear;
 }
 
-.alert-exit {
-    opacity: 1;
+/* enter */
+.fade-enter {
+  opacity: 0;
+  z-index: 1;
 }
 
-.alert-exit-active {
-    opacity: 0;
-    transform: scale(0.9);
-    transition: opacity 300ms, transform 300ms;
+.fade-enter.fade-enter-active {
+  opacity: 1;
+  transition: opacity 1000ms linear 0ms;
+}
+
+/* exit */
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit.fade-exit-active {
+  opacity: 0;
+  transition: opacity 0ms linear;
+}
+
+.fade-exit-done {
+  opacity: 0;
 }