Misc cosmetic fixes

app/src/components/ZoneSelectize.vue

@@ -2,12 +2,12 @@
   <div class="selectize-zone">
     <div id="selected-items" v-if="selected.length > 0">
       <b-button-group size="sm" v-for="item in filteredSelected" :key="item">
-        <b-button :variant="itemVariant" :to="itemRoute ? {name: itemRoute, params: {name: item}} : null" class="item-btn">
+        <b-button :to="itemRoute ? {name: itemRoute, params: {name: item}} : null" class="item-btn btn-light btn-outline-dark">
           <icon :iname="itemIcon" /> {{ item | filter(format) }}
         </b-button>
         <b-button
           v-if="!removable || removable(item)"
-          class="remove-btn" variant="warning"
+          class="remove-btn btn-outline-dark" variant="warning"
           @click="onRemove(item)"
         >
           <icon :title="$t('delete')" iname="minus" />
@@ -34,7 +34,6 @@ export default {
   props: {
     itemIcon: { type: String, default: null },
     itemRoute: { type: String, default: null },
-    itemVariant: { type: String, default: 'secondary' },
     selected: { type: Array, required: true },
     // needed by SelectizeBase
     choices: { type: Array, required: true },

app/src/i18n/locales/fr.json

@@ -69,9 +69,9 @@
     "hook_conf_ynh_certs": "Certificats SSL",
     "hook_conf_ynh_firewall": "Pare-feu",
     "hook_conf_ynh_mysql": "Mot de passe MySQL",
-    "hook_data_home": "Données de l’utilisateur",
+    "hook_data_home": "Données des utilisateurs",
-    "hook_data_home_desc": "Les données de l’utilisateur situées dans /home/USER",
+    "hook_data_home_desc": "Données utilisateurs situées dans /home/USER",
-    "hook_data_mail": "Courriel",
+    "hook_data_mail": "Courriels",
     "hook_data_mail_desc": "Courriels (au format brut) stockés sur le serveur",
     "id": "ID",
     "infos": "Info",
@@ -103,11 +103,11 @@
     "path": "Chemin",
     "port": "Port",
     "ports": "Ports",
-    "postinstall_domain": "C'est le premier nom de domaine lié à votre serveur YunoHost, mais également celui qui servira pour le portail d'authentification. Il sera donc visible pour tous vos utilisateurs, choisissez-le avec soin.",
+    "postinstall_domain": "Il s'agit du premier nom de domaine lié à votre serveur YunoHost. C'est également celui qui servira pour le portail d'authentification. Il sera donc visible pour tous vos utilisateurs, choisissez-le avec soin.",
     "postinstall_intro_1": "Félicitations ! YunoHost a été installé avec succès.",
     "postinstall_intro_2": "Deux étapes de configuration supplémentaires sont nécessaires pour activer les services de votre serveur.",
-    "postinstall_intro_3": "Vous pouvez obtenir plus d'informations en vous rendant sur <a href='//yunohost.org/postinstall_fr' target='_blank'>la page de documentation appropriée</a>",
+    "postinstall_intro_3": "Vous pouvez obtenir plus d'informations en vous rendant sur <a href='//yunohost.org/postinstall' target='_blank'>la page de documentation appropriée</a>",
-    "postinstall_password": "C'est le mot de passe qui vous permettra d'accéder à l'interface d'administration et de contrôler votre serveur. Prenez le temps d'en choisir un bon.",
+    "postinstall_password": "Il s'agit du mot de passe qui permettra d'accéder à l'interface d'administration et de contrôler votre serveur. Prenez le temps d'en choisir un bon.",
     "previous": "Précédent",
     "protocol": "Protocole",
     "restore": "Restaurer",

app/src/main.js

@@ -29,7 +29,7 @@ Vue.use(BootstrapVue, {
 // FIXME find or wait for a better way
 Vue.prototype.$askConfirmation = function (message, props) {
   return this.$bvModal.msgBoxConfirm(message, {
-    okTitle: this.$i18n.t('yes'),
+    okTitle: this.$i18n.t('ok'),
     cancelTitle: this.$i18n.t('cancel'),
     ...props
   })

app/src/scss/main.scss

@@ -47,6 +47,10 @@ body {
   }
 }
 
+.font-weight-bold {
+    font-weight: 500 !important;
+}
+
 // Bootstrap overrides
 
 .list-group-item {
@@ -89,13 +93,31 @@ body {
 }
 
 .card-header {
+  padding: 0.6rem 1rem;
+}
+
+.card {
   h1, h2, h3, h4, h5, h6 {
     margin: 0;
   }
 
   h2 {
-    font-size: 1.75rem;
+    font-size: 1.5rem;
   }
+
+  h3 {
+    font-size: 1.4rem;
+  }
+
+  h4 {
+    font-size: 1.25rem;
+  }
+
+  h5 {
+    font-size: 1.1rem;
+  }
+
+
 }
 
 .card-body {
@@ -129,3 +151,7 @@ body {
   padding: 1rem;
   background-color: $light;
 }
+
+code {
+    background: ghostwhite;
+}

app/src/views/PostInstall.vue

@@ -21,7 +21,7 @@
     <template v-else-if="step === 'domain'">
       <domain-form @submit="setDomain" :title="$t('postinstall_set_domain')" :submit-text="$t('next')">
         <template #disclaimer>
-          <p class="alert alert-warning" v-t="'postinstall_domain'" />
+          <p class="alert alert-info" v-t="'postinstall_domain'" />
         </template>
       </domain-form>
 

app/src/views/_partials/WaitingDisplay.vue

@@ -59,7 +59,7 @@ export default {
 
 <style lang="scss" scoped>
 .custom-spinner {
-  animation: 4s linear infinite;
+  animation: 8s linear infinite;
   background-repeat: no-repeat;
 
   &.pacman {

app/src/views/backup/BackupCreate.vue

@@ -8,7 +8,7 @@
       >
         <b-list-group flush>
           <!-- SYSTEM HEADER -->
-          <b-list-group-item class="d-flex align-items-sm-center flex-column flex-sm-row" variant="light">
+          <b-list-group-item class="d-flex align-items-sm-center flex-column flex-sm-row text-primary">
             <h4 class="m-0">
               <icon iname="cube" /> {{ $t('system') }}
             </h4>
@@ -35,7 +35,7 @@
               <h5 class="font-weight-bold">
                 {{ item.name }}
               </h5>
-              <p class="m-0">
+              <p class="m-0 text-muted">
                 {{ item.description }}
               </p>
             </div>
@@ -44,7 +44,7 @@
           </b-list-group-item>
 
           <!-- APPS HEADER -->
-          <b-list-group-item class="d-flex align-items-sm-center flex-column flex-sm-row" variant="light">
+          <b-list-group-item class="d-flex align-items-sm-center flex-column flex-sm-row text-primary">
             <h4 class="m-0">
               <icon iname="cubes" /> {{ $t('applications') }}
             </h4>

app/src/views/domain/DomainInfo.vue

@@ -20,14 +20,14 @@
 
       <!-- DNS CONFIG -->
       <p>{{ $t('domain_dns_longdesc') }}</p>
-      <b-button :to="{ name: 'domain-dns', param: { name } }">
+      <b-button variant="light" class="btn-outline-dark" :to="{ name: 'domain-dns', param: { name } }">
         <icon iname="globe" /> {{ $t('domain_dns_config') }}
       </b-button>
       <hr>
 
       <!-- SSL CERTIFICATE -->
       <p>{{ $t('certificate_manage') }}</p>
-      <b-button :to="{ name: 'domain-cert', param: { name } }">
+      <b-button variant="light" class="btn-outline-dark" :to="{ name: 'domain-cert', param: { name } }">
         <icon iname="lock" /> {{ $t('ssl_certificate') }}
       </b-button>
       <hr>
@@ -35,7 +35,7 @@
       <!-- DELETE -->
       <p>{{ $t('domain_delete_longdesc') }}</p>
       <p
-        v-if="isMainDomain" class="alert alert-danger"
+        v-if="isMainDomain" class="alert alert-info"
         v-html="$t('domain_delete_forbidden_desc', { domain: name })"
       />
       <b-button v-else variant="danger" @click="deleteDomain">

app/src/views/group/GroupList.vue

@@ -36,8 +36,8 @@
 
         <b-col>
           <template v-if="group.isSpecial">
-            <p><icon iname="info-circle" /> {{ $t('group_explain_' + name) }}</p>
+            <p class="text-primary"><icon iname="info-circle" /> {{ $t('group_explain_' + name) }}</p>
-            <p v-if="name === 'visitors'">
+            <p class="text-primary" v-if="name === 'visitors'">
               <em>{{ $t('group_explain_visitors_needed_for_external_client') }}</em>
             </p>
           </template>
@@ -59,7 +59,7 @@
         </b-col>
         <b-col>
           <zone-selectize
-            item-icon="key-modern" item-variant="dark"
+            item-icon="key-modern"
             :choices="group.availablePermissions"
             :selected="group.permissions"
             :label="$t('group_add_permission')"