Css tweaks & improvements

Make green as primary color

package.json

@@ -7,7 +7,8 @@
     "e2e": "node test/e2e/runner.js",
     "lint": "vue-cli-service lint",
     "lint-fix": "vue-cli-service lint --fix",
-    "dev": "vue-cli-service serve --open"
+    "dev": "vue-cli-service serve --open",
+    "serve": "vue-cli-service serve --open"
   },
   "dependencies": {
     "chart.js": "^2.7.2",

src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss

@@ -295,6 +295,9 @@
           img {
             max-width: 21px;
           }
+          &.logo-img-rtl {
+            margin-right: 0;
+          }
         }
 
         a.logo-normal{
@@ -359,8 +362,8 @@
       @include linear-gradient($success-states, $success);
     }
 
-    &[data="vue"] {
+    &[data="purple"] {
-      @include linear-gradient($vue-states, $vue);
+      @include linear-gradient($purple-states, $purple);
     }
 
     .user{
@@ -468,8 +471,8 @@
       border-top: 2px solid $success;
     }
 
-    &[data="vue"]{
+    &[data="purple"]{
-      border-top: 2px solid $vue;
+      border-top: 2px solid $purple;
     }
 
     &[data="primary"]{

src/assets/sass/black-dashboard/custom/_variables.scss

@@ -100,24 +100,24 @@ $default-color-opacity:      rgba(182, 182, 182, .6) !default;
 $orange-color:               #f96332 !default;
 
 $default:       #344675 !default;
-$primary:       #e14eca !default;
+$primary:       #42b883 !default;
 $secondary:     #f4f5f7 !default;
 $success:       #00f2c3 !default;
 $info:          #1d8cf8 !default;
 $warning:       #ff8d72 !default;
 $danger:        #fd5d93 !default;
 $black:         #222a42 !default;
-$vue:           #42b883 !default;
+$purple:           #e14eca !default;
 
 // gradient
 $default-states:       #263148 !default;
-$primary-states:       #ba54f5 !default;
+$primary-states:       #38ef7d !default;
 $success-states:       #0098f0 !default;
 $info-states:          #3358f4 !default;
 $warning-states:       #ff6491 !default;
 $danger-states:        #ec250d !default;
 $black-states:         #1d253b !default;
-$vue-states:           #38ef7d !default;
+$purple-states:           #ba54f5 !default;
 
 $background-black:           #1e1e2f !default;
 $background-states-black:    #1e1e24 !default;

src/config.js

@@ -0,0 +1,10 @@
+export default {
+  colors: {
+    default: "#344675",
+    primary: "#42b883",
+    info: "#1d8cf8",
+    danger: "#fd5d93",
+    teal: "#00d6b4",
+    primaryGradient: ['rgba(76, 211, 150, 0.1)', 'rgba(53, 183, 125, 0)', 'rgba(119,52,169,0)'],
+  }
+}

src/layout/dashboard/TopNavbar.vue

@@ -39,7 +39,7 @@
                    id="searchModal"
                    :centered="false"
                    :show-close="true">
-              <input slot="header" type="text" class="form-control" id="inlineFormInputGroup" placeholder="SEARCH">
+              <base-input slot="header" v-model="searchQuery" type="text" id="inlineFormInputGroup" placeholder="SEARCH"/>
             </modal>
             <base-dropdown tag="li" title-tag="a" class="nav-item" menu-on-right>
               <a slot="title" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true">
@@ -114,7 +114,8 @@
       return {
         activeNotifications: false,
         showMenu: false,
-        searchModalVisible: false
+        searchModalVisible: false,
+        searchQuery: ''
       };
     },
     methods: {

src/pages/Dashboard.vue

@@ -33,7 +33,7 @@
             <line-chart style="height: 100%"
                         ref="bigChart"
                         :chart-data="bigLineChart.chartData"
-                        :gradient-color="bigLineChart.gradientColors"
+                        :gradient-colors="bigLineChart.gradientColors"
                         :gradient-stops="bigLineChart.gradientStops"
                         :extra-options="bigLineChart.extraOptions">
             </line-chart>
@@ -51,7 +51,7 @@
           <div class="chart-area">
             <line-chart style="height: 100%"
                         :chart-data="purpleLineChart.chartData"
-                        :gradient-color="purpleLineChart.gradientColors"
+                        :gradient-colors="purpleLineChart.gradientColors"
                         :gradient-stops="purpleLineChart.gradientStops"
                         :extra-options="purpleLineChart.extraOptions">
             </line-chart>
@@ -67,7 +67,6 @@
           <div class="chart-area">
             <bar-chart style="height: 100%"
                        :chart-data="blueBarChart.chartData"
-                       :gradient-color="blueBarChart.gradientColors"
                        :gradient-stops="blueBarChart.gradientStops"
                        :extra-options="blueBarChart.extraOptions">
             </bar-chart>
@@ -83,7 +82,6 @@
           <div class="chart-area">
             <line-chart style="height: 100%"
                         :chart-data="greenLineChart.chartData"
-                        :gradient-color="greenLineChart.gradientColors"
                         :gradient-stops="greenLineChart.gradientStops"
                         :extra-options="greenLineChart.extraOptions">
             </line-chart>
@@ -129,6 +127,7 @@
   import * as chartConfigs from '@/components/Charts/config';
   import TaskList from './Dashboard/TaskList';
   import UserTable from './Dashboard/UserTable';
+  import config from '@/config';
 
   export default {
     components: {
@@ -148,7 +147,7 @@
           activeIndex: 0,
           chartData: null,
           extraOptions: chartConfigs.purpleChartOptions,
-          gradientColors: ['rgba(72,72,176,0.1)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
+          gradientColors: config.colors.primaryGradient,
           gradientStops: [1, 0.4, 0],
           categories: []
         },
@@ -159,13 +158,13 @@
             datasets: [{
               label: "Data",
               fill: true,
-              borderColor: '#d048b6',
+              borderColor: config.colors.primary,
               borderWidth: 2,
               borderDash: [],
               borderDashOffset: 0.0,
-              pointBackgroundColor: '#d048b6',
+              pointBackgroundColor: config.colors.primary,
               pointBorderColor: 'rgba(255,255,255,0)',
-              pointHoverBackgroundColor: '#d048b6',
+              pointHoverBackgroundColor: config.colors.primary,
               pointBorderWidth: 20,
               pointHoverRadius: 4,
               pointHoverBorderWidth: 15,
@@ -173,7 +172,7 @@
               data: [80, 100, 70, 80, 120, 80],
             }]
           },
-          gradientColors: ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
+          gradientColors: config.colors.primaryGradient,
           gradientStops: [1, 0.2, 0],
         },
         greenLineChart: {
@@ -183,13 +182,13 @@
             datasets: [{
               label: "My First dataset",
               fill: true,
-              borderColor: '#00d6b4',
+              borderColor: config.colors.danger,
               borderWidth: 2,
               borderDash: [],
               borderDashOffset: 0.0,
-              pointBackgroundColor: '#00d6b4',
+              pointBackgroundColor: config.colors.danger,
               pointBorderColor: 'rgba(255,255,255,0)',
-              pointHoverBackgroundColor: '#00d6b4',
+              pointHoverBackgroundColor: config.colors.danger,
               pointBorderWidth: 20,
               pointHoverRadius: 4,
               pointHoverBorderWidth: 15,
@@ -207,14 +206,14 @@
             datasets: [{
               label: "Countries",
               fill: true,
-              borderColor: '#1f8ef1',
+              borderColor: config.colors.info,
               borderWidth: 2,
               borderDash: [],
               borderDashOffset: 0.0,
               data: [53, 20, 10, 80, 100, 45],
             }]
           },
-          gradientColors: ['rgba(29,140,248,0.2)', 'rgba(29,140,248,0.0)', 'rgba(29,140,248,0)'],
+          gradientColors: config.colors.primaryGradient,
           gradientStops: [1, 0.4, 0],
         }
       }
@@ -235,13 +234,13 @@
         let chartData = {
           datasets: [{
             fill: true,
-            borderColor: '#d346b1',
+            borderColor: config.colors.primary,
             borderWidth: 2,
             borderDash: [],
             borderDashOffset: 0.0,
-            pointBackgroundColor: '#d346b1',
+            pointBackgroundColor: config.colors.primary,
             pointBorderColor: 'rgba(255,255,255,0)',
-            pointHoverBackgroundColor: '#d346b1',
+            pointHoverBackgroundColor: config.colors.primary,
             pointBorderWidth: 20,
             pointHoverRadius: 4,
             pointHoverBorderWidth: 15,