Emojis -> icons, Arial -> Roboto and autorefresh on clients

src/components/PlantState.tsx

@@ -1,6 +1,8 @@
 import * as React from "react"
 import { PlantState as PlantStateType } from "../lib/interfaces";
-import * as styles from "../styles/containers/PlantState.module.css"
+import * as styles from "../styles/containers/PlantState.module.css";
+import WaterDrops from "../images/weather-icons/svg/wi-raindrops.svg";
+import Dust from "../images/weather-icons/svg/wi-dust.svg";
 
 const PLANT_REFRESH_INTERVAL = 15 * 60 * 1000;
 
@@ -37,11 +39,11 @@ const PlantState = ({ hassUrl, token, plants }: { hassUrl: string, token: string
             return <div key={key} className={styles.plant}>
                 <div>{key}</div>
                 <div className={plantStates[key].problem.includes("moisture") ? styles.problem : ""}>
-                    <span className={styles.icon}>💧</span><br />
+                    <span className={styles.icon}><WaterDrops width="90px"/></span><br />
                     {plantStates[key].moisture === "unavailable" ? "?" : plantStates[key].moisture} {plantStates[key].unit_of_measurement_dict.moisture}
                 </div>
                 <div className={plantStates[key].problem.includes("conductivity") ? styles.problem : ""}>
-                    <span className={styles.icon}>🪴</span><br />
+                    <span className={styles.icon}><Dust width="90px"/></span><br />
                     {plantStates[key].conductivity === "unavailable" ? "?" : plantStates[key].conductivity} {plantStates[key].unit_of_measurement_dict.conductivity}
                 </div>
             </div>

src/lib/types.d.ts

@@ -6,4 +6,9 @@ declare module '*.css' {
 declare module '*.gif' {
   const path: string;
   export = path;
+}
+
+declare module "*.svg" {
+  const content: any;
+  export default content;
 }

src/styles/global.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
 * {
     box-sizing: border-box;
 }
@@ -37,7 +39,7 @@ main {
     align-items: stretch;
     justify-content: stretch;
     max-width: 100%;
-    font-family: Arial;
+    font-family: "Roboto";
     transition: background-image 1s linear;
     background-repeat: no-repeat;
     background-size: cover;