update tag edit modal design

apps/app/src/components/PageTags/TagEditModal.module.scss

@@ -0,0 +1,17 @@
+.tag-edit-modal :global {
+  .rbt-token {
+    color: var(--bs-gray-600);
+
+    .rbt-token-label {
+      overflow: hidden;
+      font-size: 1rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .rbt-token-active {
+    border-color: #80bdff !important;
+    box-shadow: 0 0 0 0.05rem #007bff40;
+  }
+}

apps/app/src/components/PageTags/TagEditModal.tsx

@@ -14,6 +14,8 @@ import { useTagEditModal, type TagEditModalStatus } from '~/stores/modal';
 
 import { TagsInput } from './TagsInput';
 
+import styles from './TagEditModal.module.scss';
+
 type TagEditModalSubstanceProps = {
   tagEditModalData: TagEditModalStatus,
   closeTagEditModal: () => void,
@@ -51,8 +53,8 @@ const TagEditModalSubstance: React.FC<TagEditModalSubstanceProps> = (props: TagE
   }, [closeTagEditModal, tags, pageId, revisionId, updateStateAfterSave]);
 
   return (
-    <Modal isOpen={isOpen} toggle={closeTagEditModal} id="edit-tag-modal" autoFocus={false}>
-      <ModalHeader tag="h4" toggle={closeTagEditModal} className="bg-primary text-light">
+    <Modal isOpen={isOpen} toggle={closeTagEditModal} id="edit-tag-modal" autoFocus={false} className={`tag-edit-modal ${styles['tag-edit-modal']}`}>
+      <ModalHeader tag="h4" toggle={closeTagEditModal}>
         {t('tag_edit_modal.edit_tags')}
       </ModalHeader>
       <ModalBody>

apps/app/src/components/PageTags/TagsInput.tsx

@@ -3,7 +3,7 @@ import React, { useRef, useState, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import type { TypeaheadRef } from 'react-bootstrap-typeahead';
-import { AsyncTypeahead } from 'react-bootstrap-typeahead';
+import { AsyncTypeahead, Token } from 'react-bootstrap-typeahead';
 
 import { useSWRxTagsSearch } from '~/stores/tag';
 
@@ -64,6 +64,14 @@ export const TagsInput: FC<Props> = (props: Props) => {
         options={resultTags} // Search result (Some tag names)
         placeholder={t('tag_edit_modal.tags_input.tag_name')}
         autoFocus={autoFocus}
+        // option is tag name
+        renderToken={(option: string, { onRemove }, idx) => {
+          return (
+            <Token key={idx} className="grw-tag badge mw-100 d-inline-flex p-0" option={option} onRemove={onRemove}>
+              {option}
+            </Token>
+          );
+        }}
       />
     </div>
   );