add generic scss

app/src/scss/main.scss

@@ -22,6 +22,20 @@ body {
   font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif;
 }
 
+.menu-list {
+  .list-group-item {
+      padding: 0.75rem 0;
+      display: flex;
+      align-items: center;
+  }
+
+  h2 {
+      font-size: 1.25rem;
+      font-weight: 400;
+      margin: 0;
+  }
+}
+
 
 .list-group-item {
   padding: 0.75rem 1rem;
@@ -53,11 +67,24 @@ body {
   }
 }
 
+.card + .card {
+  margin-top: 2rem;
+}
 .card-header h2 {
   margin: 0;
   font-size: 1.75rem;
 }
 
+// collapse icon
+.not-collapsed .icon {
+  transform: rotate(-90deg);
+}
+.collapsed .icon {
+  transform: rotate(90deg);
+  position: relative;
+  top: 2px;
+}
+
 
 // Fork-awesome overrides
 .fa-fw {

app/src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <b-list-group>
+    <b-list-group class="menu-list">
       <b-list-group-item
         v-for="item in menu"
         :key="item.id"
@@ -36,18 +36,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.list-group-item {
-    padding: 0.75rem 0;
-    display: flex;
-    align-items: center;
-}
-
-h2 {
-    font-size: 1.25rem;
-    font-weight: 400;
-    margin: 0;
-}
-
 .home {
   margin-top: 2rem;
 }

app/src/views/group/GroupList.vue

@@ -22,7 +22,7 @@
       >
         <b-card-header class="d-flex align-items-center">
           <h2>
-            <icon iname="group" />{{ group.isSpecial ? $t('group_' + name) : `${$t('group')} "${name}"` }}
+            <icon iname="group" /> {{ group.isSpecial ? $t('group_' + name) : `${$t('group')} "${name}"` }}
           </h2>
 
           <div class="ml-auto">
@@ -301,33 +301,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.card + .card {
-  margin-top: 2rem;
-}
-.card-header {
-  h2 .icon {
-    font-size: 1.5rem;
-    width: 1.5rem;
-    margin-right: 1.25rem;
-  }
-}
-
-// collapse icon
-.not-collapsed .icon {
-  transform: rotate(-90deg);
-}
-.collapsed .icon {
-  transform: rotate(90deg);
-  position: relative;
-  top: 2px;
-}
-
 .row > div:first-child {
   margin-bottom: 1rem;
 }
-
-// delete modal
-#delete-modal .modal-body {
-  display: none;
-}
 </style>

app/src/views/tool/ToolList.vue

@@ -1,7 +1,7 @@
 <!-- FIXME make a component shared with Home.vue ? -->
 <template>
   <div class="tools-menu">
-    <b-list-group>
+    <b-list-group class="menu-list">
       <b-list-group-item
         v-for="item in menu"
         :key="item.id"
@@ -35,15 +35,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.list-group-item {
-    padding: 0.75rem 0;
-    display: flex;
-    align-items: center;
-}
-
-h2 {
-    font-size: 1.25rem;
-    font-weight: 400;
-    margin: 0;
-}
 </style>