@fmidev/smartmet-alert-client 4.4.19 → 4.7.0-alpha.0

package/src/AlertClientVue.vue

@@ -0,0 +1,170 @@
+<template>
+  <AlertClient
+    v-if="visible"
+    :refresh-interval="refreshIntervalNormalized"
+    :default-day="selectedDayNormalized"
+    :static-days="staticDaysNormalized"
+    :start-from="startFrom"
+    :region-list-enabled="regionListEnabledNormalized"
+    :gray-scale-selector="grayScaleSelectorNormalized"
+    :current-time="currentTime"
+    :warnings-data="warningsData"
+    :daily-warning-types="dailyWarningTypesNormalized"
+    :geometry-id="geometryIdNormalized"
+    :language="language"
+    :theme="themeClass"
+    :sleep="sleepNormalized"
+    :loading="loading"
+    :spinner-enabled="spinnerEnabledNormalized"
+    @loaded="onLoaded"
+    @theme-changed="onThemeChanged"
+    @update-warnings="fetchWarnings" />
+</template>
+<script>
+/**
+ * Vue wrapper component for AlertClient.
+ * Accepts native JavaScript types (Number, Boolean) unlike the web component
+ * version which only accepts strings.
+ */
+import AlertClient from './components/AlertClient.vue'
+import alertClientCore, { toBool, toNum } from './mixins/alertClientCore'
+import config from './mixins/config'
+import utils from './mixins/utils'
+
+export default {
+  name: 'AlertClientVue',
+  components: {
+    AlertClient,
+  },
+  mixins: [config, utils, alertClientCore],
+  props: {
+    currentDate: {
+      type: [String, Date],
+      default: null,
+    },
+    baseUrl: {
+      type: String,
+      default: 'https://www.ilmatieteenlaitos.fi/geoserver/alert/ows',
+    },
+    selectedDay: {
+      type: [String, Number],
+      default: 0,
+    },
+    regionListEnabled: {
+      type: [String, Boolean],
+      default: true,
+    },
+    spinnerEnabled: {
+      type: [String, Boolean],
+      default: true,
+    },
+    grayScaleSelector: {
+      type: [String, Boolean],
+      default: true,
+    },
+    staticDays: {
+      type: [String, Boolean],
+      default: true,
+    },
+    startFrom: {
+      type: String,
+      default: '',
+    },
+    weatherUpdated: {
+      type: String,
+      default: '',
+    },
+    floodUpdated: {
+      type: String,
+      default: '',
+    },
+    weatherWarnings: {
+      type: String,
+      default: '',
+    },
+    floodWarnings: {
+      type: String,
+      default: '',
+    },
+    warnings: {
+      type: [String, Object],
+      default: null,
+    },
+    dailyWarningTypes: {
+      type: [String, Array],
+      default: () => [],
+    },
+    refreshInterval: {
+      type: [String, Number],
+      default: 900000, // 1000 * 60 * 15
+    },
+    geometryId: {
+      type: [String, Number],
+      default: () => Number(config.props.defaultGeometryId) || 2021,
+    },
+    language: {
+      type: String,
+      default: import.meta.env.VITE_LANGUAGE || 'fi',
+    },
+    theme: {
+      type: String,
+      default: 'light',
+    },
+    fontScale: {
+      type: [String, Number],
+      default: 1,
+    },
+    sleep: {
+      type: [String, Boolean],
+      default: true,
+    },
+    debugMode: {
+      type: [String, Boolean],
+      default: false,
+    },
+  },
+  computed: {
+    // Type normalizers for mixed-type props
+    selectedDayNormalized() {
+      return toNum(this.selectedDay, 0)
+    },
+    regionListEnabledNormalized() {
+      return toBool(this.regionListEnabled, true)
+    },
+    grayScaleSelectorNormalized() {
+      return toBool(this.grayScaleSelector, true)
+    },
+    staticDaysNormalized() {
+      return toBool(this.staticDays, true)
+    },
+    dailyWarningTypesNormalized() {
+      if (Array.isArray(this.dailyWarningTypes)) return this.dailyWarningTypes
+      if (
+        typeof this.dailyWarningTypes === 'string' &&
+        this.dailyWarningTypes
+      ) {
+        return this.dailyWarningTypes.split(',').map((item) => item.trim())
+      }
+      return []
+    },
+    refreshIntervalNormalized() {
+      return toNum(this.refreshInterval, 900000)
+    },
+    geometryIdNormalized() {
+      return toNum(this.geometryId, 2021)
+    },
+    sleepNormalized() {
+      return toBool(this.sleep, true)
+    },
+    spinnerEnabledNormalized() {
+      return toBool(this.spinnerEnabled, true)
+    },
+    debugModeNormalized() {
+      return toBool(this.debugMode, false)
+    },
+  },
+}
+</script>
+<style lang="scss">
+@import './scss/utilities.scss';
+</style>

package/src/App.vue

@@ -1,29 +1,33 @@
 <template>
   <AlertClient
     v-if="visible"
-    :refresh-interval="refreshIntervalParsed"
-    :default-day="selectedDayParsed"
-    :static-days="staticDaysParsed"
+    :refresh-interval="refreshIntervalNormalized"
+    :default-day="selectedDayNormalized"
+    :static-days="staticDaysNormalized"
     :start-from="startFrom"
-    :region-list-enabled="regionListEnabledParsed"
-    :gray-scale-selector="grayScaleSelectorParsed"
+    :region-list-enabled="regionListEnabledNormalized"
+    :gray-scale-selector="grayScaleSelectorNormalized"
     :current-time="currentTime"
     :warnings-data="warningsData"
-    :daily-warning-types="dailyWarningTypesParsed"
-    :geometry-id="geometryIdParsed"
+    :daily-warning-types="dailyWarningTypesNormalized"
+    :geometry-id="geometryIdNormalized"
     :language="language"
     :theme="themeClass"
-    :sleep="sleepParsed"
+    :sleep="sleepNormalized"
     :loading="loading"
-    :spinner-enabled="spinnerEnabledParsed"
+    :spinner-enabled="spinnerEnabledNormalized"
     @loaded="onLoaded"
-    @themeChanged="onThemeChanged"
+    @theme-changed="onThemeChanged"
     @update-warnings="fetchWarnings" />
 </template>
 <script>
-import fetch from 'cross-fetch'
-
+/**
+ * Web component wrapper for AlertClient.
+ * All props are strings (HTML attribute limitation).
+ * Use AlertClientVue.vue for native Vue usage with proper types.
+ */
 import AlertClient from './components/AlertClient.vue'
+import alertClientCore, { toBool, toNum } from './mixins/alertClientCore'
 import config from './mixins/config'
 import utils from './mixins/utils'
 
@@ -32,7 +36,7 @@ export default {
   components: {
     AlertClient,
   },
-  mixins: [config, utils],
+  mixins: [config, utils, alertClientCore],
   props: {
     currentDate: {
       type: String,
@@ -66,10 +70,22 @@ export default {
       type: String,
       default: '',
     },
-    weatherUpdated: String,
-    floodUpdated: String,
-    weatherWarnings: String,
-    floodWarnings: String,
+    weatherUpdated: {
+      type: String,
+      default: '',
+    },
+    floodUpdated: {
+      type: String,
+      default: '',
+    },
+    weatherWarnings: {
+      type: String,
+      default: '',
+    },
+    floodWarnings: {
+      type: String,
+      default: '',
+    },
     warnings: {
       type: String,
       default: '',
@@ -102,214 +118,48 @@ export default {
       type: String,
       default: 'true',
     },
-    spinnerEnabled: {
-      type: String,
-      default: 'true',
-    },
     debugMode: {
       type: String,
       default: 'false',
     },
   },
-  data() {
-    return {
-      loading: 1,
-      updatedAt: null,
-      refreshedAt: null,
-      themeClass: `${this.theme}-theme`,
-      warningsData: null,
-      visible: true,
-    }
-  },
   computed: {
-    selectedDayParsed() {
-      return Number(this.selectedDay)
+    // String-to-type normalizers for web component props
+    selectedDayNormalized() {
+      return toNum(this.selectedDay, 0)
     },
-    regionListEnabledParsed() {
-      return this.regionListEnabled.toLowerCase() !== 'false'
+    regionListEnabledNormalized() {
+      return toBool(this.regionListEnabled, true)
     },
-    grayScaleSelectorParsed() {
-      return this.grayScaleSelector.toLowerCase() !== 'false'
+    grayScaleSelectorNormalized() {
+      return toBool(this.grayScaleSelector, true)
     },
-    staticDaysParsed() {
-      return this.staticDays.toLowerCase() !== 'false'
+    staticDaysNormalized() {
+      return toBool(this.staticDays, true)
     },
-    dailyWarningTypesParsed() {
+    dailyWarningTypesNormalized() {
       return this.dailyWarningTypes
         ? this.dailyWarningTypes.split(',').map((item) => item.trim())
         : []
     },
-    refreshIntervalParsed() {
-      return Number(this.refreshInterval)
-    },
-    geometryIdParsed() {
-      return Number(this.geometryId)
-    },
-    sleepParsed() {
-      return this.sleep.toLowerCase() !== 'false'
-    },
-    spinnerEnabledParsed() {
-      return this.spinnerEnabled.toLowerCase() !== 'false'
-    },
-    weatherUpdatedType() {
-      return 'weather_update_time'
-    },
-    floodUpdatedType() {
-      return 'flood_update_time'
-    },
-    weatherWarningsType() {
-      return 'weather_finland_active_all'
-    },
-    floodWarningsType() {
-      return 'flood_finland_active_all'
-    },
-    weatherUpdatedQuery() {
-      return this.weatherUpdated || `${this.query}${this.weatherUpdatedType}`
-    },
-    floodUpdatedQuery() {
-      return this.floodUpdated || `${this.query}${this.floodUpdatedType}`
-    },
-    weatherWarningsQuery() {
-      return this.weatherWarnings || `${this.query}${this.weatherWarningsType}`
-    },
-    floodWarningsQuery() {
-      return (
-        this.floodWarnings ||
-        `${this.query}${this.floodWarningsType}${this.floodFilter}`
-      )
-    },
-    query() {
-      return '?service=WFS&version=1.0.0&request=GetFeature&maxFeatures=1000&outputFormat=application%2Fjson&typeName='
-    },
-    floodSupportedSeverities() {
-      return ['moderate', 'severe', 'extreme']
-    },
-    floodFilter() {
-      return `${this.floodSupportedSeverities.reduce(
-        (filter, severity, index) =>
-          `${filter + (index === 0 ? '' : ',')}%27${severity.toUpperCase()}%27`,
-        '&cql_filter=severity%20IN%20('
-      )})%20AND%20language=%27${this.capLanguage()}%27`
-    },
-    capLanguage() {
-      return () =>
-        ({
-          fi: 'fi-FI',
-          sv: 'sv-SV',
-          en: 'en-US',
-        })[this.language]
-    },
-    currentTime() {
-      if (this.refreshedAt) {
-        return this.refreshedAt
-      }
-      if (this.currentDate) {
-        return new Date(this.currentDate).getTime()
-      }
-      return Date.now()
-    },
-  },
-  created() {
-    if (this.warnings) {
-      this.warningsData = JSON.parse(this.warnings)
-    }
-  },
-  mounted() {
-    if (this.fontScale != null && this.fontScale.trim() !== ''
-    && Number(this.fontScale) !== 1) {
-      const newFontScale = Number(this.fontScale)
-      if (!Number.isNaN(newFontScale)) {
-        let originalFontSize
-        if (
-          typeof window !== 'undefined' &&
-          typeof document !== 'undefined' &&
-          document.documentElement &&
-          window.getComputedStyle
-        ) {
-          const htmlElement = document.documentElement
-          const computedStyle = window.getComputedStyle(htmlElement)
-          originalFontSize = parseFloat(computedStyle.fontSize)
-        }
-        if (originalFontSize == null || Number.isNaN(originalFontSize)) {
-          originalFontSize = 16 // Fallback
-        }
-        const scaledFontSize = newFontScale * originalFontSize
-        const newFontSize = Math.round(scaledFontSize * 100) / 100
-        document.documentElement.style.fontSize = `${newFontSize}px`
-      }
-    }
-  },
-  serverPrefetch() {
-    if (!this.warnings) {
-      return this.fetchWarnings()
-    }
-  },
-  methods: {
-    onLoaded(loaded) {
-      if (loaded !== 0) {
-        this.loading = loaded === -1 ? -1 : 0
-      }
+    refreshIntervalNormalized() {
+      return toNum(this.refreshInterval, 900000)
     },
-    onThemeChanged(newTheme) {
-      this.themeClass = `${
-        newTheme != null && newTheme.length > 0 ? newTheme : this.theme
-      }-theme`
+    geometryIdNormalized() {
+      return toNum(this.geometryId, 2021)
     },
-    fetchWarnings() {
-      if (this.warnings) {
-        return
-      }
-      this.loading = 1
-      if (this.debugMode.toLowerCase() !== 'false') {
-        console.log(`Updating warnings at ${new Date()}`)
-      }
-      const queries = new Map()
-        .set(
-          `${this.baseUrl}${this.weatherUpdatedQuery}`,
-          this.weatherUpdatedType
-        )
-        .set(`${this.baseUrl}${this.floodUpdatedQuery}`, this.floodUpdatedType)
-        .set(
-          `${this.baseUrl}${this.weatherWarningsQuery}`,
-          this.weatherWarningsType
-        )
-        .set(
-          `${this.baseUrl}${this.floodWarningsQuery}`,
-          this.floodWarningsType
-        )
-      const responseData = {}
-      return Promise.allSettled(
-        [...queries.keys()].map(async (query) =>
-          fetch(query).then((response) =>
-            response
-              .json()
-              .then((json) => {
-                const currentTime = Date.now()
-                if (this.updatedAt != null) {
-                  this.refreshedAt = currentTime
-                }
-                this.updatedAt = currentTime
-                responseData[queries.get(query)] = json
-              })
-              .catch((error) => {
-                this.loading = -1
-                console.log(error)
-              })
-          )
-        )
-      ).then(() => {
-        this.warningsData = responseData
-      })
+    sleepNormalized() {
+      return toBool(this.sleep, true)
     },
-    show() {
-      this.visible = true
+    spinnerEnabledNormalized() {
+      return toBool(this.spinnerEnabled, true)
     },
-    hide() {
-      this.visible = false
+    debugModeNormalized() {
+      return toBool(this.debugMode, false)
     },
   },
 }
 </script>
-<style>
-@import 'bootstrap/dist/css/bootstrap.min.css';
+<style lang="scss">
+@import './scss/utilities.scss';
 </style>

package/src/assets/img/ui/arrow-down.svg

@@ -1,11 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="15px" height="8px" viewBox="0 0 15 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>arrow-down-symbol</title>
-    <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Symbols" transform="translate(-732.000000, -738.000000)" stroke="#ffffff" stroke-width="1.5">
-            <g id="arrow-down-symbol" transform="translate(733.000000, 739.000000)">
-                <polyline id="fill-1" transform="translate(6.500000, 3.000000) rotate(-270.000000) translate(-6.500000, -3.000000) " points="3.5 -3.5 9.5 3 3.5 9.5"></polyline>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="8">
+  <title>arrow-down-symbol</title>
+  <path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 1 7.5 7 1 1"/>
+</svg>

package/src/assets/img/ui/arrow-up.svg

@@ -1,11 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="15px" height="8px" viewBox="0 0 15 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>arrow-up-symbol</title>
-    <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Symbols" transform="translate(-670.000000, -738.000000)" stroke="#ffffff" stroke-width="1.5">
-            <g id="arrow-up-symbol" transform="translate(671.000000, 739.000000)">
-                <polyline id="fill-1" transform="translate(6.500000, 3.000000) scale(1, -1) rotate(-270.000000) translate(-6.500000, -3.000000) " points="3.5 -3.5 9.5 3 3.5 9.5"></polyline>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="8">
+  <title>arrow-up-symbol</title>
+  <path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 7 7.5 1 1 7"/>
+</svg>

package/src/assets/img/ui/clear.svg

@@ -1,21 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.8.2 (29753) - http://www.bohemiancoding.com/sketch -->
-    <title>close icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Layouts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="varoitukset-tablet-aktiivinen-varoitussymboli-v1" transform="translate(-710.000000, -241.000000)">
-            <g id="legenda" transform="translate(514.000000, 240.000000)">
-                <g id="poista-valinnat-linkki" transform="translate(106.000000, 1.000000)">
-                    <g id="close-icon" transform="translate(90.000000, 0.000000)">
-                        <circle id="oval" fill="#56B8E5" cx="7" cy="7" r="7"></circle>
-                        <g id="Group" transform="translate(7.156854, 7.156854) rotate(-315.000000) translate(-7.156854, -7.156854) translate(3.156854, 3.156854)" fill="#FFFFFF">
-                            <path d="M4.5,4.5 L4.5,7 C4.5,7.27614237 4.27614237,7.5 4,7.5 C3.72385763,7.5 3.5,7.27614237 3.5,7 L3.5,4.5 L1,4.5 C0.723857625,4.5 0.5,4.27614237 0.5,4 C0.5,3.72385763 0.723857625,3.5 1,3.5 L3.5,3.5 L3.5,1 C3.5,0.723857625 3.72385763,0.5 4,0.5 C4.27614237,0.5 4.5,0.723857625 4.5,1 L4.5,3.5 L7,3.5 C7.27614237,3.5 7.5,3.72385763 7.5,4 C7.5,4.27614237 7.27614237,4.5 7,4.5 L4.5,4.5 L4.5,4.5 Z" id="x"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+  <title>close icon</title>
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="7" cy="7" r="7" fill="#56b8e5"/>
+    <path fill="#fff" d="M7.157 7.864 5.389 9.632a.5.5 0 0 1-.707-.707L6.45 7.157 4.682 5.389a.5.5 0 0 1 .707-.707L7.157 6.45l1.768-1.768a.5.5 0 0 1 .707.707L7.864 7.157l1.768 1.768a.5.5 0 0 1-.707.707z"/>
+  </g>
+</svg>

package/src/assets/img/ui/close.svg

@@ -1,15 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
-    <title>close-symbol</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Symbols" transform="translate(-793.000000, -735.000000)" stroke="#000000" stroke-width="1.5">
-            <g id="close-symbol" transform="translate(794.000000, 736.000000)">
-                <path d="M0,9.19238816 L9.19238816,0" id="fill-2"></path>
-                <path d="M0,0 L9.19238816,9.19238816" id="fill-1"></path>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11">
+  <title>close-symbol</title>
+  <path fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5" d="M1 10.192 10.192 1M1 1l9.192 9.192"/>
+</svg>

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

@@ -1,13 +1,12 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="55" height="30" viewBox="0 0 55 30" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="30">
   <defs>
     <clipPath id="outer-clip">
-      <rect x="0" y="5" width="55" height="20" rx="4" ry="4"/>
+      <rect width="55" height="20" y="5" rx="4" ry="4"/>
     </clipPath>
     <clipPath id="inner-clip">
-      <path d="M 35 5 L 51 5 A 4 4 0 0 1 55 9 L 55 21 A 4 4 0 0 1 51 25 L 35 25 Z"/>
+      <path d="M35 5h16a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H35Z"/>
     </clipPath>
   </defs>
-  <rect x="0" y="5" width="55" height="20" rx="4" ry="4" fill="#767676" stroke="#767676" stroke-width="1" clip-path="url(#outer-clip)"/>
-  <path d="M 35 5 L 51 5 A 4 4 0 0 1 55 9 L 55 21 A 4 4 0 0 1 51 25 L 35 25 Z" fill="#ffffff" stroke="#767676" stroke-width="1" clip-path="url(#inner-clip)"/>
+  <rect width="55" height="20" y="5" fill="#767676" stroke="#767676" clip-path="url(#outer-clip)" rx="4" ry="4"/>
+  <path fill="#fff" stroke="#767676" d="M35 5h16a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H35Z" clip-path="url(#inner-clip)"/>
 </svg>

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

@@ -1,13 +1,12 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="55" height="30" viewBox="0 0 55 30" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="30">
   <defs>
     <clipPath id="outer-clip">
-      <rect x="0" y="5" width="55" height="20" rx="4" ry="4"/>
+      <rect width="55" height="20" y="5" rx="4" ry="4"/>
     </clipPath>
     <clipPath id="inner-clip">
-      <path d="M 4 5 L 20 5 L 20 25 L 4 25 A 4 4 0 0 1 0 21 L 0 9 A 4 4 0 0 1 4 5 Z"/>
+      <path d="M4 5h16v20H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4"/>
     </clipPath>
   </defs>
-  <rect x="0" y="5" width="55" height="20" rx="4" ry="4" fill="#ebebeb" stroke="#767676" stroke-width="1" clip-path="url(#outer-clip)"/>
-  <path d="M 4 5 L 20 5 L 20 25 L 4 25 A 4 4 0 0 1 0 21 L 0 9 A 4 4 0 0 1 4 5 Z" fill="#ffffff" stroke="#767676" stroke-width="1" clip-path="url(#inner-clip)"/>
+  <rect width="55" height="20" y="5" fill="#ebebeb" stroke="#767676" clip-path="url(#outer-clip)" rx="4" ry="4"/>
+  <path fill="#fff" stroke="#767676" d="M4 5h16v20H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4Z" clip-path="url(#inner-clip)"/>
 </svg>

package/src/assets/img/warning/cold-weather.svg

@@ -1,7 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28" version="1.1">
-<g id="surface1">
-<path style="stroke:rgba(255, 255, 255, 1.0);stroke-width: 2.5px;paint-order: stroke;fill-rule:evenodd;fill:rgb(13.333333%,12.156863%,12.54902%);fill-opacity:1;" d="M 13.828125 21.453125 C 12.722656 21.453125 11.820312 20.554688 11.820312 19.445312 C 11.820312 18.882812 12.050781 18.359375 12.46875 17.976562 L 12.46875 17.972656 C 12.589844 17.859375 12.667969 17.699219 12.667969 17.519531 L 12.667969 7.382812 C 12.667969 6.742188 13.1875 6.222656 13.828125 6.222656 C 14.46875 6.222656 14.992188 6.742188 14.992188 7.382812 L 14.992188 17.519531 C 14.992188 17.699219 15.070312 17.859375 15.191406 17.972656 L 15.191406 17.976562 C 15.609375 18.359375 15.835938 18.882812 15.835938 19.445312 C 15.835938 20.554688 14.9375 21.453125 13.828125 21.453125 Z M 17.503906 9.894531 C 17.792969 9.894531 18.023438 9.660156 18.023438 9.375 C 18.023438 9.089844 17.792969 8.855469 17.503906 8.855469 L 16.234375 8.855469 L 16.234375 8.203125 L 17.503906 8.203125 C 17.792969 8.203125 18.023438 7.96875 18.023438 7.683594 C 18.023438 7.398438 17.792969 7.164062 17.503906 7.164062 L 16.226562 7.164062 C 16.113281 5.941406 15.082031 4.976562 13.828125 4.976562 C 12.503906 4.976562 11.425781 6.058594 11.425781 7.382812 L 11.425781 17.265625 C 10.882812 17.859375 10.578125 18.640625 10.578125 19.445312 C 10.578125 21.238281 12.035156 22.699219 13.828125 22.699219 C 15.621094 22.699219 17.082031 21.238281 17.082031 19.445312 C 17.082031 18.640625 16.777344 17.859375 16.234375 17.265625 L 16.234375 11.585938 L 17.503906 11.585938 C 17.792969 11.585938 18.023438 11.355469 18.023438 11.066406 C 18.023438 10.78125 17.792969 10.550781 17.503906 10.550781 L 16.234375 10.550781 L 16.234375 9.894531 Z M 17.503906 9.894531 "/>
-<path style="stroke:rgba(255, 255, 255, 1.0);stroke-width: 1px;paint-order: stroke;fill-rule:evenodd;fill:rgb(13.333333%,12.156863%,12.54902%);fill-opacity:1;" d="M 14.367188 18.234375 L 14.367188 12.691406 C 14.367188 12.390625 14.128906 12.152344 13.828125 12.152344 C 13.53125 12.152344 13.289062 12.390625 13.289062 12.691406 L 13.289062 18.234375 C 12.824219 18.441406 12.5 18.90625 12.5 19.445312 C 12.5 20.179688 13.097656 20.773438 13.828125 20.773438 C 14.5625 20.773438 15.15625 20.179688 15.15625 19.445312 C 15.15625 18.90625 14.832031 18.441406 14.367188 18.234375 "/>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28">
+  <path fill="#221f20" fill-rule="evenodd" stroke="#fff" stroke-width="2.5" d="M13.828 21.453a2.01 2.01 0 0 1-2.008-2.008c0-.562.23-1.086.649-1.468v-.004a.62.62 0 0 0 .199-.453V7.383a1.16 1.16 0 0 1 2.324 0V17.52c0 .18.078.34.2.453v.004c.417.382.644.906.644 1.468 0 1.11-.899 2.008-2.008 2.008Zm3.676-11.558a.52.52 0 1 0 0-1.04h-1.27v-.652h1.27a.52.52 0 1 0 0-1.039h-1.277a2.414 2.414 0 0 0-2.399-2.187 2.41 2.41 0 0 0-2.402 2.406v9.883a3.24 3.24 0 0 0-.848 2.18 3.256 3.256 0 0 0 3.25 3.253 3.26 3.26 0 0 0 3.254-3.254 3.24 3.24 0 0 0-.848-2.18v-5.68h1.27a.517.517 0 1 0 0-1.034h-1.27v-.656Zm0 0" paint-order="stroke"/>
+  <path fill="#221f20" fill-rule="evenodd" stroke="#fff" d="M14.367 18.234v-5.543c0-.3-.238-.539-.539-.539a.54.54 0 0 0-.539.54v5.542a1.327 1.327 0 1 0 1.867 1.211c0-.539-.324-1.004-.789-1.21" paint-order="stroke"/>
 </svg>