@fmidev/smartmet-alert-client 4.2.7 → 4.4.19

package/src/components/Warning.vue

@@ -2,7 +2,9 @@
   <div class="symbol-list-table" :class="theme">
     <div class="symbol-list-cell symbol-list-cell-image">
       <div
-        :class="`level-${severity} ${typeClass} symbol-list-image-column symbol-list-image warning-image`"></div>
+        :class="`level-${severity} ${typeClass} symbol-list-image-column symbol-list-image warning-image`"
+        :aria-label="`${warningLevelText} ${title.toLowerCase()}`">
+      </div>
     </div>
     <div class="symbol-list-cell symbol-list-cell-text">
       <div class="symbol-list-text-select">
@@ -18,11 +20,18 @@
               'focus-ring',
               'd-none',
             ]"
+            role="button"
             tabindex="0"
+            :aria-pressed="input.visible ? 'true' : 'false'"
+            :aria-label="title.replace(/&[^;]*;/g, '')"
             @mousedown="preventEvents"
             @click="toggle"
             @keydown.enter="toggle"
-            @keydown.space="toggle" />
+            @keydown.space="toggle">
+              <span>
+                {{ toggleText }}
+              </span>
+            </div>
         </div>
       </div>
       <hr />
@@ -46,6 +55,12 @@ export default {
     title() {
       return this.t(this.input.type)
     },
+    warningLevelText() {
+      return this.t(`warningLevel${this.severity}`)
+    },
+    toggleText() {
+      return this.input.visible ? this.t('toggleOn') : this.t('toggleOff')
+    },
   },
   methods: {
     toggle(event) {
@@ -151,7 +166,6 @@ hr {
 
 div#fmi-warnings-list div.symbol-list-cell-text {
   padding-right: 0;
-
   hr {
     margin-right: 0;
   }
@@ -172,70 +186,52 @@ div.symbol-list-text {
   display: table-cell;
   height: $symbol-list-line-height;
   max-width: 141px;
-  padding-right: 5px;
+  padding-right: 10px;
+  word-break: break-word;
   hyphens: auto;
 }
 
 .symbol-list-select-container {
-  width: 30px;
+  width: 55px;
   height: $symbol-list-line-height;
   display: table-cell;
   vertical-align: middle;
 }
 
-.symbol-list-select {
+.symbol-list-select.d-md-block {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: $symbol-list-select-height;
   margin: 0;
   background-repeat: no-repeat;
   background-position: center;
-}
-
-.flag-selected {
-  cursor: pointer;
-}
-
-.light-theme .flag-selected {
-  background-image: url($ui-image-path + 'toggle-selected-blue' + $image-extension);
-}
-
-.dark-theme .flag-selected {
-  background-image: url($ui-image-path + 'toggle-selected-light' + $image-extension);
-}
-
-.light-gray-theme .flag-selected {
-  background-image: url($ui-image-path + 'toggle-selected-dark' + $image-extension);
-}
-
-.dark-gray-theme .flag-selected {
-  background-image: url($ui-image-path + 'toggle-selected-light' + $image-extension);
-}
-
-.flag-unselected {
-  cursor: pointer;
-}
-
-.light-theme .flag-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-light' + $image-extension);
-}
-
-.dark-theme .flag-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-dark' + $image-extension);
-}
-
-.light-gray-theme .flag-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-light' + $image-extension);
-}
-
-.dark-gray-theme .flag-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-dark' + $image-extension);
+  &.flag-selected {
+    padding-right: 18px;
+    background-image: url($ui-image-path + 'toggle-selected' + $image-extension);
+    span {
+      color: $toggle-on-text;
+    }
+  }
+  &.flag-unselected {
+    padding-left: 18px;
+    background-image: url($ui-image-path + 'toggle-unselected' + $image-extension);
+    span {
+      color: $toggle-off-text;
+    }
+  }
+  span {
+    font-family: "Noto Sans", sans-serif;
+    font-size: $font-size;
+    forced-color-adjust: none;
+  }
 }
 
 @media (max-width: 767px) {
   div.symbol-list-table {
     div.symbol-list-cell.symbol-list-cell-text {
       padding-right: 0;
-
       hr {
         margin-right: 0;
       }

package/src/components/Warnings.vue

@@ -34,10 +34,14 @@
       <div class="symbol-list-table">
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
-            class="gray several symbol-list-image-column symbol-list-image warning-image"></div>
+            class="gray several symbol-list-image-column symbol-list-image warning-image"
+            aria-labelledby="symbol-list-several-warnings-text">
+          </div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
-          <div class="item-text symbol-list-text">
+          <div
+            id="symbol-list-several-warnings-text"
+            class="item-text symbol-list-text">
             {{ severalWarningsText }}
           </div>
         </div>
@@ -47,10 +51,14 @@
       <div class="symbol-list-table">
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
-            class="level-1 symbol-list-image-column symbol-list-image warning-image"></div>
+            class="level-1 symbol-list-image-column symbol-list-image warning-image"
+            aria-labelledby="symbol-list-warning-level-1-text">
+          </div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
-          <div class="item-text symbol-list-text">
+          <div
+            id="symbol-list-warning-level-1-text"
+            class="item-text symbol-list-text">
             {{ warningLevel1Text }}
           </div>
         </div>
@@ -60,10 +68,14 @@
       <div class="symbol-list-table">
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
-            class="level-2 symbol-list-image-column symbol-list-image warning-image"></div>
+            class="level-2 symbol-list-image-column symbol-list-image warning-image"
+            aria-labelledby="symbol-list-warning-level-2-text">
+          </div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
-          <div class="item-text symbol-list-text">
+          <div
+            id="symbol-list-warning-level-2-text"
+            class="item-text symbol-list-text">
             {{ warningLevel2Text }}
           </div>
         </div>
@@ -73,10 +85,14 @@
       <div class="symbol-list-table">
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
-            class="level-3 symbol-list-image-column symbol-list-image warning-image"></div>
+            class="level-3 symbol-list-image-column symbol-list-image warning-image"
+            aria-labelledby="symbol-list-warning-level-3-text">
+          </div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
-          <div class="item-text symbol-list-text">
+          <div
+            id="symbol-list-warning-level-3-text"
+            class="item-text symbol-list-text">
             {{ warningLevel3Text }}
           </div>
         </div>
@@ -86,10 +102,14 @@
       <div class="symbol-list-table">
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
-            class="level-4 symbol-list-image-column symbol-list-image warning-image"></div>
+            class="level-4 symbol-list-image-column symbol-list-image warning-image"
+            aria-labelledby="symbol-list-warning-level-4-text">
+          </div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
-          <div class="item-text symbol-list-text">
+          <div
+            id="symbol-list-warning-level-4-text"
+            class="item-text symbol-list-text">
             {{ warningLevel4Text }}
           </div>
           <hr class="bottom-separator" />
@@ -197,6 +217,7 @@ div.show-text-row {
 }
 
 div#fmi-warnings-view > div.row > button.show-text {
+  height: 30px;
   line-height: 30px;
   float: right;
   cursor: pointer;
@@ -334,6 +355,8 @@ div#fmi-warnings-view {
 div.symbol-list-text {
   display: table-cell;
   height: $symbol-list-line-height;
+  word-break: break-word;
+  hyphens: auto;
 }
 
 hr {

package/src/locales/en.json

@@ -164,9 +164,24 @@
   "moveMap": "Use the arrow keys to move the map",
   "mapAriaLabel": "Magnifiable map",
   "toContent": "Go to text-formatted warnings",
-  "warningsInAreaStart": "Warnings in",
-  "warningsInAreaEnd": "areas.",
-  "toNextContent": "Go to next paragraph.",
+  "warningsInAreasStart": "Warnings",
+  "fromDirection": "from",
+  "in1Areas": "in one area",
+  "in2Areas": "in two areas",
+  "in3Areas": "in three areas",
+  "in4Areas": "in four areas",
+  "in5Areas": "in five areas",
+  "in6Areas": "in six areas",
+  "in7Areas": "in seven areas",
+  "in8Areas": "in eight areas",
+  "in9Areas": "in nine areas",
+  "in10Areas": "in ten areas",
+  "in11Areas": "in eleven areas",
+  "in12Areas": "in twelve areas",
+  "in13Areas": "in thirteen areas",
+  "in14Areas": "in fourteen areas",
+  "in15Areas": "in fifteen areas",
+  "toNextContent": "Go to next section.",
   "infoButtonAriaLabelShowRegion": "Show current warnings for",
   "infoButtonAriaLabelCloseRegion": "Close current warnings for",
   "infoButtonAriaLabelValidWarnings": ".",
@@ -176,5 +191,7 @@
   "warningsInEffect": "warnings in effect in",
   "landAreas": "land areas and",
   "seaAreas": "sea areas",
-  "grayScale": "Gray scale"
+  "grayScale": "Gray scale",
+  "toggleOn": "On",
+  "toggleOff": "Off"
 }

package/src/locales/fi.json

@@ -87,7 +87,7 @@
   "coldWeather": "Pakkasvaroitus",
   "floodLevel": "Tulvavaroitus",
   "forestFireWeather": "Maastopalo­varoitus",
-  "grassFireWeather": "Ruohikkopalovaara",
+  "grassFireWeather": "Ruohikko­palovaara",
   "hotWeather": "Hellevaroitus",
   "pedestrianSafety": "Jalankulkusää",
   "rain": "Sadevaroitus",
@@ -95,7 +95,7 @@
   "seaThunderStorm": "Ukkospuuskia merialueilla",
   "seaWaterHeightHighWater": "Varoitus korkeasta merivedestä",
   "seaWaterHeightShallowWater": "Varoitus matalasta merivedestä",
-  "seaWaveHeight": "Aallokkovaroitus",
+  "seaWaveHeight": "Aallokko­varoitus",
   "seaWind": "Tuulivaroitus merelle",
   "thunderStorm": "Raju ukonilma",
   "trafficWeather": "Liikennesää",
@@ -164,9 +164,24 @@
   "moveMap": "Siirrä karttaa nuolinäppäimillä",
   "mapAriaLabel": "Zoomattava kartta",
   "toContent": "Siirry tekstimuotoisiin varoituksiin",
-  "warningsInAreaStart": "Varoituksia",
-  "warningsInAreaEnd": "alueella.",
-  "toNextContent": "Siirry seuraavaan kappaleeseen.",
+  "warningsInAreasStart": "Varoituksia",
+  "fromDirection": "suunnasta",
+  "in1Areas": "yhdellä alueella",
+  "in2Areas": "kahdella alueella",
+  "in3Areas": "kolmella alueella",
+  "in4Areas": "neljällä alueella",
+  "in5Areas": "viidellä alueella",
+  "in6Areas": "kuudella alueella",
+  "in7Areas": "seitsemällä alueella",
+  "in8Areas": "kahdeksalla alueella",
+  "in9Areas": "yhdeksällä alueella",
+  "in10Areas": "kymmenellä alueella",
+  "in11Areas": "yhdellätoista alueella",
+  "in12Areas": "kahdellatoista alueella",
+  "in13Areas": "kolmellatoista alueella",
+  "in14Areas": "neljällätoista alueella",
+  "in15Areas": "viidellätoista alueella",
+  "toNextContent": "Siirry seuraavaan osioon.",
   "infoButtonAriaLabelShowRegion": "Näytä alueen",
   "infoButtonAriaLabelCloseRegion": "Sulje alueen",
   "infoButtonAriaLabelValidWarnings": "voimassaolevat varoitukset",
@@ -176,5 +191,7 @@
   "warningsInEffect": "Varoituksia voimassa",
   "landAreas": "maa-alueella ja",
   "seaAreas": "merialueella",
-  "grayScale": "Harmaasävyt"
+  "grayScale": "Harmaasävyt",
+  "toggleOn": "On",
+  "toggleOff": "Off"
 }

package/src/locales/sv.json

@@ -164,8 +164,23 @@
   "moveMap": "Använd piltangenterna för att flytta kartan",
   "mapAriaLabel": "Förstorande karta",
   "toContent": "Gå till varningar i text format",
-  "warningsInAreaStart": "Varningar i",
-  "warningsInAreaEnd": "områden.",
+  "warningsInAreasStart": "Varningar",
+  "fromDirection": "från",
+  "in1Areas": "i ett område",
+  "in2Areas": "i två områden",
+  "in3Areas": "i tre områden",
+  "in4Areas": "i fyra områden",
+  "in5Areas": "i fem områden",
+  "in6Areas": "i sex områden",
+  "in7Areas": "i sju områden",
+  "in8Areas": "i åtta områden",
+  "in9Areas": "i nio områden",
+  "in10Areas": "i tio områden",
+  "in11Areas": "i elva områden",
+  "in12Areas": "i tolv områden",
+  "in13Areas": "i tretton områden",
+  "in14Areas": "i fjorton områden",
+  "in15Areas": "i femton områden",
   "toNextContent": "Gå till nästa stycke.",
   "infoButtonAriaLabelShowRegion": "Visa giltiga varningar för",
   "infoButtonAriaLabelCloseRegion": "Stäng giltiga varningar för",
@@ -176,5 +191,7 @@
   "warningsInEffect": "varningar i kraft i",
   "landAreas": "landområden och",
   "seaAreas": "havsområden",
-  "grayScale": "Gråskala"
+  "grayScale": "Gråskala",
+  "toggleOn": "On",
+  "toggleOff": "Off"
 }

package/src/mixins/config.js

@@ -1049,9 +1049,9 @@ export default {
           icon.geom = `
             <title>wind-symbol</title>
             <path d="${svgpath(
-              'M 12.140625 9.332031 L 6.84375 14.039062 L 12.140625 18.746094 L 12.140625 16.394531 L 20.535156 16.394531 L 20.535156 11.6875 L 12.140625 11.6875 Z M 12.140625 9.332031'
+              'M 12.140625 9.332031 L 6.84375 14.039062 L 12.140625 18.746094 L 12.140625 16.394531 L 19.835156 16.394531 L 19.835156 11.6875 L 12.140625 11.6875 Z M 12.140625 9.332031'
             )
-              .translate(-5.5, -7)
+              .translate(-5.7, -7)
               .rotate(warning.direction, 8.0, 8.0)
               .toString()}" fill="#221F20" stroke="rgba(255, 255, 255, 1.0)" stroke-width="2.5px" paint-order="stroke" />
           }`

package/src/mixins/utils.js

@@ -479,7 +479,7 @@ export default {
                     if (covRegions.has(regionId)) {
                       warningItem.coverage += covRegions.get(regionId)
                     } else {
-                      warningItem.coverage = 1
+                      warningItem.coverage = 100
                     }
                   }
                 })
@@ -546,8 +546,9 @@ export default {
           if (!this.coverageWarnings.includes(key)) {
             ;[...this.warnings[key].covRegions.keys()].forEach((covRegion) => {
               if (
-                this.coverageRegions[covRegion] == null ||
-                this.coverageRegions[covRegion] < this.warnings[key].severity
+                (this.coverageRegions[covRegion] == null ||
+                this.coverageRegions[covRegion] < this.warnings[key].severity) &&
+                this.warnings[key].covRegions.get(covRegion) >= this.coverageCriterion
               ) {
                 this.coverageRegions[covRegion] = this.warnings[key].severity
               }
@@ -748,6 +749,7 @@ export default {
       const maxSeverities = this.getMaxSeverities(warnings)
       const legend = this.createLegend(maxSeverities)
       const regions = this.createRegions(warnings)
+      this.optimizeCovRegions(warnings, regions)
       return {
         warnings,
         days,
@@ -806,6 +808,21 @@ export default {
         visible,
       }
     },
+    // Include also lakes to prevent overlapping symbols in Saimaa
+    optimizeCovRegions(warnings, regions) {
+      Object.keys(this.geometries[this.geometryId]).filter((regionId) =>
+        this.geometries[this.geometryId][regionId]?.type === 'sea' &&
+        this.geometries[this.geometryId][regionId]?.subType === 'lake'
+      ).filter((regionId) => regions.some((day) =>
+        day['sea'].some((region) => region['key'] === regionId
+      ))).forEach((regionId) =>
+        Object.keys(warnings).filter((warningKey) =>
+          warnings[warningKey].covRegions.size > 0
+        ).forEach((warningKey) => {
+          warnings[warningKey].covRegions.set(regionId, 0)
+        }
+      ))
+    },
     regionsDefault() {
       return [
         {

package/src/scss/backgrounds.scss

@@ -0,0 +1,2 @@
+$disabled-zoom-in: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjM0cHgiIGhlaWdodD0iMzRweCIgdmlld0JveD0iMCAwIDM0IDM0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPnBsdXMtc3ltYm9sPC90aXRsZT4KICAgIDxnIGlkPSJpY29ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IlN5bWJvbHMiPgogICAgICAgICAgICA8ZyBpZD0icGx1cy1zeW1ib2wiPgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9ImZpbGwtMyIgZmlsbD0iIzkyOTI5MiIgeD0iMCIgeT0iMCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjM0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcsMjQgTDE3LDEwIiBpZD0iZmlsbC0yIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAsMTcgTDI0LDE3IiBpZD0iZmlsbC0xIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
+$disabled-zoom-out: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjM0cHgiIGhlaWdodD0iMzRweCIgdmlld0JveD0iMCAwIDM0IDM0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPm1pbnVzLXN5bWJvbDwvdGl0bGU+CiAgICA8ZyBpZD0iaWNvbnMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJTeW1ib2xzIj4KICAgICAgICAgICAgPGcgaWQ9Im1pbnVzLXN5bWJvbCI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iZmlsbC0yIiBmaWxsPSIjOTI5MjkyIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzQiIGhlaWdodD0iMzQiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMCwxNyBMMjQsMTciIGlkPSJmaWxsLTEiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);

package/src/scss/colors.scss

@@ -13,7 +13,7 @@ $lightest-gray: #f8f8f8;
 $lighter-gray: #eee;
 $light-gray: #e8e8e8;
 $gray: #e3e3e3;
-$dark-gray: #979797; // from arrow-*.svg
+$dark-gray: #929292;
 $darker-gray: #434752;
 $darkest-gray: #282b34;
 $variant-gray-lightest: #f4f4f4;
@@ -21,8 +21,8 @@ $variant-gray-lighter: #e8e8e8;
 $variant-gray-light: #e4e4e4;
 $variant-gray: #e1e1e1;
 $variant-gray-dark: #aaaaaa;
-$variant-gray-darker: #555555;
-$variant-gray-darkest: #2d2d2d;
+$variant-gray-darker: #858585;
+$variant-gray-darkest: #555555;
 $light-blue: #e7f0fa;
 $blue: #3a66e3;
 $dark-blue: #303193;
@@ -31,3 +31,5 @@ $tooltip-background-color: $white;
 $tooltip-inner-color: $black;
 $turquoise: rgba(2, 184, 206, 0.4);
 $notification-color: #e7f0fa;
+$toggle-on-text: $white;
+$toggle-off-text: #606060;

package/src/scss/constants.scss

@@ -9,7 +9,7 @@ $warning-symbol-font-size: 0.625rem;
 $current-warning-height: 38px;
 $current-warning-image-height: 28px;
 $current-description-image-height: 48px;
-$symbol-list-width: 250px;
+$symbol-list-width: 260px;
 $symbol-list-line-height: 50px;
 $symbol-list-select-height: 30px;
 $symbol-list-image-size: 44px;

package/src/scss/themes/dark-gray.scss

@@ -12,8 +12,8 @@ $dark-gray-current-warning-toggle-color: $darker-gray;
 $dark-gray-current-warning-toggle-active-color: $darkest-gray;
 $dark-gray-legend-heading-background-color: $black;
 $dark-gray-legend-container-background-color: $black;
-$dark-gray-legend-background-color: $darker-gray;
-$dark-gray-legend-toggle-background-color: $variant-gray-darkest;
+$dark-gray-legend-background-color: $variant-gray-darker;
+$dark-gray-legend-toggle-background-color: $darker-gray;
 $dark-gray-legend-active-toggle-background-color: $lighter-gray;
 $dark-gray-description-background-color: $darker-gray;
 $dark-gray-description-border-color: $dark-gray;
@@ -26,7 +26,7 @@ $dark-gray-popup-border-color: $dark-gray;
 $dark-gray-popup-table-background-color: $darker-gray;
 $dark-gray-green: white;
 $dark-gray-yellow: $variant-gray-dark;
-$dark-gray-orange: $variant-gray-darker;
+$dark-gray-orange: $variant-gray-darkest;
 $dark-gray-red: black;
 $dark-gray-green-shadow: $dark-gray;
 $dark-gray-yellow-shadow: $dark-gray;

package/src/scss/themes/dark.scss

@@ -12,7 +12,7 @@ $dark-current-warning-toggle-color: $darker-gray;
 $dark-current-warning-toggle-active-color: $darkest-gray;
 $dark-legend-container-background-color: $darkest-gray;
 $dark-legend-heading-background-color: $darkest-gray;
-$dark-legend-background-color: $darkest-gray;
+$dark-legend-background-color: $variant-gray-darker;
 $dark-legend-toggle-background-color: $darker-gray;
 $dark-legend-active-toggle-background-color: $dark-gray;
 $dark-description-background-color: $darker-gray;

package/src/scss/themes/light-gray.scss

@@ -8,12 +8,12 @@ $light-gray-date-selector-mobile-text-color: $black;
 $light-gray-border-color: $white;
 $light-gray-horizontal-rule-color: $lighter-gray;
 $light-gray-current-warning-heading-color: $lightest-gray;
-$light-gray-current-warning-toggle-color: $light-gray;
+$light-gray-current-warning-toggle-color: $dark-gray;
 $light-gray-current-warning-toggle-active-color: $darker-gray;
 $light-gray-legend-heading-background-color: $white;
 $light-gray-legend-container-background-color: $white;
-$light-gray-legend-background-color: $lighter-gray;
-$light-gray-legend-toggle-background-color: $variant-gray-lightest;
+$light-gray-legend-background-color: $variant-gray-darker;
+$light-gray-legend-toggle-background-color: $dark-gray;
 $light-gray-legend-active-toggle-background-color: $darker-gray;
 $light-gray-description-background-color: $lighter-gray;
 $light-gray-description-border-color: $gray;
@@ -26,10 +26,10 @@ $light-gray-popup-border-color: $light-gray;
 $light-gray-popup-table-background-color: $lighter-gray;
 $light-gray-green: white;
 $light-gray-yellow: $variant-gray-dark;
-$light-gray-orange: $variant-gray-darker;
+$light-gray-orange: $variant-gray-darkest;
 $light-gray-red: black;
 $light-gray-green-shadow: $light-gray;
 $light-gray-yellow-shadow: $light-gray;
 $light-gray-orange-shadow: $light-gray;
 $light-gray-red-shadow: $light-gray;
-$light-gray-border: #666666;
+$light-gray-border: $variant-gray-darker;

package/src/scss/themes/light.scss

@@ -8,12 +8,12 @@ $light-date-selector-mobile-text-color: $black;
 $light-border-color: $white;
 $light-horizontal-rule-color: $lighter-gray;
 $light-current-warning-heading-color: $lightest-gray;
-$light-current-warning-toggle-color: $light-gray;
+$light-current-warning-toggle-color: $dark-gray;
 $light-current-warning-toggle-active-color: $blue;
 $light-legend-heading-background-color: $white;
 $light-legend-container-background-color: $white;
-$light-legend-background-color: $lighter-gray;
-$light-legend-toggle-background-color: $light-gray;
+$light-legend-background-color: $variant-gray-darker;
+$light-legend-toggle-background-color: $dark-gray;
 $light-legend-active-toggle-background-color: $blue;
 $light-description-background-color: $lighter-gray;
 $light-description-border-color: $gray;

package/src/scss/warningImages.scss

@@ -181,7 +181,6 @@ div.symbol-image {
 span.symbol-text {
   display: table-cell;
   vertical-align: middle;
-  line-height: $current-warning-image-height;
   width: 100%;
   text-align: center;
   margin: 0 auto;
@@ -192,7 +191,7 @@ span.symbol-text {
   font-weight: 700;
 }
 
-@media (max-width: 575px) {
+@media (width < 576px) {
   .symbol-text {
     display: none;
   }

package/src/assets/img/ui/toggle-selected-blue.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#3a66e3" class="bi bi-toggle-on" viewBox="0 0 30 30">
-  <path d="M 9.375 5.625 C 4.199219 5.625 0 9.824219 0 15 C 0 20.175781 4.199219 24.375 9.375 24.375 L 20.625 24.375 C 25.800781 24.375 30 20.175781 30 15 C 30 9.824219 25.800781 5.625 20.625 5.625 Z M 20.625 22.5 C 16.484375 22.5 13.125 19.140625 13.125 15 C 13.125 10.859375 16.484375 7.5 20.625 7.5 C 24.765625 7.5 28.125 10.859375 28.125 15 C 28.125 19.140625 24.765625 22.5 20.625 22.5 Z M 20.625 22.5"/>
-</svg>

package/src/assets/img/ui/toggle-selected-dark.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#434752" class="bi bi-toggle-on" viewBox="0 0 30 30">
-  <path d="M 9.375 5.625 C 4.199219 5.625 0 9.824219 0 15 C 0 20.175781 4.199219 24.375 9.375 24.375 L 20.625 24.375 C 25.800781 24.375 30 20.175781 30 15 C 30 9.824219 25.800781 5.625 20.625 5.625 Z M 20.625 22.5 C 16.484375 22.5 13.125 19.140625 13.125 15 C 13.125 10.859375 16.484375 7.5 20.625 7.5 C 24.765625 7.5 28.125 10.859375 28.125 15 C 28.125 19.140625 24.765625 22.5 20.625 22.5 Z M 20.625 22.5"/>
-</svg>

package/src/assets/img/ui/toggle-selected-light.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#e3e3e3" class="bi bi-toggle-on" viewBox="0 0 30 30">
-  <path d="M 9.375 5.625 C 4.199219 5.625 0 9.824219 0 15 C 0 20.175781 4.199219 24.375 9.375 24.375 L 20.625 24.375 C 25.800781 24.375 30 20.175781 30 15 C 30 9.824219 25.800781 5.625 20.625 5.625 Z M 20.625 22.5 C 16.484375 22.5 13.125 19.140625 13.125 15 C 13.125 10.859375 16.484375 7.5 20.625 7.5 C 24.765625 7.5 28.125 10.859375 28.125 15 C 28.125 19.140625 24.765625 22.5 20.625 22.5 Z M 20.625 22.5"/>
-</svg>

package/src/assets/img/ui/toggle-unselected-dark.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#434752" class="bi bi-toggle-off" viewBox="0 0 30 30">
-    <path d="M 20.625 5.625 C 25.800781 5.625 30 9.824219 30 15 C 30 20.175781 25.800781 24.375 20.625 24.375 L 9.375 24.375 C 4.199219 24.375 0 20.175781 0 15 C 0 9.824219 4.199219 5.625 9.375 5.625 Z M 9.375 22.5 C 13.515625 22.5 16.875 19.140625 16.875 15 C 16.875 10.859375 13.515625 7.5 9.375 7.5 C 5.234375 7.5 1.875 10.859375 1.875 15 C 1.875 19.140625 5.234375 22.5 9.375 22.5 Z M 9.375 22.5 "/>
-</svg>

package/src/assets/img/ui/toggle-unselected-light.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#979797" class="bi bi-toggle-off" viewBox="0 0 30 30">
-    <path d="M 20.625 5.625 C 25.800781 5.625 30 9.824219 30 15 C 30 20.175781 25.800781 24.375 20.625 24.375 L 9.375 24.375 C 4.199219 24.375 0 20.175781 0 15 C 0 9.824219 4.199219 5.625 9.375 5.625 Z M 9.375 22.5 C 13.515625 22.5 16.875 19.140625 16.875 15 C 16.875 10.859375 13.515625 7.5 9.375 7.5 C 5.234375 7.5 1.875 10.859375 1.875 15 C 1.875 19.140625 5.234375 22.5 9.375 22.5 Z M 9.375 22.5 "/>
-</svg>