refactoring with vuetify

components/admin/Settings.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
-  v-container
-
+  v-card
+    v-card-title {{$t('common.settings')}}
+    v-card-text
       //- select timezone
       v-autocomplete(v-model='instance_timezone'
         :label="$t('admin.select_instance_timezone')"

components/admin/Theme.vue

@@ -1,25 +1,43 @@
 <template lang="pug">
-  v-container
+  v-card
+    v-card-title {{$t('common.theme')}}
+    v-card-text
+      p {{settings['theme.primary']}}
+      //- LOGO
+      v-file-input.mt-5(ref='upload'
+        :label="$t('admin.favicon')"
+        @change='uploadLogo'
+        accept='image/*')
+        template(slot='append-outer')
+          v-btn(small @click='resetLogo') Reset
+          v-img(:src='`${settings.baseurl}/favicon.ico?${logoKey}`'
+            max-width="100px" max-height="80px" contain)
 
-    //- LOGO
-    v-file-input.mt-5(ref='upload'
-      :label="$t('admin.favicon')"
-      @change='uploadLogo'
-      accept='image/*')
-      template(slot='append-outer')
-        v-btn(small @click='resetLogo') Reset
-        v-img(:src='`${settings.baseurl}/favicon.ico?${logoKey}`'
-          max-width="100px" max-height="80px" contain)
-
-    v-switch.mt-5(v-model='is_dark'
-      inset
-      :label="$t('admin.is_dark')")
-
-    v-color-picker(
-      mode='hexa'
-      :label="$t('common.primary_color')"
-      v-model='primary_color')
+      v-switch.mt-5(v-model='is_dark'
+        inset
+        :label="$t('admin.is_dark')")
 
+      v-row
+        v-col
+          v-menu(v-model='primaryMenu'
+              :close-on-content-click="false"
+              transition="slide-x-transition"
+              offset-y
+              absolute
+              bottom
+              max-width="290px"
+              min-width="290px")
+            template(v-slot:activator='{ on }')
+              v-text-field(
+                :label="$t('event.from')"
+                :value='primary_color'
+                v-on='on'
+                clearable
+                readonly)
+            v-color-picker(
+              mode='hexa'
+              :label="$t('common.primary_color')"
+              v-model='primary_color')
 </template>
 <script>
 import { mapActions, mapState } from 'vuex'
@@ -27,7 +45,8 @@ export default {
   name: 'Theme',
   data () {
     return {
-      logoKey: 0
+      logoKey: 0,
+      primaryMenu: false
     }
   },
   computed: {
@@ -43,13 +62,12 @@ export default {
       get () { return this.settings['theme.primary'] },
       set (value) {
         if (!value) { return }
+        this.setSetting({ key: 'theme.primary', value })
         if (this.settings['theme.is_dark']) {
           this.$vuetify.theme.themes.dark.primary = value
         } else {
           this.$vuetify.theme.themes.light.primary = value
         }
-        // this.$vuetify.theme.themes.light.primary = value.hex
-        // this.setSetting({ key: 'theme.primary', value: value.hex })
       }
     }
   },