エラーページの再構成

CHANGELOG_CHERRYPICK.md

@@ -54,6 +54,7 @@
 
 ### Server
 - 미디어 타임라인 개선
+- 오류 페이지 재구성
 
 ---
 

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;