3 files changed, 65 insertions, 9 deletions
diff --git a/electron/src/renderer/components/InstallPalettes.vue b/electron/src/renderer/components/InstallPalettes.vue
new file mode 100644
index 00000000..73fd2865
--- /dev/null
+++ b/electron/src/renderer/components/InstallPalettes.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <font-awesome-icon icon="palette" class="info-icon"/>
+    <p>
+      <translate>Ink/Stitch can install palettes for Inkscape matching the thread colors from popular machine embroidery thread manufacturers.
+      </translate>
+    </p>
+    <p>
+      <translate>Choose Inkscape directory</translate>
+      <input v-bind:value="path"/>
+    </p>
+    <button v-on:click="install">
+      <translate>Install</translate>
+    </button>
+    <button v-on:click="cancel">
+      <translate>Cancel</translate>
+    </button>
+  </div>
+</template>
+
+<script>
+const inkStitch = require("../../lib/api")
+
+export default {
+  name: "InstallPalettes",
+  data: function () {
+    return {
+      path: "",
+    }
+  },
+  methods: {
+    install() {
+      alert("install button clicked")
+    },
+    cancel() {
+      alert("cancel button clicked")
+    }
+  },
+  created: function () {
+    inkStitch.get("/install/default-path").then(response => {
+      this.path = response.data
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/electron/src/renderer/main.js b/electron/src/renderer/main.js
index 3502ed6a..c5f39948 100644
--- a/electron/src/renderer/main.js
+++ b/electron/src/renderer/main.js
@@ -20,6 +20,7 @@ import {
   faHorse,
   faInfo,
   faMinus,
+  faPalette,
   faPause,
   faPlay,
   faPlus,
@@ -52,6 +53,7 @@ library.add(
   faHorse,
   faInfo,
   faMinus,
+  faPalette,
   faPause,
   faPlay,
   faPlus,
diff --git a/electron/src/renderer/router/index.js b/electron/src/renderer/router/index.js
index 3a27c4bc..63e2f415 100644
--- a/electron/src/renderer/router/index.js
+++ b/electron/src/renderer/router/index.js
@@ -5,14 +5,19 @@ Vue.use(Router)
 
 export default new Router({
   routes: [
-  	{
-  	    path: '/simulator',
-  	    name: 'simulator',
-  	    component: require('@/components/Simulator').default
-  	},
-  	{
-  	    path: '*',
-  	    redirect: '/'
-  	}
+    {
+      path: '/simulator',
+      name: 'simulator',
+      component: require('@/components/Simulator').default
+    },
+    {
+      path: '/install',
+      name: 'install',
+      component: require('@/components/InstallPalettes').default
+    },
+    {
+      path: '*',
+      redirect: '/'
+    }
   ]
 })