From 5528f2507b93bd4e4fd897a8ef8f3db83c4614c2 Mon Sep 17 00:00:00 2001
From: "Sakamoto, Kazunori" <exKAZUu@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:45:42 +0900
Subject: [PATCH] fix: refine layout (#160)

Co-authored-by: Sakamoto, Kazunori <exKAZUu@users.noreply.github.com>
Co-authored-by: Hikaru Ishiwata <145771843+hishiwat@users.noreply.github.com>
Co-authored-by: Hikaru Ishiwata <hikaru160830@gmail.com>
---
 .../problems/[problemId]/ProblmBody.tsx       | 15 +----
 .../problems/[problemId]/pageOnClient.tsx     | 63 +++++++++++++------
 src/app/(withAuth)/layout.tsx                 |  2 +-
 3 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
index 539254c1..c6c366d2 100644
--- a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
@@ -143,19 +143,6 @@ export const ProblemBody: React.FC<Props> = (props) => {
                     ステップ実行モード
                   </Tag>
                 )}
-                {problemType === 'executionResult' && (
-                  <Tooltip label="減点になりますが、確実に問題を解けます。">
-                    <Button
-                      colorScheme="brand"
-                      variant="outline"
-                      onClick={() => {
-                        void props.updateProblemSession('step', 1);
-                      }}
-                    >
-                      諦めてステップ実行モードに移る
-                    </Button>
-                  </Tooltip>
-                )}
               </HStack>
 
               <Box>
@@ -228,7 +215,7 @@ export const ProblemBody: React.FC<Props> = (props) => {
                 )}
               />
             </VStack>
-            <Box flexBasis={0} flexGrow={3} pt={8}>
+            <Box flexBasis={0} flexGrow={3}>
               <Variables traceItemVars={props.problem.traceItems[currentTraceItemIndex].vars} />
             </Box>
           </HStack>
diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/pageOnClient.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/pageOnClient.tsx
index bb861535..bd1e6eff 100644
--- a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/pageOnClient.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/pageOnClient.tsx
@@ -10,7 +10,15 @@ import {
   MIN_INTERVAL_MS_OF_ACTIVE_EVENTS,
 } from '../../../../../../../../constants';
 import { backendTrpcReact } from '../../../../../../../../infrastructures/trpcBackend/client';
-import { Heading, HStack, Link, Text, VStack } from '../../../../../../../../infrastructures/useClient/chakra';
+import {
+  Button,
+  Heading,
+  HStack,
+  Link,
+  Text,
+  Tooltip,
+  VStack,
+} from '../../../../../../../../infrastructures/useClient/chakra';
 import type { Problem } from '../../../../../../../../problems/generateProblem';
 import type { CourseId, ProblemId } from '../../../../../../../../problems/problemData';
 import { courseIdToLectureIds, courseIdToName, problemIdToName } from '../../../../../../../../problems/problemData';
@@ -50,33 +58,50 @@ export const ProblemPageOnClient: React.FC<Props> = (props) => {
     });
   };
 
-  const updateProblemSession = async (problemType: string, traceItemIndex: number): Promise<void> => {
+  const updateProblemSession = async (newProblemType: string, newTraceItemIndex: number): Promise<void> => {
     const newProblemSession = await updateProblemSessionMutation.mutateAsync({
       id: problemSession.id,
-      problemType,
-      traceItemIndex,
+      problemType: newProblemType,
+      traceItemIndex: newTraceItemIndex,
     });
     setProblemSession(newProblemSession);
   };
 
   return (
-    <VStack align="stretch" spacing={8}>
+    <VStack align="stretch" spacing={4}>
       <VStack align="stretch" spacing={1}>
-        <HStack spacing={2}>
-          <Link as={NextLink} color="gray.600" fontWeight="bold" href={`/courses/${props.params.courseId}`}>
-            {courseIdToName[props.params.courseId]}
-          </Link>
-          <Text color="gray.600">{'>'}</Text>
-          <Link
-            as={NextLink}
-            color="gray.600"
-            fontWeight="bold"
-            href={`/courses/${props.params.courseId}/lectures/${props.params.lectureId}`}
-          >
-            第{lectureIndex + 1}回
-          </Link>
+        <HStack justify="space-between" spacing={2}>
+          <HStack spacing={2}>
+            <Link as={NextLink} color="gray.600" fontWeight="bold" href={`/courses/${props.params.courseId}`}>
+              {courseIdToName[props.params.courseId]}
+            </Link>
+            <Text color="gray.600">{'>'}</Text>
+            <Link
+              as={NextLink}
+              color="gray.600"
+              fontWeight="bold"
+              href={`/courses/${props.params.courseId}/lectures/${props.params.lectureId}`}
+            >
+              第{lectureIndex + 1}回
+            </Link>
+          </HStack>
+        </HStack>
+        <HStack justify="space-between" spacing={2}>
+          <Heading as="h1">{problemIdToName[props.params.problemId]}</Heading>
+          {problemSession.problemType === 'executionResult' && (
+            <Tooltip label="減点になりますが、確実に問題を解けます。">
+              <Button
+                colorScheme="blue"
+                variant="outline"
+                onClick={() => {
+                  void updateProblemSession('step', 1);
+                }}
+              >
+                諦めてステップ実行モードに移る
+              </Button>
+            </Tooltip>
+          )}
         </HStack>
-        <Heading as="h1">{problemIdToName[props.params.problemId]}</Heading>
       </VStack>
 
       <ProblemBody
diff --git a/src/app/(withAuth)/layout.tsx b/src/app/(withAuth)/layout.tsx
index d8ecfc4d..aa1bd2b7 100644
--- a/src/app/(withAuth)/layout.tsx
+++ b/src/app/(withAuth)/layout.tsx
@@ -42,7 +42,7 @@ const DefaultLayout: NextPage<LayoutProps> = async ({ children }) => {
 
       <DefaultHeader />
       <Suspense fallback={<Spinner left="50%" position="fixed" top="50%" transform="translate(-50%, -50%)" />}>
-        <Container pb={16} pt={12}>
+        <Container pb={16} pt={6}>
           {children}
         </Container>
       </Suspense>