From a75db93e8e2da3ba446e1c699a0529f23541615f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 31 May 2021 14:25:25 +0100
Subject: [PATCH] Adds fancy scrollbar

---
 .../Configuration/CloudBackupRestore.vue      |  2 +-
 .../Configuration/ConfigContainer.vue         |  2 +
 src/components/LinkItems/ItemGroup.vue        | 27 ++++--------
 src/styles/color-palette.scss                 |  3 ++
 src/styles/global-styles.scss                 | 34 ++------------
 src/styles/style-helpers.scss                 | 44 +++++++++++++++++++
 6 files changed, 63 insertions(+), 49 deletions(-)
 create mode 100644 src/styles/style-helpers.scss

diff --git a/src/components/Configuration/CloudBackupRestore.vue b/src/components/Configuration/CloudBackupRestore.vue
index 8fb4dda0..afb7bc9a 100644
--- a/src/components/Configuration/CloudBackupRestore.vue
+++ b/src/components/Configuration/CloudBackupRestore.vue
@@ -3,7 +3,7 @@
     <div class="section intro">
       <h2>Cloud Backup & Restore</h2>
       <p class="intro">
-        Cloud backup and restore is an optional feature, that enabled you to upload your
+        Cloud backup and restore is an optional feature, that enables you to upload your
         config to the internet, and then restore it on any other device or instance of Dashy.
         <br><br>
         All data is fully end-to-end encrypted with AES, using your password as the key.
diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index 69583282..fc33f100 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -126,6 +126,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/style-helpers.scss';
 
 pre {
   color: var(--config-code-color);
@@ -204,6 +205,7 @@ div.code-container {
 
 .tab-item {
   overflow-y: auto;
+  @extend .scroll-bar;
   background: var(--config-settings-background);
   &.main-tab {
     min-height: 500px;
diff --git a/src/components/LinkItems/ItemGroup.vue b/src/components/LinkItems/ItemGroup.vue
index e0efd9ff..2c8a420b 100644
--- a/src/components/LinkItems/ItemGroup.vue
+++ b/src/components/LinkItems/ItemGroup.vue
@@ -96,6 +96,7 @@ export default {
 
 <style scoped lang="scss">
 @import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
 
 .no-items {
     width: 100px;
@@ -115,24 +116,14 @@ export default {
   flex-wrap: wrap;
   &.item-group-grid {
     display: grid;
-    @include phone {
-      grid-template-columns: repeat(1, 1fr);
-    }
-    @include tablet {
-      grid-template-columns: repeat(2, 1fr);
-    }
-    @include laptop {
-      grid-template-columns: repeat(2, 1fr);
-    }
-    @include monitor {
-      grid-template-columns: repeat(3, 1fr);
-    }
-    @include big-screen {
-      grid-template-columns: repeat(4, 1fr);
-    }
-    @include big-screen-up {
-      grid-template-columns: repeat(5, 1fr);
-    }
+    overflow: auto;
+    @extend .scroll-bar;
+    @include phone { grid-template-columns: repeat(1, 1fr); }
+    @include tablet { grid-template-columns: repeat(2, 1fr); }
+    @include laptop { grid-template-columns: repeat(2, 1fr); }
+    @include monitor { grid-template-columns: repeat(3, 1fr); }
+    @include big-screen { grid-template-columns: repeat(4, 1fr); }
+    @include big-screen-up { grid-template-columns: repeat(5, 1fr); }
   }
 }
 
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 1c0cff6a..56a6645c 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -38,6 +38,7 @@
   --dimming-factor: 0.7; // Opacity for semi-transparent components
 
   /* Settings for specific components */
+  --scroll-bar-width: 8px;
   --item-group-padding: 5px; // Determines width of item-group outline
   --item-shadow: 1px 1px 2px #130f23;
   --item-hover-shadow: 1px 2px 4px #373737;
@@ -74,4 +75,6 @@
   --config-settings-background: var(--background-darker);
   --toast-background: var(--primary);
   --toast-color: var(--background);
+  --scroll-bar-color: var(--primary);
+  --scroll-bar-background: var(--background-darker);
 }
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index 122893e3..c28c3adf 100644
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -1,4 +1,6 @@
 
+@import '@/styles/style-helpers.scss';
+
 @font-face {
     font-family: 'Inconsolata';
     src: url('./assets/fonts/Inconsolata-Light.ttf');
@@ -8,6 +10,8 @@ html {
     margin: 0;
     padding: 0;
     transition: all 1s;
+    margin-top: -3px;
+    @extend .scroll-bar;
 }
 
 /* Default app font face */
@@ -19,33 +23,3 @@ body, div, p, a, span, label, input, button {
 h1, h2, h3, h4, h5 {
     font-family: 'Inconsolata', sans-serif;
 }
-
-.bold { font-weight: bold; }
-.light { font-weight: lighter; }
-.text-left { text-align: left;}
-.text-right { text-align: right;}
-.text-center { text-align: center;}
-.horizontal-center { margin: 0 auto; }
-.border-box { box-sizing: border-box; }
-
-/* Overiding styles for the global toast component */
-.toast-message {
-    background: var(--toast-background) !important;
-    color: var(--toast-color) !important;
-    border: 1px solid var(--toast-color) !important;
-    border-radius: var(--curve-factor) !important;
-    font-size: 1.25rem !important;
-}
-
-.toast-error {
-    background: var(--danger) !important;
-    color: var(--white) !important;
-    font-size: 1.25rem !important;
-}
-.toast-success {
-    background: var(--success) !important;
-    color: var(--white) !important;
-    font-size: 1.25rem !important;
-}
-
-
diff --git a/src/styles/style-helpers.scss b/src/styles/style-helpers.scss
new file mode 100644
index 00000000..491c7c09
--- /dev/null
+++ b/src/styles/style-helpers.scss
@@ -0,0 +1,44 @@
+
+/* Fancy scrollbar */
+.scroll-bar {
+  &::-webkit-scrollbar {
+      width: var(--scroll-bar-width);
+      height: var(--scroll-bar-width);
+  }
+  &::-webkit-scrollbar-track {
+      border-radius: var(--curve-factor);
+      background-color: var(--scroll-bar-background);
+  }
+  &::-webkit-scrollbar-thumb {
+      background: var(--scroll-bar-color);
+      border-radius: var(--curve-factor);
+  }
+}
+
+/* Single-style helpers */
+.bold { font-weight: bold; }
+.light { font-weight: lighter; }
+.text-left { text-align: left;}
+.text-right { text-align: right;}
+.text-center { text-align: center;}
+.horizontal-center { margin: 0 auto; }
+.border-box { box-sizing: border-box; }
+
+/* Overiding styles for the global toast component */
+.toast-message {
+    background: var(--toast-background) !important;
+    color: var(--toast-color) !important;
+    border: 1px solid var(--toast-color) !important;
+    border-radius: var(--curve-factor) !important;
+    font-size: 1.25rem !important;
+}
+.toast-error {
+    background: var(--danger) !important;
+    color: var(--white) !important;
+    font-size: 1.25rem !important;
+}
+.toast-success {
+    background: var(--success) !important;
+    color: var(--white) !important;
+    font-size: 1.25rem !important;
+}