/ Refactored btn component / icons and revamped list layout

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
-          class="btn btn-primary"
+        <AtomsFSButton
           :class="[filters.all ? 'active' : '']"
-          @click="emitFilter('all')"
+          @click.native="emitFilter('all')"
         >
           Tous
-        </button>
-        <button
-          class="btn btn-primary btn-icon"
+        </AtomsFSButton>
+        <AtomsFSButton
           :class="[filters.planets ? 'active' : '']"
-          @click="emitFilter('planets')"
+          icon="planet"
+          inverted
+          @click.native="emitFilter('planets')"
         >
           Planètes
-          <img
-            src="icons/saturn-planet-shape-white.svg"
-            alt=""
-            class="fs-icon icon-sm"
-          >
-        </button>
-        <button
-          class="btn btn-primary btn-icon"
+        </AtomsFSButton>
+        <AtomsFSButton
           :class="[filters.moons ? 'active' : '']"
-          @click="emitFilter('moons')"
+          icon="moon"
+          inverted
+          @click.native="emitFilter('moons')"
         >
           Lunes
-          <img
-            src="icons/moon-and-stars-in-a-cloud-white.svg"
-            alt=""
-            class="fs-icon icon-sm"
-          >
-        </button>
-        <button
-          class="btn btn-primary btn-icon"
+        </AtomsFSButton>
+        <AtomsFSButton
           :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">
-        </button>
-        <button
-          class="btn btn-primary btn-icon"
+        </AtomsFSButton>
+        <AtomsFSButton
           :class="[filters.others ? 'active' : '']"
-          @click="emitFilter('others')"
+          icon="stars"
+          inverted
+          @click.native="emitFilter('others')"
         >
           Autres
-          <img
-            src="icons/stars-group-white.svg"
-            alt=""
-            class="fs-icon icon-sm"
-          >
-        </button>
+        </AtomsFSButton>
       </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;
   }
 }