refactor(client): use css modules

1 files changed, 27 insertions, 15 deletions

diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index d1f37d398f..84500a62dd 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -9,8 +9,15 @@
 
 <XUpload v-if="uploads.length > 0"/>
 
-<TransitionGroup :name="$store.state.animation ? 'notification' : ''" tag="div" class="notifications">
-	<XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" class="notification"/>
+<TransitionGroup
+	tag="div" :class="$style.notifications"
+	:move-class="$store.state.animation ? $style.transition_notification_move : ''"
+	:enter-active-class="$store.state.animation ? $style.transition_notification_enterActive : ''"
+	:leave-active-class="$store.state.animation ? $style.transition_notification_leaveActive : ''"
+	:enter-from-class="$store.state.animation ? $style.transition_notification_enterFrom : ''"
+	:leave-to-class="$store.state.animation ? $style.transition_notification_leaveTo : ''"
+>
+	<XNotification v-for="notification in notifications" :key="notification.id" :notification="notification" :class="$style.notification"/>
 </TransitionGroup>
 
 <XStreamIndicator/>
@@ -73,11 +80,14 @@ if ($i) {
 }
 </script>
 
-<style lang="scss" scoped>
-.notification-move, .notification-enter-active, .notification-leave-active {
+<style lang="scss" module>
+.transition_notification_move,
+.transition_notification_enterActive,
+.transition_notification_leaveActive {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.notification-enter-from, .notification-leave-to {
+.transition_notification_enterFrom,
+.transition_notification_leaveTo {
 	opacity: 0;
 	transform: translateX(-250px);
 }
@@ -91,25 +101,27 @@ if ($i) {
 	padding: 0 32px;
 	pointer-events: none;
 	container-type: inline-size;
+}
 
-	> .notification {
-		& + .notification {
-			margin-top: 8px;
-		}
+.notification {
+	& + .notification {
+		margin-top: 8px;
 	}
+}
 
-	@media (max-width: 500px) {
+@media (max-width: 500px) {
+	.notifications {
 		top: initial;
 		bottom: calc(var(--minBottomSpacing) + var(--margin));
 		padding: 0 var(--margin);
 		display: flex;
 		flex-direction: column-reverse;
+	}
 
-		> .notification {
-			& + .notification {
-				margin-top: 0;
-				margin-bottom: 8px;
-			}
+	.notification {
+		& + .notification {
+			margin-top: 0;
+			margin-bottom: 8px;
 		}
 	}
 }