🔃 Rebased of master

src/components/Configuration/ConfigContainer.vue

@@ -9,11 +9,11 @@
           Download Config
           </button>
         </a>
-        <button class="config-button center" @click="goToEdit()">
+        <button class="config-button center" @click="() => navigateToTab(2)">
           <EditIcon class="button-icon"/>
           Edit Config
         </button>
-        <button class="config-button center" @click="goToCustomCss()">
+        <button class="config-button center" @click="() => navigateToTab(3)">
           <CustomCssIcon class="button-icon"/>
           Edit Custom CSS
         </button>
@@ -119,18 +119,10 @@ export default {
     IconAbout,
   },
   methods: {
-    /* Seletcs the edit tab of the tab view */
-    goToEdit() {
-      const itemToSelect = this.$refs.tabView.navItems[2];
-      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
-    },
-    goToMetaEdit() {
-      const itemToSelect = this.$refs.tabView.navItems[3];
-      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
-    },
-    goToCustomCss() {
-      const itemToSelect = this.$refs.tabView.navItems[3];
-      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
+    /* Progamatically navigates to a given tab by index */
+    navigateToTab(tabInxex) {
+      const itemToSelect = this.$refs.tabView.navItems[tabInxex];
+      this.$refs.tabView.activeTabItem(itemToSelect);
     },
     openRebuildAppModal() {
       this.$modal.show(modalNames.REBUILD_APP);
@@ -237,7 +229,7 @@ div.code-container {
   }
   .yaml-action-buttons {
     position: absolute;
-    top: 0.5rem;
+    top: 1.5rem;
     right: 0.5rem;
     display: flex;
     flex-direction: column;
@@ -334,35 +326,50 @@ p.small-screen-note {
 </style>
 
 <style lang="scss">
+
+.tabs__content {
+  height: -webkit-fill-available;
+  height: -moz-available;
+  height: stretch;
+}
+
+.tab-item {
+  background: var(--config-settings-background) !important;
+}
+
 .tab__pagination {
-  background: var(--config-settings-background);
-  color: var(--config-settings-color);
+  background: var(--config-settings-background) !important;
+  color: var(--config-settings-color) !important;
   .tab__nav__items .tab__nav__item {
     span {
-      color: var(--config-settings-color);
+      color: var(--config-settings-color) !important;
     }
     &:hover {
       background: var(--config-settings-color) !important;
       span {
-        color: var(--config-settings-background);
+        color: var(--config-settings-background) !important;
       }
     }
     &.active {
       span {
-        font-weight: bold;
+        font-weight: bold !important;
         color: var(--config-settings-color) !important;
       }
     }
   }
   .tab__nav__items .tab__nav__item.active {
-    border-bottom: 2px solid var(--config-settings-color);
+    border-bottom: 2px solid var(--config-settings-color) !important;
   }
   hr.tab__slider {
-    background: var(--config-settings-color);
+    background: var(--config-settings-color) !important;
   }
 }
 
-#conf-yaml .hljs-attr {
-  color: #9c03f5;
+#conf-yaml {
+  background: var(--white);
+  .hljs-attr {
+    color: #9c03f5;
+  }
 }
+
 </style>

src/components/Configuration/JsonEditor.vue

@@ -40,6 +40,7 @@
     <p class="response-output">{{ responseText }}</p>
     <p v-if="saveSuccess" class="response-output">
       The app should rebuild automatically.
+      This may take up to a minute.
       You will need to refresh the page for changes to take effect.
     </p>
     <p class="note">
@@ -226,8 +227,14 @@ p.response-output {
   margin: 0.5rem auto;
   width: 95%;
   color: var(--config-settings-color);
-  &.status-success { color: var(--success); }
-  &.status-fail { color: var(--danger); }
+  &.status-success {
+    font-weight: bold;
+    color: var(--success);
+  }
+  &.status-fail {
+    font-weight: bold;
+    color: var(--danger);
+  }
 }
 
 button.save-button {

src/styles/color-themes.scss

@@ -680,13 +680,13 @@ html[data-theme='vaporware'] {
   --background-darker: linear-gradient(0deg, rgba(108,39,234,1) 0%, rgba(132,76,235,1) 80%);
   --settings-text-color: #6c27ea;
   --item-group-outer-background: #096de6;
-  --item-group-outer-background: linear-gradient(45deg, rgba(9,109,230,1) 0%, rgba(9,147,230,1) 50%, rgba(9,109,230,1) 100%);
+  --item-group-outer-background: var(--primary);
   --item-group-background: #190e2c;
-  --item-group-heading-text-color: var(--white);
+  --item-group-heading-text-color: #190e2c;
   --item-group-heading-text-color-hover: #5118b9;
-  --item-text-color: #5118b9;
-  --item-background: #09bfe6;
-  --item-background-hover: #9967f6;
+  --item-text-color: var(--primary);
+  --item-background: #1a174d;
+  --item-background-hover: #2b2670;
   --footer-text-color: var(--white);
   --item-shadow: none;
   --curve-factor: 2px;
@@ -707,7 +707,7 @@ html[data-theme='vaporware'] {
     padding: 0.2rem;
   }
   div.content-inner {
-    padding: 0 !important;
+    padding: 0.15rem !important;
   }
   a.item {
     margin: 0.1rem;
@@ -737,14 +737,6 @@ html[data-theme='vaporware'] {
   footer {
     color: var(--white);
   }
-  a.item {
-    background: linear-gradient(45deg, rgba(9,191,230,1) 0%, rgba(9,191,230,1) 80%, rgba(9,203,230,1) 100%);
-    &:hover {
-      background: #844ceb;
-      color: #09bfe6;
-    }
-  }
-
   div.login-page {
     background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg');
     background-size: cover;
@@ -779,5 +771,7 @@ html[data-theme='cyberpunk'] {
 --scroll-bar-color: var(--aqua);
 --scroll-bar-background: var(--teal);
 --footer-background: var(--aqua);
+--welcome-popup-background: var(--pink);
+--welcome-popup-text-color: var(--blue);
 --font-headings: 'Audiowide', cursive;
 }