theming

public/config.yml

@@ -5,7 +5,6 @@
 title: "Forbidden Fruit dashboard"
 subtitle: "TANGIE"
 icon: "fas fa-cannabis"
-# icon: "fas fa-skull-crossbones" # Optional icon
 
 header: true
 footer: false
@@ -15,21 +14,22 @@ columns: "4"
 theme: default
 colors:
   light:
-    highlight-primary: "#3367d6"
+    highlight-primary: "#f18409"
-    highlight-secondary: "#4285f4"
+    highlight-secondary: "#3a2a2f"
-    highlight-hover: "#5a95f5"
+    highlight-hover: "#f18409"
-    background: "#f5f5f5"
+    background: "#F3E7E2"
-    card-background: "#ffffff"
+    card-background: "#E7D0C5"
     text: "#363636"
     text-header: "#ffffff"
     text-title: "#303030"
     text-subtitle: "#424242"
     card-shadow: rgba(0, 0, 0, 0.1)
     link-hover: "#363636"
+    link-color: "#571962"
   dark:
-    highlight-primary: "#3367d6"
+    highlight-primary: "#571962"
-    highlight-secondary: "#4285f4"
+    highlight-secondary: "#3a2a2f"
-    highlight-hover: "#5a95f5"
+    highlight-hover: "#571962"
     background: "#131313"
     card-background: "#2b2b2b"
     text: "#eaeaea"
@@ -38,6 +38,7 @@ colors:
     text-subtitle: "#f5f5f5"
     card-shadow: rgba(0, 0, 0, 0.4)
     link-hover: "#ffdd57"
+    link-color: "#f18409"
 
 # Optional message
 #message:
@@ -48,14 +49,19 @@ colors:
 
 # Optional navbar
 # links: [] # Allows for navbar (dark mode, layout, and search) without any links
-#links:
+links:
-# - name: "Contribute"
+- name: "Gmail"
-#   icon: "fab fa-github"
+  icon: "fas fa-envelope"
-#   url: "https://github.com/bastienwirtz/homer"
+  url: "https://mail.google.com"
-#   target: "_blank" # optionnal html a tag target attribute
+  target: "_blank"
-# - name: "Wiki"
+- name: "Telegram"
-#   icon: "fas fa-book"
+  icon: "fas fa-paper-plane"
-#   url: "https://www.wikipedia.org/"
+  url: "https://web.telegram.org/"
+  target: "_blank"
+- name: "Reddit"
+  icon: "fab fa-reddit"
+  url: "https://www.reddit.com/"
+  target: "_blank"
 
 # Services
 # First level array represent a group.

src/assets/app.scss

@@ -221,6 +221,7 @@ body {
     transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 
     a {
+      color: var(--link-color);
       outline: none;
     }
   }
@@ -331,7 +332,7 @@ body {
       line-height: 1rem;
       vertical-align: middle;
       cursor: pointer;
-      color: #3273dc;
+      color: #f18409;
     }
   }
 }

src/components/SearchInput.vue

@@ -6,8 +6,8 @@
       ref="search"
       :value="value"
       @input="$emit('input', $event.target.value.toLowerCase())"
-      @keyup.enter.exact="$emit('search:open')"
+      @keyup.enter.exact="$emit('search-open')"
-      @keyup.alt.enter="$emit('search:open', '_blank')"
+      @keyup.alt.enter="$emit('search-open', '_blank')"
     />
   </div>
 </template>

vue.config.js

@@ -14,7 +14,7 @@ module.exports = {
     appleMobileWebAppCapable: "yes",
     name: "Forbidden Fruit Dashboard",
     short_name: "FFruit",
-    theme_color: "#3367D6",
+    theme_color: "#571962",
     icons: [
       {
         src: "./assets/icons/android-chrome-192x192.png",