text and icon change for saved page on mobile

bcgov · Nov 1, 2024 · 46c0e19 · 46c0e19
1 parent 94326ad
commit 46c0e19
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/client/wfnews-war/src/main/angular/src/app/components/saved/saved.component.html b/client/wfnews-war/src/main/angular/src/app/components/saved/saved.component.html
@@ -6,7 +6,7 @@
 <div [class]="isMobileView() ? '' : 'desktop-container'">
   <div class="section">
       <div class="section-header-row">
-          <span class="section-header">Saved Locations</span>
+          <span class="section-header">Saved Locations & Notifications</span>
         <span class="section-button" (click)="addNewLocation()" *ngIf="savedLocations?.length < 3">
             <img alt="icon" src="/assets/images/svg-icons/Type.svg" class="button-icon">
             Add new
@@ -15,7 +15,7 @@
       <div class="section-card" *ngIf="!savedLocations.length" (click)="addNewLocation()">
           <div class="add-location-content">
               <img alt="icon" class="location-icon" src="/assets/images/svg-icons/carbon_location.svg">
-              <span>Add a saved location</span>
+              <span>Add a saved location to receive notifications</span>
           </div>
       </div>
       <div *ngIf="savedLocations.length">
@@ -113,7 +113,8 @@
       </div>
       <div class="section-card-wildfires" *ngIf="!wildFireWatchlist.length">
           <div class="saved-wildfires-content">
-              <span>You haven't saved any Wildfires yet</span>
+                <img alt="icon" class="location-icon" src="/assets/images/svg-icons/saved-blue-border.svg">
+              <span>Save a wildfire on the map to easily find here later</span>
           </div>
       </div>
       <div *ngIf="wildFireWatchlist.length" class="saved-wildfires">

diff --git a/client/wfnews-war/src/main/angular/src/app/components/saved/saved.component.scss b/client/wfnews-war/src/main/angular/src/app/components/saved/saved.component.scss
@@ -53,6 +53,7 @@
     font-style: normal;
     font-weight: 500;
     line-height: normal;
+    min-width: 100px;
   }
 
   .section-card {
@@ -68,7 +69,8 @@
     justify-content: center;
 
     .add-location-content {
-      padding: 72px 0;
+      padding: 72px 26px;
+      display: flex;
 
       span {
         padding-left: 9px;
@@ -87,8 +89,9 @@
     }
 
     .saved-wildfires-content {
-      padding: 72px 0;
-
+      padding: 72px 26px;
+      display: flex;
+
       span {
         padding-left: 9px;
         color: var(--Gray-1, #242424);

diff --git a/...t/wfnews-war/src/main/angular/src/assets/images/svg-icons/saved-blue-border.svg b/...t/wfnews-war/src/main/angular/src/assets/images/svg-icons/saved-blue-border.svg
diff --git a/client/wfnews-war/src/main/angular/src/stories/Iconography.mdx b/client/wfnews-war/src/main/angular/src/stories/Iconography.mdx
@@ -890,6 +890,9 @@ import { IconGallery, IconItem, Meta, Title } from '@storybook/blocks';
   </IconItem>
   <IconItem name="saved">
     <img src="assets\images\svg-icons\saved.svg" />
+  </IconItem>
+    <IconItem name="saved-blue-border">
+    <img src="assets\images\svg-icons\saved-blue-border.svg" />
   </IconItem>
   <IconItem name="search">
     <img src="assets\images\svg-icons\search.svg" />