From 9ab918cd1dc34500ae45dbb29066d2a6153b10af Mon Sep 17 00:00:00 2001
From: leejinho <lilis7575@gmail.com>
Date: Wed, 29 Jan 2020 13:14:26 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8C=9D=EC=97=85=EC=97=90=20=EB=8B=AB?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=83=9D=EC=84=B1.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../account/notice.dialog.component.html      |   5 +-
 .../account/notice.dialog.component.scss      |  33 +-
 .../chat/create-chat.dialog.component.html    |   3 +
 .../chat/create-chat.dialog.component.scss    |  13 +-
 .../chat/edit-chat-room.dialog.component.html |   3 +
 .../chat/edit-chat-room.dialog.component.scss |  14 +-
 .../dialogs/chat/mass-detail.component.html   |   3 +
 .../dialogs/chat/mass-detail.component.scss   |  14 +-
 .../group/edit-group.dialog.component.html    |   3 +
 .../group/edit-group.dialog.component.scss    |  43 +-
 .../group/select-group.dialog.component.html  |   2 +-
 .../group/select-group.dialog.component.scss  |   2 +-
 .../message-detail.dialog.component.html      |   3 +
 .../message-detail.dialog.component.scss      |  14 +-
 .../message-write.dialog.component.html       |   3 +
 .../message-write.dialog.component.scss       |  13 +
 .../notice-detail.dialog.component.html       |   3 +
 .../notice-detail.dialog.component.scss       |   7 +
 .../selected-user-list.dialog.component.html  |   3 +
 .../selected-user-list.dialog.component.scss  |  13 +-
 .../integrated-search.dialog.component.html   |  41 +-
 .../integrated-search.dialog.component.scss   |  12 +
 .../integrated-search.dialog.component.ts     |   4 +
 .../messenger-settings.dialog.component.html  |   3 +
 .../messenger-settings.dialog.component.scss  |   8 +
 .../integrated-search.component.html          | 436 +++++++++---------
 .../lib/dialogs/alert.dialog.component.html   |   8 +-
 .../lib/dialogs/alert.dialog.component.scss   |  34 +-
 .../lib/dialogs/confirm.dialog.component.html |   4 +-
 .../lib/dialogs/confirm.dialog.component.scss |  39 +-
 30 files changed, 468 insertions(+), 318 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.html
index 12ca1ccb..06c877e7 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.html
@@ -1,7 +1,10 @@
 <mat-card class="confirm-card mat-elevation-z">
+  <!-- 이용시 주의사항 항목 -->
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div #messageContainer class="notice">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss
index f038cb15..98d2dd17 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss
@@ -1,22 +1,29 @@
-.mat-card{
-  padding:10px;
-  .mat-card-header{
-    margin-bottom:20px;
-    .mat-card-title{
-      margin:0 -16px;
-      padding-bottom:10px;
+.mat-card {
+  padding: 10px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-title {
+      margin: 0 -16px;
+      padding-bottom: 10px;
+    }
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
     }
   }
   .button-farm {
-    text-align:right;
-    .mat-primary{
-      margin-left:4px;
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
     }
   }
 }
 
-form{
-.mat-form-field{
-  width:100%;
+form {
+  .mat-form-field {
+    width: 100%;
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
index b74f01d0..55f63d5d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div *ngIf="data.type === UserSelectDialogType.NewGroup">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
index e185152d..d6715ffe 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
@@ -1,5 +1,14 @@
-::ng-deep .mat-card-header-tex {
-  margin: 0;
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
 
 //조직도 레이아웃 변경
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.html
index 74ce14e9..86c233fe 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.html
@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <form name="inputForm" [formGroup]="inputForm" novalidate>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.scss
index eb97286f..455d6526 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.dialog.component.scss
@@ -1,6 +1,16 @@
-::ng-deep .mat-card-header-tex {
-  margin: 0;
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
+
 .confirm-card {
   min-width: 500px;
   .mat-card-header {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html
index c4935e66..03e5800e 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html
@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <perfect-scrollbar>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss
index a73849fe..106d6133 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss
@@ -1,6 +1,16 @@
-::ng-deep .mat-card-header-tex {
-  margin: 0;
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
+
 .confirm-card {
   min-width: 500px;
   .mat-card-header {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
index 97d8cfd3..9f37505d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html
@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <form name="inputForm" [formGroup]="inputForm" novalidate>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss
index 3314d0e5..4386c317 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.scss
@@ -1,26 +1,35 @@
-::ng-deep .mat-card-header-tex{
-  margin:0;
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
-.confirm-card{
-  min-width:500px;
-  .mat-card-header{
-    margin-bottom:20px;
-    .mat-card-header-text{
-       .mat-card-title{
-         margin:0 -16px;
-       }
+.confirm-card {
+  min-width: 500px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-header-text {
+      .mat-card-title {
+        margin: 0 -16px;
+      }
     }
   }
   .button-farm {
-    text-align:right;
-    .mat-primary{
-      margin-left:4px;
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
     }
   }
 }
 
-form{
-.mat-form-field{
-  width:100%;
+form {
+  .mat-form-field {
+    width: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
index fb972630..5cf787d1 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html
@@ -1,7 +1,7 @@
 <mat-card class="confirm-card mat-elevation-z">
   <mat-card-header>
     <mat-card-title>{{ data.title }}</mat-card-title>
-    <button class="icon-button btn-dialog-close">
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
       <i class="mdi mdi-window-close"></i>
     </button>
   </mat-card-header>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
index b885c9d7..17fdde5f 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss
@@ -1,5 +1,5 @@
 ::ng-deep .mat-card-header {
-  .mat-card-header-tex {
+  .mat-card-header-text {
     margin: 0;
   }
   .btn-dialog-close {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
index f5345a89..10bc0467 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
@@ -13,6 +13,9 @@
         }}</span>
       </ng-container>
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <mat-drawer-container
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
index 647ef33c..efd28023 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
@@ -1,6 +1,16 @@
-::ng-deep .mat-card-header-tex {
-  margin: 0;
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
+
 .confirm-card {
   min-width: 500px;
   .mat-card-content {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html
index d3a26a22..2618a662 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.html
@@ -3,6 +3,9 @@
     <mat-card-title>
       {{ (isModify ? 'message.modify' : 'message.sendTo') | translate }}
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onCancel()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <ucap-message-write
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.scss
index b6c5f1e6..f99c844a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.scss
@@ -1,3 +1,16 @@
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
+}
+
 .confirm-card {
   min-width: 500px;
   height: 100%;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.html
index 380ae93d..dca6ad05 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.html
@@ -6,6 +6,9 @@
       </span>
       {{ data.notice.title }}
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.scss
index fbe0c0ed..4fedf13d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/notice/notice-detail.dialog.component.scss
@@ -19,6 +19,13 @@
     width: 480px;
     @include ellipsis(1);
   }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
 .confirm-card {
   min-width: 500px;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html
index a0d81d38..934ba9e5 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html
@@ -18,6 +18,9 @@
         {{ 'common.messages.selectAll' | translate }}
       </mat-checkbox>
     </mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div class="item-list">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.scss
index cc1fc087..2d1cd97d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.scss
@@ -1,5 +1,14 @@
-::ng-deep .mat-card-header-tex {
-  margin: 0;
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
 
 .confirm-card {
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
index 3cbb13b8..7f58a9ce 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
@@ -1,13 +1,28 @@
-<ucap-integrated-search
-  [sessionVerinfo]="sessionVerinfo"
-  [presence]="presence$ | async"
-  [searchWord]="!!data.keyword ? data.keyword : ''"
-  [searchingProcessing]="searchingProcessing"
-  [searchUserInfos]="searchUserInfos"
-  [totalCount]="totalCount"
-  [pageCurrent]="pageCurrent"
-  [pageListCount]="pageListCount"
-  (search)="onSearch($event)"
-  (changePage)="onChangePage($event)"
->
-</ucap-integrated-search>
+<mat-card class="confirm-card mat-elevation-z">
+  <mat-card-header
+    cdkDrag
+    cdkDragRootElement=".cdk-overlay-pane"
+    cdkDragHandle
+    class="card-header"
+  >
+    <mat-card-title>{{ 'search.label' | translate }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onCancel()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
+  </mat-card-header>
+  <mat-card-content>
+    <ucap-integrated-search
+      [sessionVerinfo]="sessionVerinfo"
+      [presence]="presence$ | async"
+      [searchWord]="!!data.keyword ? data.keyword : ''"
+      [searchingProcessing]="searchingProcessing"
+      [searchUserInfos]="searchUserInfos"
+      [totalCount]="totalCount"
+      [pageCurrent]="pageCurrent"
+      [pageListCount]="pageListCount"
+      (search)="onSearch($event)"
+      (changePage)="onChangePage($event)"
+    >
+    </ucap-integrated-search>
+  </mat-card-content>
+</mat-card>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
index e69de29b..a54b7c76 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.scss
@@ -0,0 +1,12 @@
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
index 4d82825e..78fa47a4 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
@@ -154,6 +154,10 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
     }
   }
 
+  onCancel(): void {
+    this.dialogRef.close({});
+  }
+
   onChangePage(event: PageEvent) {
     this.pageCurrent = event.pageIndex + 1;
     this.pageListCount = event.pageSize;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
index cd3ee80c..32f9cfde 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html
@@ -1,6 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z setting-frame">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>{{ 'settings.label' | translate }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div fxFlex class="setting-tab">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
index 0eb9e3fc..5799246b 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss
@@ -13,6 +13,14 @@
     width: 100%;
     border-bottom: 1px solid #dddddd;
     margin-bottom: 12px;
+
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
   }
 
   .mat-card-content {
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
index b3b14f24..76ac5a28 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
@@ -1,231 +1,207 @@
-<mat-card class="confirm-card mat-elevation-z">
-  <mat-card-header
-    cdkDrag
-    cdkDragRootElement=".cdk-overlay-pane"
-    cdkDragHandle
-    class="card-header"
-  >
-    <mat-card-title>{{ 'search.label' | translate }}</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <div fxLayout="column" class="rightDrawer-notice">
-      <div fxFlex="1 1 80px" class="search-area">
-        <ucap-integrated-search-form
-          [searchWord]="!!searchWord ? searchWord : ''"
-          (search)="onSearch($event)"
-        >
-        </ucap-integrated-search-form>
-      </div>
-      <div style="position: relative;">
-        <div
-          *ngIf="searchingProcessing"
-          style="position: absolute; width: 100%; z-index: 101;"
-        >
-          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        </div>
-      </div>
-      <div fxFlex="0 0 auto" class="table-box">
-        <perfect-scrollbar class="search-scrollbar">
-          <table mat-table [dataSource]="searchUserInfos">
-            <ng-container matColumnDef="profile">
-              <th
-                mat-header-cell
-                *matHeaderCellDef
-                #header
-                class="profile"
-                (mousedown)="resizeTable($event, header)"
-              >
-                {{ 'search.fieldProfile' | translate }}
-              </th>
-              <td mat-cell *matCellDef="let element">
-                <div class="profile">
-                  {{ getPresence(element, PresenceType.PC) }} /
-                  {{ getPresence(element, PresenceType.MOBILE) }} /
-                  {{ getWorkstatus(element) }} /
-                  <img
-                    class="thumbnail"
-                    ucapImage
-                    [base]="profileImageRoot"
-                    [path]="element.profileImageFile"
-                    [default]="'assets/images/img_nophoto_50.png'"
-                    (click)="onClickOpenProfile($event, element.seq)"
-                  />
-                </div>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="name">
-              <th
-                mat-header-cell
-                *matHeaderCellDef
-                #header
-                class="name"
-                (mousedown)="resizeTable($event, header)"
-              >
-                {{ 'search.fieldName' | translate }}
-              </th>
-              <td mat-cell *matCellDef="let element">
-                <div class="name">
-                  {{ element.name }}
-                </div>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="deptName">
-              <th
-                mat-header-cell
-                *matHeaderCellDef
-                #header
-                class="deptName"
-                (mousedown)="resizeTable($event, header)"
-              >
-                {{ 'search.fieldDeptartment' | translate }}
-              </th>
-              <td mat-cell *matCellDef="let element">
-                <div class="deptName">
-                  {{ element.deptName }}
-                </div>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="companyName">
-              <th
-                mat-header-cell
-                *matHeaderCellDef
-                #header
-                class="companyName"
-                (mousedown)="resizeTable($event, header)"
-              >
-                {{ 'search.fieldCompany' | translate }}
-              </th>
-              <td mat-cell *matCellDef="let element">
-                <div class="companyName">
-                  {{ element.companyName }}
-                </div>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="grade">
-              <th
-                mat-header-cell
-                *matHeaderCellDef
-                #header
-                class="grade"
-                (mousedown)="resizeTable($event, header)"
-              >
-                {{ 'search.fieldGrade' | translate }}
-              </th>
-              <td mat-cell *matCellDef="let element" class="grade">
-                <div class="grade">
-                  {{ element.grade }}
-                </div>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="lineNumber">
-              <th
-                mat-header-cell
-                *matHeaderCellDef
-                #header
-                class="lineNumber"
-                (mousedown)="resizeTable($event, header)"
-              >
-                {{ 'search.fieldOfficePhoneNumber' | translate }}
-              </th>
-              <td mat-cell *matCellDef="let element" class="lineNumber">
-                <div class="lineNumber">
-                  {{ element.lineNumber }}
-                </div>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="hpNumber">
-              <th
-                mat-header-cell
-                *matHeaderCellDef
-                #header
-                class="hpNumber"
-                (mousedown)="resizeTable($event, header)"
-              >
-                {{ 'search.fieldHandphone' | translate }}
-              </th>
-              <td mat-cell *matCellDef="let element" class="hpNumber">
-                <div class="hpNumber">
-                  {{ element.hpNumber }}
-                </div>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="email">
-              <th
-                mat-header-cell
-                *matHeaderCellDef
-                #header
-                class="email"
-                (mousedown)="resizeTable($event, header)"
-              >
-                {{ 'search.fieldEmail' | translate }}
-              </th>
-              <td mat-cell *matCellDef="let element" class="email">
-                <div class="email">
-                  {{ element.email }}
-                </div>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="responsibilities">
-              <th
-                mat-header-cell
-                *matHeaderCellDef
-                #header
-                class="responsibilities"
-                (mousedown)="resizeTable($event, header)"
-              >
-                {{ 'search.fieldResponsibilities' | translate }}
-              </th>
-              <td mat-cell *matCellDef="let element" class="responsibilities">
-                <div class="responsibilities">
-                  {{ element.responsibilities }}
-                </div>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="workplace">
-              <th
-                mat-header-cell
-                *matHeaderCellDef
-                #header
-                class="workplace"
-                (mousedown)="resizeTable($event, header)"
-              >
-                {{ 'search.fieldWorkPlace' | translate }}
-              </th>
-              <td mat-cell *matCellDef="let element" class="workplace">
-                <div class="workplace">
-                  {{ element.workplace }}
-                </div>
-              </td>
-            </ng-container>
-            <tr
-              mat-header-row
-              *matHeaderRowDef="displayedColumns; sticky: true"
-            ></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-          </table>
-        </perfect-scrollbar>
-      </div>
-      <div class="footer-fix">
-        <mat-paginator
-          [length]="totalCount"
-          [pageSize]="pageListCount"
-          [pageSizeOptions]="[10, 20, 30]"
-          (page)="onChangePage($event)"
-          showFirstLastButtons
-        ></mat-paginator>
-      </div>
-    </div>
-  </mat-card-content>
-  <!-- <mat-card-actions *ngIf="!hideAction" class="button-farm flex-row">
-    <button
-      mat-stroked-button
-      (click)="onClickChoice(false)"
-      class="mat-primary"
+<div fxLayout="column" class="rightDrawer-notice">
+  <div fxFlex="1 1 80px" class="search-area">
+    <ucap-integrated-search-form
+      [searchWord]="!!searchWord ? searchWord : ''"
+      (search)="onSearch($event)"
     >
-      {{ 'common.messages.no' | translate }}
-    </button>
-    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-      {{ 'common.messages.yes' | translate }}
-    </button>
-  </mat-card-actions> -->
-</mat-card>
+    </ucap-integrated-search-form>
+  </div>
+  <div style="position: relative;">
+    <div
+      *ngIf="searchingProcessing"
+      style="position: absolute; width: 100%; z-index: 101;"
+    >
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
+  </div>
+  <div fxFlex="0 0 auto" class="table-box">
+    <perfect-scrollbar class="search-scrollbar">
+      <table mat-table [dataSource]="searchUserInfos">
+        <ng-container matColumnDef="profile">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="profile"
+            (mousedown)="resizeTable($event, header)"
+          >
+            {{ 'search.fieldProfile' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element">
+            <div class="profile">
+              {{ getPresence(element, PresenceType.PC) }} /
+              {{ getPresence(element, PresenceType.MOBILE) }} /
+              {{ getWorkstatus(element) }} /
+              <img
+                class="thumbnail"
+                ucapImage
+                [base]="profileImageRoot"
+                [path]="element.profileImageFile"
+                [default]="'assets/images/img_nophoto_50.png'"
+                (click)="onClickOpenProfile($event, element.seq)"
+              />
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="name">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="name"
+            (mousedown)="resizeTable($event, header)"
+          >
+            {{ 'search.fieldName' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element">
+            <div class="name">
+              {{ element.name }}
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="deptName">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="deptName"
+            (mousedown)="resizeTable($event, header)"
+          >
+            {{ 'search.fieldDeptartment' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element">
+            <div class="deptName">
+              {{ element.deptName }}
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="companyName">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="companyName"
+            (mousedown)="resizeTable($event, header)"
+          >
+            {{ 'search.fieldCompany' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element">
+            <div class="companyName">
+              {{ element.companyName }}
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="grade">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="grade"
+            (mousedown)="resizeTable($event, header)"
+          >
+            {{ 'search.fieldGrade' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element" class="grade">
+            <div class="grade">
+              {{ element.grade }}
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="lineNumber">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="lineNumber"
+            (mousedown)="resizeTable($event, header)"
+          >
+            {{ 'search.fieldOfficePhoneNumber' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element" class="lineNumber">
+            <div class="lineNumber">
+              {{ element.lineNumber }}
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="hpNumber">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="hpNumber"
+            (mousedown)="resizeTable($event, header)"
+          >
+            {{ 'search.fieldHandphone' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element" class="hpNumber">
+            <div class="hpNumber">
+              {{ element.hpNumber }}
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="email">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="email"
+            (mousedown)="resizeTable($event, header)"
+          >
+            {{ 'search.fieldEmail' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element" class="email">
+            <div class="email">
+              {{ element.email }}
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="responsibilities">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="responsibilities"
+            (mousedown)="resizeTable($event, header)"
+          >
+            {{ 'search.fieldResponsibilities' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element" class="responsibilities">
+            <div class="responsibilities">
+              {{ element.responsibilities }}
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="workplace">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            #header
+            class="workplace"
+            (mousedown)="resizeTable($event, header)"
+          >
+            {{ 'search.fieldWorkPlace' | translate }}
+          </th>
+          <td mat-cell *matCellDef="let element" class="workplace">
+            <div class="workplace">
+              {{ element.workplace }}
+            </div>
+          </td>
+        </ng-container>
+        <tr
+          mat-header-row
+          *matHeaderRowDef="displayedColumns; sticky: true"
+        ></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      </table>
+    </perfect-scrollbar>
+  </div>
+  <div class="footer-fix">
+    <mat-paginator
+      [length]="totalCount"
+      [pageSize]="pageListCount"
+      [pageSizeOptions]="[10, 20, 30]"
+      (page)="onChangePage($event)"
+      showFirstLastButtons
+    ></mat-paginator>
+  </div>
+</div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
index f1fa0c59..96e5e494 100644
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
@@ -1,7 +1,9 @@
 <mat-card class="confirm-card mat-elevation-z">
-  <mat-card-header *ngIf="data.title">
-    <mat-card-title>{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+  <mat-card-header>
+    <mat-card-title *ngIf="data.title">{{ data.title }}</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div #messageContainer class="notice">
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.scss b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.scss
index f038cb15..d709168b 100644
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.scss
@@ -1,22 +1,30 @@
-.mat-card{
-  padding:10px;
-  .mat-card-header{
-    margin-bottom:20px;
-    .mat-card-title{
-      margin:0 -16px;
-      padding-bottom:10px;
+.mat-card {
+  padding: 10px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-title {
+      margin: 0 -16px;
+      padding-bottom: 10px;
+    }
+
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
     }
   }
   .button-farm {
-    text-align:right;
-    .mat-primary{
-      margin-left:4px;
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
     }
   }
 }
 
-form{
-.mat-form-field{
-  width:100%;
+form {
+  .mat-form-field {
+    width: 100%;
   }
 }
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
index b83605b0..c5d13a5f 100644
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.html
@@ -6,7 +6,9 @@
     class="card-header"
   >
     <mat-card-title>{{ data.title }}</mat-card-title>
-    <!-- <mat-card-subtitle>Confirm</mat-card-subtitle> -->
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
   </mat-card-header>
   <mat-card-content>
     <div #messageContainer class="notice">
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
index 013b206c..201ce5c0 100644
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/confirm.dialog.component.scss
@@ -1,25 +1,34 @@
-::ng-deep .mat-card-header-tex{
-  margin:0;
+::ng-deep .mat-card-header {
+  .mat-card-header-text {
+    margin: 0;
+  }
+  .btn-dialog-close {
+    font-size: 20px;
+    display: flex;
+    margin-left: auto;
+    align-self: flex-start;
+    color: #444444;
+  }
 }
-.mat-card{
-  padding:10px;
-  .mat-card-header{
-    margin-bottom:20px;
-    .mat-card-title{
-      margin:0 -16px;
-      padding-bottom:10px;
+.mat-card {
+  padding: 10px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-title {
+      margin: 0 -16px;
+      padding-bottom: 10px;
     }
   }
   .button-farm {
-    text-align:right;
-    .mat-primary{
-      margin-left:4px;
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
     }
   }
 }
 
-form{
-.mat-form-field{
-  width:100%;
+form {
+  .mat-form-field {
+    width: 100%;
   }
 }