Learn more button

bcgov · Oct 14, 2023 · eecd5fa · eecd5fa
1 parent 8cc995d
commit eecd5fa
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/...lar/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.html b/...lar/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.html
@@ -1,6 +1,7 @@
 <div class="container">
   <div class="widget-header">
-    <span>Fire Bans</span>
+    <span class="widget-title">Fire Bans</span>
+    <button class="button" mat-flat-button ><img height="24" width="24" src="/assets/images/svg-icons/question.svg" alt="Order" class="button-icon" /><span class="button-label">Learn More</span></button>
   </div>
   <ng-template #loading><mat-spinner [diameter]="80" class="spinner-position"></mat-spinner></ng-template>
   <div class="content" *ngIf="startupComplete; else loading">

diff --git a/...lar/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.scss b/...lar/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.scss
@@ -26,6 +26,13 @@
 }
 
 .widget-header {
+  border-bottom: 1px solid #C4C4C4;
+  width: 100%;
+  padding-bottom: 16px;
+  display: flex;
+}
+
+.widget-title {
   color: #242424;
   font-feature-settings: 'clig' off, 'liga' off;
   font-family: 'Noto sans', 'BCSans', 'Open Sans', Verdana, Arial, sans-serif;
@@ -34,9 +41,6 @@
   font-weight: 500;
   line-height: 34px; /* 130.769% */
   letter-spacing: 0.35px;
-  border-bottom: 1px solid #C4C4C4;
-  width: 100%;
-  padding-bottom: 16px;
 }
 
 .content {
@@ -71,3 +75,25 @@
   height: calc(100% - 50px);
   border-radius: 10px;
 }
+
+.button {
+  margin-right: 7px;
+  border-radius: 20px;
+  border: 1px solid #C4C4C4;
+  background-color: transparent;
+  margin-left: auto;
+}
+
+.button-label {
+  position: relative;
+  top: -3px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21.79px;
+}
+
+.button-icon {
+  position: relative;
+  top: 2px;
+  left: -6px;
+}