ui cleanups

2026-03-20 16:40:24 +00:00 · 2021-08-28 00:45:54 -07:00
parent b449f91923
commit 45ecd5c8ce
27 changed files with 195 additions and 198 deletions
--- a/plugins/core/ui/package-lock.json
+++ b/plugins/core/ui/package-lock.json
@@ -37,7 +37,8 @@
        "vue-swatches": "^1.0.4",
        "vue2-google-maps": "^0.10.7",
        "vuetify": "^2.5.8",
-        "vuex": "^3.6.2"
+        "vuex": "^3.6.2",
+        "xterm": "^4.13.0"
      },
      "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.13.0",
@@ -18736,6 +18737,11 @@
        "node": ">=0.4"
      }
    },
+    "node_modules/xterm": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-4.13.0.tgz",
+      "integrity": "sha512-HVW1gdoLOTnkMaqQCr2r3mQy4fX9iSa5gWxKZ2UTYdLa4iqavv7QxJ8n1Ypse32shPVkhTYPLS6vHEFZp5ghzw=="
+    },
    "node_modules/y18n": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
@@ -33889,6 +33895,11 @@
      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
      "dev": true
    },
+    "xterm": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-4.13.0.tgz",
+      "integrity": "sha512-HVW1gdoLOTnkMaqQCr2r3mQy4fX9iSa5gWxKZ2UTYdLa4iqavv7QxJ8n1Ypse32shPVkhTYPLS6vHEFZp5ghzw=="
+    },
    "y18n": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
--- a/plugins/core/ui/package.json
+++ b/plugins/core/ui/package.json
@@ -39,11 +39,19 @@
    "vue-swatches": "^1.0.4",
    "vue2-google-maps": "^0.10.7",
    "vuetify": "^2.5.8",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "xterm": "^4.13.0"
  },
  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
+    "@babel/plugin-transform-modules-commonjs": "^7.13.8",
+    "@babel/plugin-transform-typescript": "^7.13.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-typescript": "^7.13.0",
    "@types/blob-stream": "^0.1.30",
    "@types/dom-webcodecs": "^0.1.0",
+    "@types/lodash": "^4.14.172",
    "@types/mkdirp": "^1.0.1",
    "@types/node": "^16.0.0",
    "@types/plist": "^3.0.2",
@@ -53,13 +61,6 @@
    "@types/socket.io-client": "^1.4.33",
    "@types/streamsaver": "^2.0.0",
    "@types/tmp": "^0.2.1",
-    "@babel/preset-env": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
-    "@babel/plugin-transform-modules-commonjs": "^7.13.8",
-    "@babel/plugin-transform-typescript": "^7.13.0",
-    "@babel/preset-typescript": "^7.13.0",
-    "@types/lodash": "^4.14.172",
    "@typescript-eslint/eslint-plugin": "^4.17.0",
    "@typescript-eslint/parser": "^4.17.0",
    "@vue/cli-plugin-babel": "^4.5.13",
--- a/plugins/core/ui/public/images/cameraloading.jpg
+++ b/plugins/core/ui/public/images/cameraloading.jpg
--- a/plugins/core/ui/src/App.vue
+++ b/plugins/core/ui/src/App.vue
@@ -46,7 +46,7 @@
            @click="doAlert(alert)"
          >
            <v-list-item-icon>
-              <font-awesome-icon size="sm" :icon="getAlertIcon(alert)" style="color: #a9afbb;" />
+              <v-icon x-small style="color: #a9afbb;">{{ getAlertIcon(alert) }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title class="caption">{{ alert.title }}</v-list-item-title>
@@ -62,7 +62,7 @@
          </v-list-item>
          <v-list-item v-else class="font-weight-light" @click="clearAlerts">
            <v-list-item-icon>
-              <font-awesome-icon size="sm" icon="trash" style="color: #a9afbb;" />
+              <v-icon x-small style="color: #a9afbb;">fa-trash</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title class="caption">Clear All Alerts</v-list-item-title>
@@ -87,7 +87,7 @@
            @click="menuItem.click"
          >
            <v-list-item-icon v-if="menuItem.icon">
-              <font-awesome-icon size="sm" :icon="menuItem.icon" style="color: #a9afbb;" />
+              <v-icon x-small style="color: #a9afbb;">{{ menuItem.icon }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title class="caption">{{ menuItem.title }}</v-list-item-title>
--- a/plugins/core/ui/src/common/DeviceTable.vue
+++ b/plugins/core/ui/src/common/DeviceTable.vue
@@ -13,7 +13,7 @@
    <tbody v-if="deviceGroup.devices.length">
      <tr v-for="device in deviceGroup.devices" :key="device.id">
        <td>
-          <font-awesome-icon size="sm" :icon="typeToIcon(device.type)" color="#a9afbb" />
+          <v-icon x-small color="#a9afbb">{{ typeToIcon(device.type) }}</v-icon>
        </td>
        <td class="body-2 font-weight-light">
          <a link :href="'#' + getDeviceViewPath(device.id)">{{ device.name }}</a>
--- a/plugins/core/ui/src/components/BasicComponent.vue
+++ b/plugins/core/ui/src/components/BasicComponent.vue
@@ -7,7 +7,7 @@
        xs12
        :md6="deviceGroups.length > 1"
      >
-        <v-card v-if="!card.hide" raised class="header-card">
+        <v-card v-if="!card.hide" raised >
          <v-card-title
            class="orange-gradient subtitle-1 text--white font-weight-light"
            >{{ card.title }}</v-card-title
@@ -39,7 +39,7 @@
        v-for="deviceGroup in deviceGroups"
        :key="deviceGroup.name"
      >
-        <v-card raised class="header-card">
+        <v-card raised >
          <v-card-title
            class="red-gradient subtitle-1 text--white font-weight-light"
            >{{ deviceGroup.name }}</v-card-title
--- a/plugins/core/ui/src/components/Device.vue
+++ b/plugins/core/ui/src/components/Device.vue
@@ -13,19 +13,18 @@
                xs12
                md6
                lg6
+                outlined
+                text
                color="primary"
-                dark
                icon="mdi-vuetify"
                border="left"
-                prominent
              >
                <template v-slot:prepend>
-                  <font-awesome-icon
+                  <v-icon
                    class="white--text mr-3"
                    size="sm"
-                    :icon="getAlertIcon(alert)"
                    color="#a9afbb"
-                  />
+                  >{{ getAlertIcon(alert) }}</v-icon>
                </template>
                <div class="caption">{{ alert.title }}</div>
                <div
@@ -36,7 +35,7 @@
              </v-alert>
            </div>

-            <v-card raised class="header-card">
+            <v-card raised >
              <v-card-title
                class="orange-gradient subtitle-1 font-weight-light"
              >
@@ -167,7 +166,7 @@

        <v-flex xs12 v-if="!ownerDevice && pluginData">
          <v-flex>
-            <v-card raised class="header-card">
+            <v-card raised >
              <v-card-title
                class="green-gradient subtitle-1 text--white font-weight-light"
              >
@@ -219,7 +218,7 @@

        <v-flex xs12 v-if="ownerDevice && pluginData">
          <v-flex>
-            <v-card raised class="header-card">
+            <v-card raised >
              <v-card-title
                class="green-gradient subtitle-1 text--white font-weight-light"
              >
@@ -246,7 +245,7 @@

        <v-flex xs12 v-if="availableMixins.length">
          <v-flex>
-            <v-card raised class="header-card">
+            <v-card raised >
              <v-card-title
                class="green-gradient subtitle-1 text--white font-weight-light"
              >
@@ -284,7 +283,7 @@

        <v-flex xs12 v-if="showStorage">
          <v-flex>
-            <v-card raised class="header-card">
+            <v-card raised >
              <v-card-title
                class="green-gradient subtitle-1 text--white font-weight-light"
                >Storage</v-card-title
@@ -309,7 +308,7 @@
          <v-flex>
            <v-card
              raised
-              class="header-card"
+              
              v-for="iface in cardUnderInterfaces"
              :key="iface"
            >
--- a/plugins/core/ui/src/components/Devices.vue
+++ b/plugins/core/ui/src/components/Devices.vue
@@ -20,7 +20,9 @@
          :search="search"
        >
          <template v-slot:[`item.icon`]="{ item }">
-            <font-awesome-icon size="sm" :icon="typeToIcon(item.type)" :color="colors.blue.base" />
+            <v-icon x-small :color="colors.blue.base">
+              {{ typeToIcon(item.type) }}
+            </v-icon>
          </template>
          <template v-slot:[`item.name`]="{ item }">
            <a link :href="'#' + getDeviceViewPath(item.id)">{{ item.name }}</a>
--- a/plugins/core/ui/src/components/Drawer.vue
+++ b/plugins/core/ui/src/components/Drawer.vue
@@ -95,13 +95,13 @@ export default {
      actives: {},
      // components: [],
      builtinComponents: [
-        // {
-        //   id: "dashboard",
-        //   name: "Dashboard",
-        //   icon: "fa-sliders-h",
-        //   path: "/",
-        //   active: false
-        // },
+        {
+          id: "dashboard",
+          name: "Dashboard",
+          icon: "fa-tachometer-alt",
+          path: "/",
+          active: false
+        },
        {
          id: "devices",
          name: "Devices",
--- a/plugins/core/ui/src/components/aggregate/AggregateDevice.vue
+++ b/plugins/core/ui/src/components/aggregate/AggregateDevice.vue
@@ -1,6 +1,6 @@
 <template>
  <v-flex>
-    <v-card raised class="header-card" style="margin-bottom: 60px">
+    <v-card raised  style="margin-bottom: 60px">
      <v-card-title
        class="green-gradient subtitle-1 text--white font-weight-light"
      >
--- a/plugins/core/ui/src/components/automation/Automation.vue
+++ b/plugins/core/ui/src/components/automation/Automation.vue
@@ -2,14 +2,14 @@
  <v-flex>
    <v-card
      raised
-      class="header-card"
+      
      v-if="device.automationType !== 'Scene'"
      style="margin-bottom: 60px"
    >
      <v-card-title
        class="green-gradient subtitle-1 text--white font-weight-light"
      >
-        <font-awesome-icon size="sm" icon="bolt" />
+        <v-icon x-small>fa-bolt</v-icon>
        <span class="title font-weight-light"
          >&nbsp;&nbsp;Automation Triggers</span
        >
@@ -88,11 +88,11 @@
      </v-form>
    </v-card>

-    <v-card raised class="header-card" style="margin-bottom: 60px">
+    <v-card raised  style="margin-bottom: 60px">
      <v-card-title
        class="green-gradient subtitle-1 text--white font-weight-light"
      >
-        <font-awesome-icon size="sm" icon="play" />
+        <v-icon x-small>fa-play</v-icon>
        <span v-if="device.automationType !== 'Scene'"
          >&nbsp;&nbsp;Automation Actions</span
        >
@@ -123,11 +123,11 @@
      </v-form>
    </v-card>

-    <v-card raised class="header-card" v-if="device.automationType === 'Scene'">
+    <v-card raised  v-if="device.automationType === 'Scene'">
      <v-card-title
        class="green-gradient subtitle-1 text--white font-weight-light"
      >
-        <font-awesome-icon size="sm" icon="play" />
+        <v-icon x-small>fa-play</v-icon>
        <h5 class="card-title">&nbsp;&nbsp;Scene Deactivation Actions</h5>
      </v-card-title>
      <v-card-text
--- a/plugins/core/ui/src/components/dashboard/Dashboard.vue
+++ b/plugins/core/ui/src/components/dashboard/Dashboard.vue
@@ -53,7 +53,7 @@
      <div v-if="!cardColumns"></div>
      <v-flex v-else-if="isEmpty" xs12 md6 lg4>
        <v-flex>
-          <v-card raised class="header-card">
+          <v-card raised >
            <v-card-title
              class="red-gradient subtitle-1 text--white font-weight-light"
            >No Devices Found</v-card-title>
@@ -77,7 +77,7 @@
        :key="index"
      >
        <v-flex v-for="(card, cardIndex) in cardColumn" :key="cardIndex">
-          <v-card raised class="header-card" v-if="!card.state.hidden || editCardMode">
+          <v-card raised  v-if="!card.state.hidden || editCardMode">
            <v-card-title :class="card.color" class="subtitle-1 font-weight-light">
              <v-text-field
                hide-details
@@ -209,7 +209,7 @@ import DashboardSensors from "./DashboardSensors.vue";
 import DashboardMediaPlayer from "./DashboardMediaPlayer.vue";
 import DashboardBase from "./DashboardBase";
 import DashboardAddComponent from "./DashboardAddComponent.vue";
-import "../header-card.css";
+// import "../header-card.css";
 import Vue from "vue";
 import Settings from "../../interfaces/Settings.vue";
 import cloneDeep from "lodash/cloneDeep";
@@ -287,7 +287,7 @@ export default {
    var menu: Menu[] = [
      {
        title: "Edit Layout",
-        icon: "edit",
+        icon: "fa-edit",
        click: () => {
          this.editMode = true;
          this.editCards = true;
@@ -295,14 +295,14 @@ export default {
      },
      {
        title: "Save Layout",
-        icon: "save",
+        icon: "fa-save",
        click: () => {
          this.saveLayout();
        }
      },
      {
        title: "Auto Layout",
-        icon: "magic",
+        icon: "fa-bell",
        click: async () => {
          await this.getCardLayout(true);
        }
--- a/plugins/core/ui/src/components/dashboard/DashboardCamera.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardCamera.vue
@@ -42,7 +42,7 @@ export default {
    return {
      pc: null,
      video: false,
-      src: undefined,
+      src: 'images/cameraloading.jpg',
      overlay: false,
      dialog: false,
    };
--- a/plugins/core/ui/src/components/dashboard/DashboardLock.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardLock.vue
@@ -1,24 +1,31 @@
 <template>
  <v-list-item ripple :to="getDeviceViewPath(deviceId)">
    <v-list-item-icon>
-      <font-awesome-icon
+      <v-icon
+        x-small
        class="mt-1"
        size="sm"
-        :icon="locked ? 'lock' : 'lock-open'"
        :color="locked ? '#a9afbb' : 'orange'"
-      />
+        >{{ locked ? "fa-lock" : "fa-lock-open" }}</v-icon
+      >
    </v-list-item-icon>
    <v-list-item-content>
-      <v-list-item-title class="font-weight-light">{{ name || device.name }}</v-list-item-title>
+      <v-list-item-title class="font-weight-light">{{
+        name || device.name
+      }}</v-list-item-title>
    </v-list-item-content>
    <v-list-item-action>
-      <v-btn icon x-small @click.prevent="locked = false">
-        <v-icon :color="device.lockState === 'Locked' ? undefined : 'orange'">lock_open</v-icon>
+      <v-btn icon small @click.prevent="locked = false">
+        <v-icon small :color="device.lockState === 'Locked' ? undefined : 'orange'"
+          >lock_open</v-icon
+        >
      </v-btn>
    </v-list-item-action>
    <v-list-item-action>
-      <v-btn icon x-small @click.prevent="locked = true">
-        <v-icon :color="device.lockState === 'Locked' ? 'green' : undefined">lock</v-icon>
+      <v-btn icon small @click.prevent="locked = true">
+        <v-icon small :color="device.lockState === 'Locked' ? 'green' : undefined"
+          >lock</v-icon
+        >
      </v-btn>
    </v-list-item-action>
  </v-list-item>
@@ -33,7 +40,7 @@ export default {
  mixins: [DashboardBase],
  props: ["name", "deviceId"],
  methods: {
-    getDeviceViewPath
+    getDeviceViewPath,
  },
  computed: {
    locked: {
@@ -49,8 +56,8 @@ export default {
        } else {
          device.unlock();
        }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
--- a/plugins/core/ui/src/components/dashboard/DashboardMediaPlayer.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardMediaPlayer.vue
@@ -14,29 +14,29 @@
    <v-list-item ripple :to="getDeviceViewPath(deviceId)">
      <v-list-item-icon>
        <v-icon
-          small
+          x-small
          :color="device.paused ? 'blue' : device.running ? 'green' : '#a9afbb'"
-        >{{ device.paused ? 'pause-circle' : device.running ? 'play-circle' : 'volume-off' }}</v-icon>
+        >{{ typeToIcon(device.type) }}</v-icon>
      </v-list-item-icon>
      <v-list-item-content>
        <v-list-item-title class="font-weight-light">{{ name || device.name }}</v-list-item-title>
      </v-list-item-content>
      <v-list-item-action class="mx-0 mt-0 mb-0">
        <span v-if="device.running">
-          <v-btn icon x-small @click.prevent="device.skipPrevious()">
+          <v-btn icon small @click.prevent="device.skipPrevious()">
            <v-icon color="#a9afbb">skip_previous</v-icon>
          </v-btn>
-          <v-btn icon x-small @click.prevent="device.paused ? device.start() : device.pause()">
+          <v-btn icon small @click.prevent="device.paused ? device.start() : device.pause()">
            <v-icon color="blue">{{ device.paused ? 'play_arrow' : 'pause' }}</v-icon>
          </v-btn>
-          <v-btn icon x-small @click.prevent="device.stop()">
+          <v-btn icon small @click.prevent="device.stop()">
            <v-icon color="red">stop</v-icon>
          </v-btn>
-          <v-btn icon x-small @click.prevent="device.skipNext()">
+          <v-btn icon small @click.prevent="device.skipNext()">
            <v-icon color="#a9afbb">skip_next</v-icon>
          </v-btn>
        </span>
-        <v-btn v-else icon x-small @click.prevent="device.stop()">
+        <v-btn v-else icon small @click.prevent="device.stop()">
          <v-icon color="#a9afbb">stop</v-icon>
        </v-btn>
      </v-list-item-action>
@@ -47,7 +47,7 @@
 import DashboardBase from "./DashboardBase";
 import { ScryptedInterface } from "@scrypted/sdk/types";
 import colors from "vuetify/es5/util/colors";
-import { getDeviceViewPath } from "../helpers";
+import { getDeviceViewPath, typeToIcon } from "../helpers";

 export default {
  name: "DashboardMediaPlayer",
@@ -86,7 +86,8 @@ export default {
    this.$once("destroyed", () => clearInterval(this.ticker));
  },
  methods: {
-    getDeviceViewPath
+    getDeviceViewPath,
+    typeToIcon,
  },
  computed: {
    albumArt() {
--- a/plugins/core/ui/src/components/dashboard/DashboardPopupToggle.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardPopupToggle.vue
@@ -1,23 +1,29 @@
 <template>
  <v-list-item ripple :to="getDeviceViewPath(device.id)">
    <v-list-item-icon>
-      <font-awesome-icon
-        size="sm"
-        :icon="typeToIcon(type)"
-        :color="on ? 'orange' : '#a9afbb'"
-      />
+      <v-icon x-small :color="on ? 'orange' : '#a9afbb'">
+        {{ typeToIcon(type) }}
+      </v-icon>
    </v-list-item-icon>
    <v-list-item-content>
-      <v-list-item-title class="font-weight-light">{{ name }}</v-list-item-title>
+      <v-list-item-title class="font-weight-light">{{
+        name
+      }}</v-list-item-title>
    </v-list-item-content>

    <v-list-item-action>
-      <v-switch inset v-model="on" color="white" @click.native.stop.prevent :light="light"></v-switch>
+      <v-switch
+        inset
+        v-model="on"
+        color="white"
+        @click.native.stop.prevent
+        :light="light"
+      ></v-switch>
    </v-list-item-action>
  </v-list-item>
 </template>
 <script lang="ts">
-import {getDeviceViewPath} from "../helpers";
+import { getDeviceViewPath } from "../helpers";
 import DashboardBase from "./DashboardBase";
 export default {
  props: ["type", "name", "light"],
@@ -32,8 +38,8 @@ export default {
      },
      set(value) {
        value ? this.device.turnOn() : this.device.turnOff();
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
--- a/plugins/core/ui/src/components/dashboard/DashboardSensors.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardSensors.vue
@@ -1,7 +1,9 @@
 <template>
  <v-card-text class="text-md-center font-weight-light body-2 less-padding white--text">
    <span v-if="temperature !== undefined">
-      <font-awesome-icon size="sm" icon="thermometer-three-quarters" color="white" />
+      <v-icon x-small color="white">
+        thermometer-three-quarters
+      </v-icon>
      {{ temperature }}°
    </span>
    <span v-if="humidity !== undefined">
--- a/plugins/core/ui/src/components/dashboard/DashboardStartStop.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardStartStop.vue
@@ -2,9 +2,9 @@
  <v-list-item ripple :to="getDeviceViewPath(deviceId)">
    <v-list-item-icon>
      <v-icon
-        small
+        x-small
        :color="device.paused ? 'blue' : device.running ? 'green' : '#a9afbb'"
-      >{{ device.docked ? 'home' : device.paused ? 'pause-circle' : device.running ? 'play-circle' : 'stop-circle' }}</v-icon>
+      >{{ typeToIcon(device.type) }}</v-icon>
    </v-list-item-icon>
    <v-list-item-content>
      <v-list-item-title class="font-weight-light">{{ name || device.name }}</v-list-item-title>
@@ -16,28 +16,28 @@
            <v-btn
              v-on="on"
              icon
-              x-small
+              small
              @click.prevent="device.dock()"
              v-if="device.interfaces.includes('Dock')"
            >
-              <v-icon color="#a9afbb">home</v-icon>
+              <v-icon small color="#a9afbb">home</v-icon>
            </v-btn>
          </template>
          <span>Dock</span>
        </v-tooltip>
        <v-btn
          icon
-          x-small
+          small
          @click.prevent="device.pause()"
          v-if="device.interfaces.includes('Pause')"
        >
-          <v-icon :color="device.paused ? 'blue' : '#a9afbb'">pause</v-icon>
+          <v-icon small :color="device.paused ? 'blue' : '#a9afbb'">pause</v-icon>
        </v-btn>
-        <v-btn icon x-small @click.prevent="device.stop()">
-          <v-icon color="#a9afbb">stop</v-icon>
+        <v-btn icon small @click.prevent="device.stop()">
+          <v-icon small color="#a9afbb">stop</v-icon>
        </v-btn>
-        <v-btn icon x-small @click.prevent="device.start()">
-          <v-icon :color="device.running ? 'green' : '#a9afbb'">play_arrow</v-icon>
+        <v-btn icon small @click.prevent="device.start()">
+          <v-icon small :color="device.running ? 'green' : '#a9afbb'">play_arrow</v-icon>
        </v-btn>
      </span>
    </v-list-item-action>
@@ -45,14 +45,15 @@
 </template>
 <script>
 import DashboardBase from "./DashboardBase";
-import { getDeviceViewPath } from "../helpers";
+import { getDeviceViewPath, typeToIcon } from "../helpers";

 export default {
  name: "DashboardStartStop",
  mixins: [DashboardBase],
  props: ["name", "deviceId"],
  methods: {
-    getDeviceViewPath
+    getDeviceViewPath,
+    typeToIcon,
  }
 };
 </script>
--- a/plugins/core/ui/src/components/dashboard/DashboardThermostat.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardThermostat.vue
@@ -1,7 +1,7 @@
 <template>
  <v-list-item ripple :to="getDeviceViewPath(deviceId)">
    <v-list-item-icon>
-      <v-icon small :color="color">{{ icon }}</v-icon>
+      <v-icon x-small :color="color">{{ icon }}</v-icon>
    </v-list-item-icon>
    <v-list-item-content>
      <v-list-item-title class="font-weight-light">{{ name || device.name }}</v-list-item-title>
@@ -30,13 +30,13 @@ export default {
    icon() {
      switch (this.device.thermostatMode) {
        case ThermostatMode.Heat:
-          return "fire-alt";
+          return "fa-fire-alt";
        case ThermostatMode.Cool:
-          return "snowflake";
+          return "fa-snowflake";
        case ThermostatMode.Eco:
-          return "leaf";
+          return "fa-leaf";
      }
-      return "thermometer-three-quarters";
+      return "fa-thermometer-three-quarters";
    },
    color() {
      if (this.device.thermostatMode === ThermostatMode.Off) {
--- a/plugins/core/ui/src/components/dashboard/DashboardToggle.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardToggle.vue
@@ -1,10 +1,14 @@
 <template>
  <v-list-item ripple @click="showDevices()">
    <v-list-item-icon>
-      <v-icon small :color="on ? 'orange' : '#a9afbb'">{{ typeToIcon(type) }}</v-icon>
+      <v-icon x-small :color="on ? 'orange' : '#a9afbb'">{{
+        typeToIcon(type)
+      }}</v-icon>
    </v-list-item-icon>
    <v-list-item-content>
-      <v-list-item-title class="font-weight-light">{{ name }}</v-list-item-title>
+      <v-list-item-title class="font-weight-light">{{
+        name
+      }}</v-list-item-title>
    </v-list-item-content>

    <v-list-item-action>
@@ -15,12 +19,9 @@
      <v-container fluid>
        <v-card v-click-outside="maybeHideDialog" dark color="purple" raised>
          <v-card-title>
-            <font-awesome-icon
-              size="sm"
-              :icon="typeToIcon(type)"
-              color="white"
-              style="margin-right: 20px"
-            />
+            <v-icon x-small color="white" style="margin-right: 20px">
+              {{ typeToIcon(type) }}
+            </v-icon>
            <span class="title font-weight-light">{{ name }}</span>
          </v-card-title>

@@ -70,15 +71,15 @@ export default {
  mixins: [DashboardBase],
  components: {
    VueSlider,
-    DashboardPopupToggle
+    DashboardPopupToggle,
  },
  directives: {
-    ClickOutside
+    ClickOutside,
  },
  data() {
    return {
      showLightsDialog: false,
-      watchClickOutside: false
+      watchClickOutside: false,
    };
  },
  methods: {
@@ -97,19 +98,19 @@ export default {
        this.watchClickOutside = true;
      }, 300);
    },
-    debounceSetBrightness: throttle(function(self) {
+    debounceSetBrightness: throttle(function (self) {
      self.deviceIds
-        .map(id => self.getDevice(id))
-        .filter(device =>
+        .map((id) => self.getDevice(id))
+        .filter((device) =>
          device.interfaces.includes(ScryptedInterface.Brightness)
        )
-        .forEach(device => device.setBrightness(self._debouncedBrightness));
-    }, 500)
+        .forEach((device) => device.setBrightness(self._debouncedBrightness));
+    }, 500),
  },
  computed: {
    brightness: {
      get() {
-        const brightnessDevices = this.devices.filter(device =>
+        const brightnessDevices = this.devices.filter((device) =>
          device.interfaces.includes(ScryptedInterface.Brightness)
        );
        if (!brightnessDevices.length) {
@@ -124,17 +125,19 @@ export default {
      set(value) {
        this._debouncedBrightness = value;
        this.debounceSetBrightness(this);
-      }
+      },
    },
    on: {
      get() {
        return this.devices.reduce((on, device) => on || device.on, false);
      },
      set(value) {
-        this.devices.forEach(device => device[value ? "turnOn" : "turnOff"]());
-      }
-    }
-  }
+        this.devices.forEach((device) =>
+          device[value ? "turnOn" : "turnOff"]()
+        );
+      },
+    },
+  },
 };
 </script>
 <style>
--- a/plugins/core/ui/src/components/header-card.css
+++ b/plugins/core/ui/src/components/header-card.css
@@ -1,40 +0,0 @@
-.header-card::before {
-  margin-top: 20px;
-  display: block;
-  content: "";
-}
-.header-card>*:nth-child(1) {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
-  color: white;
-  width: 90%;
-  margin-top: -20px;
-  margin-left: 5%;
-  position: absolute;
-  padding-top: 10px;
-}
-.header-card>*:nth-child(2)::before {
-  padding-top: 40px;
-  display: block;
-  content: "";
-}
-.purple-gradient {
-  background: linear-gradient(60deg, #ab47bc, #8e24aa);
-}
-.red-gradient {
-  background: linear-gradient(60deg, #ef5350, #e53935);
-}
-.orange-gradient {
-  background: linear-gradient(60deg, #ffa726, #fb8c00);
-}
-.green-gradient {
-  background: linear-gradient(60deg, #66bb6a, #43a047);
-}
-.blue-gradient {
-  background: linear-gradient(60deg,#546E7A,#78909C);
-}
-.small-header {
-  padding: 4px 4px 4px 8px;
-}
--- a/plugins/core/ui/src/components/helpers.ts
+++ b/plugins/core/ui/src/components/helpers.ts
@@ -2,30 +2,30 @@ import { ScryptedDeviceType, ScryptedInterface } from "@scrypted/sdk/types";

 export function typeToIcon(type) {
    switch (type) {
-        case ScryptedDeviceType.Camera: return "video";
-        case ScryptedDeviceType.Doorbell: return "bell";
-        case ScryptedDeviceType.Fan: return "angle-double-right";
-        case ScryptedDeviceType.Light: return "lightbulb";
-        case ScryptedDeviceType.Switch: return "toggle-on";
-        case ScryptedDeviceType.Outlet: return "plug";
-        case ScryptedDeviceType.Sensor: return "exclamation-triangle";
-        case ScryptedDeviceType.Scene: return "sun";
-        case ScryptedDeviceType.Program: return "code";
-        case ScryptedDeviceType.Automation: return "bolt";
-        case ScryptedDeviceType.Event: return "exclamation";
-        case ScryptedDeviceType.Vacuum: return "trash";
-        case ScryptedDeviceType.Notifier: return "bell";
-        case ScryptedDeviceType.Lock: return "unlock-alt";
-        case ScryptedDeviceType.Thermostat: return "thermometer-three-quarters";
-        case ScryptedDeviceType.PasswordControl: return "key";
-        case ScryptedDeviceType.Display: return "tv";
-        case ScryptedDeviceType.Speaker: return "volume-up";
-        case ScryptedDeviceType.Entry: return "warehouse";
-        case ScryptedDeviceType.Garage: return "warehouse";
-        case ScryptedDeviceType.API: return "cloud";
-        case ScryptedDeviceType.DataSource: return "chart-area";
-        case ScryptedDeviceType.DeviceProvider: return "server";
-        case ScryptedDeviceType.Unknown: return "question-circle";
+        case ScryptedDeviceType.Camera: return "fa-video";
+        case ScryptedDeviceType.Doorbell: return "fa-bell";
+        case ScryptedDeviceType.Fan: return "fa-fan";
+        case ScryptedDeviceType.Light: return "fa-lightbulb";
+        case ScryptedDeviceType.Switch: return "fa-toggle-on";
+        case ScryptedDeviceType.Outlet: return "fa-plug";
+        case ScryptedDeviceType.Sensor: return "fa-exclamation-triangle";
+        case ScryptedDeviceType.Scene: return "fa-sun";
+        case ScryptedDeviceType.Program: return "fa-code";
+        case ScryptedDeviceType.Automation: return "fa-bolt";
+        case ScryptedDeviceType.Event: return "fa-exclamation";
+        case ScryptedDeviceType.Vacuum: return "fa-trash";
+        case ScryptedDeviceType.Notifier: return "fa-bell";
+        case ScryptedDeviceType.Lock: return "fa-unlock-alt";
+        case ScryptedDeviceType.Thermostat: return "fa-thermometer-three-quarters";
+        case ScryptedDeviceType.PasswordControl: return "fa-key";
+        case ScryptedDeviceType.Display: return "fa-tv";
+        case ScryptedDeviceType.Speaker: return "fa-volume-up";
+        case ScryptedDeviceType.Entry: return "fa-warehouse";
+        case ScryptedDeviceType.Garage: return "fa-warehouse";
+        case ScryptedDeviceType.API: return "fa-cloud";
+        case ScryptedDeviceType.DataSource: return "fa-chart-area";
+        case ScryptedDeviceType.DeviceProvider: return "fa-server";
+        case ScryptedDeviceType.Unknown: return "fa-question-circle";

    }
    return "toggle-on";
@@ -71,10 +71,10 @@ export function getAlertIcon(alert) {
        const id = alert.path.replace(device, '');
        const d = this.$scrypted.systemManager.getDeviceById(id);
        if (!d)
-            return 'question';
+            return 'fa-question';
        return typeToIcon(d.type);
    }
-    return 'bell';
+    return 'fa-bell';
 }

 export function hasFixedPhysicalLocation(type: ScryptedDeviceType, interfaces?: ScryptedInterface[]): boolean {
--- a/plugins/core/ui/src/components/script/InstallPlugin.vue
+++ b/plugins/core/ui/src/components/script/InstallPlugin.vue
@@ -1,6 +1,6 @@
 <template>
  <v-flex xs12 md8 lg6>
-    <v-card raised class="header-card" style="margin-bottom: 60px">
+    <v-card raised  style="margin-bottom: 60px">
      <v-card-title
        class="orange-gradient subtitle-1 text--white  font-weight-light"
      >
--- a/plugins/core/ui/src/components/script/Script.vue
+++ b/plugins/core/ui/src/components/script/Script.vue
@@ -3,7 +3,7 @@
    <v-card
      v-if="managedDevices.devices.length"
      raised
-      class="header-card"
+      
      style="margin-bottom: 60px"
    >
      <v-card-title
@@ -15,7 +15,7 @@
      <DeviceGroup :deviceGroup="managedDevices"></DeviceGroup>
    </v-card>

-    <v-card raised class="header-card">
+    <v-card raised >
      <v-card-title
        class="red-gradient subtitle-1 text--white  font-weight-light"
      >{{ script.npmPackage ? "Plugin Management" : "Edit Script" }}</v-card-title>
@@ -171,7 +171,7 @@
      </v-card-actions>
    </v-card>

-    <v-card raised class="header-card" v-if="showStorage" style="margin-top: 60px">
+    <v-card raised  v-if="showStorage" style="margin-top: 60px">
      <v-card-title
        class="green-gradient subtitle-1 text--white  font-weight-light"
      >Script Storage</v-card-title>
--- a/plugins/core/ui/src/components/script/ScriptDevice.vue
+++ b/plugins/core/ui/src/components/script/ScriptDevice.vue
@@ -1,6 +1,6 @@
 <template>
  <v-flex>
-    <v-card raised class="header-card" style="margin-bottom: 60px">
+    <v-card raised  style="margin-bottom: 60px">
      <v-card-title class="green-gradient subtitle-1 text--white font-weight-light">
        <font-awesome-icon size="sm" icon="database" />
        <span class="title font-weight-light">&nbsp;&nbsp;Managed Device</span>
@@ -17,7 +17,7 @@
      </v-card-actions>
    </v-card>

-    <v-card v-if="showStorage" raised class="header-card" style="margin-bottom: 60px">
+    <v-card v-if="showStorage" raised  style="margin-bottom: 60px">
      <v-card-title class="green-gradient subtitle-1 text--white font-weight-light">Script Storage</v-card-title>
      <v-flex>
        <Storage v-model="device.configuration" @input="onChange"></Storage>
--- a/plugins/core/ui/src/plugins/icons.ts
+++ b/plugins/core/ui/src/plugins/icons.ts
@@ -70,6 +70,7 @@ import {
  faTv,
  faVolumeUp,
  faQuestionCircle,
+  faFan,
 } from '@fortawesome/free-solid-svg-icons'

 import {
@@ -145,7 +146,9 @@ const icons =[
  faKey,
  faTv,
  faVolumeUp,
-  faQuestionCircle];
+  faQuestionCircle,
+  faFan,
+];

 for (var icon in icons) {
  library.add(icons[icon])
--- a/plugins/core/ui/src/router.js
+++ b/plugins/core/ui/src/router.js
@@ -8,6 +8,7 @@ import ScriptComponent from "./components/script/ScriptComponent.vue";
 import InstallPlugin from "./components/script/InstallPlugin.vue";
 import LogComponent from "./components/builtin/LogComponent.vue";
 import SettingsComponent from "./components/builtin/SettingsComponent.vue";
+import Dashboard from "./components/dashboard/Dashboard.vue";

 let router = new VueRouter({
    routes: [
@@ -15,14 +16,14 @@ let router = new VueRouter({
        path: "/device",
        component: Devices
      },
-      {
-        path: "/",
-        component: Devices
-      },
      // {
      //   path: "/",
-      //   component: Dashboard
+      //   component: Devices
      // },
+      {
+        path: "/",
+        component: Dashboard
+      },
      {
        path: "/component/automation",
        component: AutomationComponent