From 9aecfe5ed99c0929b1dee636563d84cc2999c894 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 7 Jun 2023 16:55:43 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20=E3=83=A2=E3=83=90=E3=82=A4?=
 =?UTF-8?q?=E3=83=AB=E3=81=A7UI=E3=81=AB=E3=81=BC=E3=81=8B=E3=81=97?=
 =?UTF-8?q?=E5=8A=B9=E6=9E=9C=E3=82=92=E3=82=AA=E3=83=95=E3=81=AB=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E3=81=A8=E3=80=81=E3=83=88=E3=83=BC=E3=82=B9=E3=83=88?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5=E3=81=AE=E8=83=8C=E6=99=AF=E3=81=8C=E4=B8=8D?=
 =?UTF-8?q?=E9=80=8F=E6=98=8E=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                             |  1 +
 packages/frontend/src/components/MkToast.vue        | 11 ++++++++---
 packages/frontend/src/components/MkWelcomeToast.vue | 12 +++++++-----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index c14a96f95f..03020a7128 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -29,6 +29,7 @@
 - 타임라인에 노트의 답글을 표시하는 옵션의 기본값을 켜짐으로 설정
 
 ### Client
+- 모바일에서 UI 흐림 효과를 끄면 토스트 알림의 배경이 불투명하게 표시되도록
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: 네트워크 트래픽이 10MB/s를 초과하면 네트워크 통계 위젯의 그래프가 잘못 출력되는 문제
 
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
index e135f56472..541ec4dd85 100644
--- a/packages/frontend/src/components/MkToast.vue
+++ b/packages/frontend/src/components/MkToast.vue
@@ -7,7 +7,7 @@
 		:leaveToClass="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''"
 		appear @afterLeave="emit('closed')"
 	>
-		<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
+		<div v-if="showing" class="_acrylic" :class="[$style.root, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ zIndex }">
 			<div style="padding: 16px 24px;">
 				{{ message }}
 			</div>
@@ -55,8 +55,7 @@ onMounted(() => {
 	left: 0;
 	right: 0;
 	top: 50px;
-	margin: 0 auto;
-	margin-top: 16px;
+	margin: 16px auto 0;
 	min-width: 300px;
 	max-width: calc(100% - 32px);
 	width: min-content;
@@ -65,5 +64,11 @@ onMounted(() => {
 	overflow: clip;
 	text-align: center;
 	pointer-events: none;
+
+	@media (max-width: 500px) {
+		&.reduceBlurEffect {
+			background: var(--panel);
+		}
+	}
 }
 </style>
diff --git a/packages/frontend/src/components/MkWelcomeToast.vue b/packages/frontend/src/components/MkWelcomeToast.vue
index 86178883d0..e9c0022cf0 100644
--- a/packages/frontend/src/components/MkWelcomeToast.vue
+++ b/packages/frontend/src/components/MkWelcomeToast.vue
@@ -7,7 +7,7 @@
 		:leaveToClass="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''"
 		appear @afterLeave="emit('closed')"
 	>
-		<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
+		<div v-if="showing" class="_acrylic" :class="[$style.root, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ zIndex }">
 			<CPAvatar :class="$style.avatar" :user="$i"/>
 			<div style="padding: 16px 24px;">
 				{{ message }}
@@ -58,8 +58,7 @@ onMounted(() => {
 	left: 0;
 	right: 0;
 	top: 50px;
-	margin: 0 auto;
-	margin-top: 16px;
+	margin: 16px auto 0;
 	min-width: 300px;
 	max-width: calc(100% - 32px);
 	width: min-content;
@@ -68,11 +67,14 @@ onMounted(() => {
 	overflow: clip;
 	text-align: center;
 	pointer-events: none;
-	transition: opacity 0.5s, transform 0.5s;
 
 	@media (max-width: 500px) {
 		width: 100%;
-		top: 0px;
+		top: 0;
+
+		&.reduceBlurEffect {
+			background: var(--panel);
+		}
 	}
 }