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

.drone.yml

@@ -72,8 +72,33 @@ steps:
       from_secret: registry_host
     IMAGE: infoscreen:latest
   commands:
-  #- docker login -u $${DOCKER_USER} -p $${DOCKER_PASS}
   - docker-compose -p infoscreen -f docker-compose.yml rm -s -v -f
   - docker rmi $${REGISTRY_HOST}/$${IMAGE} || true
   - docker pull $${REGISTRY_HOST}/$${IMAGE}
-  - docker-compose -p infoscreen -f docker-compose.yml up --no-build -d
+  - docker-compose -p infoscreen -f docker-compose.yml up --no-build -d
+---
+kind: pipeline
+type: ssh
+name: refresh-client
+depends_on:
+- deploy
+trigger:
+  branch:
+  - senpai
+  event:
+  - push
+server:
+  host:
+    from_secret: ssh_client_host
+  user:
+    from_secret: ssh_client_user
+  ssh_key:
+    from_secret: ssh_key
+steps:
+- name: deploy
+  when:
+    branch:
+    - senpai
+  commands:
+  - export DISPLAY=:0
+  - xdotool search --onlyvisible --class "chromium-browser" key F5

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;