From 5d22b44c6df2771433dca5b5915e205a5424307b Mon Sep 17 00:00:00 2001
From: Jonathan Treffler <jonathan.treffler@verdigado.com>
Date: Tue, 26 Nov 2024 23:58:10 +0100
Subject: [PATCH] frontend member list design improvements

---
 .../MemberList/ResourceMembersList.vue        | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/MemberList/ResourceMembersList.vue b/src/components/MemberList/ResourceMembersList.vue
index 2183201..33118f8 100644
--- a/src/components/MemberList/ResourceMembersList.vue
+++ b/src/components/MemberList/ResourceMembersList.vue
@@ -10,6 +10,7 @@ import MemberListItem from "./MemberListItem.vue";
 import Plus from "vue-material-design-icons/Plus.vue";
 import Close from "vue-material-design-icons/Close.vue";
 import HelpCircle from "vue-material-design-icons/HelpCircle.vue";
+import AccountOff from "vue-material-design-icons/AccountOff.vue";
 import api from "../../api.js";
 import { ref } from 'vue';
 
@@ -60,7 +61,7 @@ const deleteMember = (memberId) => {
 
 <template>
 	<div>
-		<div class="title">
+		<div class="header-button-group">
 			<h3>Mitglieder</h3>
 			<NcActions :disabled="!!newMemberType" type="secondary">
 				<template #icon>
@@ -113,7 +114,11 @@ const deleteMember = (memberId) => {
 				</tr>
 				<tr v-if="!loading && !members.length">
 					<td colspan="4" style="grid-column-start: 1; grid-column-end: 5">
-						<NcEmptyContent name="Keine Mitglieder" />
+						<NcEmptyContent name="Keine Mitglieder">
+							<template #icon>
+								<AccountOff />
+							</template>
+						</NcEmptyContent>
 					</td>
 				</tr>
 				<MemberListItem v-for="member in members"
@@ -139,17 +144,20 @@ const deleteMember = (memberId) => {
 	table td, table th {
 		padding: 8px;
 	}
-	.title {
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		margin-top: 24px;
-	}
-	h3 {
-		font-weight: bold;
-		margin-right: 24px;
-	}
 	.new-item {
 		display: flex;
 	}
+
+	.header-button-group {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		column-gap: 10px;
+		margin-top: 24px;
+		margin-bottom: 12px;
+
+		h1, h2, h3 {
+			margin: 0px;
+		}
+	}
 </style>