add some styling to the selectable-list component

2 files changed, 22 insertions, 4 deletions

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 5c01bbab..7a724144 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -21,7 +21,7 @@ const SelectableList = {
   },
   methods: {
     toggle (checked, item) {
-      const oldChecked = this.isChecked(item)
+      const oldChecked = this.isSelected(item)
       if (checked !== oldChecked) {
         const key = this.getKey(item)
         if (checked) {
@@ -31,7 +31,7 @@ const SelectableList = {
         }
       }
     },
-    isChecked (item) {
+    isSelected (item) {
       return this.selected.indexOf(this.getKey(item)) !== -1
     }
   }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index f0ab33dd..7a7a7644 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="selectable-list">
-    <div v-for="item in items" :key="getKey(item)">
-      <Checkbox :checked="isChecked(item)" @change="checked => toggle(checked, item)" />
+    <div v-for="item in items" :key="getKey(item)" class="selectable-list-item" :class="{ 'selectable-list-item-selected': isSelected(item) }">
+      <div class="selectable-list-checkbox-wrapper">
+        <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
+      </div>
       <slot name="item" :item="item" />
     </div>
     <div class="selectable-list-empty-content faint" v-if="items.length === 0">
@@ -13,7 +15,23 @@
 <script src="./selectable_list.js"></script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .selectable-list {
+  &-item {
+    display: flex;
+
+    &-selected {
+      background-color: $fallback--lightBg;
+      background-color: var(--lightBg, $fallback--lightBg);
+    }
+  }
+
+  &-checkbox-wrapper {
+    padding: 10px;
+    flex: none;
+  }
+
   &-empty-content {
     text-align: center;
     padding: 10px;