Fix/corporate colors issues (epicmaxco#735)

* epicmaxco#731 fix datepicker styles * epicmaxco#731 fix title issue * fix clear icons * fix corporate theme colors
wsenfuma · Feb 3, 2020 · db91deb · db91deb
1 parent fcdb16c
commit db91deb
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 37 deletions.
diff --git a/src/app/App.vue b/src/app/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="app" :class="{'inverted-color': contextConfig.invertedColor}">
+  <div id="app" class="app">
     <router-view />
   </div>
 </template>
@@ -22,6 +22,17 @@ export default {
       contextConfig: this.contextConfig,
     }
   },
+  watch: {
+    // Temporary colors fix for 2.1.
+    'contextConfig.invertedColor' (val) {
+      const invertedColorClass = 'va-inverted-color'
+      if (val) {
+        document.body.classList.add(invertedColorClass)
+      } else {
+        document.body.classList.remove(invertedColorClass)
+      }
+    },
+  },
 }
 </script>
 

diff --git a/src/components/dashboard/DashboardTable.vue b/src/components/dashboard/DashboardTable.vue
@@ -7,6 +7,7 @@
           :value="term"
           :placeholder="$t('tables.searchByName')"
           @input="search"
+          removable
         >
           <va-icon name="fa fa-search" slot="prepend" />
         </va-input>
@@ -67,7 +68,6 @@ import debounce from 'lodash/debounce'
 import data from '../markup-tables/data.json'
 
 export default {
-  inject: ['contextConfig'],
   data () {
     return {
       users: data.slice(),
@@ -177,7 +177,6 @@ export default {
           icon: 'fa-check',
           position: 'bottom-right',
           duration: 1500,
-          containerClass: this.contextConfig.invertedColor ? 'inverted-color' : '',
         })
       }, 500)
     },

diff --git a/src/components/dashboard/dashboard-tabs/BankDetailsTab.vue b/src/components/dashboard/dashboard-tabs/BankDetailsTab.vue
@@ -40,7 +40,6 @@
 <script>
 export default {
   name: 'bank-details-tab',
-  inject: ['contextConfig'],
   data () {
     return {
       form: {
@@ -54,9 +53,7 @@ export default {
   },
   methods: {
     sendDetails () {
-      this.showToast('Saved!', {
-        containerClass: this.contextConfig.invertedColor ? 'inverted-color' : '',
-      })
+      this.showToast('Saved!')
     },
   },
 }

diff --git a/src/components/data-tables/scenarios/DataTableFilter.vue b/src/components/data-tables/scenarios/DataTableFilter.vue
@@ -6,6 +6,7 @@
           :value="term"
           :placeholder="$t('tables.searchByName')"
           @input="search"
+          removable
         >
           <va-icon name="fa fa-search" slot="prepend" />
         </va-input>
@@ -16,6 +17,7 @@
           v-model="perPage"
           :label="$t('tables.perPage')"
           :options="perPageOptions"
+          noClear
         />
       </div>
     </div>

diff --git a/src/components/forms/form-elements/FormElements.vue b/src/components/forms/form-elements/FormElements.vue
@@ -297,7 +297,6 @@ import CountriesList from '../../../data/CountriesList'
 
 export default {
   name: 'form-elements',
-  components: {},
   data () {
     return {
       isMale: true,

diff --git a/src/components/lists/Lists.vue b/src/components/lists/Lists.vue
@@ -223,7 +223,6 @@
 import data from './data.json'
 
 export default {
-  inject: ['contextConfig'],
   data () {
     return {
       customers: data.slice(0, 5),
@@ -243,7 +242,6 @@ export default {
     notify (name) {
       this.showToast(`Clicked ${name}`, {
         position: 'bottom-right',
-        containerClass: this.contextConfig.invertedColor ? 'inverted-color' : '',
       })
     },
     toggleStar (customer) {

diff --git a/src/components/pages/404-pages/VaPageNotFoundSearch.vue b/src/components/pages/404-pages/VaPageNotFoundSearch.vue
@@ -6,6 +6,7 @@
         :style="{'align-items': 'flex-start'}"
         v-model="inputValue"
         class="va-page-not-found-search__input mb-4"
+        removable
       />
       <div class="row va-page-not-found-search__links">
         <ul

diff --git a/src/components/ui/colors/color-presentation/ColorPresentation.vue b/src/components/ui/colors/color-presentation/ColorPresentation.vue
@@ -79,7 +79,6 @@ export default {
     notify () {
       this.showToast("The color's copied to your clipboard", {
         position: 'bottom-right',
-        containerClass: this.contextConfig.invertedColor ? 'inverted-color' : '',
       })
     },
     calcBackground () {

diff --git a/src/components/ui/notifications/Notifications.vue b/src/components/ui/notifications/Notifications.vue
@@ -112,7 +112,6 @@ import ToastPositionPicker from './ToastPositionPicker.vue'
 export default {
   name: 'notifications',
   components: { ToastPositionPicker },
-  inject: ['contextConfig'],
   data () {
     return {
       toastText: 'This toast is awesome!',
@@ -136,7 +135,6 @@ export default {
           position: this.toastPosition,
           duration: this.toastDuration,
           fullWidth: this.isToastFullWidth,
-          containerClass: this.contextConfig.invertedColor ? 'inverted-color' : '',
         },
       )
     },

diff --git a/src/sass/main.scss b/src/sass/main.scss
@@ -1,45 +1,92 @@
 @import "../services/vuestic-ui/styles";
-@import './icons/icons.scss';
+@import "./icons/icons.scss";
 
 // Temporary colors fix for 2.1.
 $vue-purple: #6c7fee;
 $purple-box-shadow: 0 4px 9.6px 0.4px rgba($vue-purple, 0.5);
 
-body {
-  #app {
-    &.inverted-color {
-      ::selection {
-        background-color: $vue-purple;
-        color: $white;
-      }
+body.va-inverted-color {
+  ::selection {
+    background-color: $vue-purple;
+    color: $white;
+  }
 
-      .link {
-        color: $vue-purple;
-      }
+  .link,
+  .title {
+    color: $vue-purple;
+  }
 
-      .va-data-table {
-        th.sortable {
+  .va-data-table {
+    th.sortable {
+      color: $vue-purple;
+    }
+  }
+
+  .va-dropdown {
+    .profile-dropdown,
+    .language-dropdown,
+    .message-dropdown,
+    .notification-dropdown {
+      &__item {
+        &.active,
+        &:hover {
           color: $vue-purple;
         }
       }
+    }
+  }
+
+  .flatpickr-calendar {
+    ::selection {
+      background-color: $vue-purple;
+      color: $white;
+    }
+
+    .flatpickr-days {
+      .dayContainer {
+        .flatpickr-day {
+          &.selected,
+          &.selected:hover,
+          &.startRange,
+          &.endRange,
+          &:hover,
+          &.inRange:hover {
+            background: $vue-purple;
+            color: white;
+          }
 
-      .va-dropdown {
-        .profile-dropdown,
-        .language-dropdown,
-        .message-dropdown,
-        .notification-dropdown {
-          &__item {
-            &.active,
-            &:hover {
-              color: $vue-purple;
-            }
+          &.inRange {
+            color: $vue-purple;
           }
         }
       }
     }
+
+    .numInputWrapper span {
+      border: none;
+
+      &.arrowUp,
+      &.arrowDown {
+        &:hover {
+          background: none;
+        }
+      }
+
+      &.arrowUp::after {
+        border-style: solid;
+        border-width: 0 0.25rem 0.25rem 0.25rem;
+        border-color: transparent transparent $vue-purple transparent;
+      }
+
+      &.arrowDown::after {
+        border-style: solid;
+        border-width: 0.25rem 0.25rem 0 0.25rem;
+        border-color: $vue-purple transparent transparent transparent;
+      }
+    }
   }
 
-  .toasted-container.inverted-color {
+  .toasted-container {
     .toasted.vuestic-toast {
       box-shadow: $purple-box-shadow;
 
@@ -49,4 +96,29 @@ body {
       }
     }
   }
+
+  .medium-editor-toolbar,
+  .medium-editor-toolbar-form,
+  .medium-editor-toolbar-actions,
+  .medium-editor-toolbar-anchor-preview {
+    background-color: $vue-purple;
+  }
+
+  .medium-editor-toolbar {
+    .medium-editor-action {
+      background-color: $vue-purple;
+
+      &.medium-editor-button-active {
+        background-color: darken($vue-purple, 15%);
+      }
+    }
+  }
+
+  .medium-toolbar-arrow-under::after {
+    border-color: $vue-purple transparent transparent transparent;
+  }
+
+  .medium-toolbar-arrow-over::before {
+    border-color: transparent transparent $vue-purple transparent;
+  }
 }