UIも어느정도완성

Author: hirohiro-sys

src/components/Contributors.tsx

@@ -314,24 +314,35 @@ export const Contributors = () => {
       {/* 科目別過去問情報ページのメインレイアウト */}
       <Center>
         <Stack>
-          <Heading
-            fontFamily="serif"
-            fontSize="50px"
-            textAlign="center"
-            textShadow="3px 3px 6px rgba(0, 0, 0, 0.4)"
-            color="blackAlpha.700"
-            letterSpacing="wide"
-            fontWeight="bold"
-            mb={4}
-          >
-            📚過去問登録ページ
-          </Heading>
+        <Box position="relative" padding="1rem .5rem" mb={5}>
+            <Heading
+              fontFamily="serif"
+              fontSize="50px"
+              textAlign="center"
+              textShadow="3px 3px 6px rgba(0, 0, 0, 0.4)"
+              color="blackAlpha.700"
+              letterSpacing="wide"
+              fontWeight="bold"
+            >
+              過去問登録ページ
+            </Heading>
+            <Box
+              position="absolute"
+              bottom="0"
+              left="0"
+              width="100%"
+              height="4px"
+              content='""'
+              backgroundImage="linear-gradient(to left, #30cfd0 0%, #330867 100%)"
+            />
+          </Box>
 
           <Button
             bgColor="blackAlpha.700"
             color="white"
             border="2px"
             mb="30px"
+            borderRadius="full"
             onClick={onOpen}
             _hover={{
               bgColor: "white",

src/components/CreatePost.tsx

@@ -298,24 +298,34 @@ export const CreatePost = () => {
       {/* 以下過去問募集のメインページ */}
       <Center mb="30px">
         <Stack>
-          
-        <Heading
-            fontFamily="serif"
-            fontSize="50px"
-            textAlign="center"
-            textShadow="3px 3px 6px rgba(0, 0, 0, 0.4)"
-            color="blackAlpha.700"
-            letterSpacing="wide"
-            fontWeight="bold"
-            mb={4}
-          >
-            📣過去問募集ページ
-          </Heading>
+          <Box position="relative" padding="1rem .5rem" mb={5}>
+            <Heading
+              fontFamily="serif"
+              fontSize="50px"
+              textAlign="center"
+              textShadow="3px 3px 6px rgba(0, 0, 0, 0.4)"
+              color="blackAlpha.700"
+              letterSpacing="wide"
+              fontWeight="bold"
+            >
+              過去問募集ページ
+            </Heading>
+            <Box
+              position="absolute"
+              bottom="0"
+              left="0"
+              width="100%"
+              height="4px"
+              content='""'
+              backgroundImage="linear-gradient(to left, #30cfd0 0%, #330867 100%)"
+            />
+          </Box>
 
           <Button
             bgColor="blackAlpha.700"
             color="white"
             border="2px"
+            borderRadius="full"
             _hover={{
               bgColor: "white",
               color: "blackAlpha.700",
@@ -352,7 +362,7 @@ export const CreatePost = () => {
                   {kakomonPost.description}
                 </Td>
                 <Td>
-                <Button
+                  <Button
                     colorScheme="blackAlpha"
                     onClick={() => handleChatOpen(kakomonPost)}
                   >
@@ -362,7 +372,6 @@ export const CreatePost = () => {
                       style={{ marginLeft: "8px" }}
                     />
                   </Button>
-
                 </Td>
               </Tr>
             ))}

src/components/DetailApp.tsx

@@ -20,18 +20,28 @@ export const DetailApp = () => {
     <>
       <Center>
         <Stack>
-          <Heading
-            fontFamily="serif"
-            fontSize="50px"
-            textAlign="center"
-            textShadow="3px 3px 6px rgba(0, 0, 0, 0.4)"
-            color="blackAlpha.700"
-            letterSpacing="wide"
-            fontWeight="bold"
-            mb={4}
-          >
-            🧑‍💻管理者ページ
-          </Heading>
+        <Box position="relative" padding="1rem .5rem" mb={5}>
+            <Heading
+              fontFamily="serif"
+              fontSize="50px"
+              textAlign="center"
+              textShadow="3px 3px 6px rgba(0, 0, 0, 0.4)"
+              color="blackAlpha.700"
+              letterSpacing="wide"
+              fontWeight="bold"
+            >
+              管理者ページ
+            </Heading>
+            <Box
+              position="absolute"
+              bottom="0"
+              left="0"
+              width="100%"
+              height="4px"
+              content='""'
+              backgroundImage="linear-gradient(to left, #30cfd0 0%, #330867 100%)"
+            />
+          </Box>
           <Card maxW="md" m="auto" mt="20px" variant="outline" boxShadow="lg">
             <CardBody m="auto">
               <Flex gap="4" alignItems="center" mb="20px">
@@ -80,7 +90,7 @@ export const DetailApp = () => {
         </Stack>
       </Center>
       {/* 現状更新情報はハードコーディングしている(本当はここもDBで管理したほうが良さそう) */}
-      <Text fontSize="30px" fontWeight="bold">
+      <Text fontSize="30px" fontWeight="bold" mt="50px">
         <Text as="span" fontSize="36px" color="green.500">
           更
         </Text>