/ Refactored btn component / icons and revamped list layout

components/atoms/FSButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <button
+    class="btn btn-primary"
+    :class="[
+      icon ? 'btn-icon' : ''
+    ]"
+  >
+    <slot />
+    <span v-if="icon">
+      <img
+        :src="
+          white ? `/icons/${icon}.svg` : `/icons/${icon}-white.svg`
+        "
+        alt=""
+        class="fs-icon icon-sm"
+      >
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'FSButton',
+  props: {
+    icon: {
+      type: String,
+      default: () => { return '' }
+    },
+    white: {
+      type: Boolean,
+      default: () => { return false }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

components/celestials/CelestialCardIcon.vue

@@ -2,31 +2,31 @@
   <div class="card-icon">
     <img
       v-if="type === 'planète à lunes'"
-      src="/icons/saturn-and-other-planets.svg"
+      src="/icons/planet-moons.svg"
       class="fs-icon"
       alt="planet icon"
     >
     <img
       v-else-if="type === 'planète'"
-      src="/icons/saturn-planet-shape.svg"
+      src="/icons/planet.svg"
       class="fs-icon"
       alt="planet icon"
     >
     <img
       v-else-if="type === 'lune'"
-      src="/icons/moon-and-stars-in-a-cloud.svg"
+      src="/icons/moon.svg"
       class="fs-icon"
       alt="moon icon"
     >
     <img
       v-else-if="type === 'étoile'"
-      src="/icons/sun-shape.svg"
+      src="/icons/sun.svg"
       class="fs-icon"
       alt="moon icon"
     >
     <img
       v-else
-      src="/icons/stars-group.svg"
+      src="/icons/stars.svg"
       alt="moon icon"
       class="fs-icon"
     >

components/celestials/CelestialFilters.vue

@@ -2,57 +2,44 @@
   <div class="celestial-filters">
     <ul class="no-style">
       <li>
-        <button
+        <AtomsFSButton
-          class="btn btn-primary"
           :class="[filters.all ? 'active' : '']"
-          @click="emitFilter('all')"
+          @click.native="emitFilter('all')"
         >
           Tous
-        </button>
+        </AtomsFSButton>
-        <button
+        <AtomsFSButton
-          class="btn btn-primary btn-icon"
           :class="[filters.planets ? 'active' : '']"
-          @click="emitFilter('planets')"
+          icon="planet"
+          inverted
+          @click.native="emitFilter('planets')"
         >
           Planètes
-          <img
+        </AtomsFSButton>
-            src="icons/saturn-planet-shape-white.svg"
+        <AtomsFSButton
-            alt=""
-            class="fs-icon icon-sm"
-          >
-        </button>
-        <button
-          class="btn btn-primary btn-icon"
           :class="[filters.moons ? 'active' : '']"
-          @click="emitFilter('moons')"
+          icon="moon"
+          inverted
+          @click.native="emitFilter('moons')"
         >
           Lunes
-          <img
+        </AtomsFSButton>
-            src="icons/moon-and-stars-in-a-cloud-white.svg"
+        <AtomsFSButton
-            alt=""
-            class="fs-icon icon-sm"
-          >
-        </button>
-        <button
-          class="btn btn-primary btn-icon"
           :class="[filters.stars ? 'active' : '']"
-          @click="emitFilter('stars')"
+          icon="sun"
+          inverted
+          @click.native="emitFilter('stars')"
         >
           Etoiles
-          <img src="icons/sun-shape-white.svg" alt="" class="fs-icon icon-sm">
+        </AtomsFSButton>
-        </button>
+        <AtomsFSButton
-        <button
-          class="btn btn-primary btn-icon"
           :class="[filters.others ? 'active' : '']"
-          @click="emitFilter('others')"
+          icon="stars"
+          inverted
+          @click.native="emitFilter('others')"
         >
           Autres
-          <img
+        </AtomsFSButton>
-            src="icons/stars-group-white.svg"
-            alt=""
-            class="fs-icon icon-sm"
-          >
-        </button>
       </li>
     </ul>
   </div>

components/celestials/CelestialsList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="celestial-list-wrapper">
-    <div v-if="celestials && celestials.length > 1">
+    <div v-if="celestials != undefined">
       <celestial-filters v-if="hasFilters" @filter:celestials="filterCelestials" />
 
       <ul v-if="celestials" class="celestial-list grid no-style">
@@ -84,11 +84,12 @@ export default defineComponent({
 <style lang="scss" scoped>
 .celestial-list {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: stretch;
   flex-flow: row wrap;
   .celestial-item {
-    width: calc(33% - 15px);
+    width: calc(33% - 20px);
+    margin-right: 20px;
     margin-bottom: 20px;
   }
 }