From b76802f59fc4cd4339e5a4372e5d8660eb65c7a8 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 20 Jul 2023 11:01:18 +0200
Subject: [PATCH] Add close button and style the headline of the UserSearch.

---
 .../components/Chat/AddChatRoomByUserSearch.vue  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Chat/AddChatRoomByUserSearch.vue b/webapp/components/Chat/AddChatRoomByUserSearch.vue
index b5cf5a063..f88b4f1e6 100644
--- a/webapp/components/Chat/AddChatRoomByUserSearch.vue
+++ b/webapp/components/Chat/AddChatRoomByUserSearch.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="add-chat-room-by-user-search">
     <!-- Wolle -->
-    <h2 class="title">{{ $t('chat.addRoomHeadline') }}</h2>
+    <ds-flex class="headline">
+      <h2 class="title">{{ $t('chat.addRoomHeadline') }}</h2>
+      <base-button class="close-button" icon="close" circle @click="closeUserSearch"/>
+    </ds-flex>
     <ds-space margin-bottom="small" />
     <ds-space>
       <select-user-search :id="id" ref="selectUserSearch" @select-user="selectUser" />
@@ -15,7 +18,7 @@ import SelectUserSearch from '~/components/generic/SelectUserSearch/SelectUserSe
 export default {
   name: 'AddChatRoomByUserSearch',
   components: {
-    SelectUserSearch,
+    SelectUserSearch
   },
   props: {
     // chatRooms: {
@@ -44,6 +47,9 @@ export default {
     async addChatRoom(userId) {
       this.$emit('add-chat-room', userId)
     },
+    closeUserSearch() {
+      this.$emit('close-user-search')
+    },
   },
 }
 </script>
@@ -53,4 +59,10 @@ export default {
   background-color: white;
   padding: $space-base;
 }
+.ds-flex.headline {
+  justify-content: space-between;
+}
+.ds-flex.headline .close-button {
+  margin-top: -6px;
+}
 </style>