From 7c016ac2e8e20acb4cc51972e5e7403d8bdc7fc1 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 20 Apr 2021 15:12:58 +0100
Subject: [PATCH] =?UTF-8?q?=EF=BF=BD=EF=BF=BD=20Refactor=20CSS=20to=20use?=
 =?UTF-8?q?=20constants=20for=20media=20queries?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LinkItems/Item.vue              | 18 +++++++++++-------
 src/components/LinkItems/ItemGroup.vue         |  2 ++
 src/components/LinkItems/ItemIcon.vue          |  2 +-
 src/components/PageStrcture/Header.vue         |  4 +++-
 src/components/PageStrcture/PageTitle.vue      |  7 ++-----
 .../Settings/KeyboardShortcutInfo.vue          |  4 +++-
 src/components/Settings/SettingsContainer.vue  |  5 ++++-
 src/components/Settings/ThemeSelector.vue      |  2 +-
 8 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 39ed64ff..ed0928a0 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -3,18 +3,18 @@
       :href="target !== 'iframe' ? url : '#'"
       :target="target === 'newtab' ? '_blank' : ''"
       :class="`item ${!icon? 'short': ''} size-${itemSize}`"
-      :id="`link-${id}`"
       v-tooltip="getTooltipOptions()"
-      rel="noopener noreferrer"
-      tabindex="0"
+      v-bind:style="customStyles"
+      rel="noopener noreferrer" tabindex="0"
+      :id="`link-${id}`"
     >
       <!-- Item Text -->
-      <div class="tile-title" :id="`tile-${id}`">
+      <div class="tile-title" :id="`tile-${id}`" >
         <span class="text">{{ title }}</span>
         <div class="overflow-dots">...</div>
       </div>
       <!-- Item Icon -->
-      <Icon :icon="icon" :url="url" :size="itemSize" />
+      <Icon :icon="icon" :url="url" :size="itemSize" :color="color" v-bind:style="customStyles" />
       <!-- Small icon, showing opening method on hover -->
       <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon" :openingMethod="target"
         :position="itemSize === 'medium'? 'bottom right' : 'top right'"/>
@@ -33,7 +33,8 @@ export default {
     subtitle: String, // Optional sub-text
     description: String, // Optional tooltip hover text
     icon: String, // Optional path to icon, within public/img/tile-icons
-    color: String, // Optional background color, specified in hex code
+    color: String, // Optional text and icon color, specified in hex code
+    backgroundColor: String, // Optional item background color
     url: String, // URL to the resource, optional but recommended
     target: { // Where resource will open, either 'newtab', 'sametab' or 'iframe'
       type: String,
@@ -45,6 +46,10 @@ export default {
   data() {
     return {
       getId: this.id,
+      customStyles: {
+        color: this.color,
+        background: this.backgroundColor,
+      },
     };
   },
   components: {
@@ -132,7 +137,6 @@ export default {
   padding: 0;
   z-index: 2;
   span.text {
-    position: absolute;
     white-space: nowrap;
     transition: 1s;
     float: left;
diff --git a/src/components/LinkItems/ItemGroup.vue b/src/components/LinkItems/ItemGroup.vue
index d372cc62..681171f8 100644
--- a/src/components/LinkItems/ItemGroup.vue
+++ b/src/components/LinkItems/ItemGroup.vue
@@ -21,6 +21,8 @@
         :description="item.description"
         :icon="item.icon"
         :target="item.target"
+        :color="item.color"
+        :backgroundColor="item.backgroundColor"
         :itemSize="newItemSize"
         @itemClicked="$emit('itemClicked')"
         @triggerModal="triggerModal"
diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
index 8fc49596..b3d7409c 100644
--- a/src/components/LinkItems/ItemIcon.vue
+++ b/src/components/LinkItems/ItemIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <i v-if="determineImageType(icon) === 'font-awesome'" :class="`${icon} ${size}`"></i>
+  <i v-if="determineImageType(icon) === 'font-awesome'" :class="`${icon} ${size}`" ></i>
   <img v-else-if="icon" :src="getIconPath(icon, url)" :class="`tile-icon ${size}`" />
 </template>
 
diff --git a/src/components/PageStrcture/Header.vue b/src/components/PageStrcture/Header.vue
index 5180f5d4..f154676f 100644
--- a/src/components/PageStrcture/Header.vue
+++ b/src/components/PageStrcture/Header.vue
@@ -31,6 +31,8 @@ export default {
 
 <style scoped lang="scss">
 
+@import '@/styles/media-queries.scss';
+
   header {
     margin: 0;
     padding: 0.5rem;
@@ -39,7 +41,7 @@ export default {
     background: var(--background-darker);
     align-items: center;
     align-content: flex-start;
-    @media screen and (max-width: 600px) {
+    @include phone {
       flex-direction: column-reverse;
     }
   }
diff --git a/src/components/PageStrcture/PageTitle.vue b/src/components/PageStrcture/PageTitle.vue
index 88ad2a59..73383cbe 100644
--- a/src/components/PageStrcture/PageTitle.vue
+++ b/src/components/PageStrcture/PageTitle.vue
@@ -16,16 +16,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/media-queries.scss';
 
 .page-titles {
   display: flex;
   flex-direction: column;
   h1 {
     color: var(--primary);
-    // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    // -webkit-background-clip: text;
-    // -webkit-text-fill-color: transparent;
     font-size: 2.5rem;
     margin: 0;
   }
@@ -35,7 +32,7 @@ export default {
     text-shadow: 1px 1px 2px #130f23;
     opacity: var(--dimming-factor);
   }
-  @media screen and (max-width: 600px) {
+  @include phone {
     text-align: center;
     padding: 0.25rem 0;
   }
diff --git a/src/components/Settings/KeyboardShortcutInfo.vue b/src/components/Settings/KeyboardShortcutInfo.vue
index 226f6c17..1c4f2294 100644
--- a/src/components/Settings/KeyboardShortcutInfo.vue
+++ b/src/components/Settings/KeyboardShortcutInfo.vue
@@ -65,6 +65,8 @@ export default {
 
 <style scoped lang="scss">
 
+@import '@/styles/media-queries.scss';
+
 .kb-sc-info {
   position: fixed;
   width: 30em;
@@ -82,7 +84,7 @@ export default {
   background: var(--background-darker);
   cursor: default;
   opacity: 0.94;
-  @media screen and (max-width: 600px) {
+  @include phone {
     display: none;
   }
   h5 { /* The dialog title */
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 25f96589..2b846a01 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -50,8 +50,11 @@ export default {
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
+    /* Gets user themes if available */
     getUserThemes() {
-      return this.appConfig.cssThemes || [];
+      const userThemes = this.appConfig.cssThemes || [];
+      if (typeof userThemes === 'string') return [userThemes];
+      return userThemes;
     },
   },
   data() {
diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index 9f1e28a6..5167ef7b 100644
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -30,7 +30,7 @@ export default {
       selectedTheme: this.getInitialTheme(),
       themeHelper: new ThemeHelper(),
       loading: true,
-      builtInThemes: Defaults.builtInThemes.concat(this.userThemes),
+      builtInThemes: this.userThemes.concat(Defaults.builtInThemes),
     };
   },
   computed: {