refactor(client): use css modules

1 files changed, 73 insertions, 75 deletions

diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index e420c0ffac..4c79979cb7 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -9,8 +9,8 @@
 	@closed="$emit('closed')"
 >
 	<template #header>{{ i18n.ts.selectUser }}</template>
-	<div class="tbhwbxda">
-		<div class="form">
+	<div :class="$style.root">
+		<div :class="$style.form">
 			<FormSplit :min-width="170">
 				<MkInput v-model="username" :autofocus="true" @update:model-value="search">
 					<template #label>{{ i18n.ts.username }}</template>
@@ -22,27 +22,27 @@
 				</MkInput>
 			</FormSplit>
 		</div>
-		<div v-if="username != '' || host != ''" class="result" :class="{ hit: users.length > 0 }">
-			<div v-if="users.length > 0" class="users">
-				<div v-for="user in users" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-					<div class="body">
-						<MkUserName :user="user" class="name"/>
-						<MkAcct :user="user" class="acct"/>
+		<div v-if="username != '' || host != ''" :class="[$style.result, { [$style.hit]: users.length > 0 }]">
+			<div v-if="users.length > 0" :class="$style.users">
+				<div v-for="user in users" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()">
+					<MkAvatar :user="user" :class="$style.avatar" :show-indicator="true" :disable-link="true" :disable-preview="true"/>
+					<div :class="$style.userBody">
+						<MkUserName :user="user" :class="$style.userName"/>
+						<MkAcct :user="user" :class="$style.userAcct"/>
 					</div>
 				</div>
 			</div>
-			<div v-else class="empty">
+			<div v-else :class="$style.empty">
 				<span>{{ i18n.ts.noUsers }}</span>
 			</div>
 		</div>
-		<div v-if="username == '' && host == ''" class="recent">
-			<div class="users">
-				<div v-for="user in recentUsers" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-					<div class="body">
-						<MkUserName :user="user" class="name"/>
-						<MkAcct :user="user" class="acct"/>
+		<div v-if="username == '' && host == ''" :class="$style.recent">
+			<div :class="$style.users">
+				<div v-for="user in recentUsers" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()">
+					<MkAvatar :user="user" :class="$style.avatar" :show-indicator="true" :disable-link="true" :disable-preview="true"/>
+					<div :class="$style.userBody">
+						<MkUserName :user="user" :class="$style.userName"/>
+						<MkAcct :user="user" :class="$style.userAcct"/>
 					</div>
 				</div>
 			</div>
@@ -115,76 +115,74 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.tbhwbxda {
-	> .form {
-		padding: 0 var(--root-margin);
-	}
+<style lang="scss" module>
+.root {
+}
 
-	> .result, > .recent {
-		display: flex;
-		flex-direction: column;
-		overflow: auto;
-		height: 100%;
+.form {
+	padding: 0 var(--root-margin);
+}
 
-		&.result.hit {
-			padding: 0;
-		}
+.result,
+.recent {
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	height: 100%;
 
-		&.recent {
-			padding: 0;
-		}
+	&.result.hit {
+		padding: 0;
+	}
 
-		> .users {
-			flex: 1;
-			overflow: auto;
-			padding: 8px 0;
+	&.recent {
+		padding: 0;
+	}
+}
 
-			> .user {
-				display: flex;
-				align-items: center;
-				padding: 8px var(--root-margin);
-				font-size: 14px;
+.users {
+	flex: 1;
+	overflow: auto;
+	padding: 8px 0;
+}
 
-				&:hover {
-					background: var(--X7);
-				}
+.user {
+	display: flex;
+	align-items: center;
+	padding: 8px var(--root-margin);
+	font-size: 14px;
 
-				&.selected {
-					background: var(--accent);
-					color: #fff;
-				}
+	&:hover {
+		background: var(--X7);
+	}
 
-				> * {
-					pointer-events: none;
-					user-select: none;
-				}
+	&.selected {
+		background: var(--accent);
+		color: #fff;
+	}
+}
 
-				> .avatar {
-					width: 45px;
-					height: 45px;
-				}
+.userBody {
+	padding: 0 8px;
+	min-width: 0;
+}
 
-				> .body {
-					padding: 0 8px;
-					min-width: 0;
+.avatar {
+	width: 45px;
+	height: 45px;
+}
 
-					> .name {
-						display: block;
-						font-weight: bold;
-					}
+.userName {
+	display: block;
+	font-weight: bold;
+}
 
-					> .acct {
-						opacity: 0.5;
-					}
-				}
-			}
-		}
+.userAcct {
+	opacity: 0.5;
+}
 
-		> .empty {
-			opacity: 0.7;
-			text-align: center;
-		}
-	}
+.empty {
+	opacity: 0.7;
+	text-align: center;
+	padding: 16px;
 }
 </style>