fix: restore QMK icon (#1319)

- the build process wasn't able to resolve the css path for the build
   icon. The quickest fix was to just move the icon file to public,
   this ensures it's always copied when making the dist.
 - fixed some warnings in App.vue about ordering of tags
 - moved the relevant CSS in App.vue
 - removed unused file
 - updated caniuse db

src/App.vue

@@ -6,7 +6,7 @@
  <p class="random-potato">{{ potatoFact }}</p>
  </header>
  <router-view />
- <spinner :isVisible="showSpinner" :status="spinnerMsg" />
+ <spinner :is-visible="showSpinner" :status="spinnerMsg" />
  <InfoBar :msg="message" />
  </div>
  <slideout-panel></slideout-panel>
@@ -18,8 +18,8 @@
  <div
  class="help"
  :class="helpClasses"
- @click="toggleTutorial"
  :title="$t('help.label')"
+ @click="toggleTutorial"
  @mouseenter="
  setMessage($t('help.label'));
  hover = true;
@@ -36,9 +36,9 @@
  size="3x"
  />
  <img
+ v-show="snowflakes && !tutorialEnabled"
  class="santa-hat"
  src="../assets/Santa_hat.svg"
- v-show="snowflakes && !tutorialEnabled"
  alt="Santa Hat by Theresa Knott [Public domain], via Wikimedia Commons"
  />
  <font-awesome-icon
@@ -48,9 +48,9 @@
  size="3x"
  />
  <img
+ v-show="snowflakes && tutorialEnabled"
  class="jinglebell"
  src="../assets/jinglebell.svg"
- v-show="snowflakes && tutorialEnabled"
  alt="Jingle Bell SVG Icon made from Icon Fonts is licensed by CC BY 3.0"
  />
  </div>
@@ -97,6 +97,26 @@ export default {
  hover: false
  };
  },
+ computed: {
+ ...mapGetters('keymap', ['isDirty']),
+ ...mapState([
+ 'showSpinner',
+ 'spinnerMsg',
+ 'message',
+ 'tutorialEnabled',
+ 'snowflakes'
+ ]),
+ showInfoBar() {
+ return this.message !== '';
+ },
+ helpClasses() {
+ var classes = [];
+ if (this.hover) {
+ classes.push('faa-tada', 'animated-hover');
+ }
+ return classes.join(' ');
+ }
+ },
  async beforeMount() {
  await this.appLoad();
  this.randomPotatoFact();
@@ -122,26 +142,6 @@ export default {
  // remove event listener
  window.removeEventListener('beforeunload', this.showConfirmationPrompt);
  },
- computed: {
- ...mapGetters('keymap', ['isDirty']),
- ...mapState([
- 'showSpinner',
- 'spinnerMsg',
- 'message',
- 'tutorialEnabled',
- 'snowflakes'
- ]),
- showInfoBar() {
- return this.message !== '';
- },
- helpClasses() {
- var classes = [];
- if (this.hover) {
- classes.push('faa-tada', 'animated-hover');
- }
- return classes.join(' ');
- }
- },
  methods: {
  ...mapMutations([
  'setShowSpinner',
@@ -236,6 +236,15 @@ export default {
  transform: rotate(-9deg);
 }
 
+.qmk-logo {
+ grid-column: qmk-logo;
+ background-image: url('/qmk_icon_36.png');
+ width: 36px;
+ height: 36px;
+ transform: scale(0.777777);
+ margin-top: 2px;
+}
+
 /* TADA - from https://l-lin.github.io/font-awesome-animation/ */
 @keyframes tada {
  0% {

src/scss/status-bar.scss

@@ -18,14 +18,6 @@
  grid-template: 1fr / [qmk-logo] auto [qmk-app-name] auto [api-version];
 }
 
-.qmk-logo {
- grid-column: qmk-logo;
- background-image: url('../assets/qmk_icon_36.png');
- width: 36px;
- height: 36px;
- transform: scale(0.777777);
- margin-top: 2px;
-}
 .qmk-app-name {
  grid-column: qmk-app-name;
  color: #fff;

yarn.lock

@@ -2873,9 +2873,9 @@ camelcase@^6.0.0:
  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001297:
- version "1.0.30001383"
- resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001383.tgz"
- integrity sha512-swMpEoTp5vDoGBZsYZX7L7nXHe6dsHxi9o6/LKf/f0LukVtnrxly5GVb/fWdCDTqi/yw6Km6tiJ0pmBacm0gbg==
+ version "1.0.30001555"
+ resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001555.tgz"
+ integrity sha512-NzbUFKUnJ3DTcq6YyZB6+qqhfD112uR3uoEnkmfzm2wVzUNsFkU7AwBjKQ654Sp5cau0JxhFyRSn/tQZ+XfygA==
 
 caseless@~0.12.0:
  version "0.12.0"