From 33a28b0769ea5302b4f394985155ed53e2cba266 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Tue, 27 Jun 2023 19:00:33 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=81=AE=E5=86=8D=E6=A7=8B=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                 |  1 +
 packages/backend/src/server/web/boot.js | 26 ++++++++++++++-----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 4af19372c3..9cea1008b4 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -54,6 +54,7 @@
 
 ### Server
 - 미디어 타임라인 개선
+- 오류 페이지 재구성
 
 ---
 
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index 3fcd3afe33..80ed066e8b 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -166,14 +166,14 @@
 				<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
 			</svg>
 			<h1>Failed to load<br>読み込みに失敗しました<br>뭔가 문제가 있는 것 같아요!</h1>
-			<button class="button-big" onclick="location.reload(true);">
+			<button class="button-big" style="margin: 0 0 12px !important;" onclick="location.reload(true);">
 				<span class="button-label-big">Reload / リロード / 새로고침</span>
 			</button>
 			<p><b>The following actions may solve the problem. / 以下を行うと解決する可能性があります。/ 아래 과정을 진행하면 해결될 수도 있어요.</b></p>
 			<p>Clear the browser cache / ブラウザのキャッシュをクリアする / 브라우저의 캐시 지우기</p>
 			<p>Update your os and browser / ブラウザおよびOSを最新バージョンに更新する / 브라우저와 OS를 최신 버전으로 업데이트 하기</p>
 			<p>Disable an adblocker / アドブロッカーを無効にする / 광고 차단기를 비활성화 하기</p>
-			<details style="color: #86b300;">
+			<details style="color: rgb(255, 197, 230);">
 				<summary>Other options / その他のオプション / 기타 옵션</summary>
 				<a href="/flush">
 					<button class="button-small">
@@ -244,7 +244,7 @@
 
 		body,
 		html {
-			background-color: #222;
+			background-color: rgb(28, 28, 37);
 			color: #dfddcc;
 			justify-content: center;
 			margin: auto;
@@ -257,36 +257,40 @@
 			padding: 0px 12px 0px 12px;
 			border: none;
 			cursor: pointer;
-			margin-bottom: 12px;
+			margin-top: 12px;
+			
+			&:not(:first-child) {
+				margin-bottom: 12px;
+			}
 		}
 
 		.button-big {
-			background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0));
+			background: linear-gradient(90deg, rgb(255, 207, 230), rgb(185, 216, 255));
 			line-height: 50px;
 		}
 
 		.button-big:hover {
-			background: rgb(153, 204, 0);
+			background: rgb(255, 222, 241);
 		}
 
 		.button-small {
-			background: #444;
+			background: rgb(35, 35, 47);
 			line-height: 40px;
 		}
 
 		.button-small:hover {
-			background: #555;
+			background: rgba(255, 255, 255, 0.1);
 		}
 
 		.button-label-big {
-			color: #222;
+			color: rgb(28, 28, 37);
 			font-weight: bold;
 			font-size: 1.2em;
 			padding: 12px;
 		}
 
 		.button-label-small {
-			color: rgb(153, 204, 0);
+			color: rgb(185, 216, 255);
 			font-size: 16px;
 			padding: 12px;
 		}
@@ -317,7 +321,7 @@
 		}
 
 		#errorInfo {
-			background: #333;
+			background: rgb(35, 35, 47);
 			margin-bottom: 2rem;
 			padding: 0.5rem 1rem;
 			width: 40rem;