From 75821daad0e23ac8a8ee20c0cbe3f9f444183746 Mon Sep 17 00:00:00 2001
From: Ajay_S <sajayy01234@gmail.com>
Date: Wed, 20 Apr 2022 19:23:34 +0530
Subject: [PATCH] added animation on opening steps description component

---
 src/pages/interviewRounds/Header.module.scss  |  1 -
 src/pages/interviewRounds/Header.tsx          |  4 +-
 .../StepsDescreption.module.scss              | 44 +++++++++++++------
 .../interviewRounds/StepsDescreption.tsx      |  8 ++--
 4 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/pages/interviewRounds/Header.module.scss b/src/pages/interviewRounds/Header.module.scss
index fffe784..d3183f9 100644
--- a/src/pages/interviewRounds/Header.module.scss
+++ b/src/pages/interviewRounds/Header.module.scss
@@ -3,7 +3,6 @@ ion-header {
     height: 12vh;
    
     .header {
-
         display: flex;
         justify-content: space-between;
         align-items: center;
diff --git a/src/pages/interviewRounds/Header.tsx b/src/pages/interviewRounds/Header.tsx
index 43ab534..33b34db 100644
--- a/src/pages/interviewRounds/Header.tsx
+++ b/src/pages/interviewRounds/Header.tsx
@@ -8,7 +8,9 @@ const Header: React.FC = () => {
         <IonHeader>
             <div className={styles.header}>
                 <IonIcon src={logo}></IonIcon>
-                <div className={styles.profile}></div>
+                <div className={styles.profile}>
+                    {/* image */}
+                </div>
             </div>
         </IonHeader>
     )
diff --git a/src/pages/interviewRounds/StepsDescreption.module.scss b/src/pages/interviewRounds/StepsDescreption.module.scss
index e8d655e..6df8079 100644
--- a/src/pages/interviewRounds/StepsDescreption.module.scss
+++ b/src/pages/interviewRounds/StepsDescreption.module.scss
@@ -6,23 +6,25 @@
     justify-content: space-between;
     width: 100vw;
     background-color: white;
-
-    animation: fadeInAnimation ease-in 0.5s;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards;
+    padding-top: 1.5rem;
 
     .header {
         display: flex;
         align-items: center;
         height: 12vh;
         width: 86.6%;
+
+        animation: fadeInAnimation ease 0.2s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+
         .stepName {
             display: flex;
             justify-content: center;
             align-items: center;
             flex-direction: column;
             width: 18rem;
-            margin-left: 14.5vw;
+            margin-left: 15.5vw;
             .step {
                 color: #A3A3A3;
                 font-size: 1.4rem;
@@ -33,25 +35,34 @@
                 color: #363636;
                 font-size: 2.4rem;
                 font-weight: 300;
+                margin-top: 0.5rem;
             }
         }
     }
 
+    .image {
+        animation: fadeInAnimation ease 0.2s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+    }
+
     .descreption {
         color: #868686;
         font-size: 1.4rem;
         width: 80%;
         line-height: 2.8rem;
+
+        animation: fadeInAnimation ease 0.2s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+    }
+    .button {
+        animation: fadeInAnimation ease 0.2s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
     }
 }
 
-// .fadeIn {
-//     transition-delay: 20s;
-//     transition-property: height;
-//     transition: opacity 0.5s;
-//     opacity: 1;
-// }
-
 ion-icon {
     color: var(--primary-button-color);
     width: 1.5rem;
@@ -61,14 +72,21 @@ ion-icon {
 ion-button {
     width: 32.8rem;
     height: 4rem;
-    font-weight: 400;
+    font-weight: 500;
+    font-size: 1.6rem;
+    font-family: 'Poppins', sans-serif !important;
+
 }
 
 @keyframes fadeInAnimation {
     0% {
         opacity: 0;
+        height: 0;
+        transform: scaleY(0)
     }
     100% {
         opacity: 1;
+        height: auto;
+        transform: scaleY(1)
     }
 }
\ No newline at end of file
diff --git a/src/pages/interviewRounds/StepsDescreption.tsx b/src/pages/interviewRounds/StepsDescreption.tsx
index 5f37da3..555fec2 100644
--- a/src/pages/interviewRounds/StepsDescreption.tsx
+++ b/src/pages/interviewRounds/StepsDescreption.tsx
@@ -1,5 +1,4 @@
 import styles from './StepsDescreption.module.scss';
-import img from '../../assets/icons/skill_Information.svg';
 
 import { IonButton, IonIcon } from '@ionic/react';
 import { lockOpen, lockClosed } from 'ionicons/icons'
@@ -20,7 +19,7 @@ const StepsDescription: React.FC<Props> = (props) => {
     useEffect(() => {
         if (itemRef && itemRef.current) {
 
-            itemRef.current.scrollIntoView();
+            itemRef.current.scrollIntoView({ block: "start" });
         }
     }, [props.stepNumber]);
 
@@ -40,7 +39,10 @@ const StepsDescription: React.FC<Props> = (props) => {
             <div className={styles.descreption}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </div>
-            <IonButton shape="round" color='success' expand='block'>{props.buttonText}</IonButton>
+
+            <div className={styles.button}>
+                <IonButton shape="round" color='success' expand='block'>{props.buttonText}</IonButton>
+            </div>
 
         </div>
     );