From ebf298adae1302ab2d6d99a3b32734319777dec2 Mon Sep 17 00:00:00 2001
From: Kamila <kamila.lach1@gmail.com>
Date: Wed, 31 Jul 2024 09:01:35 +0200
Subject: [PATCH] rework icons to have them looking more like on prod

---
 admin/public/img/envelope.png                 | Bin 0 -> 491 bytes
 .../src/components/Tables/SearchUserTable.vue |  44 ++++++++++--------
 2 files changed, 25 insertions(+), 19 deletions(-)
 create mode 100644 admin/public/img/envelope.png

diff --git a/admin/public/img/envelope.png b/admin/public/img/envelope.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba6e484d976ad5369120c816d92bfa7eb54a24ea
GIT binary patch
literal 491
zcmV<H0Tlj;P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00009a7bBm000XU
z000XU0RWnu7ytkPok>JNRCt{2*3C;)Q5eVZ=>^<Gxl@c;wdut`7{PF(g$uD-20`G?
z*|rpNBQy&U+)9u_e?ztDKQNNSRY;)`Z9=e6v2@W#E<V*|yfcn5FChNlz~!9ZdA`qi
zyXWL`r#kV%Vk=6{fl4Sgsgx4nA8>CIXSg>FUdH7nKs)g+4PL=2t~L;Q4Qs*r3+}@+
zY+#@P(0;7r1#YFmg)ltEPdut4^Z|A-i8Bf75IBsZ_>~yz08Iw6hp|*$HaHsZ;5+7U
z{y%`{FpEtLm$g*}hv5c3;|(qz19}0k@fAH8?S-n~Fm>U59D&XnpoxDe`gB$B6pjRk
zaR|TTC|s}NyNNI19jf9h)H32?Y_u6Xk9EIYA-Nxz$8_{59vh6d0Bz%8s{Tm?eTt4K
z$@eZM%8t-h#AvGtj6B}rBf2v(zK>7-DfzxvVRNoTtbA242JsEA(4I9_WeMhw@La;n
zh&h-Ej`d8YYzk*{byEDT#v}H4Id~y9&fR(eGZGkyyI>&={?N#qDFwe0S8(ee0;N_w
heHL5t*gMsU*FK|LX2uIhktP5D002ovPDHLkV1lg*(LMkG

literal 0
HcmV?d00001

diff --git a/admin/src/components/Tables/SearchUserTable.vue b/admin/src/components/Tables/SearchUserTable.vue
index 0dc7a2e78..cace1b10c 100644
--- a/admin/src/components/Tables/SearchUserTable.vue
+++ b/admin/src/components/Tables/SearchUserTable.vue
@@ -17,27 +17,33 @@
       </template>
 
       <template #cell(status)="row">
-        <div class="text-right">
-          <BAvatar v-if="row.item.deletedAt" class="mr-3 test-deleted-icon" variant="light">
-            <!-- <b-iconstack font-scale="2"> -->
-            <div>
+        <div class="d-flex gap-3 justify-content-end align-items-center">
+          <div v-if="row.item.deletedAt" class="w-auto mr-3 test-deleted-icon" variant="light">
+            <!-- <div>
               <IOcticonPerson24 />
               <IOcticonCircleSlash24 style="color: #f5365c" />
-            </div>
-            <!-- </b-iconstack> -->
-          </BAvatar>
-          <span v-if="!row.item.deletedAt">
-            <IPhEnvelope
+            </div> -->
+          </div>
+          <span v-if="!row.item.deletedAt" class="d-flex gap-2">
+            <div
               v-if="!row.item.emailChecked"
-              style="color: #f5365c"
-              class="align-center mr-3"
-            />
-            <!-- <BAvatar
-              v-if="!row.item.hasElopage"
-              variant="danger"
-              class="mr-3"
-              src="img/elopage_favicon.png"
-            /> -->
+              class="mr-3 rounded-circle bg-red-dark position-relative"
+              style="background-color: #dc3545; width: 40px; height: 40px"
+            >
+              <img
+                src="/admin/public/img/envelope.png"
+                style="transform: translate(15%, 15%)"
+                class="position-absolute"
+              />
+            </div>
+            <div>
+              <img
+                v-if="!row.item.hasElopage"
+                class="mr-3 rounded-circle bg-red-dark"
+                src="/admin/public/img/elopage_favicon.png"
+                style="background-color: #dc3545; width: 40px; height: 40px"
+              />
+            </div>
           </span>
           <IPhCaretUpFill
             v-if="row.detailsShowing === 'caret-up-fill'"
@@ -114,7 +120,7 @@
 </template>
 <script setup>
 import { ref, nextTick, onMounted, watch, computed } from 'vue'
-import { BTable, BAvatar, BTab, BTabs, BCard, useModalController } from 'bootstrap-vue-next'
+import { BTable, BTab, BTabs, BCard, useModalController } from 'bootstrap-vue-next'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 import { useAppToast } from '@/composables/useToast'