🔀 Merge pull request gchq#179 from Lissy93/REFACTOR/quick-stuff

[REFACTOR] - Style improvments

Author: Lissy93

README.md

@@ -69,8 +69,8 @@
 - 📏 Customizable layout, sizes, text, component visibility, behavior and colors etc
 - 🖼️ Option for full-screen background image, custom nav-bar links, html footer, title, and more
 - 🚀 Easy to setup with Docker, or on bare metal, or with 1-Click cloud deployment
-- 🤏 Small bundle size, fully responsive UI and PWA makes the app easy to use on any device
 - ⚙️ Easy single-file YAML-based configuration, with option to configure app directly through the UI
+- 🤏 Small bundle size, fully responsive UI and PWA makes the app easy to use on any device
 - ✨ Under active development with improvements and new features added regularly 
 - 🆓 100% free and open source
 - 🔐 Strong focus on privacy
@@ -446,9 +446,9 @@ If you're having trouble getting things up and running, feel free to ask a quest
 
 Found a bug, or something that isn't working as you'd expect? Please raise it as an issue so that it can be resolved. Feature requests are also welcome. Similarlty, feedback is very useful, as it helps me know what areas of Dashy need some improvement. 
 
-- [Raise a Bug 🐛](https://github.com/Lissy93/dashy/issues/new?assignees=Lissy93&labels=%F0%9F%90%9B+Bug&template=bug-report---.md&title=%5BBUG%5D)
-- [Submit a Feature Request 🦄](https://github.com/Lissy93/dashy/issues/new?assignees=Lissy93&labels=%F0%9F%A6%84+Feature+Request&template=feature-request---.md&title=%5BFEATURE_REQUEST%5D)
-- [Share Feedback 🌈](https://github.com/Lissy93/dashy/issues/new?assignees=&labels=%F0%9F%8C%88+Feedback&template=share-feedback---.md&title=%5BFEEDBACK%5D)
+- [Raise a Bug 🐛](https://github.com/Lissy93/dashy/issues/new?assignees=lissy93&labels=%F0%9F%90%9B+Bug&template=bug.yml&title=%5BBUG%5D+%3Ctitle%3E)
+- [Submit a Feature Request 🦄](https://github.com/Lissy93/dashy/issues/new?template=feature-request.yml)
+- [Share Feedback 🌈](https://github.com/Lissy93/dashy/issues/new?assignees=&labels=%F0%9F%8C%88+Feedback&template=share-feedback.md&title=%5BFEEDBACK%5D)
 
 **Issue Status** [![Resolution Time](http://isitmaintained.com/badge/resolution/lissy93/dashy.svg)  ![Open Issues](http://isitmaintained.com/badge/open/lissy93/dashy.svg) ![Closed Issues](https://badgen.net/github/closed-issues/lissy93/dashy)](https://isitmaintained.com/project/lissy93/dashy) [![GitHub Discussions](https://img.shields.io/github/discussions/lissy93/dashy)
 ](https://github.com/Lissy93/dashy/discussions)

docs/contributing.md

@@ -25,7 +25,7 @@ All content is located either in the [`./README.md`](/README.md) or [`/docs/`](/
 ## Raise a bug
 If you've found a bug, then please do raise it as an issue. This will help me know if there's something that needs fixing. Try and include as much detail as possible, such as your environment, steps to reproduce, any console output and maybe an example screenshot or recording if necessary.
 
-[![Raise a Bug](https://img.shields.io/badge/Raise_a-Bug-%23dc2d76?style=for-the-badge&logo=dependabot)](https://github.com/Lissy93/dashy/issues/new?assignees=Lissy93&labels=%F0%9F%90%9B+Bug&template=bug-report---.md&title=%5BBUG%5D)
+[![Raise a Bug](https://img.shields.io/badge/Raise_a-Bug-%23dc2d76?style=for-the-badge&logo=dependabot)](https://github.com/Lissy93/dashy/issues/new?assignees=lissy93&labels=%F0%9F%90%9B+Bug&template=bug.yml&title=%5BBUG%5D+%3Ctitle%3E)
 
 ## Join the discussion
 I've enabled the discussion feature on GitHub, here you can share tips and tricks, useful information, or your dashboard. You can also ask questions, and offer basic support to other users.

docs/showcase.md

@@ -70,7 +70,7 @@
 ## Submitting your Dashboard
 
 #### How to Submit
-- [Open an Issue](https://git.io/Jceik)
+- [Open an Issue](https://git.io/JEtgM)
 - [Open a PR](https://github.com/Lissy93/dashy/compare)
 
 #### What to Include

docs/showcase/readme.md

@@ -0,0 +1,2 @@
+
+See: [Showcase](/docs/showcase.md).

docs/troubleshooting.md

@@ -57,6 +57,8 @@ Alternatively, as a workaround, you have several options:
 
 In V 1.6.5 an update was made that in the future will become a breaking change. You will need to update you config to reflect this before V 2.0.0 is released. In the meantime, your previous config will continue to function normally, but you will see a validation warning. The change means that the structure of the `appConfig.auth` object is now an object, which has a `users` property.
 
+For more info, see [this announcement](https://github.com/Lissy93/dashy/discussions/177).
+
 You can fix this by replacing:
 
 ```yaml
@@ -68,11 +70,10 @@ auth:
 with
 
 ```yaml
-appConfig:
-  auth:
-    users:
-    - user: xxx
-      hash: xxx
+auth:
+  users:
+  - user: xxx
+    hash: xxx
 ```
 
 ---

src/components/Configuration/CustomCss.vue

@@ -75,6 +75,10 @@ div.css-editor-outer {
   display: flex;
   flex-direction: column;
 
+  div.css-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
   h2.css-input-title {
     margin: 0.5rem 0 0.2rem;
   }

src/components/Workspace/SideBar.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="side-bar">
-    <div v-for="(section, index) in sections" :key="index">
+    <div v-for="(section, index) in sections" :key="index" class="side-bar-section">
       <div @click="openSection(index)" class="side-bar-item-container">
         <SideBarItem
           class="item"

src/styles/color-themes.scss

@@ -915,12 +915,57 @@ html[data-theme="dashy-docs"] {
     @include make-colors(#dcff5a, #ceb73f);
   }
 
+  nav.side-bar {
+    div div.side-bar-item-container div {
+      padding: 0.15rem 0;
+      color: var(--background);
+    }
+
+    div.side-bar-section:nth-child(1n) {
+      div.side-bar-item-container div.side-bar-item {
+        @include make-colors(#db78fc, #b83ddd);
+      }
+      .sub-side-bar { background: #b83ddd80; }
+    }
+    div.side-bar-section:nth-child(2n) {
+      div.side-bar-item-container div.side-bar-item {
+        @include make-colors(#5c85f7, #3d48dd);
+      }
+      .sub-side-bar { background: #3d48dd80; }
+    }
+    div.side-bar-section:nth-child(3n) {
+      div.side-bar-item-container div.side-bar-item {
+        @include make-colors(#41ef90, #1e9554);
+      }
+      .sub-side-bar { background: #1e955480; }
+    }
+    div.side-bar-section:nth-child(4n) {
+      div.side-bar-item-container div.side-bar-item {
+        @include make-colors(#dcff5a, #ceb73f);
+      }
+      .sub-side-bar { background: #ceb73f80; }
+    }
+  }
+
   // Section items
   div.collapsable:nth-child(1n) { .item-wrapper:hover { .item {box-shadow: 0 2px 3px #db78fc; .tile-title { color: #db78fc; } } } }
   div.collapsable:nth-child(2n) { .item-wrapper:hover { .item { box-shadow: 0 2px 3px #5c85f7; .tile-title { color: #5c85f7; } } } }
   div.collapsable:nth-child(3n) { .item-wrapper:hover { .item { box-shadow: 0 2px 3px #41ef90; .tile-title { color: #41ef90; } } } }
   div.collapsable:nth-child(4n) { .item-wrapper:hover { .item { box-shadow: 0 2px 3px #dcff5a; .tile-title { color: #dcff5a; } } } }
 
+
+  div.config-buttons {
+    .config-button {
+      border: none;
+      color: var(--background);
+      font-weight: bold;
+      svg path { fill: var(--background); }
+      &:nth-child(1n) { @include make-colors(#db78fc, #b83ddd); }
+      &:nth-child(2n) { @include make-colors(#41ef90, #1e9554); }
+      &:nth-child(3n) { @include make-colors(#5c85f7, #3d48dd); }
+      &:nth-child(4n) { @include make-colors(#dcff5a, #ceb73f); }
+    }
+  }
 
   a.nav-item, a.nav-item:hover, a.nav-item.router-link-active {
     border: none;