From eecd5fa78071cae48e05bf21bf481fe6d6dbf349 Mon Sep 17 00:00:00 2001
From: Dylan Hemsworth <dylan.hemsworth@gmail.com>
Date: Fri, 13 Oct 2023 19:42:57 -0700
Subject: [PATCH] Learn more button

---
 .../bans-widget/bans-widget.component.html    |  3 +-
 .../bans-widget/bans-widget.component.scss    | 32 +++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.html b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.html
index 1f7ded7d8f..07b9afe40a 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.html
+++ b/client/wfnews-war/src/main/angular/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/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.scss b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.scss
index a92f2fc113..9af66ade9d 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.scss
+++ b/client/wfnews-war/src/main/angular/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;
+}