From 9994b1fabc96b26ef406a58022c7c127387fa4a4 Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Fri, 29 Jul 2022 19:52:16 +0800
Subject: [PATCH] chore: update member setting styles

---
 web/index.html                                |  2 +-
 web/src/components/Settings/MemberSection.tsx | 23 ++++++++++++-------
 web/src/less/memo-card-dialog.less            |  2 +-
 web/src/less/search-bar.less                  | 16 ++++++++-----
 web/src/less/settings/member-section.less     |  8 +++----
 5 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/web/index.html b/web/index.html
index 1248903a..47e1c570 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/logo.png" type="image/*" />
     <meta name="theme-color" content="#f6f5f4" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <title>Memos</title>
     <script src="https://kit.fontawesome.com/41e3aaa6af.js" crossorigin="anonymous"></script>
   </head>
diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx
index 30cb7ef4..31a55309 100644
--- a/web/src/components/Settings/MemberSection.tsx
+++ b/web/src/components/Settings/MemberSection.tsx
@@ -4,8 +4,8 @@ import { userService } from "../../services";
 import { useAppSelector } from "../../store";
 import * as api from "../../helpers/api";
 import toastHelper from "../Toast";
-import "../../less/settings/member-section.less";
 import { showCommonDialog } from "../Dialog/CommonDialog";
+import "../../less/settings/member-section.less";
 
 interface Props {}
 
@@ -70,12 +70,19 @@ const PreferencesSection: React.FC<Props> = () => {
     });
   };
 
-  const handleArchiveUserClick = async (user: User) => {
-    await userService.patchUser({
-      id: user.id,
-      rowStatus: "ARCHIVED",
+  const handleArchiveUserClick = (user: User) => {
+    showCommonDialog({
+      title: `Archive Member`,
+      content: `❗️Are you sure to archive ${user.name}?`,
+      style: "warning",
+      onConfirm: async () => {
+        await userService.patchUser({
+          id: user.id,
+          rowStatus: "ARCHIVED",
+        });
+        fetchUserList();
+      },
     });
-    fetchUserList();
   };
 
   const handleRestoreUserClick = async (user: User) => {
@@ -88,8 +95,8 @@ const PreferencesSection: React.FC<Props> = () => {
 
   const handleDeleteUserClick = (user: User) => {
     showCommonDialog({
-      title: `Delete ${user.name}`,
-      content: "❗️Are you sure you want to delete?",
+      title: `Delete Member`,
+      content: `Are you sure to delete ${user.name}? THIS ACTION IS IRREVERSIABLE.❗️`,
       style: "warning",
       onConfirm: async () => {
         await userService.deleteUser({
diff --git a/web/src/less/memo-card-dialog.less b/web/src/less/memo-card-dialog.less
index 29d1f041..524a1dd9 100644
--- a/web/src/less/memo-card-dialog.less
+++ b/web/src/less/memo-card-dialog.less
@@ -10,7 +10,7 @@
       @apply z-10 w-128 max-w-full flex flex-row justify-start items-center mb-2;
 
       > .visibility-selector-container {
-        @apply bg-white px-2 py-1 rounded-lg flex flex-row justify-start items-center;
+        @apply bg-white px-2 pl-3 py-1 rounded-lg flex flex-row justify-start items-center;
 
         > .visibility-selector {
           @apply w-32;
diff --git a/web/src/less/search-bar.less b/web/src/less/search-bar.less
index 1953e823..ea35c1ac 100644
--- a/web/src/less/search-bar.less
+++ b/web/src/less/search-bar.less
@@ -1,21 +1,25 @@
 @import "./mixin.less";
 
 .search-bar-container {
-  @apply relative w-40;
+  @apply relative w-auto;
 
   > .search-bar-inputer {
-    .flex(row, flex-start, center);
-    @apply w-full py-2 px-4 rounded-lg flex flex-row justify-start items-center bg-zinc-200;
+    @apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-full sm:rounded-lg bg-zinc-200;
 
     > .icon-img {
-      @apply mr-2 h-auto opacity-30;
+      @apply h-auto opacity-30;
     }
 
     > .text-input {
-      @apply grow text-sm;
+      @apply hidden sm:flex ml-2 w-24 grow text-sm;
     }
 
-    &:hover {
+    &:hover,
+    &:active {
+      > .text-input {
+        @apply flex;
+      }
+
       + .quickly-action-wrapper {
         display: flex;
       }
diff --git a/web/src/less/settings/member-section.less b/web/src/less/settings/member-section.less
index 68c2c7dd..ad687988 100644
--- a/web/src/less/settings/member-section.less
+++ b/web/src/less/settings/member-section.less
@@ -35,22 +35,22 @@
     @apply w-full grid grid-cols-6 border-b py-2;
 
     > .field-text {
-      @apply text-base pl-2 mr-4 w-16;
+      @apply text-base pl-2 mr-4 w-16 truncate;
 
       &.id-text {
         @apply font-mono text-gray-600;
       }
 
       &.email-text {
-        @apply col-span-3;
+        @apply w-auto col-span-3;
       }
     }
 
     > .buttons-container {
-      @apply col-span-2;
+      @apply col-span-2 flex flex-row justify-start items-center flex-wrap;
 
       > .btn {
-        @apply px-2 py-1 border rounded shadow hover:opacity-80;
+        @apply px-2 leading-7 border rounded shadow hover:opacity-80;
 
         &.archive {
           @apply bg-yellow-100 text-yellow-600;