Change lightning and rain warnings to badges on mobile dashboard

mobile_dashboard.yaml

@@ -316,82 +316,6 @@ views:
               - condition: state
                 entity: sensor.weatheralerts_alerts_are_active
                 state: 'Yes'
-          - type: custom:bubble-card
-            card_type: button
-            button_type: state
-            entity: binary_sensor.lightning_warning
-            name: Lightning is in the area!
-            show_state: false
-            double_tap_action:
-              action: more-info
-            hold_action:
-              action: more-info
-            card_layout: large
-            styles: |
-              .is-unavailable {
-                opacity: 0.5 !important;
-              }
-              .bubble-button-background {
-                opacity: 1 !important;
-                background-color: ${state === 'on' ? 'var(--warning-color)' : 'var(--background-color-2)'} !important;
-                transition: background-color 1s !important;
-              }
-              .bubble-icon-container {
-                background: ${state === 'on' ? 'var(--warning-color)' : 'var(--card-background-color)'} !important;
-              }
-              .bubble-icon-container::after {
-                opacity: ${state === 'on' ? 0.3 : 0} !important;
-                transition: all 1s !important;
-              }
-              .bubble-icon {
-                display: flex !important;
-                opacity: 0.5 !important;
-              }
-              .is-on .bubble-icon {
-                opacity: 1 !important;
-              }
-            visibility:
-              - condition: state
-                entity: binary_sensor.lightning_warning
-                state: 'on'
-          - type: custom:bubble-card
-            card_type: button
-            button_type: state
-            entity: binary_sensor.raining
-            name: It is currently raining
-            show_state: false
-            double_tap_action:
-              action: more-info
-            hold_action:
-              action: more-info
-            card_layout: large
-            styles: |
-              .is-unavailable {
-                opacity: 0.5 !important;
-              }
-              .bubble-button-background {
-                opacity: 1 !important;
-                background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important;
-                transition: background-color 1s !important;
-              }
-              .bubble-icon-container {
-                background: ${state === 'on' ? 'var(--accent-color)' : 'var(--card-background-color)'} !important;
-              }
-              .bubble-icon-container::after {
-                opacity: ${state === 'on' ? 0.3 : 0} !important;
-                transition: all 1s !important;
-              }
-              .bubble-icon {
-                display: flex !important;
-                opacity: 0.5 !important;
-              }
-              .is-on .bubble-icon {
-                opacity: 1 !important;
-              }
-            visibility:
-              - condition: state
-                entity: binary_sensor.raining
-                state: 'on'
           - type: custom:clock-weather-card
             entity: weather.iron_nerd_weather_station
             sun_entity: sun.sun
@@ -3862,6 +3786,39 @@ views:
       - user: cc8352d070b64246820a8af4302a5f52
     cards: []
     max_columns: 4
+    badges:
+      - type: custom:mushroom-template-badge
+        content: >-
+          {{ states('sensor.blitzortung_lightning_counter') }} lightning strikes
+          nearby!
+        icon: mdi:lightning-bolt
+        color: |-
+          {% if is_state('binary_sensor.lightning_warning','on') %}
+          yellow
+          {% else %}
+          grey
+          {% endif %}
+        entity: binary_sensor.lightning_warning
+        label: Lightning Warning
+        visibility:
+          - condition: state
+            entity: binary_sensor.lightning_warning
+            state: ''
+      - type: custom:mushroom-template-badge
+        content: It is currently raining!
+        icon: mdi:weather-rainy
+        color: |-
+          {% if is_state('binary_sensor.raining','on') %}
+            blue
+          {% else %}
+            grey
+          {% endif %}
+        entity: binary_sensor.raining
+        label: Rain Status
+        visibility:
+          - condition: state
+            entity: binary_sensor.raining
+            state: 'on'
   - title: Old
     path: old
     icon: ''