diff --git a/apps/client/src/scenes/result/ResultScene.tsx b/apps/client/src/scenes/result/ResultScene.tsx index d52f159..70efd8c 100644 --- a/apps/client/src/scenes/result/ResultScene.tsx +++ b/apps/client/src/scenes/result/ResultScene.tsx @@ -12,6 +12,8 @@ import { ResultTabBar } from "./components/ResultTabBar"; import { RESULT_BACKGROUND_DARK_OVERLAY_STYLE, + RESULT_RANKING_ACTION_BAR_STYLE, + RESULT_RANKING_HEADER_STYLE, RESULT_CONTENT_STYLE, RESULT_KEYFRAMES_CSS, RESULT_ROOT_STYLE, @@ -88,17 +90,23 @@
- {isRankingVisible && ( - + {isRankingVisible ? ( +
+

+ 結果発表 +

+ +
+ ) : ( +

+ 結果発表 +

)} -

- 結果発表 -

- {!isRankingVisible && (
Tap To Result
)} diff --git a/apps/client/src/scenes/result/components/ResultActionBar.tsx b/apps/client/src/scenes/result/components/ResultActionBar.tsx index 952cb48..2c93198 100644 --- a/apps/client/src/scenes/result/components/ResultActionBar.tsx +++ b/apps/client/src/scenes/result/components/ResultActionBar.tsx @@ -3,6 +3,7 @@ * リザルト画面の操作ボタンを表示する * タイトル遷移と最終マップ表示への切り替えを担当する */ +import type { CSSProperties } from "react"; import { OVERLAY_BUTTON_ROW_STYLE, OVERLAY_BUTTON_STYLE, @@ -11,12 +12,17 @@ type Props = { onBackToTitle: () => void; onShowMapPreview: () => void; + style?: CSSProperties; }; /** リザルト画面の操作ボタン行を描画するコンポーネント */ -export const ResultActionBar = ({ onBackToTitle, onShowMapPreview }: Props) => { +export const ResultActionBar = ({ + onBackToTitle, + onShowMapPreview, + style, +}: Props) => { return ( -
+
diff --git a/apps/client/src/scenes/result/styles/resultStyles.ts b/apps/client/src/scenes/result/styles/resultStyles.ts index 922ec82..b36e66b 100644 --- a/apps/client/src/scenes/result/styles/resultStyles.ts +++ b/apps/client/src/scenes/result/styles/resultStyles.ts @@ -29,7 +29,7 @@ /** 結果発表タイトルのスタイル */ export const RESULT_TITLE_STYLE: CSSProperties = { - margin: "0 0 20px 0", + margin: "0 0 10px 0", fontSize: "clamp(1.8rem, 4.4vw, 2.6rem)", fontFamily: "'Yu Mincho', 'Hiragino Mincho ProN', serif", letterSpacing: "0.14em", @@ -38,6 +38,27 @@ animation: "titleGleam 3.6s ease-in-out infinite", }; +/** リザルト表示時のヘッダー領域スタイル */ +export const RESULT_RANKING_HEADER_STYLE: CSSProperties = { + width: "100%", + maxWidth: "960px", + minHeight: "44px", + position: "relative", + display: "flex", + justifyContent: "center", + alignItems: "flex-start", + marginBottom: "6px", +}; + +/** リザルト表示時の右上操作ボタン行スタイル */ +export const RESULT_RANKING_ACTION_BAR_STYLE: CSSProperties = { + width: "auto", + position: "absolute", + top: 0, + right: 0, + marginBottom: 0, +}; + /** リザルト画面本文レイヤーのスタイル */ export const RESULT_CONTENT_STYLE: CSSProperties = { width: "100%", @@ -263,7 +284,7 @@ width: "100%", maxWidth: "720px", gap: "4px", - marginBottom: "16px", + marginBottom: "10px", }; /** タブボタンのスタイルを返す */