Styles clean up

public/index.html

@@ -10,7 +10,7 @@
     />
     <link
       rel="shortcut icon"
-      href="<%= webpackConfig.output.publicPath %>favicon.ico"
+      href="/img/<%= process.env.VUE_APP_TENANT_ID %>/favicon.png"
     />
     <%= process.env.VUE_APP_ZENDESK_WIDGET_URL ? `
     <script

src/App.vue

@@ -74,7 +74,8 @@ export default {
 }
 
 #backoffice.tenant-1004 {
-  background-image: linear-gradient(to right, #722c7c, #6fb457);
+  background-image: none;
+  background-color: #373331;
 }
 
 #nav {
@@ -89,4 +90,10 @@ export default {
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+
+@media only screen and (max-width: 959px){
+  .container{
+    padding: 2px !important;
+  }
+}
 </style>

src/components/CompPlanLevel.vue

@@ -13,19 +13,15 @@
             <div class="mono name">{{level.size}}</div>
           </div>
           <div class="flex xs3 text-xs-left">
-            <div class="header grey--text text--darken-1">Total Points</div>
+            <div class="header grey--text text--darken-1">Points</div>
             <div class="mono default">{{level.totalPoints}}</div>
           </div>
-          <div class="flex xs3 text-xs-left">
-            <div class="header grey--text text--darken-1">Total Amount</div>
-            <div class="mono default">{{level.totalAmount}}</div>
-          </div>
           <div class="flex xs3 text-xs-left">
             <div class="header grey--text text--darken-1">Recruited</div>
             <div class="mono default">{{level.recruited}}</div>
           </div>
           <div class="flex xs3 text-xs-left">
-            <div class="header grey--text text--darken-1">Total Sales</div>
+            <div class="header grey--text text--darken-1">Sales</div>
             <div class="mono default">{{level.sales}}</div>
           </div>
           <!-- <div class="flex xs3 text-xs-right">

src/components/DashboardCard.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-card :color="`${color} darken-${darken}`" class="white--text" :style="{overflow: 'hidden'}">
+  <v-card :color="`${color} darken-${darken}`" :style="{overflow: 'hidden'}">
     <v-card-title primary-title>
       <div>
         <span v-if="!loading" class="display-2">{{display}}</span>
         <span v-if="loading" class="display-2">
-          <v-progress-circular indeterminate :size="30" :width="3" color="white"></v-progress-circular>
+          <v-progress-circular indeterminate :size="30" :width="3" color="black"></v-progress-circular>
         </span>
         <p class="subheading">{{subheading}}</p>
       </div>
@@ -30,7 +30,6 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 v-card {
   overflow: hidden;

src/components/FrontlineQualifiers.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-card>
+    <v-list two-line>
+      <div v-for="(item, index) in leaders" :key="`${item.contactEmail}-${index}`">
+        <v-list-tile
+          :key="item.name"
+          avatar
+          class="progress"
+          :style="`background-image: -webkit-linear-gradient(left, rgb(160, 206, 78, 0.1) ${item.totalPoints/60*100}%, #ffffff ${item.totalPoints/60*100}%);`">
+          <v-list-tile-avatar>
+            <img :src="scaleImage(item.profileUrl)">
+          </v-list-tile-avatar>
+          <v-list-tile-content>
+            <v-list-tile-title>{{index + 1}}.- {{item.name}}</v-list-tile-title>
+          </v-list-tile-content>
+          <v-list-tile-action >
+            <v-list-tile-title >{{ item.totalPoints.toFixed(2) }}/60</v-list-tile-title>
+          </v-list-tile-action>
+        </v-list-tile>
+      </div>
+    </v-list>
+    <div v-if="leaders.length < 5"></div>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'FrontlineQualifiers',
+  data() { return { } },
+  props: {
+    leaders: Array,
+    title: String,
+    currency: {
+      type: Boolean,
+      default: false
+    },
+    showTotal: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    scaleImage (image) {
+      if (image) {
+        return image.replace('/image/upload', '/image/upload/w_80')
+      }
+      return image
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

src/components/Leaderboard.vue

@@ -1,15 +1,15 @@
 <template>
   <v-card>
     <v-toolbar
-      color="cyan"
+      :color="$tenantInfo.primaryColor"
       dark
     >
       <v-toolbar-title>{{title}}</v-toolbar-title>
     </v-toolbar>
     <v-list two-line>
       <div
-        v-for="item in leaders"
-        :key="item.contactEmail"
+        v-for="(item, index) in leaders"
+        :key="`${item.contactEmail}-${index}`"
       >
         <v-list-tile
           :key="item.name"
@@ -35,7 +35,7 @@
 <script>
 export default {
   name: 'LeaderBoard',
-  data: () => ({}),
+  data() { return { } },
   props: {
     leaders: Array,
     title: String,

src/components/MonthSelector.vue

@@ -1,52 +1,45 @@
 <template>
-  <div>
-    <v-flex
-      xs11
-      sm5
+  <v-menu
+    ref="menu"
+    :close-on-content-click="false"
+    v-model="menu"
+    :nudge-right="40"
+    :return-value.sync="date"
+    lazy
+    transition="scale-transition"
+    offset-y
+    full-width
+    max-width="290px"
+    min-width="290px"
+  >
+    <v-text-field
+      slot="activator"
+      v-model="formattedDate"
+      label="Choose Month"
+      prepend-icon="event"
+      readonly
+    ></v-text-field>
+    <v-date-picker
+      v-model="date"
+      type="month"
+      :max="maxDate"
+      :min="minDate"
+      no-title
+      scrollable
     >
-      <v-menu
-        ref="menu"
-        :close-on-content-click="false"
-        v-model="menu"
-        :nudge-right="40"
-        :return-value.sync="date"
-        lazy
-        transition="scale-transition"
-        offset-y
-        full-width
-        max-width="290px"
-        min-width="290px"
-      >
-        <v-text-field
-          slot="activator"
-          v-model="formattedDate"
-          label="Choose Month"
-          prepend-icon="event"
-          readonly
-        ></v-text-field>
-        <v-date-picker
-          v-model="date"
-          type="month"
-          :max="maxDate"
-          :min="minDate"
-          no-title
-          scrollable
-        >
-          <v-spacer></v-spacer>
-          <v-btn
-            flat
-            color="primary"
-            @click="menu = false"
-          >Cancel</v-btn>
-          <v-btn
-            flat
-            color="primary"
-            @click="updateDate"
-          >OK</v-btn>
-        </v-date-picker>
-      </v-menu>
-    </v-flex>
-  </div>
+      <v-spacer></v-spacer>
+      <v-btn
+        flat
+        color="primary"
+        @click="menu = false"
+      >Cancel</v-btn>
+      <v-btn
+        flat
+        color="primary"
+        @click="updateDate"
+      >OK</v-btn>
+    </v-date-picker>
+  </v-menu>
 </template>
 
 <script>

src/components/TeamCard.vue

@@ -74,6 +74,8 @@
 </template>
 
 <script>
+import tenantInfo from '@/tenant.js'
+
 export default {
   name: 'TeamCard',
   data: () => ({
@@ -101,7 +103,7 @@ export default {
     getAvatar () {
       return (
         (this.user && this.user.profileUrl) ||
-        'http://res.cloudinary.com/hexly/image/upload/dev/1001/avatar/undefined.jpg'
+        tenantInfo.placeholder
       )
     },
     isQualified () {

src/graphql/GetMonthlyStats.gql

@@ -29,6 +29,7 @@ query getMonthlyStats(
       tenantId
       year
       month
+      name
       joinedOn
       sellerId
       sellerPath

src/main.js

@@ -14,6 +14,8 @@ import store from './store'
 
 import { apolloProvider } from './vue-apollo'
 
+import tenantInfo from '@/tenant.js'
+
 try {
   const mf = require('./build.info.json')
   window.$version = mf.buildTime
@@ -77,6 +79,8 @@ window.zE &&
     }
   })
 
+Vue.prototype.$tenantInfo = tenantInfo
+
 new Vue({
   provide: apolloProvider.provide(),
   router,

src/tenant.js

@@ -1,3 +1,3 @@
 
 /* eslint-disable */
-export default {"name":"Veridian Dynamics","logoPath":"/veridian.jpg"}
+export default {"name":"Green HoriZen","logoPath":"/img/1004/logo.png","logoLoginPath":"/img/1004/logo-login.png","incentiveTrip":true,"placeholder":"/img/1004/profile.png","primaryColor":"#A0CE4E","secondaryColor":"#373331"}

src/views/Backoffice.vue

@@ -2,7 +2,7 @@
   <div>
     <v-navigation-drawer fixed v-model="drawer" app temporary clipped>
       <div class="text-xs-center">
-        <img :src="logoPath" class="logo">
+        <img :src="$tenantInfo.logoPath" class="logo">
       </div>
       <v-divider></v-divider>
       <v-list dense>
@@ -48,13 +48,16 @@
         </v-list-tile>
       </v-list>
     </v-navigation-drawer>
-    <v-toolbar color="black" dark fixed app>
+    <v-toolbar :color="$tenantInfo.secondaryColor" dark fixed app>
       <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
       <v-toolbar-title>Backoffice</v-toolbar-title>
       <v-spacer></v-spacer>
       <v-toolbar-items>
         <v-menu offset-y>
-          <v-btn flat slot="activator">{{user.isImpersonating ? impersonationPrefix + user.principal.member.displayName : user.principal.member.displayName}}</v-btn>
+          <v-btn flat slot="activator">
+            {{user.isImpersonating ? impersonationPrefix + user.principal.member.displayName : user.principal.member.displayName}}
+            <img class="avatar" :src="getAvatar" />
+          </v-btn>
           <v-list style="cursor: pointer;">
             <!-- <v-list-tile>
               <v-list-tile-title>Settings</v-list-tile-title>
@@ -90,7 +93,7 @@
           <v-btn
             color="green darken-1"
             flat="flat"
-            @click="$router.push('/profile#address')"
+            @click="$router.push('/profile')"
           >
             Go To Profile Page
           </v-btn>
@@ -101,7 +104,6 @@
 </template>
 
 <script>
-import tenantInfo from '@/tenant.js'
 import { Actions, Mutations } from '@/store'
 import { Actions as MemberActions } from '@/Members/Store'
 import { mapState, mapActions, mapMutations } from 'vuex'
@@ -111,8 +113,7 @@ const impersonationPrefix = 'Impersonating '
 export default {
   data: () => ({
     impersonationPrefix,
-    drawer: null,
-    logoPath: tenantInfo.logoPath
+    drawer: null
   }),
   props: {
     source: String
@@ -124,6 +125,17 @@ export default {
     }),
     showGateDialog() {
       return this.showGate && this.$route.path.indexOf('profile') === -1
+    },
+    getAvatar () {
+      let image =
+        'http://res.cloudinary.com/hexly/image/upload/dev/1001/avatar/undefined.jpg'
+      if (this.user.principal.profileUrl) {
+        image = this.user.principal.profileUrl.replace(
+          '/image/upload',
+          '/image/upload/w_190,h_190'
+        )
+      }
+      return image
     }
   },
   methods: {
@@ -150,17 +162,23 @@ export default {
 </script>
 
 <style scoped>
+.avatar{
+  width: 50px;
+  border-radius: 100px;
+  margin-left: 12px;
+}
+
 .main {
-  padding: 25px;
-  margin: 50px auto;
+  margin: auto;
   background-color: #fafafa;
   box-shadow: 1px 2px 6px -2px #000;
   min-height: calc(100vh - 164px);
 }
+
 .logo {
   width: 100%;
-  max-width: 250px;
-  margin: auto;
+  max-width: 100px;
+  margin: 50px auto;
   display: block;
 }
 </style>