move css classes to the correct component files

webapp/components/_new/features/ReportList/ReportList.vue

@@ -6,7 +6,7 @@
         <dropdown-filter @filter="filter" :filterOptions="filterOptions" :selected="selected" />
       </client-only>
     </div>
-    <reports-table :reports="reports" @confirm="confirm" />
+    <reports-table :reports="reports" @confirm="openModal" />
   </ds-card>
 </template>
 <script>
@@ -95,9 +95,6 @@ export default {
       this.reports = option.value
       this.selected = option.label
     },
-    confirm(report) {
-      this.openModal(report)
-    },
     async confirmCallback(resource) {
       const { disabled: disable, id: resourceId } = resource
       this.$apollo
@@ -142,17 +139,4 @@ export default {
     font-size: $font-size-large;
   }
 }
-
-.decision {
-  color: $color-secondary;
-}
-.no-decision {
-  color: $color-warning;
-}
-.ban {
-  color: $color-danger;
-}
-.no-ban {
-  color: $color-success;
-}
 </style>

webapp/components/_new/features/ReportRow/ReportRow.vue

@@ -37,7 +37,7 @@
       <!-- Status Column -->
       <td class="ds-table-col" data-test="report-reviewer">
         <span class="status-line">
-          <base-icon :name="statusIconName" :class="isDisabled ? 'ban' : 'no-ban'" />
+          <base-icon :name="statusIconName" :class="isDisabled ? '--disabled' : '--enabled'" />
           {{ statusText }}
         </span>
         <client-only v-if="report.reviewed">
@@ -175,5 +175,13 @@ export default {
     display: block;
     margin-bottom: $space-xx-small;
   }
+
+  .--disabled {
+    color: $color-danger;
+  }
+
+  .--enabled {
+    color: $color-success;
+  }
 }
 </style>