completed UI for skill info page

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;
     }
 }
 

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% {

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>

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);
+        }
     }
+   
 }

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>