Enhance button styles across components for improved UI consistency

Author: tacxou

apps/web/src/components/2pan/btns/add.vue

@@ -1,19 +1,19 @@
 <template lang="pug">
-q-btn(flat icon="mdi-plus" @click="add" color="primary")
+q-btn(flat icon="mdi-plus" @click="add" size="md" color="primary" dense)
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ tooltip }}
 </template>
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 const props = defineProps({
-    tooltip: {
-        type: String,
-        default: () => 'Ajouter',
-    },
+  tooltip: {
+    type: String,
+    default: () => 'Ajouter',
+  },
 })
 
 const emit = defineEmits(['add'])
 function add() {
-    emit('add')
+  emit('add')
 }
 </script>

apps/web/src/components/2pan/btns/read.vue

@@ -1,18 +1,18 @@
 <template lang="pug">
-q-btn(icon="mdi-eye" color="primary" @click="read" size="sm" flat)
+q-btn(icon="mdi-eye" color="primary" @click="read" dense size="sm" flat)
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ tooltip }}
-</template> 
-        
+</template>
+
 <script lang="ts" setup>
 const props = defineProps({
-    tooltip: {
-        type: String,
-        default: () => 'Afficher',
-    },
+  tooltip: {
+    type: String,
+    default: () => 'Afficher',
+  },
 })
 
 const emit = defineEmits(['read'])
 function read() {
-    emit('read')
+  emit('read')
 }
-</script>
+</script>

apps/web/src/components/2pan/btns/refresh.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
-q-btn(flat icon="mdi-refresh" @click="refresh" color="info")
+q-btn(flat icon="mdi-refresh" @click="refresh" color="info" size="md" dense)
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Rafraichir
 </template>
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 const emit = defineEmits(['refresh'])
 function refresh() {
-    emit('refresh')
+  emit('refresh')
 }
 </script>

apps/web/src/components/2pan/btns/remove.vue

@@ -1,19 +1,19 @@
 <template lang="pug">
-q-btn(flat icon="mdi-delete" @click="remove" size="sm" color="negative")
+q-btn(flat icon="mdi-delete" @click="remove" size="sm" dense color="negative")
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ tooltip }}
 </template>
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 const props = defineProps({
-    tooltip: {
-        type: String,
-        default: () => 'Supprimer',
-    },
+  tooltip: {
+    type: String,
+    default: () => 'Supprimer',
+  },
 })
 
 const emit = defineEmits(['remove'])
 function remove() {
-    emit('remove')
+  emit('remove')
 }
 </script>

apps/web/src/components/2pan/index.vue

@@ -43,9 +43,9 @@ q-splitter(
             slot(name="top-right-btn-grp")
               slot(name="top-right-btn-grp-content-before")
               sesame-2pan-btns-add(@add="add" v-if="crud.create")
-              q-btn.desktop-only(v-if="!hidePanModeSwitch" flat :icon="isSimple ? 'mdi-table-border' : 'mdi-table-merge-cells'" color="info" @click="simple = !simple")
+              q-btn.desktop-only(v-if="!hidePanModeSwitch" flat :icon="isSimple ? 'mdi-table-border' : 'mdi-table-merge-cells'" color="info" @click="simple = !simple" size="md" dense)
                 q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Mode simple/double panneaux
-              q-btn(flat icon="mdi-table-headers-eye" color="info")
+              q-btn(flat icon="mdi-table-headers-eye" color="info" dense size="md")
                 q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher/cacher des colonnes
                 q-menu(max-width="350px" max-height="350px").q-pa-md
                   .row

apps/web/src/components/table/top-right.vue

@@ -1,14 +1,14 @@
 <template lang="pug">
 q-btn-group(rounded flat)
-  q-btn(flat icon="mdi-table-headers-eye" color="primary")
+  q-btn(flat icon="mdi-table-headers-eye" size="md" rounded color="primary" dense)
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher/cacher des colonnes
     q-menu(max-width="350px" max-height="350px").q-pa-md
       .row
         .col-6(v-for="column in columns" :key="column.value")
           q-toggle(:model-value="modelValue" @update:model-value="update($event)" :label="column.label" :val="column.name")
-  q-btn(flat icon="mdi-refresh" @click="refresh" color="primary")
+  q-btn(flat icon="mdi-refresh" @click="refresh" rounded size="md" color="primary" dense)
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Rafraichir
-  q-btn(icon="mdi-plus" color="primary" @click="$router.push('/identity')") Créer
+  q-btn(icon="mdi-plus" color="primary" size="md" rounded @click="$router.push('/identity')" dense) Créer
 </template>
 
 <script lang="ts" setup>