From 63b249e6c1487ed6120f41d6d1d710f0d374eef6 Mon Sep 17 00:00:00 2001
From: Ajay_S <sajayy01234@gmail.com>
Date: Thu, 21 Apr 2022 10:41:46 +0530
Subject: [PATCH] completed UI for skill info page

---
 .../stepsHeader/StepsHeader.module.scss         |  4 ++--
 .../StepsDescreption.module.scss                | 17 +++++++++--------
 src/pages/interviewRounds/StepsDescreption.tsx  |  2 +-
 .../SkillInformationStep.module.scss            | 12 ++++++++----
 .../SkillInformationStep.tsx                    |  4 +++-
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/stepsHeader/StepsHeader.module.scss b/src/components/stepsHeader/StepsHeader.module.scss
index 31be846..22f9e8b 100644
--- a/src/components/stepsHeader/StepsHeader.module.scss
+++ b/src/components/stepsHeader/StepsHeader.module.scss
@@ -9,7 +9,7 @@
 
         display: flex;
         flex-direction: column;
-        margin-left: 4rem;
+        margin-left: 3.5rem;
 
         .step {
             color: white;
@@ -31,7 +31,7 @@
         height: 4rem;
         color: white;
         opacity: 0.8;
-        margin-right: 4rem;
+        margin-right: 2.8rem;
     }
 }
 
diff --git a/src/pages/interviewRounds/StepsDescreption.module.scss b/src/pages/interviewRounds/StepsDescreption.module.scss
index b043f06..9745c53 100644
--- a/src/pages/interviewRounds/StepsDescreption.module.scss
+++ b/src/pages/interviewRounds/StepsDescreption.module.scss
@@ -60,6 +60,15 @@
         animation-iteration-count: 1;
         animation-fill-mode: forwards;
 
+        ion-button {
+            width: 32.8rem;
+            height: 4rem;
+            font-weight: 500;
+            font-size: 1.6rem;
+            font-family: 'Poppins', sans-serif !important;
+            --background: var(--primary-button-color);
+        }
+
     }
 }
 
@@ -70,15 +79,7 @@ ion-icon {
 
 }
 
-ion-button {
-    width: 32.8rem;
-    height: 4rem;
-    font-weight: 500;
-    font-size: 1.6rem;
-    font-family: 'Poppins', sans-serif !important;
-    margin: 0 !important;
 
-}
 
 @keyframes fadeInAnimation {
     0% {
diff --git a/src/pages/interviewRounds/StepsDescreption.tsx b/src/pages/interviewRounds/StepsDescreption.tsx
index 555fec2..c30fd4b 100644
--- a/src/pages/interviewRounds/StepsDescreption.tsx
+++ b/src/pages/interviewRounds/StepsDescreption.tsx
@@ -41,7 +41,7 @@ const StepsDescription: React.FC<Props> = (props) => {
             </div>
 
             <div className={styles.button}>
-                <IonButton shape="round" color='success' expand='block'>{props.buttonText}</IonButton>
+                <IonButton shape="round" expand='block'>{props.buttonText}</IonButton>
             </div>
 
         </div>
diff --git a/src/pages/skillInformationStep/SkillInformationStep.module.scss b/src/pages/skillInformationStep/SkillInformationStep.module.scss
index 6c2b7c4..eaefc17 100644
--- a/src/pages/skillInformationStep/SkillInformationStep.module.scss
+++ b/src/pages/skillInformationStep/SkillInformationStep.module.scss
@@ -29,15 +29,19 @@ ion-content {
         }
 
         .skills {
+            width: 90%;
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             grid-gap: 2rem;
-            margin-left: 1.5rem;
+            margin: 0 auto;
         }
     }
 
-    ion-button {
-        margin: 5rem 0;
-        margin-left: 2.5rem;
+    .button{
+        ion-button {
+            margin: 5rem 2rem;
+            --background: var(--primary-button-color);
+        }
     }
+   
 }
\ No newline at end of file
diff --git a/src/pages/skillInformationStep/SkillInformationStep.tsx b/src/pages/skillInformationStep/SkillInformationStep.tsx
index 6aa07d2..c120317 100644
--- a/src/pages/skillInformationStep/SkillInformationStep.tsx
+++ b/src/pages/skillInformationStep/SkillInformationStep.tsx
@@ -83,7 +83,9 @@ const SkillInformationStep: React.FC = () => {
 
                 </div>
 
-                <IonButton shape="round" color='success' expand='block'>Done!</IonButton>
+                <div className={styles.button}>
+                    <IonButton shape="round" expand='block'>Done!</IonButton>
+                </div>
 
             </IonContent>
         </IonPage>