From 4a69f0ac5b00efe627b7c5951a648dba95f717c4 Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Mon, 17 Jun 2024 16:41:35 +0530
Subject: [PATCH] Minor refactor to subscribers UI. Remove superfluous status
 column.

---
 frontend/src/assets/style.scss     | 16 +++++-----------
 frontend/src/views/Subscribers.vue | 18 +++++++-----------
 2 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
index 387553e9..6c760609 100644
--- a/frontend/src/assets/style.scss
+++ b/frontend/src/assets/style.scss
@@ -584,37 +584,27 @@ body.is-noscroll {
   &:not(body) {
     background-color: #eee;
     font-size: 0.85em;
-    // border: 1px solid $color;
-    // box-shadow: 1px 1px 0 $color;
     color: $grey;
   }
 
   &.private, &.scheduled, &.paused, &.tx, &.api {
     $color: #ed7b00;
     color: $color;
-    background: #fff7e6;
-    // border: 1px solid lighten($color, 37%);
-    // box-shadow: 1px 1px 0 lighten($color, 37%);
+    background: lighten($color, 47);
   }
   &.public, &.running, &.list, &.campaign, &.user, &.primary {
     $color: $primary;
     color: lighten($color, 20%);
     background: #e6f7ff;
-    // border: 1px solid lighten($color, 42%);
-    // box-shadow: 1px 1px 0 lighten($color, 42%);
   }
   &.finished, &.enabled, &.status-confirmed {
     color: $green;
     background: #dcfce7;
-    // border: 1px solid lighten($color, 45%);
-    // box-shadow: 1px 1px 0 lighten($color, 45%);
   }
   &.blocklisted, &.cancelled, &.status-unsubscribed {
     $color: $red;
     color: $color;
     background: #fff1f0;
-    border: 1px solid lighten($color, 30%);
-    // box-shadow: 1px 1px 0 lighten($color, 30%);
   }
 
   sup {
@@ -718,6 +708,10 @@ section.lists {
   .toggle-advanced {
     margin-top: 10px;
   }
+
+  .blocklisted {
+    color: red;
+  }
 }
 
 .b-table.subscriptions {
diff --git a/frontend/src/views/Subscribers.vue b/frontend/src/views/Subscribers.vue
index 21afcea3..9da70375 100644
--- a/frontend/src/views/Subscribers.vue
+++ b/frontend/src/views/Subscribers.vue
@@ -103,19 +103,14 @@
         </div>
       </template>
 
-      <b-table-column v-slot="props" field="status" :label="$t('globals.fields.status')" header-class="cy-status"
-        :td-attrs="$utils.tdID" sortable>
-        <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)">
-          <b-tag :class="props.row.status">
-            {{ $t(`subscribers.status.${props.row.status}`) }}
-          </b-tag>
-        </a>
-      </b-table-column>
-
       <b-table-column v-slot="props" field="email" :label="$t('subscribers.email')" header-class="cy-email" sortable>
-        <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)">
+        <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)"
+          :class="{ 'blocklisted': props.row.status === 'blocklisted' }">
           {{ props.row.email }}
         </a>
+        <b-tag v-if="props.row.status !== 'enabled'" :class="props.row.status">
+          {{ $t(`subscribers.status.${props.row.status}`) }}
+        </b-tag>
         <b-taglist>
           <template v-for="l in props.row.lists">
             <router-link :to="`/subscribers/lists/${l.id}`" :key="l.id" style="padding-right:0.5em;">
@@ -131,7 +126,8 @@
       </b-table-column>
 
       <b-table-column v-slot="props" field="name" :label="$t('globals.fields.name')" header-class="cy-name" sortable>
-        <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)">
+        <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)"
+          :class="{ 'blocklisted': props.row.status === 'blocklisted' }">
           {{ props.row.name }}
         </a>
       </b-table-column>