New material theme, additional fonts, more complete theme coverage, and bug fixes

src/components/Settings/ItemSizeSelector.vue

@@ -3,11 +3,11 @@
     <span class="options-label">Icon Size</span>
     <div class="display-options">
       <IconSmall @click="updateIconSize('small')" v-tooltip="tooltip('Small')"
-        :class="`layout-icon ${iconSize === 'small' ? 'selected' : ''}`" tabindex="2" />
+        :class="`layout-icon ${iconSize === 'small' ? 'selected' : ''}`" tabindex="-2" />
       <IconMedium @click="updateIconSize('medium')" v-tooltip="tooltip('Medium')"
-        :class="`layout-icon ${iconSize === 'medium' ? 'selected' : ''}`" tabindex="2" />
+        :class="`layout-icon ${iconSize === 'medium' ? 'selected' : ''}`" tabindex="-2" />
       <IconLarge @click="updateIconSize('large')" v-tooltip="tooltip('Large')"
-        :class="`layout-icon ${iconSize === 'large' ? 'selected' : ''}`" tabindex="2" />
+        :class="`layout-icon ${iconSize === 'large' ? 'selected' : ''}`" tabindex="-2" />
     </div>
   </div>
 </template>

src/components/Settings/LayoutSelector.vue

@@ -3,11 +3,11 @@
     <span class="options-label">Layout</span>
     <div class="display-options">
       <IconDeafault @click="updateDisplayLayout('auto')" v-tooltip="tooltip('Auto')"
-        :class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`" tabindex="2" />
+        :class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`" tabindex="-2" />
       <IconHorizontal @click="updateDisplayLayout('horizontal')" v-tooltip="tooltip('Horizontal')"
-        :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" tabindex="2" />
+        :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" tabindex="-2" />
       <IconVertical @click="updateDisplayLayout('vertical')" v-tooltip="tooltip('Vertical')"
-        :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" tabindex="2" />
+        :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" tabindex="-2" />
     </div>
   </div>
 </template>

src/components/Settings/SearchBar.vue

@@ -5,7 +5,7 @@
       id="filter-tiles"
       v-model="input"
       ref="filter"
-      placeholder="Start typing to filter tiles..."
+      placeholder="Start typing to filter..."
       v-on:input="userIsTypingSomething"
       @keydown.esc="clearFilterInput" />
       <i v-if="input.length > 0"

src/components/Settings/ThemeSelector.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="theme-selector-section" v-if="themes" >
-    <span class="theme-label">Themes</span>
+    <span class="theme-label">Theme</span>
     <v-select
       :options="themeNames"
       v-model="selectedTheme"
       class="theme-dropdown"
-      :tabindex="2"
+      :tabindex="-2"
     />
   </div>
 </template>