close button updates, sidepanel width

bcgov · Mar 22, 2024 · 469967f · 469967f
1 parent 8fa6793
commit 469967f
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 6 deletions.
diff --git a/src/frontend/src/Components/Map.scss b/src/frontend/src/Components/Map.scss
@@ -71,10 +71,10 @@
       }
 
       &.open {
-        min-width: 340px;
+        min-width: 390px;
 
         .panel-content {
-          min-width: 340px;
+          min-width: 390px;
         }
 
         @media (max-width: 767px) {
@@ -95,17 +95,53 @@
 
       .close-panel {
         position: absolute;
-        top: 1rem;
+        top: 2rem;
         right: 1rem;
         padding: 0;
         min-width: 0;
         line-height: 1.25rem;
-        height: auto;
+        height: 2rem;
+        width: 2rem;
+        border-radius: 50%;
         background: none;
         border: none;
         font-size: 1rem;
       }
 
+      .close-panel:has(+ .panel-content .popup.closure),
+      .close-panel:has(+ .panel-content .popup.major) {
+        color: #CE3E39;
+        &:hover {
+          background: lighten(#CE3E39, 38%);
+        }
+
+      }
+
+      .close-panel:has(+ .panel-content .popup.minor),
+      .close-panel:has(+ .panel-content .popup.roadConditions)
+       {
+        color: #584215;
+        &:hover {
+          background: lighten(#584215, 60%);
+        }
+      }
+
+      .close-panel:has(+ .panel-content .popup.popup--camera),
+      {
+       color: $BC-Blue;
+       &:hover {
+        background: lighten($BC-Blue, 70%);
+      }
+     }
+
+      .close-panel:has(+ .panel-content .popup.popup--ferry),
+       {
+        color: #2E8540;
+        &:hover {
+          background: lighten(#2E8540, 60%);
+        }
+      }
+
       .panel-content {
         flex: 1;
       }

diff --git a/src/frontend/src/Components/map/mapPopup.scss b/src/frontend/src/Components/map/mapPopup.scss
@@ -234,17 +234,26 @@
 
           .location {
             color: #9C2024;
-            font-size: 1rem;
+            font-size: 0.875rem;
             margin-top: 0;
           }
         }
+        &__description {
+          time {
+            font-size: 0.875rem;
+            &:hover {
+              color: $Type-Link;
+            }
+          }  
+        }
+
       }
     }
 
     &.minor, &.roadConditions {
       .popup__title {
         background-color: #FEEBC2;
-        border-top: 4px solid #584215;
+        border-top: 4px solid $BC-Yellow;
 
         .name {
           color: #584215;
@@ -259,8 +268,17 @@
 
           .location {
             color: #474543;
+            font-size: 0.875rem;
           }
         }
+        &__description {
+          time {
+            font-size: 0.875rem;
+            &:hover {
+              color: $Type-Link;
+            }
+          }  
+        }
       }
     }
   }