Use FormToogle for the Display Mode option

resources/js/packages/fontawesome.js

@@ -21,6 +21,8 @@ import {
     faLayerGroup,
     faMinusCircle,
     faExclamationCircle,
+    faTh,
+    faList,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -46,6 +48,8 @@ library.add(
     faLayerGroup,
     faMinusCircle,
     faExclamationCircle,
+    faTh,
+    faList,
 );
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)

resources/js/views/settings/Options.vue

@@ -5,7 +5,7 @@
             <!-- Language -->
             <form-select :options="langs" :form="form" fieldName="lang" :label="$t('settings.forms.language.label')"  :help="$t('settings.forms.language.help')" />
             <!-- display mode -->
-            <form-select :options="layouts" :form="form" fieldName="displayMode" :label="$t('settings.forms.display_mode.label')" :help="$t('settings.forms.display_mode.help')" />
+            <form-toggle :choices="layouts" :form="form" fieldName="displayMode" :label="$t('settings.forms.display_mode.label')" :help="$t('settings.forms.display_mode.help')" />
             <!-- show icon -->
             <form-checkbox :form="form" fieldName="showAccountsIcons" :label="$t('settings.forms.show_accounts_icons.label')" :help="$t('settings.forms.show_accounts_icons.help')" />
             <!-- default group -->
@@ -51,8 +51,8 @@
                     { text: this.$t('languages.fr'), value: 'fr' },
                 ],
                 layouts: [
-                    { text: this.$t('settings.forms.grid'), value: 'grid' },
-                    { text: this.$t('settings.forms.list'), value: 'list' },
+                    { text: this.$t('settings.forms.grid'), value: 'grid', icon: 'th' },
+                    { text: this.$t('settings.forms.list'), value: 'list', icon: 'list' },
                 ],
                 kickUserAfters: [
                     { text: this.$t('settings.forms.never'), value: '0' },