DBC22-6778: followed events list highlighted items styling

Author: bcgov-brwang

src/frontend/src/Components/advisories/AdvisoriesList.scss

@@ -10,7 +10,6 @@
     display: flex;
     align-items: center;
     padding: 12px;
-    border-radius: 4px;
     background: white;
     box-shadow: 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.10), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13);
     text-decoration: none;

src/frontend/src/Components/bulletins/BulletinsList.scss

@@ -3,7 +3,6 @@
 ul.bulletins-list {
   li.bulletin-li {
     padding: 12px;
-    border-radius: 4px;
     text-decoration: none;
 
 

src/frontend/src/pages/AdvisoriesListPage.scss

@@ -18,9 +18,10 @@
   }
 
   .advisories-list {
+    gap: 0;
 
     .advisory-li {
-      margin-bottom: 54px;
+      margin-bottom: 0;
       width: 100%;
       box-shadow: none;
 
@@ -205,9 +206,12 @@
 
 // Highlighted row
 .advisory-li.highlighted {
-  background-color: var(--highlighted-row-bg, #fff8e1);
-  border-left: 3px solid var(--colour-primary, #003366);
+  background-color: var(--highlighted-row-bg, $Blue20);
   transition: background-color 0.3s ease;
+  border-bottom: 1px solid var(--border-divider, $Grey30); // the gray line
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 // "Updated" pill — reuse same class as EventsTable
@@ -216,7 +220,7 @@
   align-items: center;
   padding: 2px 8px;
   border-radius: 12px;
-  background-color: var(--colour-primary, #003366);
+  background-color: var(--colour-primary, $Blue80);
   color: #fff;
   font-size: 0.75rem;
   font-weight: 600;
@@ -228,7 +232,7 @@
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
-  background-color: var(--colour-primary, #003366);
+  background-color: var(--colour-primary, $Blue80);
   color: #fff;
   border: none;
   border-radius: 20px;

src/frontend/src/pages/BulletinsListPage.scss

@@ -27,7 +27,7 @@
       }
 
       & + li.bulletin-li {
-        margin-top: 24px;
+        margin-top: 0;
       }
 
       .timestamp-container, .friendly-time-text {
@@ -126,8 +126,8 @@
 
 // Highlighted row
 li.highlighted {
-  background-color: var(--highlighted-row-bg, #fff8e1);
-  border-left: 3px solid var(--colour-primary, #003366);
+  background-color: var(--highlighted-row-bg, $Blue20);
+  // border-left: 3px solid var(--colour-primary, $Blue80);
   transition: background-color 0.3s ease;
 }
 
@@ -137,7 +137,7 @@ li.highlighted {
   align-items: center;
   padding: 2px 8px;
   border-radius: 12px;
-  background-color: var(--colour-primary, #003366);
+  background-color: var(--colour-primary, $Blue80);
   color: #fff;
   font-size: 0.75rem;
   font-weight: 600;
@@ -149,7 +149,7 @@ li.highlighted {
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
-  background-color: var(--colour-primary, #003366);
+  background-color: var(--colour-primary, $Blue80);
   color: #fff;
   border: none;
   border-radius: 20px;