fix: dark theme improvements

requarks · Dec 30, 2018 · 771935e · 771935e
1 parent edb97b8
commit 771935e
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 14 deletions.
diff --git a/client/components/admin/admin-api.vue b/client/components/admin/admin-api.vue
@@ -58,7 +58,7 @@
                 td {{ props.item.updatedOn }}
                 td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
             template(slot='no-data')
-              v-alert(icon='warning', :value='true') No users to display!
+              v-alert.mt-3(icon='warning', :value='true', outline) No API have been generated yet.
           .text-xs-center.py-2
             v-pagination(v-model='pagination.page', :length='pages')
 </template>
@@ -69,11 +69,7 @@ export default {
     return {
       selected: [],
       pagination: {},
-      items: [
-        { id: 1, key: 'xxxxxxxxxxxxx' },
-        { id: 2, key: 'xxxxxxxxxxxxy' },
-        { id: 3, key: 'xxxxxxxxxxxxz' }
-      ],
+      items: [],
       headers: [
         { text: 'Name', value: 'name' },
         { text: 'Key', value: 'key' },

diff --git a/client/components/admin/admin-dashboard.vue b/client/components/admin/admin-dashboard.vue
@@ -69,8 +69,8 @@
             .body-2(v-if='isLatestVersion') You are running the latest version.
             .body-2(v-else) A new version is available: {{info.latestVersion}}
       v-flex(xs12)
-        v-card
-          v-card-title.subheading Recent Pages
+        v-card.radius-7
+          v-card-title.subheading(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Recent Pages
           v-data-table.pb-2(
             :items='recentPages'
             hide-actions
@@ -86,8 +86,8 @@
                 .caption: strong Updated {{ props.item.updatedAt | moment('from') }}
                 .caption Created {{ props.item.createdAt | moment('calendar') }}
       v-flex(xs12)
-        v-card
-          v-card-title.subheading Most Popular Pages
+        v-card.radius-7
+          v-card-title.subheading(:class='$vuetify.dark ? `grey darken-2` : `grey lighten-5`') Most Popular Pages
           v-data-table.pb-2(
             :items='popularPages'
             hide-actions
@@ -103,6 +103,16 @@
                 .caption: strong Updated {{ props.item.updatedAt | moment('from') }}
                 .caption Created {{ props.item.createdAt | moment('calendar') }}
 
+      v-flex(xs12)
+        v-card.dashboard-contribute
+          v-card-text
+            img(src='/svg/icon-heart-health.svg', alt='Contribute', style='height: 80px;')
+            .pl-3
+              .subheading Contribute
+              .body-2.pt-2 Wiki.js is a free and open source project. There are several ways you can contribute to the project.
+              .body-1 We need your help!
+              v-btn.mx-0.mt-2(:color='$vuetify.dark ? `indigo lighten-3` : `indigo`', outline, small, to='/contribute') Learn More
+
 </template>
 
 <script>
@@ -135,13 +145,35 @@ export default {
 
 .dashboard-card {
   display: flex;
+  border-radius: 7px;
 
   .v-card__text {
     overflow: hidden;
     position: relative;
   }
 }
 
+.dashboard-contribute {
+  background-color: #FFF;
+  background-image: linear-gradient(to bottom, #FFF 0%, lighten(mc('indigo', '50'), 3%) 100%);
+  border-radius: 7px;
+
+  @at-root .theme--dark & {
+    background-color: mc('grey', '800');
+    background-image: linear-gradient(to bottom, mc('grey', '800') 0%, darken(mc('grey', '800'), 6%) 100%);
+  }
+
+  .v-card__text {
+    display: flex;
+    align-items: center;
+    color: mc('indigo', '500');
+
+    @at-root .theme--dark & {
+      color: mc('grey', '300');
+    }
+  }
+}
+
 .dashboard-icon {
   position: absolute;
   right: 0;

diff --git a/client/components/admin/admin-general.vue b/client/components/admin/admin-general.vue
@@ -80,7 +80,7 @@
                 v-subheader Logo
                 v-card-text
                   v-layout.px-3(row, align-center)
-                    v-avatar(size='120', color='grey lighten-3', :tile='config.logoIsSquare')
+                    v-avatar(size='120', :color='$vuetify.dark ? `grey darken-2` : `grey lighten-3`', :tile='config.logoIsSquare')
                     .ml-4
                       v-layout(row, align-center)
                         v-btn(color='teal', depressed, dark)

diff --git a/client/components/admin/admin-groups-edit-rules.vue b/client/components/admin/admin-groups-edit-rules.vue
@@ -196,8 +196,7 @@ export default {
         { text: 'Path Matches Regex...', value: 'REGEX', icon: '$.*' }
       ],
       locales: [
-        { text: 'English', value: 'en' },
-        { text: 'Français', value: 'fr' },
+        { text: 'English', value: 'en' }
       ]
     }
   },

diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
@@ -6,6 +6,10 @@
 
   @at-root .theme--dark & {
     color: mc('grey', '300');
+
+    a {
+      color: mc('blue', '300');
+    }
   }
 
   // ---------------------------------
@@ -39,7 +43,7 @@
     position: relative;
 
     @at-root .theme--dark & {
-      color: mc('blue', '500');
+      color: mc('grey', '400');
     }
 
     &::after {
@@ -50,6 +54,10 @@
       width: 100%;
       height: 2px;
       background: linear-gradient(to right, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
+
+      @at-root .theme--dark & {
+        background: linear-gradient(to right, mc('grey', '600'), rgba(mc('grey', '600'), 0));
+      }
     }
 
     & + h2, & + h3 {