attendance styles update

src/app/attendance/attendance.component.html

@@ -1,8 +1,6 @@
 <div class="page-container" id="attendance">
-    <div class="align-middle">
-            <p class="txt-content font-body-xsmall-bold">{{languageConstants.april}}</p>
-            <p class="txt-content font-body-xsmall-bold">2021</p>
-            <p class="txt-content font-body-xsmall-bold number-txt">"{{languageConstants.attendance}}</p>
+    <div class="align-middle title">
+        <p class="txt-content font-body-xsmall-bold">{{languageConstants.april}}<br/>2021<br/>{{languageConstants.attendance}}</p>
     </div>
     <div class="flex-column leave-status">
         <div class="width-90 margin-5">

src/app/attendance/attendance.component.scss

@@ -1,17 +1,46 @@
-@import '../../styles.scss';
-#attendance{
-    .align-middle{
-        @include flex-box(column, top);
-        text-align: center;
-        padding-bottom: 5px;
-        width: 90%;
-        margin: 0% auto;
-    }
-    .leave-status{
-        background-color: $clr-mania;
-         .width-90{
-           width: 90%;
-           margin: 5% auto;
-         }
-      }
+.align-middle {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  text-align: center;
+  padding-bottom: 5px;
+  width: 90%;
+  margin: 0% auto;
+}
+
+.leave-status {
+  background-color: #b4e8fd;
+
+  .width-90 {
+    width: 90%;
+    margin: 5% auto;
+  }
+}
+
+.flex-row {
+  flex-direction: row;
+  display: flex;
+  width: 100%;
+}
+
+.page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #b4e8fd;
+}
+
+.font-body-xsmall-bold {
+  font-size: 0.812rem;
+  line-height: 1.125rem;
+  letter-spacing: 1px;
+  font-family: "Raleway VariableFont";
+  text-transform: uppercase;
+}
+
+.title {
+  text-align: center;
+  margin:2%;
 }