DUP-468: Updating UI (#363)

src/app/home/home.component.html

@@ -4,7 +4,7 @@ <h1>
       <span>Day-Use Pass Admin System</span>
     </h1>
   </div>
-  <div class="row">
+  <div class="row mx-0 mx-lg-5">
     <div
       class="col-xxl-4 col-md-6 col-12 mb-4"
       *ngFor="let card of cardConfig"

src/app/metrics/metrics-filter/metrics-filter.component.scss

@@ -3,6 +3,6 @@
 }
 
 .accordion-card {
-  border: 1px rgba(0,0,0,.25) solid;
+  border: 1px rgba(0, 0, 0, .25) solid;
   border-radius: 4px;
-}
+}

src/app/shared/components/breadcrumb/breadcrumb.component.html

@@ -1,12 +1,12 @@
 <nav aria-label="breadcrumb" class="toggle-button-offset">
   <ol class="breadcrumb">
-    <li class="breadcrumb-items" *ngFor="let breadcrumb of breadcrumbs">
+    <li class="breadcrumb-item" *ngFor="let breadcrumb of breadcrumbs">
       <a class="btn-link" (click)="onNavigate(breadcrumb.url)">{{
         breadcrumb.label
-      }}</a>
+        }}</a>
     </li>
-    <li class="breadcrumb-items">
+    <li class="breadcrumb-item">
       <span>{{ lastBreadcrumb?.label }}</span>
     </li>
   </ol>
-</nav>
+</nav>

src/app/shared/components/breadcrumb/breadcrumb.component.scss

@@ -1,32 +1,21 @@
 @import "src/assets/themes/variables";
 
 .toggle-button-offset {
-  padding-left: 1rem;
+  padding-left: 0rem;
+  background-color: #FAF9F8;
 }
 
 @media (min-width: 992px) {
   .toggle-button-offset {
-    padding-left: 3rem;
+    padding-left: 2.188rem;
   }
 }
 
-nav {
-  padding-top: 1.25rem;
-  padding-bottom: 0.2rem;
-  background: $light;
+.breadcrumb {
+  margin: 0;
+  padding: 1.3rem;
 }
 
 a:hover {
   cursor: pointer;
-}
-
-.breadcrumb .breadcrumb-items::before {
-  content: "/";
-  padding-left: 0.3rem;
-  padding-right: 0.3rem;
-}
-
-.breadcrumb .breadcrumb-items:nth-child(1)::before {
-  content: "";
-  padding-left: 0rem;
 }

src/app/shared/components/ds-forms/radio-buttons/radio-buttons.component.html

@@ -1,32 +1,25 @@
 <label
   *ngIf="label"
   for="{{ id }}"
-  class="fw-bold mb-2 small d-flex justify-content-center"
-  >{{ label
-  }}<span *ngIf="isRequired()" class="text-danger">&nbsp;*</span></label
->
+  class="fw-bold mb-2 small d-flex justify-content-center">{{ label
+  }}<span *ngIf="isRequired()" class="text-danger">&nbsp;*</span></label>
 <div
   class="d-flex flex-row"
-  [ngClass]="{ 'invalid-field': isInvalid(), 'btn-group': group }"
->
+  [ngClass]="{ 'invalid-field': isInvalid(), 'btn-group': group }">
   <div
     class="col"
     [ngClass]="{ 'btn-group': group, 'me-2': !group && option !== options }"
-    *ngFor="let option of options"
-  >
+    *ngFor="let option of options">
     <input
       type="radio"
       [formControl]="control"
       class="btn-check"
       name="{{ id }}"
       id="{{ id }}-{{ option }}"
-      (change)="changeValue(option)"
-    />
+      (change)="changeValue(option)" />
     <label
-      class="d-block"
+      class="d-block radio-button"
       [ngClass]="setClass(option)"
-      for="{{ id }}-{{ option }}"
-      >{{ optionsLabels[options.indexOf(option)] }}</label
-    >
+      for="{{ id }}-{{ option }}">{{ optionsLabels[options.indexOf(option)] }}</label>
   </div>
-</div>
+</div>

src/app/shared/components/ds-forms/radio-buttons/radio-buttons.component.scss

@@ -0,0 +1,3 @@
+.radio-button {
+    font-size: medium !important;
+}

src/app/shared/components/ds-forms/wysiwyg-input/wysiwyg-input.component.html

@@ -1,4 +1,4 @@
-<label *ngIf="label" for="{{ id }}" class="fw-bold mb-2"
+<label *ngIf="label" for="{{ id }}" class="h2 mb-2"
   >{{ label
   }}<span *ngIf="isRequired()" class="text-danger">&nbsp;*</span></label
 >