chore: update member setting styles

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>

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) => {
+  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();
+      },
+    });
   };
 
   const handleRestoreUserClick = async (user: User) => {
@@ -88,8 +95,8 @@ const PreferencesSection: React.FC<Props> = () => {
 
   const handleDeleteUserClick = (user: User) => {
     showCommonDialog({
-      title: `Delete ${user.name}`,
+      title: `Delete Member`,
-      content: "❗️Are you sure you want to delete?",
+      content: `Are you sure to delete ${user.name}? THIS ACTION IS IRREVERSIABLE.❗️`,
       style: "warning",
       onConfirm: async () => {
         await userService.deleteUser({

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;

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 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;
-    @apply w-full py-2 px-4 rounded-lg flex flex-row justify-start items-center 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,
+    &:active {
+      > .text-input {
+        @apply flex;
       }
 
-    &:hover {
       + .quickly-action-wrapper {
         display: flex;
       }

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;