fix: theme color issues; closes ambianic#492; closes ambianic#488

Merge pull request ambianic#518 from ivelin/master

README.md

@@ -1,6 +1,8 @@
 
 # Ambianic Client UI
 
+[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/ambianic/ambianic-ui)
+
 ![CI for Ambianic UI](https://github.com/ambianic/ambianic-ui/workflows/CI%20for%20Ambianic%20UI/badge.svg)
 [![npm version](https://badge.fury.io/js/ambianic-ui.svg)](https://badge.fury.io/js/ambianic-ui)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/70a4b25a-2765-4d6b-bbd8-a7e5dd6e98cb/deploy-status)](https://app.netlify.com/sites/happy-franklin-69b6d4/deploys)
@@ -10,8 +12,6 @@
 ![Lighthouse PWA CI](https://github.com/ambianic/ambianic-ui/workflows/Lighthouse%20CI/badge.svg)
 [![codecov](https://codecov.io/gh/ambianic/ambianic-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/ambianic/ambianic-ui)
 
-[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/ambianic/ambianic-ui)
-
 Ambianic Client UI is an Offline-first Progressive Web App (PWA) to manage Ambianic Edge deployments.
 
 

src/App.vue

@@ -24,14 +24,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.theme--light.v-application {
-    background: rgb(65, 131, 194) !important;
-    background: linear-gradient(
-        180deg,
-        rgb(49, 30, 102) 0%,
-        rgb(94, 48, 99) 100%
-    );
-}
-</style>

src/components/NavBar.vue

@@ -7,7 +7,6 @@
     <v-app-bar
       app
       color="blue darken-3"
-      dark
     >
       <v-toolbar-title
         style="width: 300px"
@@ -46,7 +45,6 @@
         data-cy="heart"
         is-icon
         icon="heart"
-        btn-color="pink lighten-2"
         :badge-content="newFavorites"
         :badge-value="newFavorites"
       />
@@ -185,7 +183,7 @@ export default {
     newAlerts: 2,
     logo: '../assets/logo5.svg',
     items: [
-      { icon: 'history', color: 'warning', text: 'Timeline', link: '/timeline' },
+      { icon: 'history', text: 'Timeline', link: '/timeline' },
       // { icon: 'mdi-account-heart-outline', text: 'People', link: '/people' },
       // class: 'hidden-sm-and-down' ensures that an item is not shown
       // on small screens. For example flows are only visible on screens with
@@ -213,10 +211,10 @@ export default {
       // },
       // { icon: 'mdi-video-input-antenna', text: 'Connect', link: '/edge-connect' },
       // { icon: 'mdi-video-input-antenna', text: 'Connect Remote', link: '/remote-edge-connection' },
-      { icon: 'settings', color: 'blue lighten-3', text: 'Settings', link: '/settings' },
-      { icon: 'chat_bubble', color: 'accent', text: 'Send feedback', link: '/feedback' },
-      { icon: 'help', color: 'indigo lighten-2', text: 'Help', link: '/help' },
-      { icon: 'info', color: 'info', text: 'About Ambianic', link: '/about' }
+      { icon: 'settings', text: 'Settings', link: '/settings' },
+      { icon: 'chat_bubble', text: 'Send feedback', link: '/feedback' },
+      { icon: 'help', text: 'Help', link: '/help' },
+      { icon: 'info', text: 'About Ambianic', link: '/about' }
     ]
   }),
   computed: {

src/components/shared/Banner.vue

@@ -6,7 +6,6 @@
     <v-icon
       slot="icon"
       size="36"
-      :color="iconColor"
     >
       mdi-{{ icon }}
     </v-icon>
@@ -37,10 +36,6 @@ export default {
       type: String,
       default: null
     },
-    iconColor: {
-      type: String,
-      default: null
-    },
     progress: {
       type: Boolean,
       default: false

src/components/shared/Button.vue

@@ -2,7 +2,6 @@
   <v-btn
     :icon="isIcon"
     :to="to"
-    :color="btnColor"
   >
     <v-badge
       v-if="withBadge"
@@ -47,10 +46,6 @@ export default {
     to: {
       type: String,
       default: null
-    },
-    btnColor: {
-      type: String,
-      default: null
     }
   }
 }

src/components/shared/ListItem.vue

@@ -2,7 +2,7 @@
 <template>
   <v-list-item :two-line="twoLine">
     <v-list-item-icon>
-      <v-icon :color="iconColor">
+      <v-icon>
         mdi-{{ iconName }}
       </v-icon>
     </v-list-item-icon>
@@ -90,10 +90,6 @@ export default {
     twoLine: {
       type: Boolean,
       default: false
-    },
-    iconColor: {
-      type: String,
-      default: null
     }
   },
   data () {

src/views/About.vue

@@ -49,7 +49,7 @@
         </v-layout>
         <v-card-actions>
           <v-btn
-            outlined
+            text
             color="info"
             :to="'timeline'"
             id="btn-timeline"
@@ -58,7 +58,7 @@
           </v-btn>
           <v-spacer />
           <v-btn
-            outlined
+            text
             color="info"
             :to="'settings'"
             id="btn-settings"

src/views/Feedback.vue

@@ -20,17 +20,15 @@
             id="feedback-title"
             icon-name="comment-quote-outline"
             title="Send Feedback"
-            icon-color="accent"
             subtitle="We currently use github to gather user feedbaack. Click the button below to open an issue."
           />
         </v-list>
         <v-card-actions>
           <v-btn
             id="btn-feedback"
-            outlined
+            text
             href="https://github.com/ambianic/ambianic-ui/issues"
             target="_blank"
-            color="accent"
           >
             Open Feedback Page
           </v-btn>

src/views/Help.vue

@@ -20,7 +20,6 @@
             id="help-title"
             icon-name="help-circle-outline"
             title="Need Help with Ambianic?"
-            icon-color="accent"
             subtitle="Please reference our online docs or connect on Twitter."
           />
         </v-list>
@@ -34,7 +33,6 @@
             <v-icon
               left
               dark
-              color="accent"
             >
               mdi-file-document-box-check-outline
             </v-icon>
@@ -49,7 +47,6 @@
             <v-icon
               left
               dark
-              color="accent"
             >
               mdi-twitter
             </v-icon>

src/views/Settings.vue

@@ -8,7 +8,6 @@
     >
       <v-card flat>
         <v-card-title
-          class="light teal lighten-4"
           data-cy="titlecard"
         >
           Ambianic Edge connection details
@@ -79,7 +78,7 @@
               <amb-banner
                 banner-class="text-left"
                 icon="wifi-off"
-                icon-color="pink"
+                icon-color="info"
                 text="Let's find your Ambianic Edge device and connect to it..."
               />
               <v-stepper
@@ -172,7 +171,6 @@
     >
       <v-card>
         <v-card-title
-          class="light teal lighten-4"
           data-cy="localtitlecard"
         >
           Pair with local Ambianic Edge device
@@ -219,7 +217,6 @@
     >
       <v-card>
         <v-card-title
-          class="light teal lighten-4"
           data-cy="remotetitlecard"
         >
           Pair with remote Ambianic Edge device

src/views/Timeline.vue

@@ -20,7 +20,6 @@
           <v-icon
             slot="icon"
             size="36"
-            color="pink"
           >
             mdi-wifi-off
           </v-icon>
@@ -42,7 +41,6 @@
         <v-card-actions>
           <v-btn
             outlined
-            color="accent"
             id="btn-settings"
             data-cy="settings"
             to="/settings"