add icon component & add global import of some components

app/src/App.vue

@@ -5,10 +5,14 @@
                 <b-navbar-brand to="/" exact exact-active-class="active"><img alt="Yunohost logo" src="./assets/logo.png"></b-navbar-brand>
                 <b-navbar-nav class="ml-auto">
                     <li class="nav-item">
-                        <b-button href="/yunohost/sso" variant="primary" block size="sm">{{ $t('user_interface_link') }}</b-button>
+                        <b-button href="/yunohost/sso" variant="primary" block size="sm">
+                            {{ $t('user_interface_link') }} <icon iname="user" class="sm"/>
+                        </b-button>
                     </li>
                     <li class="nav-item">
-                        <b-button to="/logout" variant="outline-dark" block size="sm">{{ $t('logout') }}</b-button>
+                        <b-button to="/logout" variant="outline-dark" block size="sm">
+                            {{ $t('logout') }} <icon iname="sign-out" class="sm"/>
+                        </b-button>
                     </li>
                 </b-navbar-nav>
             </b-navbar>
@@ -21,9 +25,15 @@
         <footer>
             <nav>
                 <b-nav>
-                    <b-nav-item href="https://yunohost.org/docs" target="_blank" link-classes='text-secondary'>Documentation</b-nav-item>
+                    <b-nav-item href="https://yunohost.org/docs" target="_blank" link-classes='text-secondary'>
-                    <b-nav-item href="https://yunohost.org/help" target="_blank" link-classes='text-secondary'>Need help?</b-nav-item>
+                        <icon iname="book" class="sm"/> Documentation
-                    <b-nav-item href="https://donate.yunohost.org/" target="_blank" link-classes='text-secondary'>Donate</b-nav-item>
+                    </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?
+                    </b-nav-item>
+                    <b-nav-item href="https://donate.yunohost.org/" target="_blank" link-classes='text-secondary'>
+                        <icon iname="heart" class="sm"/> Donate
+                    </b-nav-item>
                     <b-nav-text class="ml-auto" id="yunohost-version">version</b-nav-text>
                 </b-nav>
             </nav>
@@ -52,9 +62,13 @@ header {
             li {
                 margin: .2rem 0;
             }
+            icon {
+                margin-left: .5rem;
             }
         }
     }
+}
+
 
 footer {
     padding: 1rem 0;

app/src/components/ListGroupItem.vue

@@ -1,8 +1,8 @@
 <template>
-    <b-list-group-item v-bind:href="uri">
+    <b-list-group-item v-bind:to="uri">
-        <span v-bind:class="'fa fa-fw fa-' + icon" aria-hidden="true"></span>
+        <icon v-bind:iname="icon" class="fa-fw"/>
         <h2><slot></slot></h2>
-        <span class="fa fa-fw fa-chevron-right ml-auto"></span>
+        <icon iname="chevron-right" class="fa-fw fs-sm ml-auto"/>
     </b-list-group-item>
 </template>
 
@@ -15,27 +15,16 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .list-group-item {
-        padding: 0;
+    padding: 0.75rem 0;
     display: flex;
     align-items: center;
 }
-    .list-group-item-action {
+
-        color: #333;
-    }
 h2 {
     font-size: 1.25rem;
     font-weight: 400;
     margin: 0;
 }
-    span.fa {
-        font-size: 1.5rem;
-        width: 3rem;
-        line-height: 3rem;
-
-        &.fa-chevron-right {
-            font-size: 1rem;
-        }
-    }
 </style>

app/src/components/globals/Icon.vue

@@ -0,0 +1,28 @@
+<template>
+    <span v-bind:class="'icon fa fa-' + iname" aria-hidden="true"></span>
+</template>
+
+<script>
+export default {
+    name: 'icon',
+    props: {
+        iname: String,
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon {
+    font-size: 1.5rem;
+    width: 3rem;
+
+    &.sm {
+        width: 1rem;
+        font-size: 1rem;
+    }
+
+    &.fs-sm {
+        font-size: 1rem;
+    }
+}
+</style>

app/src/components/globals/index.js

@@ -0,0 +1 @@
+export {default as Icon} from './Icon'

app/src/main.js

@@ -4,11 +4,19 @@ import './plugins/bootstrap-vue'
 import i18n from './plugins/i18n'
 import router from './plugins/router'
 
+import * as globalsComponents from './components/globals'
+
 
 Vue.config.productionTip = false
 
+// Register global components
+for (let component of Object.values(globalsComponents)) {
+     Vue.component(component.name, component)
+}
+
+
 new Vue({
     i18n,
     router,
-    render: h => h(App)
+    render: h => h(App),
 }).$mount('#app')

app/src/scss/_variables.scss

@@ -1,7 +1,35 @@
-// Bootstrap and BootstrapVue variable may be overrides here. Full list available here:
+/*
-// Bootstrap: `app/node_modules/bootstrap/scss/_variables.scss`
+
-// BootstrapVue: `app/node_modules/bootstrap-vue/src/_variables.scss`
+  ╭─────────────────────────────╮
+  │ ┌─╮╭─╮╭─╮╶┬╴╭─╴╶┬╴┌─╮╭─┐┌─╮ │
+  │ │╶┤│ ││ │ │ ╰─╮ │ ├┬╯├─┤├─╯ │
+  │ └─╯╰─╯╰─╯ ╵ ╶─╯ ╵ ╵ ╰╵ ╵╵   │
+  ╰─────────────────────────────╯
+
+  Bootstrap and BootstrapVue overrides.
+  Bootstrap default: `app/node_modules/bootstrap/scss/_variables.scss`
+  BootstrapVue default: `app/node_modules/bootstrap-vue/src/_variables.scss`
+
+*/
+
+// TODO: add a feature so the user can set some css variables to change the global aspects ?
+// For exemple, turning rounding of elements off, the bases colors, etc.
+// $enable-rounded: false;
+
+
+
+/*
+
+  ╭──────────────────────────────────────╮
+  │ ┌─╴╭─╮┌─╮╷ ╭   ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
+  │ ├─╴│ │├┬╯├┴╮╶─╴├─┤│││├─╴╰─╮│ ││││├─╴ │
+  │ ╵  ╰─╯╵ ╰╵ ╵   ╵ ╵╰╯╯╰─╴╶─╯╰─╯╵╵╵╰─╴ │
+  ╰──────────────────────────────────────╯
+
+  Fork-awesome variable overrides.
+  default: `app/node_modules/fork-awesome/scss/_variables.scss`
+
+*/
 
-// fork-awesome font location
 $fa-font-path: '~fork-awesome/fonts';
 $fa-font-size-base: 1rem;

app/src/scss/main.scss

@@ -1,23 +1,34 @@
 // This is the default scss file, more specific styling is defined directly into components.
 // It it imported in `scr/App.vue` style tag.
 
-// Bootstrap variable overrides and custom variables
+// Dependencies variables overrides and custom variables
+// Variables overrides are defined before actual SCSS imports
 @import 'variables';
 
-// Includes Bootstrap and BootstrapVue SCSS files
+
+// Dependencies SCSS imports
 // `~` allow to import a node_modules folder (resolved by Webpack)
 @import '~bootstrap/scss/bootstrap.scss';
 @import '~bootstrap-vue/src/index.scss';
 
 @import '~fork-awesome/scss/fork-awesome.scss';
 
-// Style overrides happens after bootstrap imports
+
+// Style overrides happens after dependencies imports
+
+// Bootstrap overrides
 body {
     margin: auto;
     max-width: 90%;
     font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif;
 }
 
+.list-group-item-action {
+    color: #333;
+}
+
+
+// Fork-awesome overrides
 .fa-fw {
     width: 1.25em;
 }