From ad711bd01a6de0e54f4f1666c225fcaab1cd0433 Mon Sep 17 00:00:00 2001
From: Ajay_S <sajayy01234@gmail.com>
Date: Wed, 20 Apr 2022 18:46:55 +0530
Subject: [PATCH] added scroll to view when step is evpanded

---
 src/pages/interviewRounds/Steps.tsx           |  1 +
 .../StepsDescreption.module.scss              | 24 ++++++++++++++++---
 .../interviewRounds/StepsDescreption.tsx      | 13 +++++++++-
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/pages/interviewRounds/Steps.tsx b/src/pages/interviewRounds/Steps.tsx
index f326342..6ce162a 100644
--- a/src/pages/interviewRounds/Steps.tsx
+++ b/src/pages/interviewRounds/Steps.tsx
@@ -14,6 +14,7 @@ interface Props {
 }
 
 const Steps: React.FC<Props> = (props) => {
+
     return (
         <IonItem lines='none' onClick={() => props.setDescription(props.stepNumber)}>
             {props.showDescription ? <StepsDescription
diff --git a/src/pages/interviewRounds/StepsDescreption.module.scss b/src/pages/interviewRounds/StepsDescreption.module.scss
index 15f0c83..e8d655e 100644
--- a/src/pages/interviewRounds/StepsDescreption.module.scss
+++ b/src/pages/interviewRounds/StepsDescreption.module.scss
@@ -6,8 +6,10 @@
     justify-content: space-between;
     width: 100vw;
     background-color: white;
-    transition-delay: 20s;
-    transition-property: height;
+
+    animation: fadeInAnimation ease-in 0.5s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
 
     .header {
         display: flex;
@@ -20,7 +22,7 @@
             align-items: center;
             flex-direction: column;
             width: 18rem;
-            margin-left: 5.3rem;
+            margin-left: 14.5vw;
             .step {
                 color: #A3A3A3;
                 font-size: 1.4rem;
@@ -43,6 +45,13 @@
     }
 }
 
+// .fadeIn {
+//     transition-delay: 20s;
+//     transition-property: height;
+//     transition: opacity 0.5s;
+//     opacity: 1;
+// }
+
 ion-icon {
     color: var(--primary-button-color);
     width: 1.5rem;
@@ -53,4 +62,13 @@ ion-button {
     width: 32.8rem;
     height: 4rem;
     font-weight: 400;
+}
+
+@keyframes fadeInAnimation {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
\ No newline at end of file
diff --git a/src/pages/interviewRounds/StepsDescreption.tsx b/src/pages/interviewRounds/StepsDescreption.tsx
index 188f555..5f37da3 100644
--- a/src/pages/interviewRounds/StepsDescreption.tsx
+++ b/src/pages/interviewRounds/StepsDescreption.tsx
@@ -3,6 +3,7 @@ import img from '../../assets/icons/skill_Information.svg';
 
 import { IonButton, IonIcon } from '@ionic/react';
 import { lockOpen, lockClosed } from 'ionicons/icons'
+import { useEffect, useRef } from 'react';
 
 interface Props {
     stepNumber: number;
@@ -13,8 +14,18 @@ interface Props {
 }
 
 const StepsDescription: React.FC<Props> = (props) => {
+
+    const itemRef = useRef<null | HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (itemRef && itemRef.current) {
+
+            itemRef.current.scrollIntoView();
+        }
+    }, [props.stepNumber]);
+
     return (
-        <div className={styles.stepDescription}>
+        <div className={styles.stepDescription} ref={itemRef}>
             <div className={styles.header}>
                 <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>