Fix/update theme styles 404 page

BenevalJr · Jan 29, 2020 · 448c224 · 448c224
1 parent 725b103
commit 448c224
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 83 deletions.
diff --git a/src/assets/petro.svg b/src/assets/petro.svg
diff --git a/src/components/admin/app-navbar/AppNavbar.vue b/src/components/admin/app-navbar/AppNavbar.vue
@@ -10,21 +10,20 @@
           v-if="!minimized && !isTopBar"
           @click.native="$emit('update:minimized', !minimized)"
           :color="contextConfig.invertedColor ? $themes.gray : 'white'"
-        ></va-icon-menu>
+        />
 
         <va-icon-menu-collapsed
           class="app-navbar__menu"
           v-if="minimized && !isTopBar"
           @click.native="$emit('update:minimized', !minimized)"
           :color="contextConfig.invertedColor ? $themes.gray : 'white'"
-        ></va-icon-menu-collapsed>
+        />
 
         <router-link
           class="app-navbar__logo mr-3"
           to="/"
         >
-          <va-icon-vuestic-toned v-if="contextConfig.invertedColor"/>
-          <va-icon-vuestic v-else/>
+          <va-icon-vuestic />
         </router-link>
       </div>
       <div class="app-navbar__center lg5 md4">
@@ -67,7 +66,6 @@
 
 <script>
 import VaIconVuestic from '../../../iconset/VaIconVuestic'
-import VaIconVuesticToned from '../../../iconset/VaIconVuesticToned'
 import VaIconMenu from '../../../iconset/VaIconMenu'
 import VaIconMenuCollapsed from '../../../iconset/VaIconMenuCollapsed'
 import AppNavbarActions from './components/AppNavbarActions'
@@ -79,7 +77,6 @@ export default {
   inject: ['contextConfig'],
   components: {
     VaIconVuestic,
-    VaIconVuesticToned,
     VaIconMenu,
     VaIconMenuCollapsed,
     AppNavbarActions,

diff --git a/src/components/pages/404-pages/CategoriesConfig.js b/src/components/pages/404-pages/CategoriesConfig.js
@@ -82,14 +82,6 @@ export default [
         itemName: 'Color Pickers',
         itemLink: '/admin/ui/color-pickers',
       },
-      {
-        itemName: 'File Upload',
-        itemLink: '/admin/ui/file-upload',
-      },
-      {
-        itemName: 'Grid',
-        itemLink: '/admin/ui/grid',
-      },
       {
         itemName: 'Icons',
         itemLink: '/admin/ui/icons',
@@ -114,14 +106,6 @@ export default [
         itemName: 'Rating',
         itemLink: '/admin/ui/rating',
       },
-      {
-        itemName: 'Sliders',
-        itemLink: '/admin/ui/sliders',
-      },
-      {
-        itemName: 'Spacing',
-        itemLink: '/admin/ui/spacing',
-      },
       {
         itemName: 'Spinners',
         itemLink: '/admin/ui/spinners',
@@ -138,10 +122,6 @@ export default [
         itemName: 'Tree View',
         itemLink: '/admin/ui/tree-view',
       },
-      {
-        itemName: 'Typography',
-        itemLink: '/admin/ui/typography',
-      },
     ],
   },
   {

diff --git a/src/components/pages/404-pages/MadeByComponent.vue b/src/components/pages/404-pages/MadeByComponent.vue
@@ -2,7 +2,7 @@
   <div class="made-by-component text--center pb-3">
     <span>
       ©2019. Made by
-      <a href="https://epicmax.co" class="link">Epicmax</a>
+      <a href="https://epicmax.co" :style="{color: $themes.primary}" class="link">Epicmax</a>
     </span>
   </div>
 </template>
@@ -15,9 +15,8 @@ export default {
 
 <style lang="scss">
 .made-by-component {
-  width: 100%;
   position: absolute;
   bottom: 0;
-  color: $white;
+  width: 100%;
 }
 </style>
diff --git a/src/components/pages/404-pages/VaPageNotFound.vue b/src/components/pages/404-pages/VaPageNotFound.vue
@@ -1,40 +1,58 @@
 <template>
-  <div class="va-page-not-found justify--center pb-5">
+  <div class="va-page-not-found justify--center pb-5" :style="pageNotFoundStyle">
     <div class="va-page-not-found__inner align--center">
       <slot name="image"/>
       <div class="va-page-not-found__title text--center mb-4">{{$t('404.title')}}</div>
       <div class="va-page-not-found__text px-4 text--center">
         <span>
           {{$t('404.text')}}
         </span>
-        <a href="mailto:[email protected]" class="link">[email protected]</a>
+        <a href="mailto:[email protected]" :style="{color: this.$themes.primary}" class="link">[email protected]</a>
       </div>
       <slot/>
       <va-button v-if="!withoutButton" :to="{ name: 'dashboard' }">{{$t('404.back_button')}}</va-button>
     </div>
     <made-by-component/>
-    <div class="va-page-not-found__wallpaper"/>
+    <div class="va-page-not-found__wallpaper">
+      <wallpaper :color="wallpaperColor"/>
+    </div>
   </div>
 </template>
 
 <script>
 import MadeByComponent from './MadeByComponent'
+import Wallpaper from './Wallpaper'
+import { ColorThemeMixin } from '../../../services/vuestic-ui'
 
 export default {
   name: 'va-page-not-found',
+  mixins: [ColorThemeMixin],
+  inject: ['contextConfig'],
   components: {
     MadeByComponent,
+    Wallpaper,
   },
   props: { withoutButton: Boolean },
+  computed: {
+    pageNotFoundStyle () {
+      return {
+        color: this.contextConfig.invertedColor ? this.$themes.dark : 'white',
+        backgroundColor: this.contextConfig.invertedColor ? 'white' : this.$themes.danger,
+        backgroundImage: this.contextConfig.gradient && 'linear-gradient(to right, #ff2175, #d30505)',
+      }
+    },
+    wallpaperColor () {
+      return this.contextConfig.invertedColor ? this.$themes.dark : '#e4ff32'
+    },
+  },
 }
 </script>
 
 <style lang="scss">
   .va-page-not-found {
     min-height: 100vh;
-    background-image: linear-gradient(to right, #ff2175, #d30505);
     display: flex;
-    padding-top: 12%;
+    padding-top: 10%;
     position: relative;
 
     @include media-breakpoint-down(sm) {
@@ -53,7 +71,6 @@ export default {
     }
 
     &__title {
-      color: $white;
       font-size: 3rem;
       line-height: 1.25em;
       font-weight: 500;
@@ -65,7 +82,6 @@ export default {
 
     &__text {
       margin-bottom: 2.5rem;
-      color: $white;
     }
 
     &__wallpaper {
@@ -74,11 +90,6 @@ export default {
       left: 1rem;
       width: 30%;
       height: 40%;
-      background-color: transparent;
-      background-image: url("../../../assets/petro.svg");
-      background-repeat: no-repeat;
-      background-size: contain;
-      background-position: bottom center;
 
       @include media-breakpoint-down(xs) {
         display: none;

diff --git a/src/components/pages/404-pages/VaPageNotFoundSearch.vue b/src/components/pages/404-pages/VaPageNotFoundSearch.vue
@@ -19,7 +19,7 @@
             v-for="(item, index) in category.items"
             :key="index"
           >
-            <router-link :to="{ path: item.itemLink }" class="link">
+            <router-link :to="{ path: item.itemLink }" class="link" :style="{color: $themes.primary}">
               {{ item.itemName }}
             </router-link>
           </li>

diff --git a/src/components/pages/404-pages/Wallpaper.vue b/src/components/pages/404-pages/Wallpaper.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 599 549">
+    <path :fill="color" fill-rule="nonzero" d="M558.837 490.716c-8.063 11.102-10.15 21.29-10.15 40.121h-3.375c0-19.783 2.346-30.631 11.075-42.477-5.204-5.006-12.664-12.197-15.464-14.854a761.609 761.609 0 0 0-5.111-4.81c-16.777-15.633-28.164-24.449-33.937-25.481-21.752-3.889-39.475-4.18-79.619-2.713-20.161.736-29.117.945-40.284.762l.056-3.375c11.087.183 20.003-.026 40.105-.76 40.384-1.476 58.267-1.182 80.336 2.764 6.73 1.203 18.221 10.1 35.644 26.334 1.64 1.53 3.341 3.13 5.133 4.83 2.764 2.624 10.03 9.626 15.215 14.616 2.773-3.443 6.092-7.027 10.05-10.985.626-.626 1.07-1.472 1.809-3.309l.125-.311c1.409-3.509 2.373-4.96 4.684-5.684 4.26-1.334 7.739-1.334 15.566-.566 3.745.367 5.392.489 7.398.489v3.375c-2.153 0-3.872-.127-7.727-.505-7.374-.724-10.55-.724-14.229.428-.961.3-1.532 1.161-2.56 3.72l-.126.314c-.908 2.256-1.497 3.379-2.554 4.436-3.974 3.974-7.271 7.534-9.998 10.942 1.29 1.24 2.29 2.197 2.819 2.7 5.695 5.403 9.39 8.67 11.449 10.066-.278-1.352-.847-3.07-2.176-6.786-1.534-4.286-2.095-6.013-2.392-7.704l3.324-.585c.249 1.418.793 3.094 2.245 7.152 1.535 4.286 2.095 6.013 2.393 7.704.247 1.404.211 2.428-.374 3.259-.888 1.263-2.295 1.23-3.761.456-2.21-1.167-6.158-4.593-13.031-11.114-.495-.47-1.396-1.333-2.558-2.449zM24.443 475.64c2.054 4.292 3.559 9.7 5.526 18.525 1.832 8.225 1.877 8.421 2.67 11.476.078.301.156.6.234.894l-3.26.869c-.081-.302-.161-.607-.241-.916-.807-3.11-.853-3.31-2.698-11.59-1.832-8.22-3.239-13.337-5.04-17.284l-.175.122a371.637 371.637 0 0 1-11.645 7.768c-1.939 1.237-4.798 1.396-6.183-.388-1.274-1.642-1.766-3.119-2.498-6.5-.327-1.505-.485-2.153-.734-2.9l3.202-1.066c.3.901.478 1.626.83 3.252.625 2.883 1.011 4.042 1.866 5.145.065.083 1.05.028 1.7-.388a368.304 368.304 0 0 0 12.057-8.057 28.65 28.65 0 0 0-.825-1.292c-3.892-5.751-9.534-8.623-18.229-8.623v-3.375c9.794 0 16.492 3.409 21.024 10.107.276.407.54.817.797 1.234 7.084-5.02 20.058-14.36 23.232-16.57 24.79-17.263 43.345-25.788 68.254-28.987 17.35-2.228 31.306-2.228 62.743-.897 15.647.663 22.592.883 31.242.883v3.375c-8.714 0-15.69-.221-31.384-.886-31.246-1.323-45.074-1.323-62.17.873-24.284 3.118-42.374 11.428-66.757 28.408-3.193 2.224-16.507 11.812-23.538 16.788zM385.75 332.01c-16.335-25.927-42.658-42.664-76.862-51.064-29.394-7.219-63.66-7.986-98.67-3.426l-.435-3.347c35.393-4.61 70.067-3.833 99.91 3.495 35.082 8.616 62.201 25.893 79.033 52.735l.02-.01c1.662-.851 2.54-1.387 3.482-2.2 2.505-2.157 4.747-6.006 7.344-13.28 7.35-20.584 12.743-62.496 15.523-113.507 2.36-43.292 2.374-87.13.191-103.977-1.448-11.182-5.4-20.076-15.423-37.71-3.19-5.611-3.777-6.652-5.113-9.101-13.508-24.778-29.858-38.21-51.464-43.74-17.76-4.547-36.465-4.121-73.203.161C172.499 18.413 109.113 65.075 74.06 155.102c-10.85 27.866-7.618 53.31 7.705 77.64 12.344 19.6 31.414 37.371 59.61 57.764 8.878 6.421 37.579 26.07 39.665 27.54 3.692 2.599 20.825 12.685 20.67 12.59 11.94 7.357 19.763 13.847 24.876 21.737 6.515 10.052 7.62 21.489 2.429 34.829-27.284 70.116-49.18 123.536-66.162 161.798h-3.693c17.035-38.283 39.111-92.098 66.71-163.022 4.8-12.336 3.805-22.634-2.116-31.77-4.776-7.37-12.267-13.583-23.814-20.698.266.164-17.018-10.013-20.843-12.705-2.053-1.446-30.779-21.112-39.7-27.564-28.517-20.625-47.862-38.654-60.488-58.701-15.873-25.204-19.248-51.761-7.994-80.662C106.433 62.656 170.896 15.202 269.69 3.687c37.143-4.33 56.138-4.762 74.431-.08 22.547 5.773 39.649 19.822 53.59 45.395 1.322 2.425 1.906 3.46 5.084 9.05 10.237 18.009 14.313 27.183 15.836 38.943 2.217 17.106 2.203 61.11-.168 104.594-2.798 51.332-8.22 93.468-15.714 114.46-2.776 7.774-5.293 12.094-8.32 14.702-1.193 1.027-2.266 1.683-4.147 2.646-3.59 1.837-4.846 2.654-7.04 4.966-3.098 3.264-6.386 8.428-10.17 16.36-3.51 7.358-3.505 21.057-.409 41.18 2.391 15.536 5.62 30.418 13.19 62.536 6.214 26.362 8.6 36.9 11.058 49.515 3.265 16.762 4.948 29.727 4.948 39.727h-3.375c0-17.507-3.864-37.34-15.69-87.506-7.818-33.17-11.057-48.102-13.466-63.758-3.198-20.778-3.202-34.97.698-43.147 3.924-8.226 7.394-13.675 10.768-17.23 1.756-1.85 3.027-2.893 4.954-4.03zM212.63 152.918h-3.376c0-3.222.294-5.832 1.169-11.725 1.672-11.26 1.672-15.998-.977-21.077-3.23-6.19-18.52.344-28.753 12.45-5.154 6.096-7.7 12.235-6.838 17.067.982 5.507 6.392 9.556 17.029 11.5 3.035.555 5.558.555 11.335.21 2.99-.177 4.324-.237 6.003-.237v3.375c-1.59 0-2.879.058-5.802.232-6.048.36-8.751.36-12.143-.26-11.882-2.172-18.474-7.106-19.745-14.228-1.073-6.015 1.845-13.05 7.583-19.838 11.583-13.702 29.38-21.307 34.323-11.832 3.102 5.946 3.102 11.158 1.323 23.134-.85 5.725-1.132 8.231-1.132 11.229zm138.783-11.462l-3.112-1.305c.042-.1 1.272-2.98 1.789-4.216.96-2.295 1.842-4.482 2.675-6.666a145.987 145.987 0 0 0 1.817-5.02c2.44-7.18 3.4-12.423 2.525-14.174-4.294-8.595-18.37-6.277-22.494 3.008-1.165 2.623-1.165 5.051-.404 10.838.41 3.124.549 4.516.549 6.262h-3.375c0-1.548-.13-2.846-.52-5.822-.843-6.41-.843-9.251.665-12.648 5.179-11.66 22.887-14.576 28.598-3.147 1.468 2.937.434 8.583-2.349 16.77a149.323 149.323 0 0 1-1.858 5.135 225.711 225.711 0 0 1-2.716 6.767c-.523 1.25-1.754 4.132-1.79 4.218z"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    color: String,
+  },
+}
+</script>
+
+<style scoped>
+  svg {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+</style>