From 684960cc5c95e43c7ba29cc155d58c1ce86a4c7e Mon Sep 17 00:00:00 2001
From: cristij <joracristi@gmail.com>
Date: Sun, 14 Oct 2018 15:56:29 +0300
Subject: [PATCH] Css tweaks & improvements Make green as primary color

---
 package.json                                  |  3 +-
 .../custom/_sidebar-and-main-panel.scss       | 11 ++++---
 .../black-dashboard/custom/_variables.scss    |  8 ++---
 src/components/SidebarPlugin/SideBar.vue      |  3 +-
 src/config.js                                 | 10 ++++++
 src/layout/dashboard/TopNavbar.vue            |  5 +--
 src/pages/Dashboard.vue                       | 33 +++++++++----------
 7 files changed, 44 insertions(+), 29 deletions(-)
 create mode 100644 src/config.js

diff --git a/package.json b/package.json
index 36fb0af..af7a569 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss b/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss
index 0c2ddb2..36acc06 100644
--- a/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss
+++ b/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"] {
-      @include linear-gradient($vue-states, $vue);
+    &[data="purple"] {
+      @include linear-gradient($purple-states, $purple);
     }
 
     .user{
@@ -468,8 +471,8 @@
       border-top: 2px solid $success;
     }
 
-    &[data="vue"]{
-      border-top: 2px solid $vue;
+    &[data="purple"]{
+      border-top: 2px solid $purple;
     }
 
     &[data="primary"]{
diff --git a/src/assets/sass/black-dashboard/custom/_variables.scss b/src/assets/sass/black-dashboard/custom/_variables.scss
index a771c5a..3caabfb 100644
--- a/src/assets/sass/black-dashboard/custom/_variables.scss
+++ b/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;
diff --git a/src/components/SidebarPlugin/SideBar.vue b/src/components/SidebarPlugin/SideBar.vue
index f852ff0..9769d7a 100644
--- a/src/components/SidebarPlugin/SideBar.vue
+++ b/src/components/SidebarPlugin/SideBar.vue
@@ -9,7 +9,8 @@
     <div class="sidebar-wrapper" id="style-3">
       <div class="logo">
         <a href="http://www.creative-tim.com" class="simple-text logo-mini">
-          <div class="logo-img">
+          <div class="logo-img"
+               :class="{'logo-img-rtl': $rtl.isRTL}">
             <img
               src="data:image/png;base64,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"
               alt="">
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000..a4cb2a2
--- /dev/null
+++ b/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)'],
+  }
+}
diff --git a/src/layout/dashboard/TopNavbar.vue b/src/layout/dashboard/TopNavbar.vue
index fa72b35..38601e2 100644
--- a/src/layout/dashboard/TopNavbar.vue
+++ b/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: {
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 4273a77..ca080dd 100644
--- a/src/pages/Dashboard.vue
+++ b/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,