Nice UI

src/layouts/DefaultLayout.vue

@@ -1,24 +1,24 @@
 <template>
   <q-layout v-if="!loading"> <!-- Be sure to play with the Layout demo on docs -->
-    <q-header class="no-shadow text-center bg-white">
-      <q-toolbar color="secondary" inverted style="border-bottom:1px solid rgba(0,0,0,0.1)">
+    <q-header class="no-shadow text-center">
+      <q-toolbar color="secondary" inverted>
         <q-btn
           flat
           size="18px"
-          icon="menu"
+          icon="o_menu"
           color="secondary"
           @click="leftDrawer = !leftDrawer"
         />
         <q-toolbar-title class="text-center">
-          <div class="q-px-md" @click="$router.push('/dashboard')" style="display:inline-block;cursor:pointer;max-width:250px">
-            <img src="~assets/gyoza_logo_inline.jpg" style="width:100%">
+          <div class="q-px-md" @click="$router.push('/dashboard')" style="display:inline-block;cursor:pointer">
+            <img src="~assets/gyoza.svg" style="height:36px">
           </div>
         </q-toolbar-title>
         <q-btn flat class="no-pointer-events" color="secondary">{{username}}</q-btn>
         <q-btn
           flat
           size="18px"
-          icon="logout"
+          icon="o_logout"
           @click="unsetUser()"
           color="secondary"
         />
@@ -49,7 +49,7 @@
               <q-btn round
                      flat
                      size="md"
-                     icon="add"
+                     icon="o_add"
                      :title="`Ajouter un(e) ${category.name}`"
                      @click.stop.prevent="addItem(category)"
               >
@@ -70,7 +70,7 @@
           >
             <q-item-section>Tâches</q-item-section>
             <q-item-section side>
-              <q-icon name="task"></q-icon>
+              <q-icon name="o_task"></q-icon>
             </q-item-section>
           </q-item>
           <q-item :to="'/print-settings'"
@@ -78,7 +78,7 @@
           >
             <q-item-section>Impression</q-item-section>
             <q-item-section side>
-              <q-icon name="print"></q-icon>
+              <q-icon name="o_print"></q-icon>
             </q-item-section>
           </q-item>
         </q-list>
@@ -164,7 +164,7 @@ export default {
         this.$q.notify({
           message: `Enchanté ${username} !`,
           color: 'green',
-          avatar: '/gyoza_logo_nobg.png',
+          avatar: '/gyoza.svg',
           timeout: 2000
         })
       })