From c47d7e187d3c77d3221725e9c21b3386806d7ad6 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 24 Feb 2024 16:05:31 +0100
Subject: [PATCH] refactor: reflect components name changes

---
 app/src/App.vue                               | 10 +--
 app/src/components/CardCollapse.vue           |  2 +-
 app/src/components/ConfigPanels.vue           |  4 +-
 app/src/components/MessageListGroup.vue       |  6 +-
 app/src/components/QueryHeader.vue            |  4 +-
 app/src/components/RecursiveListGroup.vue     |  2 +-
 app/src/components/RoutableTabs.vue           |  2 +-
 app/src/components/globals/Breadcrumb.vue     |  2 +-
 app/src/components/globals/CardForm.vue       |  4 +-
 app/src/components/globals/ExplainWhat.vue    |  2 +-
 app/src/components/globals/TopBar.vue         |  2 +-
 app/src/components/globals/ViewSearch.vue     |  4 +-
 app/src/components/globals/YAlert.vue         |  4 +-
 app/src/components/globals/YCard.vue          |  6 +-
 app/src/components/globals/YIcon.vue          |  2 +-
 app/src/components/globals/YListGroupItem.vue |  4 +-
 app/src/components/globals/YSpinner.vue       |  2 +-
 .../globals/formItems/ButtonItem.vue          |  2 +-
 .../components/globals/formItems/FileItem.vue |  2 +-
 .../globals/formItems/ReadOnlyAlertItem.vue   |  2 +-
 .../globals/formItems/TagsSelectizeItem.vue   |  6 +-
 app/src/router/routes.js                      | 12 ++--
 app/src/views/HomeView.vue                    |  6 +-
 app/src/views/LoginView.vue                   |  2 +-
 app/src/views/PostInstall.vue                 | 20 +++---
 app/src/views/_partials/DomainForm.vue        |  6 +-
 app/src/views/_partials/HistoryConsole.vue    |  2 +-
 .../views/_partials/ReconnectingDisplay.vue   |  4 +-
 app/src/views/_partials/WaitingDisplay.vue    |  2 +-
 app/src/views/app/AppCatalog.vue              | 12 ++--
 app/src/views/app/AppInfo.vue                 | 68 +++++++++----------
 app/src/views/app/AppInstall.vue              | 54 +++++++--------
 app/src/views/app/AppList.vue                 |  4 +-
 app/src/views/backup/BackupCreate.vue         |  8 +--
 app/src/views/backup/BackupInfo.vue           | 14 ++--
 app/src/views/backup/BackupList.vue           |  4 +-
 app/src/views/backup/BackupView.vue           |  4 +-
 app/src/views/diagnosis/DiagnosisView.vue     | 22 +++---
 app/src/views/domain/DomainDns.vue            |  2 +-
 app/src/views/domain/DomainInfo.vue           | 14 ++--
 app/src/views/domain/DomainList.vue           |  4 +-
 app/src/views/group/GroupList.vue             | 14 ++--
 app/src/views/service/ServiceInfo.vue         | 18 ++---
 app/src/views/service/ServiceList.vue         |  4 +-
 app/src/views/tool/ToolFirewall.vue           | 10 +--
 app/src/views/tool/ToolList.vue               |  6 +-
 app/src/views/tool/ToolLog.vue                | 18 ++---
 app/src/views/tool/ToolLogs.vue               |  6 +-
 app/src/views/tool/ToolMigrations.vue         | 16 ++---
 app/src/views/tool/ToolPower.vue              |  8 +--
 app/src/views/update/SystemUpdate.vue         | 24 +++----
 app/src/views/user/UserEdit.vue               |  8 +--
 app/src/views/user/UserInfo.vue               | 12 ++--
 app/src/views/user/UserList.vue               | 10 +--
 54 files changed, 246 insertions(+), 246 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 6dfd21b7..b80a159b 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -21,7 +21,7 @@
               :href="ssoLink"
               variant="primary" size="sm" block
             >
-              {{ $t('user_interface_link') }} <Icon iname="user" />
+              {{ $t('user_interface_link') }} <YIcon iname="user" />
             </BButton>
           </li>
 
@@ -30,7 +30,7 @@
               @click.prevent="logout"
               variant="outline-dark" block size="sm"
             >
-              {{ $t('logout') }} <Icon iname="sign-out" />
+              {{ $t('logout') }} <YIcon iname="sign-out" />
             </BButton>
           </li>
         </BNavbarNav>
@@ -59,13 +59,13 @@
       <nav>
         <BNav class="justify-content-center">
           <BNavItem href="https://yunohost.org/docs" target="_blank" link-classes="text-secondary">
-            <Icon iname="book" /> {{ $t('footer.documentation') }}
+            <YIcon iname="book" /> {{ $t('footer.documentation') }}
           </BNavItem>
           <BNavItem href="https://yunohost.org/help" target="_blank" link-classes="text-secondary">
-            <Icon iname="life-ring" /> {{ $t('footer.help') }}
+            <YIcon iname="life-ring" /> {{ $t('footer.help') }}
           </BNavItem>
           <BNavItem href="https://donate.yunohost.org/" target="_blank" link-classes="text-secondary">
-            <Icon iname="heart" /> {{ $t('footer.donate') }}
+            <YIcon iname="heart" /> {{ $t('footer.donate') }}
           </BNavItem>
 
           <BNavText
diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index 8b245ca8..859d52bb 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -7,7 +7,7 @@
       <h2>
         <BButton v-b-toggle="id" :variant="variant" class="card-collapse-button">
           {{ title }}
-          <Icon class="ml-auto" iname="chevron-right" />
+          <YIcon class="ml-auto" iname="chevron-right" />
         </BButton>
       </h2>
     </slot>
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 17728513..4541a3a5 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -17,11 +17,11 @@
       </template>
     </RoutableTabs>
 
-    <Card v-else :title="routes_[0].text" :icon="routes_[0].icon">
+    <YCard v-else :title="routes_[0].text" :icon="routes_[0].icon">
       <slot name="tab-top" />
       <slot name="tab-before" />
       <slot name="tab-after" />
-    </Card>
+    </YCard>
   </div>
 </template>
 
diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index 615e13fb..52c2cc67 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -4,17 +4,17 @@
     :class="{ 'fixed-height': fixedHeight, 'bordered': bordered }"
     @scroll="onScroll"
   >
-    <YunoListGroupItem
+    <YListGroupItem
       v-if="limit && messages.length > limit"
       variant="info" v-t="'api.partial_logs'"
     />
 
-    <YunoListGroupItem
+    <YListGroupItem
       v-for="({ color, text }, i) in reducedMessages" :key="i"
       :variant="color" size="xs"
     >
       <span v-html="text" />
-    </YunoListGroupItem>
+    </YListGroupItem>
   </BListGroup>
 </template>
 
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 98534d72..3fbcbef0 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -11,11 +11,11 @@
     <div v-if="request.errors || request.warnings">
       <!-- WEBSOCKET ERRORS COUNT -->
       <span class="count" v-if="request.errors">
-        {{ request.errors }}<Icon iname="bug" class="text-danger ml-1" />
+        {{ request.errors }}<YIcon iname="bug" class="text-danger ml-1" />
       </span>
       <!-- WEBSOCKET WARNINGS COUNT -->
       <span class="count" v-if="request.warnings">
-        {{ request.warnings }}<Icon iname="warning" class="text-warning ml-1" />
+        {{ request.warnings }}<YIcon iname="warning" class="text-warning ml-1" />
       </span>
     </div>
 
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 76b305ad..5c5d24e5 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -16,7 +16,7 @@
           @click.stop="node.data.opened = !node.data.opened"
         >
           <span class="sr-only">{{ toggleText }}</span>
-          <Icon iname="chevron-right" />
+          <YIcon iname="chevron-right" />
         </BButton>
       </BListGroupItem>
 
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index c6b5a2ff..71e9277b 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -6,7 +6,7 @@
           v-for="route in routes" :key="route.text"
           :to="route.to" exact exact-active-class="active"
         >
-          <Icon v-if="route.icon" :iname="route.icon" />
+          <YIcon v-if="route.icon" :iname="route.icon" />
           {{ route.text }}
         </BNavItem>
       </BNav>
diff --git a/app/src/components/globals/Breadcrumb.vue b/app/src/components/globals/Breadcrumb.vue
index 54b5399d..2ec8343a 100644
--- a/app/src/components/globals/Breadcrumb.vue
+++ b/app/src/components/globals/Breadcrumb.vue
@@ -2,7 +2,7 @@
   <BBreadcrumb v-if="breadcrumb.length">
     <BBreadcrumbItem to="/">
       <span class="sr-only">{{ $t('home') }}</span>
-      <Icon iname="home" />
+      <YIcon iname="home" />
     </BBreadcrumbItem>
 
     <BBreadcrumbItem
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index c9a0382a..40bf142e 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <Card v-bind="$attrs" class="card-form">
+  <YCard v-bind="$attrs" class="card-form">
     <template #default>
       <slot name="disclaimer" />
 
@@ -27,7 +27,7 @@
         </BButton>
       </slot>
     </template>
-  </Card>
+  </YCard>
 </template>
 
 <script>
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 70116164..ef2169a2 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -6,7 +6,7 @@
         :id="id" href="#"
         variant="light"
       >
-        <Icon iname="question" />
+        <YIcon iname="question" />
         <span class="sr-only">{{ $t('details_about', { subject: title }) }}</span>
       </BButton>
       <BPopover
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index b23c0511..6e1666b9 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -8,7 +8,7 @@
       <slot v-if="hasRightSlot" name="group-right" />
 
       <BButton v-else variant="success" :to="button.to">
-        <Icon v-if="button.icon" :iname="button.icon" /> {{ button.text }}
+        <YIcon v-if="button.icon" :iname="button.icon" /> {{ button.text }}
       </BButton>
     </div>
   </BButtonToolbar>
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 468cdfa5..4245b053 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -6,7 +6,7 @@
     <template v-if="!hasCustomTopBar" #top-bar-group-left>
       <BInputGroup class="w-100">
         <BInputGroupPrepend is-text>
-          <Icon iname="search" />
+          <YIcon iname="search" />
         </BInputGroupPrepend>
 
         <BFormInput
@@ -28,7 +28,7 @@
     <template #default>
       <BAlert v-if="items === null || filteredItems === null" variant="warning">
         <slot name="alert-message">
-          <Icon iname="exclamation-triangle" />
+          <YIcon iname="exclamation-triangle" />
           {{ $tc(items === null ? 'items_verbose_count': 'search.not_found', 0, { items: $tc('items.' + itemsName, 0) }) }}
         </slot>
       </BAlert>
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index b0184a9a..da5e0213 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -6,7 +6,7 @@
     :class="{ ['alert alert-' + variant]: !alert }"
     class="yuno-alert d-flex flex-column flex-md-row align-items-center"
   >
-    <Icon :iname="_icon" class="mr-md-3 mb-md-0 mb-2 md" />
+    <YIcon :iname="_icon" class="mr-md-3 mb-md-0 mb-2 md" />
 
     <div class="w-100">
       <slot name="default" />
@@ -18,7 +18,7 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  name: 'YunoAlert',
+  name: 'YAlert',
 
   props: {
     alert: { type: Boolean, default: false },
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index 5ecb8bb8..c7aeef4d 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -4,7 +4,7 @@
       <div class="w-100 d-flex align-items-center flex-wrap custom-header">
         <slot name="header">
           <Component :is="titleTag" class="custom-header-title">
-            <Icon v-if="icon" :iname="icon" class="mr-2" />{{ title }}
+            <YIcon v-if="icon" :iname="icon" class="mr-2" />{{ title }}
           </Component>
           <slot name="header-next" />
         </slot>
@@ -19,7 +19,7 @@
         size="sm" variant="outline-secondary"
         class="align-self-center ml-auto" :class="{ 'not-collapsed': visible, 'collapsed': !visible, [`ml-${buttonUnbreak}-2`]: buttonUnbreak }"
       >
-        <Icon iname="chevron-right" />
+        <YIcon iname="chevron-right" />
         <span class="sr-only">{{ $t('words.collapse') }}</span>
       </BButton>
     </template>
@@ -43,7 +43,7 @@
 <script>
 
 export default {
-  name: 'Card',
+  name: 'YCard',
 
   props: {
     id: { type: String, default: 'ynh-form' },
diff --git a/app/src/components/globals/YIcon.vue b/app/src/components/globals/YIcon.vue
index 37e752d6..4f78afb6 100644
--- a/app/src/components/globals/YIcon.vue
+++ b/app/src/components/globals/YIcon.vue
@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: 'Icon',
+  name: 'YIcon',
   props: {
     iname: { type: String, required: true },
     variant: { type: String, default: null }
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 5167141a..9ee1bbd5 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -4,7 +4,7 @@
     v-bind="$attrs"
   >
     <div v-if="!noStatus" class="yuno-list-group-item-status">
-      <Icon
+      <YIcon
         v-if="_icon" :iname="_icon"
         :class="['icon-' + variant]"
       />
@@ -20,7 +20,7 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  name: 'YunoListGroupItem',
+  name: 'YListGroupItem',
 
   props: {
     variant: { type: String, default: 'white' },
diff --git a/app/src/components/globals/YSpinner.vue b/app/src/components/globals/YSpinner.vue
index 12662d28..4ae3f06f 100644
--- a/app/src/components/globals/YSpinner.vue
+++ b/app/src/components/globals/YSpinner.vue
@@ -7,7 +7,7 @@ import { mapGetters } from 'vuex'
 
 
 export default {
-  name: 'Spinner',
+  name: 'YSpinner',
 
   computed: {
     ...mapGetters(['spinner'])
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index e0216d9d..4d3744ea 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -6,7 +6,7 @@
     :disabled="!enabled"
     class="d-block mb-3"
   >
-    <Icon :iname="icon_" class="mr-2" />
+    <YIcon :iname="icon_" class="mr-2" />
     <span v-html="label" />
   </BButton>
 </template>
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 24163022..7e03b3f1 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -5,7 +5,7 @@
       @click="clearFiles" variant="danger"
     >
       <span class="sr-only">{{ $t('delete') }}</span>
-      <Icon iname="trash" />
+      <YIcon iname="trash" />
     </BButton>
 
     <BFormFile
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index a5a63c4c..bc9529e6 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -1,6 +1,6 @@
 <template>
   <BAlert class="d-flex flex-column flex-md-row align-items-center" :variant="type" show>
-    <Icon :iname="icon_" class="mr-md-3 mb-md-0 mb-2" :variant="type" />
+    <YIcon :iname="icon_" class="mr-md-3 mb-md-0 mb-2" :variant="type" />
 
     <VueShowdown
       :markdown="label" flavor="github"
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 3432e59f..92c97b1a 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -14,7 +14,7 @@
               :disabled="disabled || disabledItems.includes(tag)"
               class="border border-dark mb-2"
             >
-              <Icon v-if="tagIcon" :iname="tagIcon" /> {{ tag }}
+              <YIcon v-if="tagIcon" :iname="tagIcon" /> {{ tag }}
             </BFormTag>
           </li>
         </ul>
@@ -25,7 +25,7 @@
           @keydown.native="onDropdownKeydown"
         >
           <template #button-content>
-            <Icon iname="search-plus" /> {{ label }}
+            <YIcon iname="search-plus" /> {{ label }}
           </template>
 
           <BDropdownGroup class="search-group">
@@ -55,7 +55,7 @@
             {{ option }}
           </BDropdownItemButton>
           <BDropdownText v-if="!criteria && availableOptions.length === 0">
-            <Icon iname="exclamation-triangle" />
+            <YIcon iname="exclamation-triangle" />
             {{ $tc('items_verbose_items_left', 0, { items: $tc('items.' + itemsName, 0) }) }}
           </BDropdownText>
         </BDropdown>
diff --git a/app/src/router/routes.js b/app/src/router/routes.js
index 3f2f82a3..a49bea8a 100644
--- a/app/src/router/routes.js
+++ b/app/src/router/routes.js
@@ -8,15 +8,15 @@
 // Webpack chunk syntax is:
 // `() => import('@/views/:ViewComponent.vue')`
 
-import Home from '@/views/Home.vue'
-import Login from '@/views/Login.vue'
+import HomeView from '@/views/HomeView.vue'
+import LoginView from '@/views/LoginView.vue'
 import ToolList from '@/views/tool/ToolList.vue'
 
 const routes = [
   {
     name: 'home',
     path: '/',
-    component: Home,
+    component: HomeView,
     meta: {
       args: { trad: 'home' }
     }
@@ -25,7 +25,7 @@ const routes = [
   {
     name: 'login',
     path: '/login',
-    component: Login,
+    component: LoginView,
     meta: {
       noAuth: true,
       args: { trad: 'login' }
@@ -347,7 +347,7 @@ const routes = [
   {
     name: 'diagnosis',
     path: '/diagnosis',
-    component: () => import('@/views/diagnosis/Diagnosis.vue'),
+    component: () => import('@/views/diagnosis/DiagnosisView.vue'),
     meta: {
       args: { trad: 'diagnosis' },
       breadcrumb: ['diagnosis']
@@ -360,7 +360,7 @@ const routes = [
   {
     name: 'backup',
     path: '/backup',
-    component: () => import('@/views/backup/Backup.vue'),
+    component: () => import('@/views/backup/BackupView.vue'),
     meta: {
       args: { trad: 'backup' },
       breadcrumb: ['backup']
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index 13ea4dfc..aeb88da7 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -6,9 +6,9 @@
         :key="item.routeName"
         :to="{ name: item.routeName }"
       >
-        <Icon :iname="item.icon" class="lg ml-1" />
+        <YIcon :iname="item.icon" class="lg ml-1" />
         <h4>{{ $t(item.translation) }}</h4>
-        <Icon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
       </BListGroupItem>
     </BListGroup>
   </div>
@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'Home',
+  name: 'HomeView',
 
   data () {
     return {
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 28357d39..dbe886b7 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -27,7 +27,7 @@ import { validationMixin } from 'vuelidate'
 import { alphalownumdot_, required, minLength } from '@/helpers/validators'
 
 export default {
-  name: 'Login',
+  name: 'LoginView',
 
   mixins: [validationMixin],
 
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 283f4565..da2443e4 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -3,7 +3,7 @@
     <!-- START STEP -->
     <template v-if="step === 'start'">
       <p class="alert alert-success">
-        <Icon iname="thumbs-up" /> {{ $t('postinstall_intro_1') }}
+        <YIcon iname="thumbs-up" /> {{ $t('postinstall_intro_1') }}
       </p>
 
       <p class="alert alert-info">
@@ -29,7 +29,7 @@
       </DomainForm>
 
       <BButton variant="primary" @click="goToStep('start')" class="mt-3">
-        <Icon iname="chevron-left" /> {{ $t('previous') }}
+        <YIcon iname="chevron-left" /> {{ $t('previous') }}
       </BButton>
     </template>
 
@@ -52,30 +52,30 @@
       </CardForm>
 
       <BButton variant="primary" @click="goToStep('domain')" class="mt-3">
-        <Icon iname="chevron-left" /> {{ $t('previous') }}
+        <YIcon iname="chevron-left" /> {{ $t('previous') }}
       </BButton>
     </template>
 
     <template v-else-if="step === 'rootfsspace-error'">
-      <Card no-body header-class="d-none" footer-bg-variant="danger">
+      <YCard no-body header-class="d-none" footer-bg-variant="danger">
         <BCardBody class="alert alert-danger m-0">
           {{ serverError }}
         </BCardBody>
 
         <template #buttons>
           <BButton variant="light" size="sm" @click="performPostInstall(true)">
-            <Icon iname="warning" /> {{ $t('postinstall.force') }}
+            <YIcon iname="warning" /> {{ $t('postinstall.force') }}
           </BButton>
         </template>
-      </Card>
+      </YCard>
     </template>
 
     <!-- POST-INSTALL SUCCESS STEP -->
     <template v-else-if="step === 'login'">
       <p class="alert alert-success">
-        <Icon iname="thumbs-up" /> {{ $t('installation_complete') }}
+        <YIcon iname="thumbs-up" /> {{ $t('installation_complete') }}
       </p>
-      <Login />
+      <LoginView />
     </template>
   </div>
 </template>
@@ -85,7 +85,7 @@ import { validationMixin } from 'vuelidate'
 
 import api from '@/api'
 import { DomainForm } from '@/views/_partials'
-import Login from '@/views/Login.vue'
+import LoginView from '@/views/LoginView.vue'
 import { formatFormData } from '@/helpers/yunohostArguments'
 import { alphalownumdot_, required, minLength, name, sameAs } from '@/helpers/validators'
 
@@ -96,7 +96,7 @@ export default {
 
   components: {
     DomainForm,
-    Login
+    LoginView
   },
 
   data () {
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index f5b2fa9d..99ff6dc0 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -20,7 +20,7 @@
 
     <BCollapse id="collapse-domain" :visible.sync="domainIsVisible">
       <p class="mt-2 alert alert-info">
-        <Icon iname='info-circle' />
+        <YIcon iname='info-circle' />
         <span class='pl-1' v-html="$t('domain.add.from_registrar_desc')" />
       </p>
 
@@ -43,7 +43,7 @@
 
     <BCollapse id="collapse-dynDomain" :visible.sync="dynDomainIsVisible">
       <p class="mt-2 alert alert-info">
-        <Icon iname="info-circle" />
+        <YIcon iname="info-circle" />
         <span class='pl-1' v-html="$t('domain.add.from_yunohost_desc')" />
       </p>
 
@@ -78,7 +78,7 @@
 
     <BCollapse id="collapse-localDomain" :visible.sync="localDomainIsVisible">
       <p class="mt-2 alert alert-info">
-        <Icon iname='info-circle' />
+        <YIcon iname='info-circle' />
         <span class='pl-1' v-html="$t('domain.add.from_local_desc')" />
       </p>
 
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index ec164380..c4ff81c3 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -11,7 +11,7 @@
       @keyup.space.enter.prevent="onHistoryBarKey"
     >
       <h5 class="m-0">
-        <Icon iname="history" /> <span class="d-none d-sm-inline font-weight-bold">{{ $t('history.title') }}</span>
+        <YIcon iname="history" /> <span class="d-none d-sm-inline font-weight-bold">{{ $t('history.title') }}</span>
       </h5>
 
       <!-- CURRENT/LAST ACTION -->
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index 5fa74b44..cafd7c73 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -4,7 +4,7 @@
     <BCardTitle class="text-center my-4" v-t="'api.reconnecting.title'" />
 
     <template v-if="status === 'reconnecting'">
-      <Spinner class="mb-4" />
+      <YSpinner class="mb-4" />
 
       <BAlert
         v-if="origin"
@@ -38,7 +38,7 @@
 import { mapGetters } from 'vuex'
 
 import api from '@/api'
-import LoginView from '@/views/Login.vue'
+import LoginView from '@/views/LoginView.vue'
 
 
 export default {
diff --git a/app/src/views/_partials/WaitingDisplay.vue b/app/src/views/_partials/WaitingDisplay.vue
index 3c0a85d7..0f3b3531 100644
--- a/app/src/views/_partials/WaitingDisplay.vue
+++ b/app/src/views/_partials/WaitingDisplay.vue
@@ -13,7 +13,7 @@
       <BProgressBar variant="secondary" :value="progress.values[2]" striped />
     </BProgress>
     <!-- OR SPINNER -->
-    <Spinner v-else class="my-4" />
+    <YSpinner v-else class="my-4" />
 
     <MessageListGroup
       v-if="hasMessages" :messages="request.messages"
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 3cac2ac2..eda061cb 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -8,7 +8,7 @@
         <!-- APP SEARCH -->
         <BInputGroup>
           <BInputGroupPrepend is-text>
-            <Icon iname="search" />
+            <YIcon iname="search" />
           </BInputGroupPrepend>
           <BFormInput
             id="search-input" :placeholder="$t('search.for', { items: $tc('items.apps', 2) })"
@@ -22,7 +22,7 @@
         <!-- CATEGORY SELECT -->
         <BInputGroup class="mt-3">
           <BInputGroupPrepend is-text>
-            <Icon iname="filter" />
+            <YIcon iname="filter" />
           </BInputGroupPrepend>
           <BFormSelect :value="category" :options="categories" @change="updateQuery('category', $event)" />
           <BInputGroupAppend>
@@ -58,7 +58,7 @@
       >
         <BCardTitle>
           <BLink @click="updateQuery('category', cat.value)" class="card-link">
-            <Icon :iname="cat.icon" /> {{ cat.text }}
+            <YIcon :iname="cat.icon" /> {{ cat.text }}
           </BLink>
         </BCardTitle>
         <BCardText>{{ cat.description }}</BCardText>
@@ -92,7 +92,7 @@
                   {{ $t('app_state_' + app.state) }}
                 </BBadge>
 
-                <Icon
+                <YIcon
                   v-if="app.high_quality" iname="star" class="star"
                   v-b-popover.hover.bottom="$t(`app_state_highquality_explanation`)"
                 />
@@ -105,7 +105,7 @@
 
             <BCardText v-if="!app.maintained" class="align-self-end position-relative mt-auto">
               <span class="alert-warning p-1" v-b-popover.hover.top="$t('orphaned_details')">
-                <Icon iname="warning" /> {{ $t('orphaned') }}
+                <YIcon iname="warning" /> {{ $t('orphaned') }}
               </span>
             </BCardText>
           </div>
@@ -131,7 +131,7 @@
       >
         <template #disclaimer>
           <div class="alert alert-warning">
-            <Icon iname="exclamation-triangle" /> {{ $t('confirm_install_custom_app') }}
+            <YIcon iname="exclamation-triangle" /> {{ $t('confirm_install_custom_app') }}
           </div>
         </template>
 
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index bce1908c..8289090f 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -3,7 +3,7 @@
     :queries="queries" @queries-response="onQueriesResponse" :loading="loading"
     ref="view"
   >
-    <YunoAlert v-if="app && app.doc && app.doc.notifications && app.doc.notifications.postInstall.length" variant="info" class="my-4">
+    <YAlert v-if="app && app.doc && app.doc.notifications && app.doc.notifications.postInstall.length" variant="info" class="my-4">
       <div class="d-md-flex align-items-center mb-3">
         <h2 v-t="'app.doc.notifications.post_install'" class="md-m-0" />
         <BButton
@@ -12,7 +12,7 @@
           class="ml-auto mr-2"
           @click="dismissNotification('post_install')"
         >
-          <Icon iname="check" />
+          <YIcon iname="check" />
           {{ $t('app.doc.notifications.understood') }}
         </BButton>
       </div>
@@ -21,9 +21,9 @@
         v-for="[name, notif] in app.doc.notifications.postInstall" :key="name"
         :markdown="notif" flavor="github" :options="{ headerLevelStart: 4 }"
       />
-    </YunoAlert>
+    </YAlert>
 
-    <YunoAlert v-if="app && app.doc && app.doc.notifications && app.doc.notifications.postUpgrade.length" variant="info" class="my-4">
+    <YAlert v-if="app && app.doc && app.doc.notifications && app.doc.notifications.postUpgrade.length" variant="info" class="my-4">
       <div class="d-md-flex align-items-center mb-3">
         <h2 v-t="'app.doc.notifications.post_upgrade'" class="md-m-0" />
         <BButton
@@ -32,7 +32,7 @@
           class="ml-auto mr-2"
           @click="dismissNotification('post_upgrade')"
         >
-          <Icon iname="check" />
+          <YIcon iname="check" />
           {{ $t('app.doc.notifications.understood') }}
         </BButton>
       </div>
@@ -41,12 +41,12 @@
         v-for="[name, notif] in app.doc.notifications.postUpgrade" :key="name"
         :markdown="notif" flavor="github" :options="{ headerLevelStart: 4 }"
       />
-    </YunoAlert>
+    </YAlert>
 
     <section v-if="app" class="border rounded p-3 mb-4">
       <div class="d-md-flex align-items-center mb-4">
         <h1 class="mb-3 mb-md-0">
-          <Icon iname="cube" />
+          <YIcon iname="cube" />
           {{ app.label }}
 
           <span class="text-secondary tiny">
@@ -59,7 +59,7 @@
           :href="app.url" target="_blank"
           variant="success" class="ml-auto mr-2"
         >
-          <Icon iname="external-link" />
+          <YIcon iname="external-link" />
           {{ $t('app.open_this_app') }}
         </BButton>
 
@@ -69,7 +69,7 @@
           variant="danger"
           :class="{ 'ml-auto': !app.url }"
         >
-          <Icon iname="trash-o" />
+          <YIcon iname="trash-o" />
           {{ $t('uninstall') }}
         </BButton>
       </div>
@@ -83,7 +83,7 @@
       </p>
 
       <p>
-        <Icon iname="comments" /> {{ $t('app.info.problem') }}
+        <YIcon iname="comments" /> {{ $t('app.info.problem') }}
         <a :href="`https://forum.yunohost.org/tag/${id}`" target="_blank">
           {{ $t('app.info.forum') }}
         </a>
@@ -92,14 +92,14 @@
       <VueShowdown :markdown="app.description" flavor="github" />
     </section>
 
-    <YunoAlert
+    <YAlert
       v-if="config_panel_err"
       class="mb-4" variant="danger" icon="bug"
     >
       <p>{{ $t('app.info.config_panel_error') }}</p>
       <p>{{ config_panel_err }}</p>
       <p>{{ $t('app.info.config_panel_error_please_report') }}</p>
-    </YunoAlert>
+    </YAlert>
 
     <!-- BASIC INFOS -->
     <ConfigPanels v-bind="config" @submit="onConfigSubmit">
@@ -151,7 +151,7 @@
             size="sm" :to="{ name: 'group-list'}" variant="info"
             class="ml-2"
           >
-            <Icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
+            <YIcon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
           </BButton>
         </BFormGroup>
         <hr>
@@ -183,7 +183,7 @@
           </BInputGroup>
 
           <div v-else class="alert alert-warning">
-            <Icon iname="exclamation" /> {{ $t('app_info_change_url_disabled_tooltip') }}
+            <YIcon iname="exclamation" /> {{ $t('app_info_change_url_disabled_tooltip') }}
           </div>
         </BFormGroup>
         <hr v-if="app.is_webapp">
@@ -196,13 +196,13 @@
         >
           <template v-if="!app.is_default">
             <BButton @click="setAsDefaultDomain(false)" id="main-domain" variant="success">
-              <Icon iname="star" /> {{ $t('app_make_default') }}
+              <YIcon iname="star" /> {{ $t('app_make_default') }}
             </BButton>
           </template>
 
           <template v-else>
             <BButton @click="setAsDefaultDomain(true)" id="main-domain" variant="warning">
-              <Icon iname="star" /> {{ $t('app_make_not_default') }}
+              <YIcon iname="star" /> {{ $t('app_make_not_default') }}
             </BButton>
           </template>
         </BFormGroup>
@@ -215,7 +215,7 @@
           v-for="[name, content] in app.doc.admin" :key="name"
         >
           <template #title>
-            <Icon iname="book" class="mr-2" />
+            <YIcon iname="book" class="mr-2" />
             {{ name === "admin" ? $t('app.doc.admin.title') : name }}
           </template>
           <VueShowdown :markdown="content" flavor="github" />
@@ -223,44 +223,44 @@
       </BTabs>
     </BCard>
 
-    <Card
+    <YCard
       v-if="app && app.integration"
       id="app-integration" :title="$t('app.integration.title')"
       collapsable collapsed no-body
     >
       <BListGroup flush>
-        <YunoListGroupItem variant="info">
+        <YListGroupItem variant="info">
           {{ $t('app.integration.archs') }} {{ app.integration.archs }}
-        </YunoListGroupItem>
-        <YunoListGroupItem v-if="app.integration.ldap" :variant="app.integration.ldap === true ? 'success' : 'warning'">
+        </YListGroupItem>
+        <YListGroupItem v-if="app.integration.ldap" :variant="app.integration.ldap === true ? 'success' : 'warning'">
           {{ $t(`app.integration.ldap.${app.integration.ldap}`) }}
-        </YunoListGroupItem>
-        <YunoListGroupItem v-if="app.integration.sso" :variant="app.integration.sso === true ? 'success' : 'warning'">
+        </YListGroupItem>
+        <YListGroupItem v-if="app.integration.sso" :variant="app.integration.sso === true ? 'success' : 'warning'">
           {{ $t(`app.integration.sso.${app.integration.sso}`) }}
-        </YunoListGroupItem>
-        <YunoListGroupItem variant="info">
+        </YListGroupItem>
+        <YListGroupItem variant="info">
           {{ $t(`app.integration.multi_instance.${app.integration.multi_instance}`) }}
-        </YunoListGroupItem>
-        <YunoListGroupItem variant="info">
+        </YListGroupItem>
+        <YListGroupItem variant="info">
           {{ $t('app.integration.resources', app.integration.resources) }}
-        </YunoListGroupItem>
+        </YListGroupItem>
       </BListGroup>
-    </Card>
+    </YCard>
 
-    <Card
+    <YCard
       v-if="app"
       id="app-links" icon="link" :title="$t('app.links.title')"
       collapsable collapsed no-body
     >
       <BListGroup flush>
-        <YunoListGroupItem v-for="[key, link] in app.links" :key="key" no-status>
+        <YListGroupItem v-for="[key, link] in app.links" :key="key" no-status>
           <BLink :href="link" target="_blank">
-            <Icon :iname="appLinksIcons(key)" class="mr-1" />
+            <YIcon :iname="appLinksIcons(key)" class="mr-1" />
             {{ $t('app.links.' + key) }}
           </BLink>
-        </YunoListGroupItem>
+        </YListGroupItem>
       </BListGroup>
-    </Card>
+    </YCard>
 
     <BModal
       v-if="app"
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 5fc29952..bc5a44a8 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -12,7 +12,7 @@
             :href="app.demo" target="_blank"
             variant="primary" class="ml-auto"
           >
-            <Icon iname="external-link" />
+            <YIcon iname="external-link" />
             {{ $t('app.install.try_demo') }}
           </BButton>
         </div>
@@ -34,49 +34,49 @@
         />
       </section>
 
-      <Card
+      <YCard
         v-if="app.integration"
         id="app-integration" :title="$t('app.integration.title')"
         collapsable collapsed no-body
       >
         <BListGroup flush>
-          <YunoListGroupItem variant="info">
+          <YListGroupItem variant="info">
             {{ $t('app.integration.archs') }} {{ app.integration.archs }}
-          </YunoListGroupItem>
-          <YunoListGroupItem v-if="app.integration.ldap" :variant="app.integration.ldap === true ? 'success' : 'warning'">
+          </YListGroupItem>
+          <YListGroupItem v-if="app.integration.ldap" :variant="app.integration.ldap === true ? 'success' : 'warning'">
             {{ $t(`app.integration.ldap.${app.integration.ldap}`) }}
-          </YunoListGroupItem>
-          <YunoListGroupItem v-if="app.integration.sso" :variant="app.integration.sso === true ? 'success' : 'warning'">
+          </YListGroupItem>
+          <YListGroupItem v-if="app.integration.sso" :variant="app.integration.sso === true ? 'success' : 'warning'">
             {{ $t(`app.integration.sso.${app.integration.sso}`) }}
-          </YunoListGroupItem>
-          <YunoListGroupItem variant="info">
+          </YListGroupItem>
+          <YListGroupItem variant="info">
             {{ $t(`app.integration.multi_instance.${app.integration.multi_instance}`) }}
-          </YunoListGroupItem>
-          <YunoListGroupItem variant="info">
+          </YListGroupItem>
+          <YListGroupItem variant="info">
             {{ $t('app.integration.resources', app.integration.resources) }}
-          </YunoListGroupItem>
+          </YListGroupItem>
         </BListGroup>
-      </Card>
+      </YCard>
 
-      <Card
+      <YCard
         id="app-links" icon="link" :title="$t('app.links.title')"
         collapsable collapsed no-body
       >
         <template #header>
-          <h2><Icon iname="link" /> {{ $t('app.links.title') }}</h2>
+          <h2><YIcon iname="link" /> {{ $t('app.links.title') }}</h2>
         </template>
 
         <BListGroup flush>
-          <YunoListGroupItem v-for="[key, link] in app.links" :key="key" no-status>
+          <YListGroupItem v-for="[key, link] in app.links" :key="key" no-status>
             <BLink :href="link" target="_blank">
-              <Icon :iname="appLinksIcons(key)" class="mr-1" />
+              <YIcon :iname="appLinksIcons(key)" class="mr-1" />
               {{ $t('app.links.' + key) }}
             </BLink>
-          </YunoListGroupItem>
+          </YListGroupItem>
         </BListGroup>
-      </Card>
+      </YCard>
 
-      <YunoAlert v-if="app.hasWarning" variant="warning" class="my-4">
+      <YAlert v-if="app.hasWarning" variant="warning" class="my-4">
         <h2>{{ $t('app.install.notifs.pre.warning') }}</h2>
 
         <template v-if="app.antifeatures">
@@ -84,7 +84,7 @@
           <dl class="antifeatures">
             <div v-for="antifeature in app.antifeatures" :key="antifeature.id">
               <dt class="d-inline">
-                <Icon :iname="antifeature.icon" class="md mr-1" />
+                <YIcon :iname="antifeature.icon" class="md mr-1" />
                 {{ antifeature.title }}:
               </dt>
               <dd class="d-inline">
@@ -97,9 +97,9 @@
         <p v-if="app.quality.state === 'lowquality'" v-t="'app.install.problems.lowquality'" />
 
         <VueShowdown v-if="app.preInstall" :markdown="app.preInstall" flavor="github" />
-      </YunoAlert>
+      </YAlert>
 
-      <YunoAlert
+      <YAlert
         v-if="!app.hasSupport"
         variant="danger" icon="warning" class="my-4"
       >
@@ -114,9 +114,9 @@
         <p v-if="!app.requirements.required_yunohost_version.pass">
           {{ $t('app.install.problems.version', app.requirements.required_yunohost_version.values) }}
         </p>
-      </YunoAlert>
+      </YAlert>
 
-      <YunoAlert v-else-if="app.hasDanger" variant="danger" class="my-4">
+      <YAlert v-else-if="app.hasDanger" variant="danger" class="my-4">
         <h2>{{ $t('app.install.notifs.pre.danger') }}</h2>
 
         <p v-if="['inprogress', 'broken', 'thirdparty'].includes(app.quality.state)" v-t="'app.install.problems.' + app.quality.state" />
@@ -125,7 +125,7 @@
         </p>
 
         <CheckboxItem v-model="force" id="force-install" :label="$t('app.install.problems.ignore')" />
-      </YunoAlert>
+      </YAlert>
 
       <!-- INSTALL FORM -->
       <CardForm
@@ -145,7 +145,7 @@
 
     <!-- In case of a custom url with no manifest found -->
     <BAlert v-else-if="app === null" variant="warning">
-      <Icon iname="exclamation-triangle" /> {{ $t('app_install_custom_no_manifest') }}
+      <YIcon iname="exclamation-triangle" /> {{ $t('app_install_custom_no_manifest') }}
     </BAlert>
 
     <template #skeleton>
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 601b4c2f..36a415b4 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -9,7 +9,7 @@
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'app-catalog' }">
-        <Icon iname="plus" />
+        <YIcon iname="plus" />
         {{ $t('install') }}
       </BButton>
     </template>
@@ -30,7 +30,7 @@
           </p>
         </div>
 
-        <Icon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewSearch>
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 9bf7ae9c..5d542be8 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -1,7 +1,7 @@
 <template>
   <ViewBase :queries="queries" @queries-response="onQueriesResponse" skeleton="CardListSkeleton">
     <!-- FIXME switch to <CardForm> ? -->
-    <Card :title="$t('backup_create')" icon="archive" no-body>
+    <YCard :title="$t('backup_create')" icon="archive" no-body>
       <BFormCheckboxGroup
         v-model="selected"
         id="backup-select" name="backup-select" size="lg"
@@ -10,7 +10,7 @@
           <!-- SYSTEM HEADER -->
           <BListGroupItem class="d-flex align-items-sm-center flex-column flex-sm-row text-primary">
             <h4 class="m-0">
-              <Icon iname="cube" /> {{ $t('system') }}
+              <YIcon iname="cube" /> {{ $t('system') }}
             </h4>
 
             <div class="ml-sm-auto mt-2 mt-sm-0">
@@ -46,7 +46,7 @@
           <!-- APPS HEADER -->
           <BListGroupItem class="d-flex align-items-sm-center flex-column flex-sm-row text-primary">
             <h4 class="m-0">
-              <Icon iname="cubes" /> {{ $t('applications') }}
+              <YIcon iname="cubes" /> {{ $t('applications') }}
             </h4>
 
             <div class="ml-sm-auto mt-2 mt-sm-0">
@@ -88,7 +88,7 @@
           variant="success" :disabled="selected.length === 0"
         />
       </template>
-    </Card>
+    </YCard>
   </ViewBase>
 </template>
 
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 39733588..ad76836f 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -1,16 +1,16 @@
 <template>
   <ViewBase :queries="queries" @queries-response="onQueriesResponse">
     <!-- BACKUP INFO -->
-    <Card :title="$t('infos')" icon="info-circle" button-unbreak="sm">
+    <YCard :title="$t('infos')" icon="info-circle" button-unbreak="sm">
       <template #header-buttons>
         <!-- DOWNLOAD ARCHIVE -->
         <BButton @click="downloadBackup" size="sm" variant="success">
-          <Icon iname="download" /> {{ $t('download') }}
+          <YIcon iname="download" /> {{ $t('download') }}
         </BButton>
 
         <!-- DELETE ARCHIVE -->
         <BButton @click="deleteBackup" size="sm" variant="danger">
-          <Icon iname="trash-o" /> {{ $t('delete') }}
+          <YIcon iname="trash-o" /> {{ $t('delete') }}
         </BButton>
       </template>
 
@@ -27,11 +27,11 @@
           <span v-else>{{ value }}</span>
         </BCol>
       </BRow>
-    </Card>
+    </YCard>
 
     <!-- BACKUP CONTENT -->
     <!-- FIXME switch to <CardForm> ? -->
-    <Card
+    <YCard
       :title="$t('backup_content')" icon="archive"
       no-body button-unbreak="sm"
     >
@@ -96,7 +96,7 @@
       </BFormCheckboxGroup>
 
       <div v-else class="alert alert-warning mb-0">
-        <Icon iname="exclamation-triangle" /> {{ $t('archive_empty') }}
+        <YIcon iname="exclamation-triangle" /> {{ $t('archive_empty') }}
       </div>
 
       <!-- SUBMIT -->
@@ -106,7 +106,7 @@
           v-t="'restore'" :disabled="selected.length === 0"
         />
       </template>
-    </Card>
+    </YCard>
 
     <template #skeleton>
       <CardInfoSkeleton :item-count="4" />
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index bc7ddaf6..d6b3d035 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -5,7 +5,7 @@
     </template>
 
     <BAlert v-if="!archives" variant="warning">
-      <Icon iname="exclamation-triangle" />
+      <YIcon iname="exclamation-triangle" />
       {{ $tc('items_verbose_count', 0, { items: $tc('items.backups', 0) }) }}
     </BAlert>
 
@@ -25,7 +25,7 @@
             {{ path }}
           </p>
         </div>
-        <Icon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewBase>
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index ad5b8fd9..2f00d7fe 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -15,7 +15,7 @@
             {{ uri }}
           </p>
         </div>
-        <Icon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
       </BListGroupItem>
     </BListGroup>
   </div>
@@ -23,7 +23,7 @@
 
 <script>
 export default {
-  name: 'Backup',
+  name: 'BackupView',
 
   data () {
     return {
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 84a0d0e1..a30412d3 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -5,7 +5,7 @@
   >
     <template #top-bar-group-right>
       <BButton @click="shareLogs" variant="success">
-        <Icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
+        <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
       </BButton>
     </template>
 
@@ -16,13 +16,13 @@
           v-if="reports === null" class="d-block mt-2" variant="info"
           @click="runDiagnosis()"
         >
-          <Icon iname="stethoscope" /> {{ $t('run_first_diagnosis') }}
+          <YIcon iname="stethoscope" /> {{ $t('run_first_diagnosis') }}
         </BButton>
       </div>
     </template>
 
     <!-- REPORT CARD -->
-    <Card
+    <YCard
       v-for="report in reports" :key="report.id"
       collapsable :collapsed="report.noIssues"
       no-body button-unbreak="lg"
@@ -41,7 +41,7 @@
 
       <template #header-buttons>
         <BButton size="sm" :variant="report.items ? 'info' : 'success'" @click="runDiagnosis(report)">
-          <Icon iname="refresh" /> {{ $t('rerun_diagnosis') }}
+          <YIcon iname="refresh" /> {{ $t('rerun_diagnosis') }}
         </BButton>
       </template>
 
@@ -52,7 +52,7 @@
 
       <BListGroup flush>
         <!-- REPORT ITEM -->
-        <YunoListGroupItem
+        <YListGroupItem
           v-for="(item, i) in report.items" :key="i"
           :variant="item.variant" :Icon="item.Icon" :faded="item.ignored"
         >
@@ -64,13 +64,13 @@
                 v-if="item.ignored" size="sm"
                 @click="toggleIgnoreIssue('unignore', report, item)"
               >
-                <Icon iname="bell" /> {{ $t('unignore') }}
+                <YIcon iname="bell" /> {{ $t('unignore') }}
               </BButton>
               <BButton
                 v-else-if="item.issue" variant="warning" size="sm"
                 @click="toggleIgnoreIssue('ignore', report, item)"
               >
-                <Icon iname="bell-slash" /> {{ $t('ignore') }}
+                <YIcon iname="bell-slash" /> {{ $t('ignore') }}
               </BButton>
 
               <BButton
@@ -78,7 +78,7 @@
                 size="sm" variant="outline-dark" class="ml-lg-2 mt-2 mt-lg-0"
                 v-b-toggle="`collapse-${report.id}-item-${i}`"
               >
-                <Icon iname="level-down" /> {{ $t('details') }}
+                <YIcon iname="level-down" /> {{ $t('details') }}
               </BButton>
             </div>
           </div>
@@ -88,9 +88,9 @@
               <li v-for="(detail, index) in item.details" :key="index" v-html="detail" />
             </ul>
           </BCollapse>
-        </YunoListGroupItem>
+        </YListGroupItem>
       </BListGroup>
-    </Card>
+    </YCard>
 
     <template #skeleton>
       <CardListSkeleton />
@@ -112,7 +112,7 @@ import { distanceToNow } from '@/helpers/filters/date'
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  name: 'Diagnosis',
+  name: 'DiagnosisView',
 
   data () {
     return {
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index dabf6d83..f5248dfe 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -27,7 +27,7 @@
               class="records px-2" :class="{ 'ignored': managed_by_yunohost === false && force !== true }"
               :title="managed_by_yunohost === false && force !== true ? $t('domain.dns.auto_config_ignored') : null"
             >
-              <Icon :iname="icon" :class="'text-' + variant" />
+              <YIcon :iname="icon" :class="'text-' + variant" />
               {{ record }}
               <span class="bg-dark text-light px-1 rounded">{{ type }}</span>{{ spaces }}
               <span v-if="old_content"><span class="text-danger">{{ old_content }}</span> --> </span>
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index a1a1aa73..14cef93e 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -4,7 +4,7 @@
     ref="view" skeleton="CardListSkeleton"
   >
     <!-- INFO CARD -->
-    <Card v-if="domain" :title="name" icon="globe">
+    <YCard v-if="domain" :title="name" icon="globe">
       <template v-if="isMainDomain" #header-next>
         <BBadge variant="info" class="main-domain-badge">
           <ExplainWhat
@@ -12,7 +12,7 @@
             :title="$t('domain.types.main_domain')"
             :content="$t('domain.explain.main_domain', { domain: name })"
           >
-            <Icon iname="star" /> {{ $t('domain.types.main_domain') }}
+            <YIcon iname="star" /> {{ $t('domain.types.main_domain') }}
           </ExplainWhat>
         </BBadge>
       </template>
@@ -20,12 +20,12 @@
       <template #header-buttons>
         <!-- DEFAULT DOMAIN -->
         <BButton v-if="!isMainDomain" @click="setAsDefaultDomain" variant="info">
-          <Icon iname="star" /> {{ $t('set_default') }}
+          <YIcon iname="star" /> {{ $t('set_default') }}
         </BButton>
 
         <!-- DELETE DOMAIN -->
         <BButton v-b-modal.delete-modal :disabled="isMainDomain" variant="danger">
-          <Icon iname="trash-o" /> {{ $t('delete') }}
+          <YIcon iname="trash-o" /> {{ $t('delete') }}
         </BButton>
       </template>
 
@@ -38,7 +38,7 @@
 
       <!-- DOMAIN CERT AUTHORITY -->
       <DescriptionRow :term="$t('domain.info.certificate_authority')">
-        <Icon :iname="cert.icon" :variant="cert.variant" class="mr-1" />
+        <YIcon :iname="cert.icon" :variant="cert.variant" class="mr-1" />
         {{ $t('domain.cert.types.' + cert.authority) }}
         <span class="text-secondary px-2">({{ $t('domain.cert.valid_for', { days: $tc('day_validity', cert.validity) }) }})</span>
       </DescriptionRow>
@@ -70,14 +70,14 @@
               :href="'https://' + name + app.path" target="_blank"
             >
               <span class="sr-only">{{ $t('app.visit_app') }}</span>
-              <Icon iname="external-link" />
+              <YIcon iname="external-link" />
             </BButton>
           </BButton-group>
 
           {{ domain.apps.length ? '' : $t('words.none') }}
         </div>
       </DescriptionRow>
-    </Card>
+    </YCard>
 
     <ConfigPanels v-if="config.panels" v-bind="config" @submit="onConfigSubmit">
       <template v-if="currentTab === 'dns'" #tab-after>
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 1718fb67..f1657a9a 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -10,7 +10,7 @@
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'domain-add' }">
-        <Icon iname="plus" />
+        <YIcon iname="plus" />
         {{ $t('domain_add') }}
       </BButton>
     </template>
@@ -29,7 +29,7 @@
               :title="$t('domain.types.main_domain')" class="ml-1"
               v-b-tooltip.hover
             >
-              <Icon iname="star" />
+              <YIcon iname="star" />
             </small>
           </h5>
         </div>
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index f1ae4452..b99d8cd4 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -10,12 +10,12 @@
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'group-create' }">
-        <Icon iname="plus" /> {{ $t('group_new') }}
+        <YIcon iname="plus" /> {{ $t('group_new') }}
       </BButton>
     </template>
 
     <!-- PRIMARY GROUPS CARDS -->
-    <Card
+    <YCard
       v-for="(group, groupName) in filteredGroups" :key="groupName" collapsable
       :title="group.isSpecial ? $t('group_' + groupName) : `${$t('group')} '${groupName}'`" icon="group"
     >
@@ -25,7 +25,7 @@
           v-if="!group.isSpecial" @click="deleteGroup(groupName)"
           size="sm" variant="danger"
         >
-          <Icon iname="trash-o" /> {{ $t('delete') }}
+          <YIcon iname="trash-o" /> {{ $t('delete') }}
         </BButton>
       </template>
 
@@ -37,7 +37,7 @@
         <BCol>
           <template v-if="group.isSpecial">
             <p class="text-primary">
-              <Icon iname="info-circle" /> {{ $t('group_explain_' + groupName) }}
+              <YIcon iname="info-circle" /> {{ $t('group_explain_' + groupName) }}
             </p>
             <p class="text-primary" v-if="groupName === 'visitors'">
               <em>{{ $t('group_explain_visitors_needed_for_external_client') }}</em>
@@ -69,10 +69,10 @@
           />
         </BCol>
       </BRow>
-    </Card>
+    </YCard>
 
     <!-- USER GROUPS CARD -->
-    <Card
+    <YCard
       v-if="userGroups" collapsable
       :title="$t('group_specific_permissions')" icon="group"
     >
@@ -100,7 +100,7 @@
         no-tags items-name="users"
         @tag-update="onSpecificUserAdded"
       />
-    </Card>
+    </YCard>
   </ViewSearch>
 </template>
 
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index 81bc301c..6dfcc0d8 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -4,23 +4,23 @@
     ref="view" skeleton="CardInfoSkeleton"
   >
     <!-- INFO CARD -->
-    <Card :title="name" icon="info-circle" button-unbreak="sm">
+    <YCard :title="name" icon="info-circle" button-unbreak="sm">
       <template #header-buttons>
         <template v-if="infos.status === 'running'">
           <!-- RESTART SERVICE -->
           <BButton @click="updateService('restart')" variant="warning">
-            <Icon iname="refresh" /> {{ $t('restart') }}
+            <YIcon iname="refresh" /> {{ $t('restart') }}
           </BButton>
 
           <!-- STOP SERVICE -->
           <BButton v-if="!isCritical" @click="updateService('stop')" variant="danger">
-            <Icon iname="warning" /> {{ $t('stop') }}
+            <YIcon iname="warning" /> {{ $t('stop') }}
           </BButton>
         </template>
 
         <!-- START SERVICE -->
         <BButton v-else @click="updateService('start')" variant="success">
-          <Icon iname="play" /> {{ $t('start') }}
+          <YIcon iname="play" /> {{ $t('start') }}
         </BButton>
       </template>
 
@@ -34,7 +34,7 @@
         <BCol>
           <template v-if="key === 'status'">
             <span :class="value === 'running' ? 'text-success' : 'text-danger'">
-              <Icon :iname="value === 'running' ? 'check-circle' : 'times'" />
+              <YIcon :iname="value === 'running' ? 'check-circle' : 'times'" />
               {{ $t(value) }}
             </span>
             {{ $t('since') }} {{ uptime | distanceToNow }}
@@ -47,13 +47,13 @@
           <span v-else v-t="value" />
         </BCol>
       </BRow>
-    </Card>
+    </YCard>
 
     <!-- LOGS CARD -->
-    <Card :title="$t('logs')" icon="book" button-unbreak="sm">
+    <YCard :title="$t('logs')" icon="book" button-unbreak="sm">
       <template #header-buttons>
         <BButton variant="success" @click="shareLogs">
-          <Icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
+          <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
         </BButton>
       </template>
 
@@ -64,7 +64,7 @@
 
         <pre :key="i + '-content'" class="log"><code>{{ content }}</code></pre>
       </template>
-    </Card>
+    </YCard>
   </ViewBase>
 </template>
 
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 987841bb..ce771b2b 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -21,14 +21,14 @@
           </h5>
           <p class="m-0">
             <span :class="status === 'running' ? 'text-success' : 'text-danger'">
-              <Icon :iname="status === 'running' ? 'check-circle' : 'times'" />
+              <YIcon :iname="status === 'running' ? 'check-circle' : 'times'" />
               {{ $t(status) }}
             </span>
             {{ $t('since') }} {{ last_state_change | distanceToNow }}
           </p>
         </div>
 
-        <Icon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewSearch>
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 3bf98233..0f8fc9f4 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -4,7 +4,7 @@
     ref="view" skeleton="CardFormSkeleton"
   >
     <!-- PORTS -->
-    <Card :title="$t('ports')" icon="shield">
+    <YCard :title="$t('ports')" icon="shield">
       <div v-for="(items, protocol) in protocols" :key="protocol">
         <h5>{{ $t(protocol) }}</h5>
 
@@ -31,7 +31,7 @@
               </span>
             </BFormCheckbox>
 
-            <Icon
+            <YIcon
               v-else
               :iname="data.value ? 'check' : 'times'"
               :class="data.value ? 'text-success' : 'text-danger'"
@@ -39,7 +39,7 @@
           </template>
         </BTable>
       </div>
-    </Card>
+    </YCard>
 
     <!-- OPERATIONS -->
     <CardForm
@@ -71,7 +71,7 @@
     </CardForm>
 
     <!-- UPnP -->
-    <Card :title="$t('upnp')" icon="exchange" :body-text-variant="upnpEnabled ? 'success' : 'danger'">
+    <YCard :title="$t('upnp')" icon="exchange" :body-text-variant="upnpEnabled ? 'success' : 'danger'">
       {{ $t(upnpEnabled ? 'upnp_enabled' : 'upnp_disabled' ) }}
 
       <BFormInvalidFeedback :state="upnpError !== '' ? false : null">
@@ -83,7 +83,7 @@
           {{ $t(!upnpEnabled ? 'enable' : 'disable' ) }}
         </BButton>
       </template>
-    </Card>
+    </YCard>
   </ViewBase>
 </template>
 
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index d081dcaa..d4419c71 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/app/src/views/tool/ToolList.vue
@@ -1,4 +1,4 @@
-<!-- FIXME make a component shared with Home.vue ? -->
+<!-- FIXME make a component shared with HomeView.vue ? -->
 <template>
   <BListGroup class="menu-list">
     <BListGroupItem
@@ -6,9 +6,9 @@
       :key="item.routeName"
       :to="{name: item.routeName}"
     >
-      <Icon :iname="item.icon" class="lg ml-1" />
+      <YIcon :iname="item.icon" class="lg ml-1" />
       <h4>{{ $t(item.translation) }}</h4>
-      <Icon iname="chevron-right" class="lg fs-sm ml-auto" />
+      <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
     </BListGroupItem>
   </BListGroup>
 </template>
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 87f19abc..b211e122 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -4,7 +4,7 @@
     ref="view" skeleton="CardInfoSkeleton"
   >
     <!-- INFO CARD -->
-    <Card :title="description" icon="info-circle">
+    <YCard :title="description" icon="info-circle">
       <BRow
         v-for="(value, prop) in info" :key="prop"
         no-gutters class="row-line"
@@ -18,7 +18,7 @@
 
           <div v-else-if="prop === 'suboperations'">
             <div v-for="operation in value" :key="operation.name">
-              <Icon v-if="operation.success !== true" iname="times" class="text-danger" />
+              <YIcon v-if="operation.success !== true" iname="times" class="text-danger" />
               <BLink :to="{ name: 'tool-log', params: { name: operation.name } }">
                 {{ operation.description }}
               </BLink>
@@ -28,17 +28,17 @@
           <span v-else>{{ value }}</span>
         </BCol>
       </BRow>
-    </Card>
+    </YCard>
 
     <div v-if="info.error" class="alert alert-danger my-5">
-      <Icon iname="exclamation-circle" /> <span v-html="$t('operation_failed_explanation')" />
+      <YIcon iname="exclamation-circle" /> <span v-html="$t('operation_failed_explanation')" />
     </div>
 
     <!-- LOGS CARD -->
-    <Card :title="$t('logs')" icon="file-text" no-body>
+    <YCard :title="$t('logs')" icon="file-text" no-body>
       <template #header-buttons>
         <BButton @click="shareLogs" variant="success">
-          <Icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
+          <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
         </BButton>
       </template>
 
@@ -47,14 +47,14 @@
         variant="white" class="w-100 rounded-0"
         @click="$refs.view.fetchQueries()"
       >
-        <Icon iname="plus" /> {{ $t('logs_more') }}
+        <YIcon iname="plus" /> {{ $t('logs_more') }}
       </BButton>
 
       <pre class="log unselectable"><code v-html="logs" /></pre>
       <BButton @click="shareLogs" variant="success" class="w-100 rounded-0">
-        <Icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
+        <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
       </BButton>
-    </Card>
+    </YCard>
 
 
     <p class="w-100 px-5 py-2 mb-0" v-html="$t('text_selection_is_disabled')" />
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index dbde52c7..350881f2 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -8,7 +8,7 @@
     @queries-response="onQueriesResponse"
     skeleton="CardListSkeleton"
   >
-    <Card :title="$t('logs_operation')" icon="wrench" no-body>
+    <YCard :title="$t('logs_operation')" icon="wrench" no-body>
       <BListGroup flush>
         <BListGroupItem
           v-for="log in filteredOperations" :key="log.name"
@@ -16,11 +16,11 @@
           :title="log.started_at | readableDate"
         >
           <small class="mr-3">{{ log.started_at | distanceToNow }} </small>
-          <Icon :iname="log.icon" :class="'text-' + log.class" />
+          <YIcon :iname="log.icon" :class="'text-' + log.class" />
           {{ log.description }}
         </BListGroupItem>
       </BListGroup>
-    </Card>
+    </YCard>
   </ViewSearch>
 </template>
 
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index c88fc361..d2e813ab 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -1,16 +1,16 @@
 <template>
   <ViewBase :queries="queries" @queries-response="onQueriesResponse" ref="view">
     <!-- PENDING MIGRATIONS -->
-    <Card :title="$t('migrations_pending')" icon="cogs" no-body>
+    <YCard :title="$t('migrations_pending')" icon="cogs" no-body>
       <template #header-buttons v-if="pending">
         <BButton size="sm" variant="success" @click="runMigrations">
-          <Icon iname="play" /> {{ $t('run') }}
+          <YIcon iname="play" /> {{ $t('run') }}
         </BButton>
       </template>
 
       <BCardBody v-if="pending === null">
         <span class="text-success">
-          <Icon iname="check-circle" /> {{ $t('migrations_no_pending') }}
+          <YIcon iname="check-circle" /> {{ $t('migrations_no_pending') }}
         </span>
       </BCardBody>
 
@@ -23,7 +23,7 @@
 
             <div class="ml-auto">
               <BButton @click="skipMigration(id)" size="sm" variant="warning">
-                <Icon iname="close" /> {{ $t('skip') }}
+                <YIcon iname="close" /> {{ $t('skip') }}
               </BButton>
             </div>
           </div>
@@ -49,16 +49,16 @@
           </template>
         </BListGroupItem>
       </BListGroup>
-    </Card>
+    </YCard>
 
     <!-- DONE MIGRATIONS -->
-    <Card
+    <YCard
       :title="$t('migrations_done')" icon="cogs"
       collapsable collapsed no-body
     >
       <BCardBody v-if="done === null">
         <span class="text-success">
-          <Icon iname="check-circle" /> {{ $t('migrations_no_done') }}
+          <YIcon iname="check-circle" /> {{ $t('migrations_no_done') }}
         </span>
       </BCardBody>
 
@@ -67,7 +67,7 @@
           {{ number }}. {{ description }}
         </BListGroupItem>
       </BListGroup>
-    </Card>
+    </YCard>
 
     <template #skeleton>
       <CardListSkeleton :item-count="3" />
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index 1cb57334..a3211acd 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -1,12 +1,12 @@
 <template>
-  <Card :title="$t('operations')" icon="wrench">
+  <YCard :title="$t('operations')" icon="wrench">
     <!-- REBOOT -->
     <BFormGroup
       label-cols="5" label-cols-md="4" label-cols-lg="3"
       :label="$t('tools_reboot')" label-for="reboot"
     >
       <BButton @click="triggerAction('reboot')" variant="danger" id="reboot">
-        <Icon iname="refresh" /> {{ $t('tools_reboot_btn') }}
+        <YIcon iname="refresh" /> {{ $t('tools_reboot_btn') }}
       </BButton>
     </BFormGroup>
     <hr>
@@ -17,10 +17,10 @@
       :label="$t('tools_shutdown')" label-for="shutdown"
     >
       <BButton @click="triggerAction('shutdown')" variant="danger" id="shutdown">
-        <Icon iname="power-off" /> {{ $t('tools_shutdown_btn') }}
+        <YIcon iname="power-off" /> {{ $t('tools_shutdown_btn') }}
       </BButton>
     </BFormGroup>
-  </Card>
+  </YCard>
 </template>
 
 <script>
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 9db18cf3..ba90fe76 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -4,17 +4,17 @@
     skeleton="CardListSkeleton"
   >
     <!-- MIGRATIONS WARN -->
-    <YunoAlert v-if="pendingMigrations" variant="warning" alert>
+    <YAlert v-if="pendingMigrations" variant="warning" alert>
       <span v-html="$t('pending_migrations')" />
-    </YunoAlert>
+    </YAlert>
 
     <!-- MAJOR YUNOHOST UPGRADE WARN -->
-    <YunoAlert v-if="importantYunohostUpgrade" variant="warning" alert>
+    <YAlert v-if="importantYunohostUpgrade" variant="warning" alert>
       <span v-html="$t('important_yunohost_upgrade')" />
-    </YunoAlert>
+    </YAlert>
 
     <!-- SYSTEM UPGRADE -->
-    <Card :title="$t('system')" icon="server" no-body>
+    <YCard :title="$t('system')" icon="server" no-body>
       <BListGroup v-if="system" flush>
         <BListGroupItem v-for="{ name, current_version, new_version } in system" :key="name">
           <h5 class="m-0">
@@ -25,7 +25,7 @@
       </BListGroup>
 
       <BCardBody v-else-if="system === null">
-        <span class="text-success"><Icon iname="check-circle" /> {{ $t('system_packages_nothing') }}</span>
+        <span class="text-success"><YIcon iname="check-circle" /> {{ $t('system_packages_nothing') }}</span>
       </BCardBody>
 
       <template #buttons v-if="system">
@@ -34,10 +34,10 @@
           @click="performSystemUpgrade()"
         />
       </template>
-    </Card>
+    </YCard>
 
     <!-- APPS UPGRADE -->
-    <Card :title="$t('applications')" icon="cubes" no-body>
+    <YCard :title="$t('applications')" icon="cubes" no-body>
       <BListGroup v-if="apps" flush>
         <BListGroupItem
           v-for="{ name, id, current_version, new_version } in apps" :key="id"
@@ -56,7 +56,7 @@
       </BListGroup>
 
       <BCardBody v-else-if="apps === null">
-        <span class="text-success"><Icon iname="check-circle" /> {{ $t('system_apps_nothing') }}</span>
+        <span class="text-success"><YIcon iname="check-circle" /> {{ $t('system_apps_nothing') }}</span>
       </BCardBody>
 
       <template #buttons v-if="apps">
@@ -65,7 +65,7 @@
           @click="confirmAppsUpgrade()"
         />
       </template>
-    </Card>
+    </YCard>
 
     <BModal
       id="apps-pre-upgrade"
@@ -90,9 +90,9 @@
           {{ $t('app.upgrade.notifs.pre.title') }}
         </h3>
 
-        <YunoAlert variant="warning">
+        <YAlert variant="warning">
           {{ $t('app.upgrade.notifs.pre.alert' ) }}
-        </YunoAlert>
+        </YAlert>
 
         <div class="card-collapse-wrapper">
           <CardCollapse
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index de676197..a09200b1 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -47,13 +47,13 @@
           </FormField>
 
           <BButton variant="danger" @click="removeEmailField('aliases', i)">
-            <Icon :title="$t('delete')" iname="trash-o" />
+            <YIcon :title="$t('delete')" iname="trash-o" />
             <span class="sr-only">{{ $t('delete') }}</span>
           </BButton>
         </div>
 
         <BButton variant="success" @click="addEmailField('aliases')">
-          <Icon iname="plus" /> {{ $t('user_emailaliases_add') }}
+          <YIcon iname="plus" /> {{ $t('user_emailaliases_add') }}
         </BButton>
       </FormField>
 
@@ -70,13 +70,13 @@
           />
 
           <BButton variant="danger" @click="removeEmailField('forward', i)">
-            <Icon :title="$t('delete')" iname="trash-o" />
+            <YIcon :title="$t('delete')" iname="trash-o" />
             <span class="sr-only">{{ $t('delete') }}</span>
           </BButton>
         </div>
 
         <BButton variant="success" @click="addEmailField('forward')">
-          <Icon iname="plus" /> {{ $t('user_emailforward_add') }}
+          <YIcon iname="plus" /> {{ $t('user_emailforward_add') }}
         </BButton>
       </FormField>
       <hr>
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index ff60b79a..ccb1f12f 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -1,8 +1,8 @@
 <template>
   <ViewBase :queries="queries" skeleton="CardInfoSkeleton">
-    <Card v-if="user" :title="user.fullname" icon="user">
+    <YCard v-if="user" :title="user.fullname" icon="user">
       <div class="d-flex align-items-center flex-column flex-md-row">
-        <Icon iname="user" class="fa-fw" />
+        <YIcon iname="user" class="fa-fw" />
 
         <div class="w-100">
           <BRow>
@@ -47,16 +47,16 @@
 
       <template #buttons>
         <BButton :to="{ name: 'user-edit', params: { user } }" :variant="user ? 'info' : 'dark'">
-          <Icon iname="edit" />
+          <YIcon iname="edit" />
           {{ user ? $t('user_username_edit', {name: user.username}) : '' }}
         </BButton>
 
         <BButton v-b-modal.delete-modal :variant="user ? 'danger' : 'dark'">
-          <Icon iname="trash-o" />
+          <YIcon iname="trash-o" />
           {{ user ? $t('delete') : '' }}
         </BButton>
       </template>
-    </Card>
+    </YCard>
 
     <BModal
       v-if="user"
@@ -70,7 +70,7 @@
 
         <template #description>
           <div class="alert alert-warning">
-            <Icon iname="exclamation-triangle" /> {{ $t('purge_user_data_warning') }}
+            <YIcon iname="exclamation-triangle" /> {{ $t('purge_user_data_warning') }}
           </div>
         </template>
       </BFormGroup>
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 00cce32c..d7a07038 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -8,7 +8,7 @@
   >
     <template #top-bar-buttons>
       <BButton variant="info" :to="{ name: 'group-list' }">
-        <Icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
+        <YIcon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
       </BButton>
 
       <BDropdown
@@ -17,13 +17,13 @@
         split-variant="success"
       >
         <template #button-content>
-          <Icon iname="plus" /> {{ $t('users_new') }}
+          <YIcon iname="plus" /> {{ $t('users_new') }}
         </template>
         <BDropdownItem :to="{ name: 'user-import' }">
-          <Icon iname="plus" /> {{ $t('users_import') }}
+          <YIcon iname="plus" /> {{ $t('users_import') }}
         </BDropdownItem>
         <BDropdownItem @click="downloadExport">
-          <Icon iname="download" /> {{ $t('users_export') }}
+          <YIcon iname="download" /> {{ $t('users_export') }}
         </BDropdownItem>
       </BDropdown>
     </template>
@@ -43,7 +43,7 @@
             {{ user.mail }}
           </p>
         </div>
-        <Icon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewSearch>