From a82a4c7103c7566421325ee89f22e3736342e6a3 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 5 Jul 2021 21:09:17 +0100
Subject: [PATCH] :fire: Refactor and removes less-important stuff

---
 src/App.vue                   | 32 +++++++++-----------------------
 src/styles/global-styles.scss | 11 +++++++++--
 src/views/Login.vue           |  1 +
 3 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 38d992b9..5d7b8f46 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="dashy">
     <LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash()" />
-    <Header :pageInfo="pageInfo" v-if="!shouldHidePageComponents()" />
+    <Header :pageInfo="pageInfo" />
     <router-view />
-    <Footer v-if="showFooter && !shouldHidePageComponents()" :text="getFooterText()" />
+    <Footer :text="getFooterText()" v-if="visibleComponents.footer" />
   </div>
 </template>
 <script>
@@ -36,29 +36,33 @@ export default {
   },
   data() {
     return {
+      isLoading: true, // Set to false after mount complete
       showFooter: visibleComponents.footer,
-      isLoading: true,
       appConfig: Accumulator.appConfig(),
       pageInfo: Accumulator.pageInfo(),
       visibleComponents,
     };
   },
   methods: {
+    /* If the user has specified custom text for footer - get it */
     getFooterText() {
       if (this.pageInfo && this.pageInfo.footerText) {
         return this.pageInfo.footerText;
       }
       return '';
     },
+    /* Injects the users custom CSS as a style tag */
     injectCustomStyles(usersCss) {
       const style = document.createElement('style');
       style.textContent = usersCss;
       document.head.append(style);
     },
+    /* Determine if splash screen should be shown */
     shouldShowSplash() {
       return (this.visibleComponents || defaultVisibleComponents).splashScreen
       || !localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
     },
+    /* Hide splash screen, either after 2 seconds, or immediately based on user preference */
     hideSplash() {
       if (this.shouldShowSplash() && !this.shouldHidePageComponents()) {
         setTimeout(() => { this.isLoading = false; }, splashScreenTime || 2000);
@@ -66,15 +70,8 @@ export default {
         this.isLoading = false;
       }
     },
-    shouldHidePageComponents() {
-      return (['download'].includes(this.$route.name));
-    },
-  },
-  computed: {
-    currentRouteName() {
-      return this.$route.name;
-    },
   },
+  /* When component mounted, hide splash and initiate the injection of custom styles */
   mounted() {
     this.hideSplash();
     if (this.appConfig.customCss) {
@@ -86,22 +83,11 @@ export default {
 </script>
 
 <style lang="scss">
+/* Import styles used globally throughout the app */
 @import '@/styles/global-styles.scss';
 @import '@/styles/color-palette.scss';
 @import '@/styles/dimensions.scss';
 @import '@/styles/color-themes.scss';
 @import '@/styles/typography.scss';
 
-body {
-  background: var(--background);
-  margin: 0;
-  padding: 0;
-}
-
-#app {
-  .footer {
-    text-align: center;
-  }
-}
-
 </style>
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index 64d4bd0e..1855ad2b 100644
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -1,14 +1,21 @@
 
 @import '@/styles/style-helpers.scss';
 
+/* Essential global page layout styles */
 html {
-  margin: 0;
   padding: 0;
+  margin: -3px 0 0 0;
   transition: all 1s;
-  margin-top: -3px;
   @extend .scroll-bar;
   @extend .highlight;
   box-sizing: border-box;
+  /* Essential body styles */
+  body {
+    background: var(--background);
+    margin: 0;
+    padding: 0;
+  }
+  /* Make links have pointy cursor */
   input[type=button], button, a {
     cursor: pointer;
   }
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 4d723e1e..f3d75dc6 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -151,6 +151,7 @@ export default {
   .vs__dropdown-toggle {
     border-color: var(--login-form-color);
     background: var(--login-form-background);
+    cursor: pointer;
     span.vs__selected {
       color: var(--login-form-color);
     }