From b73bb2a8fcb0c3363d63c7106ef73c475eff0e0d Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Mon, 13 Feb 2023 14:25:37 +0200
Subject: [PATCH] Icon: member leave and moderator delete

---
 src/assets/css/_utilities.scss           |  6 ++++++
 src/assets/css/_variables.scss           |  3 ++-
 src/assets/css/chat.scss                 | 22 +++++-----------------
 src/assets/icons/ic_member-leave.vue     |  6 ++++++
 src/assets/icons/ic_moderator-delete.vue |  5 +++++
 src/components/ChatHeader.vue            | 19 ++++++++++++-------
 6 files changed, 36 insertions(+), 25 deletions(-)
 create mode 100644 src/assets/icons/ic_member-leave.vue
 create mode 100644 src/assets/icons/ic_moderator-delete.vue

diff --git a/src/assets/css/_utilities.scss b/src/assets/css/_utilities.scss
index b2d67e3..51d8edf 100644
--- a/src/assets/css/_utilities.scss
+++ b/src/assets/css/_utilities.scss
@@ -31,4 +31,10 @@
 }
 .v-hidden {
     visibility: hidden;
+}
+.alert-bg {
+    background-color: $alert-bg-color;
+}
+.box-shadow-none {
+    box-shadow: none !important;
 }
\ No newline at end of file
diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss
index d0f2e67..bb3aa64 100644
--- a/src/assets/css/_variables.scss
+++ b/src/assets/css/_variables.scss
@@ -16,4 +16,5 @@ $voice-recorder-color: #6f6f6f;
 $voice-recording-color: red;
 $voice-recorded-color: #3ae17d;
 $poll-hilite-color: #6360f0;
-$poll-hilite-color-bg: #d6d5fc;
\ No newline at end of file
+$poll-hilite-color-bg: #d6d5fc;
+$alert-bg-color: #FF3300;
\ No newline at end of file
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 175cd41..7494c34 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -6,13 +6,13 @@ $admin-bg: black;
 $admin-fg: white;
 
 body {
-  --v-background-color: white;    
-  --v-foreground-color: black;    
+  --v-background-color: white;
+  --v-foreground-color: black;
   --v-divider-color: #eeeeee;
   &.dark {
-    --v-background-color: black;    
-    --v-foreground-color: white;  
-    --v-divider-color: rgba(221, 221, 221, 0.1);  
+    --v-background-color: black;
+    --v-foreground-color: white;
+    --v-divider-color: rgba(221, 221, 221, 0.1);
   }
 }
 
@@ -60,18 +60,6 @@ body {
     font-size: 12 * $chat-text-size;
     color: var(--v-foreground-color);
   }
-  .v-btn.leave-button {
-    font-family: "Inter", sans-serif;
-    font-weight: 700;
-    font-size: 11 * $chat-text-size;
-    color: var(--v-foreground-color);
-    background-color: var(--v-background-color) !important;
-    border: 1px solid var(--v-foreground-color);
-    border-radius: $chat-standard-padding / 2;
-    height: $chat-standard-padding;
-    margin-top: $chat-standard-padding-xs;
-    margin-bottom: $chat-standard-padding-xs;
-  }
   .v-btn.avatar {
     font-family: "Inter", sans-serif;
     font-weight: 700;
diff --git a/src/assets/icons/ic_member-leave.vue b/src/assets/icons/ic_member-leave.vue
new file mode 100644
index 0000000..766e7fe
--- /dev/null
+++ b/src/assets/icons/ic_member-leave.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.5714 14.1903C10.7619 14.357 10.9762 14.4284 11.1904 14.4284C11.4523 14.4284 11.7142 14.3093 11.9047 14.095L14.9047 10.6189C15.2142 10.2617 15.2142 9.7379 14.9047 9.38076L11.9047 5.90457C11.5714 5.49981 10.9523 5.45219 10.5714 5.80933C10.1666 6.14267 10.119 6.76171 10.4762 7.14267L12.119 9.04743H6.0952C5.57139 9.04743 5.14282 9.476 5.14282 9.99981C5.14282 10.5236 5.57139 10.9522 6.0952 10.9522H12.119L10.4762 12.857C10.119 13.2617 10.1666 13.857 10.5714 14.1903Z" fill="white"/>
+    <path d="M17.5 6.92857C17.6905 7.40476 18.2619 7.64286 18.7381 7.45238C19.2143 7.2619 19.4524 6.69048 19.2619 6.21429C17.7143 2.42857 14.0714 0 10 0C4.47619 0 0 4.47619 0 10C0 15.5238 4.47619 20 10 20C14.0714 20 17.7143 17.5714 19.2619 13.7857C19.4524 13.3095 19.2381 12.7381 18.7381 12.5476C18.2619 12.3571 17.6905 12.5714 17.5 13.0714C16.2381 16.119 13.3095 18.0952 10 18.0952C5.54762 18.0952 1.90476 14.4524 1.90476 10C1.90476 5.54762 5.54762 1.90476 10 1.90476C13.3095 1.90476 16.2381 3.88095 17.5 6.92857Z" fill="white"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/src/assets/icons/ic_moderator-delete.vue b/src/assets/icons/ic_moderator-delete.vue
new file mode 100644
index 0000000..7a892f2
--- /dev/null
+++ b/src/assets/icons/ic_moderator-delete.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.888 4.66665L2.75013 13.153C2.79891 13.6332 3.22903 14 3.74371 14H10.3005C10.8152 14 11.2453 13.6332 11.2941 13.153L12.1562 4.66665H1.888ZM5.03114 1.86666H1.78816C1.52582 1.86666 1.27493 1.96416 1.08927 2.13781C0.904051 2.31187 0.800049 2.54708 0.800049 2.793V3.27361C0.800049 3.51955 0.904048 3.75476 1.08927 3.92881C1.27494 4.10246 1.52584 4.19996 1.78816 4.19996H12.2564C12.5187 4.19996 12.7696 4.10246 12.9553 3.92881C13.1405 3.75475 13.2445 3.51953 13.2445 3.27361V2.793C13.2445 2.54706 13.1405 2.31186 12.9553 2.13781C12.7696 1.96416 12.5187 1.86666 12.2564 1.86666H9.0134V1.22365C9.0134 0.547918 8.42895 0 7.70816 0H6.33627C5.61548 0 5.03103 0.547918 5.03103 1.22365L5.03114 1.86666Z" fill="white"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index 79cfb91..8139f42 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -25,27 +25,32 @@
         <v-btn
           id="btn-purge-room"
           v-if="userCanPurgeRoom"
+          class="mx-2 box-shadow-none"
+          fab
+          dark
+          small
           color="red"
-          depressed
-          class="filled-button"
           @click.stop="showPurgeConfirmation = true"
         >
-          {{ $t("room_info.purge") }}
+         <v-icon light>$vuetify.icons.ic_moderator-delete</v-icon>
         </v-btn>
         <v-btn
           id="btn-leave-room"
-          text
-          class="leave-button"
+          class="mx-2 box-shadow-none"
+          fab
+          dark
+          small
+          color="red"
           @click.stop="leaveRoom"
           v-else
         >
-          {{ $t("room.leave") }}
+        <v-icon>$vuetify.icons.ic_member-leave</v-icon>
         </v-btn>
       </v-col>
       <v-col cols="auto" class="text-end ma-0 pa-0 ms-2">
         <v-avatar
           class="avatar-32 clickable"
-          size="32"
+          size="40"
           color="#e0e0e0"
           @click.stop="showProfileInfo = true"
         >