Merge pull request #44 from su-its/chore/bg-color

feat:背景を黒に変更
su-its · Mar 29, 2024 · 62dfc5d · 62dfc5d
2 parents d164a11 + 1eacd69
commit 62dfc5d
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/typing-app/src/app/globals.css b/typing-app/src/app/globals.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 255, 255, 255;
+  --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 0, 0, 0;
   --background-end-rgb: 0, 0, 0;
 }

diff --git a/typing-app/src/app/layout.tsx b/typing-app/src/app/layout.tsx
@@ -20,9 +20,9 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <ChakraProvider>
-          <Box minH="100vh" display="flex" flexDirection="column">
+          <Box minH="100vh" display="flex" flexDirection="column" bg="black">
             <Header />
-            <Box flex="1" bg="gray.100" py={2}>
+            <Box flex="1" py={2}>
               {children}
             </Box>
             <Footer />

diff --git a/typing-app/src/components/molecules/BrandText.tsx b/typing-app/src/components/molecules/BrandText.tsx
@@ -5,8 +5,12 @@ const BrandText: React.FC = () => {
   return (
     <Box>
       <HStack>
-        <Text fontSize="50px">ITS</Text>
-        <Text fontSize="sm">静岡大学ITソルーション室</Text>
+        <Text fontSize="50px" color={"white"}>
+          ITS
+        </Text>
+        <Text fontSize="20px" color={"white"}>
+          静岡大学ITソルーション室
+        </Text>
       </HStack>
     </Box>
   );

diff --git a/typing-app/src/components/molecules/UserCard.tsx b/typing-app/src/components/molecules/UserCard.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { Avatar, Box, Text, HStack, VStack } from "@chakra-ui/react";
 
 const UserCard: React.FC = () => {
-  const bgColor = "#0000cd"; // 濃い青の背景色
 
   // モックのユーザー情報
   const user = {
@@ -13,14 +12,14 @@ const UserCard: React.FC = () => {
 
   return (
     user && (
-      <Box bg={bgColor} p={4} maxH="120px">
+      <Box bg={ "blue.600" } p={5} >
         <HStack spacing={4}>
           <Avatar src={user.avatarUrl} maxW="100px" borderRadius="9" />
-          <VStack align="start" spacing={1}>
-            <Text fontSize="lg" fontWeight="bold">
+          <VStack align="start">
+            <Text fontSize="lg" fontWeight="bold" color={"white"}>
               名前: {user.name}
             </Text>
-            <Text>学籍番号: {user.studentId}</Text>
+            <Text color={"white"}>学籍番号: {user.studentId}</Text>
           </VStack>
         </HStack>
       </Box>

diff --git a/typing-app/src/components/organism/Footer.tsx b/typing-app/src/components/organism/Footer.tsx
@@ -7,7 +7,7 @@ const Footer: React.FC = () => {
   return (
     <>
       <Separator />
-      <Flex alignItems="center" justifyContent="space-between">
+      <Flex alignItems="center" justifyContent="space-between" bg={ "blue.600" }>
         <BrandText />
       </Flex>
     </>