From abad528dd4885265f5d80056d430eb0341022a99 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 26 Apr 2019 15:31:10 -0400
Subject: [PATCH] refactor using List component

---
 .../user_reporting_modal.js                    |  2 ++
 .../user_reporting_modal.vue                   | 18 ++++++++----------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
index f445f184a5..7c6ea40964 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.js
+++ b/src/components/user_reporting_modal/user_reporting_modal.js
@@ -1,10 +1,12 @@
 
 import Status from '../status/status.vue'
+import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.vue'
 
 const UserReportingModal = {
   components: {
     Status,
+    List,
     Checkbox
   },
   data () {
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index d5f3b43890..1cf25e8f59 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -28,12 +28,14 @@
         </div>
       </div>
       <div class="user-reporting-panel-right" v-bar="{preventParentScroll: true}">
-        <div>
-          <div v-for="status in statuses" :key="status.id" class="status-fadein user-reporting-panel-sitem">
-            <Status :inConversation="false" :focused="false" :statusoid="status" />
-            <Checkbox :checked="isChecked(status.id)" @change="checked => toggleStatus(checked, status.id)" />
-          </div>
-        </div>
+        <List :items="statuses">
+          <template slot="item" slot-scope="{item}">
+            <div class="status-fadein user-reporting-panel-sitem">
+              <Status :inConversation="false" :focused="false" :statusoid="item" />
+              <Checkbox :checked="isChecked(item.id)" @change="checked => toggleStatus(checked, item.id)" />
+            </div>
+          </template>
+        </List>
       </div>
     </div>
   </div>
@@ -116,10 +118,6 @@
   &-sitem {
     display: flex;
     justify-content: space-between;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
     padding-right: 15px;
 
     > .status-el {