From a0eabf36a821eccdcd4ede398ce5e78b1780298d Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Tue, 14 Jul 2020 19:48:16 +0200
Subject: [PATCH] update icon to display at small size by default

---
 app/src/App.vue                     | 14 +++++++-------
 app/src/components/globals/Icon.vue | 11 ++++++-----
 app/src/views/Home.vue              |  4 ++--
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 02f91065..96d99d5c 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -6,12 +6,12 @@
                 <b-navbar-nav class="ml-auto">
                     <li class="nav-item">
                         <b-button href="/yunohost/sso" variant="primary" block size="sm">
-                            {{ $t('user_interface_link') }} <icon iname="user" class="sm"/>
+                            {{ $t('user_interface_link') }} <icon iname="user"/>
                         </b-button>
                     </li>
                     <li class="nav-item" v-show="connected">
                         <b-button @click.prevent="logout" to="/logout" variant="outline-dark" block size="sm" >
-                            {{ $t('logout') }} <icon iname="sign-out" class="sm"/>
+                            {{ $t('logout') }} <icon iname="sign-out"/>
                         </b-button>
                     </li>
                 </b-navbar-nav>
@@ -26,13 +26,13 @@
             <nav>
                 <b-nav>
                     <b-nav-item href="https://yunohost.org/docs" target="_blank" link-classes='text-secondary'>
-                        <icon iname="book" class="sm"/> Documentation
+                        <icon iname="book"/> Documentation
                     </b-nav-item>
                     <b-nav-item href="https://yunohost.org/help" target="_blank" link-classes='text-secondary'>
-                        <icon iname="life-ring" class="sm"/> Need help?
+                        <icon iname="life-ring"/> Need help?
                     </b-nav-item>
                     <b-nav-item href="https://donate.yunohost.org/" target="_blank" link-classes='text-secondary'>
-                        <icon iname="heart" class="sm"/> Donate
+                        <icon iname="heart"/> Donate
                     </b-nav-item>
                     <i18n v-if="yunohostInfos" path="footer_version" tag="b-nav-text" class="ml-auto" id="yunohost-version">
                         <template v-slot:ynh><b-link href="https://yunohost.org">YunoHost</b-link></template>
@@ -103,7 +103,7 @@ export default {
 header {
     border-bottom: 1px solid #eee;
     margin-top: 1rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
 
     .navbar {
         padding: 1rem 0;
@@ -133,7 +133,7 @@ footer {
     margin-top: 2rem;
 
     .nav-item {
-        &:not(:first-child) a::before {
+        & + .nav-item a::before {
             content: "•";
             width: 1rem;
             display: inline-block;
diff --git a/app/src/components/globals/Icon.vue b/app/src/components/globals/Icon.vue
index 3dde98ed..3101465b 100644
--- a/app/src/components/globals/Icon.vue
+++ b/app/src/components/globals/Icon.vue
@@ -11,12 +11,13 @@ export default {
 
 <style lang="scss" scoped>
 .icon {
-    font-size: 1.5rem;
-    width: 3rem;
+    font-size: 1rem;
+    width: 1rem;
+    text-align: center;
 
-    &.sm {
-        width: 1rem;
-        font-size: 1rem;
+    &.lg {
+        width: 3rem;
+        font-size: 1.5rem;
     }
 
     &.fs-sm {
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 253af3c4..f4ef4cd3 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -2,9 +2,9 @@
     <div class="home">
         <b-list-group>
             <b-list-group-item v-for="item in menu" :key="item.id" :to="item.uri">
-                <icon :iname="item.icon" class="fa-fw"/>
+                <icon :iname="item.icon" class="lg"/>
                 <h2>{{ $t(item.translation) }}</h2>
-                <icon iname="chevron-right" class="fa-fw fs-sm ml-auto"/>
+                <icon iname="chevron-right" class="lg fs-sm ml-auto"/>
             </b-list-group-item>
         </b-list-group>
     </div>