From d2eec3a9e457d4c8bab595c14b4f8e8b79099a26 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 24 May 2023 14:34:46 +0900
Subject: refactor

---
 .../frontend/src/widgets/WidgetInstanceCloud.vue   |  4 ----
 .../frontend/src/widgets/WidgetOnlineUsers.vue     | 26 +++++++++-------------
 2 files changed, 11 insertions(+), 19 deletions(-)

(limited to 'packages/frontend/src/widgets')

diff --git a/packages/frontend/src/widgets/WidgetInstanceCloud.vue b/packages/frontend/src/widgets/WidgetInstanceCloud.vue
index 79bd4b55fd..f8b811e6ba 100644
--- a/packages/frontend/src/widgets/WidgetInstanceCloud.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceCloud.vue
@@ -72,7 +72,3 @@ defineExpose<WidgetComponentExpose>({
 	id: props.widget ? props.widget.id : null,
 });
 </script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/widgets/WidgetOnlineUsers.vue b/packages/frontend/src/widgets/WidgetOnlineUsers.vue
index f95103b0b9..c920c3ca53 100644
--- a/packages/frontend/src/widgets/WidgetOnlineUsers.vue
+++ b/packages/frontend/src/widgets/WidgetOnlineUsers.vue
@@ -1,8 +1,10 @@
 <template>
-<div data-cy-mkw-onlineUsers class="mkw-onlineUsers" :class="{ _panel: !widgetProps.transparent, pad: !widgetProps.transparent }">
-	<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" textTag="span" class="text">
-		<template #n><b>{{ number(onlineUsersCount) }}</b></template>
-	</I18n>
+<div data-cy-mkw-onlineUsers :class="[$style.root, { _panel: !widgetProps.transparent, [$style.pad]: !widgetProps.transparent }]">
+	<span :class="$style.text">
+		<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" textTag="span">
+			<template #n><b style="color: #41b781;">{{ number(onlineUsersCount) }}</b></template>
+		</I18n>
+	</span>
 </div>
 </template>
 
@@ -55,22 +57,16 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
-.mkw-onlineUsers {
+<style lang="scss" module>
+.root {
 	text-align: center;
 
 	&.pad {
 		padding: 16px 0;
 	}
+}
 
-	> .text {
-		::v-deep(b) {
-			color: #41b781;
-		}
-
-		::v-deep(span) {
-			opacity: 0.7;
-		}
-	}
+.text {
+	color: var(--fgTransparentWeak);
 }
 </style>
-- 
cgit v1.2.3-freya