catalog list: small updates for vuetify 2

cateditor/src/components/CatalogList.vue

@@ -19,7 +19,7 @@
             <v-tab key="public">Public Catalogs</v-tab>
 
             <v-tab-item key="mine">
-              <v-card flat>
+              <v-card text>
 
                 <v-card-title>
                   <v-spacer></v-spacer>
@@ -73,7 +73,7 @@
             </v-tab-item>
 
             <v-tab-item key="public">
-              <v-card flat>
+              <v-card text>
 
                 <v-card-title>
                   <v-spacer></v-spacer>
@@ -196,13 +196,13 @@
 
           <v-divider></v-divider>
           <v-card-text>
-            <v-btn class="ma-0" small flat :href="'/catalog/edit/' + selectedCatalog.id">Edit</v-btn>
+            <v-btn class="ma-0" small text :href="'/catalog/edit/' + selectedCatalog.id">Edit</v-btn>
             <v-btn
               class="ma-0"
-              small flat
+              small text
               :disabled="selectedCatalog.build_progress < 100"
               :href="selectedCatalog.pdf">Download</v-btn>
-            <!-- <v-btn class="ma-0" small flat>Share</v-btn> -->
+            <!-- <v-btn class="ma-0" small text>Share</v-btn> -->
           </v-card-text>
         </v-card>
         <v-card v-else>

cateditor/src/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-toolbar dark dense absolute app color="keen_dark_grey">
+  <v-app-bar dark dense absolute app color="keen_dark_grey">
     <!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
     <img src="/static/img/keen_logo.svg" width="85"/>
     <v-toolbar-title color="primary" class="headline">
@@ -8,37 +8,37 @@
     </v-toolbar-title>
     <v-spacer></v-spacer>
     <v-toolbar-items class="hidden-sm-and-down">
-      <v-btn flat small href="/">Dashboard</v-btn>
+      <v-btn text small href="/">Dashboard</v-btn>
 
       <v-menu open-on-hover bottom offset-y>
         <template v-slot:activator="{ on }">
-          <v-btn flat small v-on="on">Support</v-btn>
+          <v-btn text small v-on="on">Support</v-btn>
         </template>
         <v-list class="navbar-menu ma-0 pa-0">
-          <v-list-tile dense class="navbar-menu-item">
+          <v-list-item dense class="navbar-menu-item">
-            <v-btn flat small href="mailto:support@procatalog.io?Subject=Keen%20ProCatalog%20support%20request" class="navbar-menu-button">Email Support</v-btn>
+            <v-btn text small href="mailto:support@procatalog.io?Subject=Keen%20ProCatalog%20support%20request" class="navbar-menu-button">Email Support</v-btn>
-          </v-list-tile>
+          </v-list-item>
         </v-list>
       </v-menu>
 
       <v-menu open-on-hover bottom offset-y>
         <template v-slot:activator="{ on }">
-          <v-btn flat small v-on="on">
+          <v-btn text small v-on="on">
             Account
           </v-btn>
         </template>
         <v-list class="navbar-menu ma-0 pa-0">
-          <v-list-tile dense class="navbar-menu-item">
+          <v-list-item dense class="navbar-menu-item">
-            <v-btn flat small href="/account/settings" class="navbar-menu-button">Profile</v-btn>
+            <v-btn text small href="/account/settings" class="navbar-menu-button">Profile</v-btn>
-          </v-list-tile>
+          </v-list-item>
-          <v-list-tile dense class="navbar-menu-item">
+          <v-list-item dense class="navbar-menu-item">
-            <v-btn flat small href="/account/logout" class="navbar-menu-button">Log Out</v-btn>
+            <v-btn text small href="/account/logout" class="navbar-menu-button">Log Out</v-btn>
-          </v-list-tile>
+          </v-list-item>
         </v-list>
       </v-menu>
 
     </v-toolbar-items>
-  </v-toolbar>
+  </v-app-bar>
 </template>
 
 <script>

cateditor/src/pages/list/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
-import '../../plugins/vuetify'
+import Vuetify from 'vuetify/lib'
+
 import Vue2Filters from 'vue2-filters'
 import App from './App.vue'
 import { store } from './store'
@@ -7,8 +8,31 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure
 
 Vue.config.productionTip = false
 Vue.use(Vue2Filters)
+Vue.use(Vuetify)
+
+const opts = {
+  theme: {
+    primary: '#fdd02f',
+    keen_yellow: '#fddd04',
+    keen_dark_grey: '#373737',
+    keen_light_grey: '#bababa',
+    secondary: '#424242',
+    accent: '#82B1FF',
+    error: '#FF5252',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FFC107'
+  },
+  options: {
+    customProperties: true
+  },
+  // icons: {
+  //   iconfont: 'md',
+  // },
+}
 
 new Vue({
   store,
-  render: h => h(App)
+  render: h => h(App),
+  vuetify: new Vuetify(opts)
 }).$mount('#app')

cateditor/src/plugins/vuetify.js

@@ -1,8 +1,7 @@
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
-import 'vuetify/src/stylus/app.styl'
 
-Vue.use(Vuetify, {
+const opts = {
   theme: {
     primary: '#fdd02f',
     keen_yellow: '#fddd04',
@@ -18,5 +17,13 @@ Vue.use(Vuetify, {
   options: {
     customProperties: true
   },
-  iconfont: 'md'
+  icons: {
-})
+    iconfont: 'md',
+  },
+}
+
+Vue.use(Vuetify)
+
+new Vue({
+  vuetify: new Vuetify(opts)
+}).$mount('#app')