Navbar: fix adaptive, broken links, add padding;

Helper: fix icons and colors;
Dashboard: change icon arrow color;
Table: fix button margin, add colors to badges;
Notifications: fix error notification;
Typography: fix mobile view;
Charts: fix several colors;

Author: Blari

changelog.md

@@ -1,20 +1,30 @@
 # Changelog
-## [v2.1.1]
+## [v2.1.2]
+
+Navbar: fix adaptive, broken links, add padding;
+Helper: fix icons and colors;
+Dashboard: change icon arrow color;
+Table: fix button margin, add colors to badges;
+Notifications: fix error notification;
+Typography: fix mobile view;
+Charts: fix several colors;
+upd dependencies.
 
 ### Updated
 
+## [v2.1.1]
+### Updated
+
 - Update dependency
 - Fix animation class
 - Fix Echart Donut Chart in charts page 
 
 ## [v2.1.0]
-
 ### Updated
 
 - New Design
 
 ## [v2.0.0]
-
 ### Updated
 
 - Remove All Jquery

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sing-app-vue",
-  "version": "4.5.0",
+  "version": "2.1.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --port 3000",
@@ -9,27 +9,27 @@
     "start": "node server.js"
   },
   "dependencies": {
-    "animate.css": "^4.1.0",
-    "apexcharts": "^3.19.3",
+    "animate.css": "^4.1.1",
+    "apexcharts": "^3.22.0",
     "awesome-bootstrap-checkbox": "^1.0.1",
-    "bootstrap": "^4.5.0",
-    "bootstrap-vue": "2.15.0",
+    "bootstrap": "^4.5.3",
+    "bootstrap-vue": "2.18.1",
     "css-loader": "^1.0.1",
-    "echarts": "^4.8.0",
+    "echarts": "^4.9.0",
     "expose-loader": "^0.7.5",
     "font-awesome": "4.7.0",
     "glyphicons-halflings": "^1.9.1",
-    "highcharts": "^7.2.1",
+    "highcharts": "^7.2.2",
     "highcharts-vue": "^1.3.5",
     "imports-loader": "^0.8.0",
     "line-awesome": "1.3.0",
     "node-sass": "^4.14.1",
     "rickshaw": "1.7.1",
     "sass-loader": "^7.3.1",
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
     "vue-apexcharts": "^1.6.0",
     "vue-echarts": "^4.1.0",
-    "vue-router": "^3.3.4",
+    "vue-router": "^3.4.8",
     "vue-toasted": "^1.1.28",
     "vue-touch": "2.0.0-beta.4",
     "vue2-google-maps": "^0.10.7",
@@ -42,7 +42,7 @@
     "@vue/cli-plugin-babel": "^3.12.0",
     "@vue/cli-plugin-eslint": "^3.12.0",
     "@vue/cli-service": "^3.12.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.12"
   },
   "eslintConfig": {
     "root": true,

src/components/Header/Header.vue

@@ -32,7 +32,7 @@
         </b-form-group>
       </b-form>
     </b-nav>
-    <a  class="navbarBrand d-md-none">
+    <a class="navbarBrand d-md-none">
       <i class="fa fa-circle text-primary mr-n-sm" />
       <i class="fa fa-circle text-danger" />
       &nbsp;
@@ -43,15 +43,15 @@
     </a>
     <b-nav class="ml-auto">
       <b-nav-item-dropdown
-        class="notificationsMenu d-md-down-none mr-2"
+        class="notificationsMenu d-sm-down-none mr-2"
         menu-class="notificationsWrapper py-0 animate__animated animate__animated-fast animate__fadeIn"
         right>
         <template slot="button-content">
           <span class="avatar rounded-circle thumb-sm float-left mr-2">
             <img class="rounded-circle" src="../../assets/people/a5.jpg" alt="..." />
           </span>
           <span class="small">Philip Smith</span>
-          <span class="ml-1 circle bg-primary text-white fw-bold">13</span>
+          <span class="ml-1 mr-2 circle bg-primary text-white fw-bold">13</span>
         </template>
         <Notifications />
       </b-nav-item-dropdown>

src/components/Helper/Helper.scss

@@ -90,4 +90,8 @@
       transform: rotate(-360deg);
     }
   }
+
+  .btn i.glyphicon-headphones {
+    top: 0;
+  }
 }

src/components/Helper/Helper.vue

@@ -13,7 +13,7 @@
                     <a href="https://flatlogic.com/templates/sing-app-vue"
                     target="_blank"
                     role="button"
-                    class="btn btn-info btn-rounded-f btn-block fs-mini text-white">
+                    class="btn btn-success btn-rounded-f btn-block fs-mini text-white">
                         Purchase
                     </a>
                     <a href="http://demo.flatlogic.com/sing-app-vue/#/documentation/"

src/pages/Charts/mock.js

@@ -377,10 +377,10 @@ export const chartData = {
           }
         }
       },
-      colors: [success, primary, info],
+      colors: [success, warning, info],
 
       series: [{
-        name: "Winter 2014-2015",
+        name: "Winter 2017-2018",
         data: [
           [Date.UTC(1970, 10, 25), 0],
           [Date.UTC(1970, 11, 6), 0.25],
@@ -411,7 +411,7 @@ export const chartData = {
           [Date.UTC(1971, 6, 4), 0]
         ]
       }, {
-        name: "Winter 2015-2016",
+        name: "Winter 2018-2019",
         type: 'areaspline',
         data: [
           [Date.UTC(1970, 10, 9), 0],
@@ -439,7 +439,7 @@ export const chartData = {
           [Date.UTC(1971, 5, 7), 0]
         ]
       }, {
-        name: "Winter 2016-2017",
+        name: "Winter 2019-2020",
         type: 'areaspline',
         data: [
           [Date.UTC(1970, 9, 15), 0],

src/pages/Dashboard/Dashboard.vue

@@ -2,7 +2,7 @@
   <div class="dashboard-page">
     <h1 class="page-title">Dashboard</h1>
     <b-row>
-      <b-col lg="3" sm="6" xs="12">
+      <b-col md="6" xl="3" sm="6" xs="12">
         <div class="pb-xlg h-100">
           <Widget class="h-100 mb-0" title="Visits Today" close>
             <div class="d-flex justify-content-between align-items-center mb-lg">
@@ -23,14 +23,14 @@
           </Widget>
         </div>
       </b-col>
-      <b-col lg="3" sm="6" xs="12">
+      <b-col md="6" xl="3" sm="6" xs="12">
         <div class="pb-xlg h-100">
           <Widget class="h-100 mb-0" title="Revenue Breakdown" close>
             <highcharts :options="donut"></highcharts>
           </Widget>
         </div>
       </b-col>
-      <b-col lg="3" sm="6" xs="12">
+      <b-col md="6" xl="3" sm="6" xs="12">
         <div class="pb-xlg h-100">
           <Widget class="h-100 mb-0" title="App Perfomance" close>
             <p class="text-muted d-flex flex-wrap">
@@ -60,7 +60,7 @@
           </Widget>
         </div>
       </b-col>
-      <b-col lg="3" sm="6" xs="12">
+      <b-col md="6" xl="3" sm="6" xs="12">
         <div class="pb-xlg h-100">
           <Widget class="h-100 mb-0" title="Server Overview" close>
             <div class="d-flex align-items-center mb-sm">

src/pages/Dashboard/components/BigStat/BigStat.vue

@@ -22,7 +22,7 @@
             <div class="d-flex align-items-start">
               <h6>+{{registrations.value}}</h6>
               <i
-                :class="`la la-arrow-right la-lg ml-sm text-${registrations.profit ? 'primary' : 'danger'}
+                :class="`la la-arrow-right la-lg ml-sm text-${registrations.profit ? 'success' : 'danger'}
                 rotate-${registrations.profit ? '315' : '45'}`"
               />
             </div>
@@ -32,7 +32,7 @@
             <div class="d-flex align-items-start">
               <h6>{{bounce.value}}%</h6>
               <i
-                :class="`la la-arrow-right la-lg ml-sm text-${bounce.profit ? 'primary' : 'danger'}
+                :class="`la la-arrow-right la-lg ml-sm text-${bounce.profit ? 'success' : 'danger'}
                 rotate-${bounce.profit ? '315' : '45'}`"
               />
             </div>

src/pages/Notifications/Notifications.vue

@@ -94,7 +94,7 @@ export default {
       });
     },
     addErrorNotification() {
-      this.$toasted.info('Launching thermonuclear war...', {
+      this.$toasted.error('Launching thermonuclear war...', {
         action: [
           {
             text: 'Cancel',

src/pages/Tables/Basic.vue

@@ -64,7 +64,7 @@
           </div>
           <div class="clearfix">
             <div class="float-right">
-              <b-button variant="default" class="mr-xs" size="sm">Send to...</b-button>
+              <b-button variant="default" class="mr-3" size="sm">Send to...</b-button>
               <b-dropdown variant="inverse" class="mr-xs" size="sm" text="Clear" right>
                 <b-dropdown-item>Clear</b-dropdown-item>
                 <b-dropdown-item>Move ...</b-dropdown-item>
@@ -169,28 +169,28 @@
                  <td>Mark</td>
                  <td>Otto</td>
                  <td><a href="#">[email protected]</a></td>
-                 <td><b-badge variant="gray" class="text-gray" pill>Pending</b-badge></td>
+                 <td><b-badge variant="primary" pill>Pending</b-badge></td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td><a href="#">[email protected]</a></td>
-                 <td><b-badge variant="gray" class="text-gray-light" pill>Unconfirmed</b-badge></td>
+                 <td><b-badge variant="info" pill>Unconfirmed</b-badge></td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td><a href="#">[email protected]</a></td>
-                 <td><b-badge variant="gray" class="text-gray" pill>New</b-badge></td>
+                 <td><b-badge variant="success" pill>New</b-badge></td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>Peter</td>
                  <td>Horadnia</td>
                  <td><a href="#">[email protected]</a></td>
-                 <td><b-badge variant="gray" class="text-gray-light" pill>Active</b-badge></td>
+                 <td><b-badge variant="warning" pill>Active</b-badge></td>
                </tr>
              </tbody>
            </table>