New font

src/assets/trash.svg

@@ -1 +1 @@
-<?xml version="1.0" ?><svg fill="none" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
+<?xml version="1.0" ?><svg fill="none" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><polyline stroke="#f7f7f7" points="3 6 5 6 21 6"/><path stroke="#f7f7f7" d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line stroke="#f7f7f7" x1="10" x2="10" y1="11" y2="17"/><line stroke="#f7f7f7" x1="14" x2="14" y1="11" y2="17"/></svg>

src/components/TheCategoryBar.vue

@@ -36,9 +36,10 @@ export default {
     };
   },
   methods: {
-    addCategory() {
+    addCategory(event) {
       this.$store.commit('addCategory', this.newCategory);
       this.newCategory = '';
+      this.blurInput(event);
     },
     removeCategory(category) {
       this.$store.commit('removeCategory', category);

src/scss/_variables.scss

@@ -1,6 +1,6 @@
-$dark: #1f1f1f;
+$dark: #252525;
 $darker: #121212;
-$light: rgb(219, 219, 219);
+$light: #f7f7f7;
 $lighter: white;
 
 

src/scss/style.scss

@@ -1,7 +1,9 @@
 @import 'reset-css';
 
+@import url('https://fonts.googleapis.com/css2?family=Scada:wght@400;700&display=swap');
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Scada', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
@@ -20,6 +22,10 @@
       color: $dark;
       opacity: 1;
     }
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   .category {