DBC22-1813: updated events side panel styling according to the design

bcgov · Mar 13, 2024 · 6bb52da · 6bb52da
1 parent fb7dd9a
commit 6bb52da
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/src/frontend/src/Components/Map.scss b/src/frontend/src/Components/Map.scss
@@ -99,7 +99,7 @@
         right: 1rem;
         padding: 0;
         min-width: 0;
-        line-height: 1.25rem;
+        line-height: 8.25rem;
         height: auto;
         background: none;
         border: none;

diff --git a/src/frontend/src/Components/map/mapPopup.js b/src/frontend/src/Components/map/mapPopup.js
@@ -90,17 +90,22 @@ export function getEventPopup(eventFeature) {
           <p>{eventData.optimized_description}</p>
         </div>
 
-        <div className="popup__content__description">
-          <p>Last update</p>
-          <FriendlyTime date={eventData.last_updated} />
-        </div>
-
-        {eventData.next_update &&
+        <div className="popup__content__block">
           <div className="popup__content__description">
-            <p>Next update</p>
-            <FriendlyTime date={eventData.next_update} />
+            <p>Last update</p>
+            <FriendlyTime date={eventData.last_updated} />
           </div>
-        }
+
+          {eventData.next_update &&
+            <div className="popup__content__description">
+              <p>Next update</p>
+              <FriendlyTime date={eventData.next_update} />
+            </div>
+          }
+
+        </div>
+
+
       </div>
     </div>
   );

diff --git a/src/frontend/src/Components/map/mapPopup.scss b/src/frontend/src/Components/map/mapPopup.scss
@@ -176,17 +176,26 @@
         }
       }
       &__description {
+        > p:first-child {
+          font-weight: bold;
+        }
         .friendly-time {
           margin-bottom: 0.5rem;
-          &-text {
-            font-weight: 700;
-          }
-
           &__tooltip {
             left: 100%;
           }
         }
       }
+
+      &__block {
+        display: flex;
+        justify-content: space-between;
+
+      > div {
+        flex: 1;
+      }
+
+      }
     }
 
     &.major, &.closures {
@@ -197,13 +206,18 @@
         .name {
           color: #CE3E39;
         }
+
       }
 
       .popup__content {
         &__title {
           .name {
             color: #CE3E39;
           }
+
+          .location {
+            color: #9C2024;
+          }
         }
       }
     }
@@ -223,6 +237,10 @@
           .name {
             color: #584215;
           }
+
+          .location {
+            color: #474543;
+          }
         }
       }
     }