From 4cb29beeaa22d89bb2fa32b5c525e65f43a884dc Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 16 Jan 2023 11:40:06 -0800
Subject: [PATCH] display MkAvatars nicer

---
 package.json                                 |  2 +-
 packages/client/src/components/MkAvatars.vue | 26 +++++++++++++++++---
 packages/client/src/widgets/user-list.vue    | 23 +++--------------
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 0aa06d40a..5afab94cc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "13.0.8-rc2",
+	"version": "13.0.8-rc3",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkAvatars.vue b/packages/client/src/components/MkAvatars.vue
index 958e5db0a..b43edec4a 100644
--- a/packages/client/src/components/MkAvatars.vue
+++ b/packages/client/src/components/MkAvatars.vue
@@ -1,7 +1,7 @@
 <template>
-<div>
-	<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
-		<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/>
+<div class="defgtij">
+	<div v-for="user in users" :key="user.id" class="users">
+		<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 	</div>
 </div>
 </template>
@@ -22,3 +22,23 @@ onMounted(async () => {
 	});
 });
 </script>
+
+<style lang="scss">
+.defgtij {
+	padding: 12px;
+
+	> .users {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
+		grid-gap: 12px;
+		place-content: center;
+		padding: 12px;
+
+		> .avatar {
+			width: 100%;
+			height: 100%;
+			aspect-ratio: 1;
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/widgets/user-list.vue b/packages/client/src/widgets/user-list.vue
index 61cdbe757..6ee6dc05a 100644
--- a/packages/client/src/widgets/user-list.vue
+++ b/packages/client/src/widgets/user-list.vue
@@ -1,7 +1,6 @@
 <template>
 	<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
-		<template #icon><i class="ph-user-list-bold ph-lg"></i></template>
-		<template #header>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
+		<template #header><i class="ph-user-list-bold ph-lg"></i> {{ list ? list.name : i18n.ts._widgets.userList }}</template>
 		<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ph-gear-six-bold ph-lg"></i></button></template>
 	
 		<div class="wsdlkfj">
@@ -10,7 +9,7 @@
 			</div>
 			<MkLoading v-else-if="fetching"/>
 			<div v-else class="users">
-				<MkAvatars :user-ids="users"/>
+				<MkAvatars :user-ids="users" class="userAvatars"/>
 			</div>
 		</div>
 	</MkContainer>
@@ -94,26 +93,10 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 	
-	<style lang="scss" module>
+<style lang="scss" module>
 .wsdlkfj {
 	> .init {
 		padding: 16px;
 	}
-	> .users {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
-		grid-gap: 12px;
-		place-content: center;
-		padding: 16px;
-		> .user {
-			width: 100%;
-			height: 100%;
-			aspect-ratio: 1;
-			> .avatar {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
 }
 </style>