style: better cycle format

Author: debater-coder

apps/client/src/routes/Main/Home/Cycle.tsx

@@ -7,29 +7,42 @@ import {
   Text,
 } from "@chakra-ui/react";
 
+function Period() {
+  return (
+    <Flex
+      direction={["column", "column", "row"]}
+      bg={useToken("colors", useColorModeValue("gray.300", "gray.700")) + "55"}
+      rounded={"lg"}
+      gap={[0, 0, 1]}
+      align="center"
+      pr={[0, 0, 2]}
+    >
+      <Text fontSize={"sm"} bg="blue.500" p={2} rounded="lg">
+        D&T
+      </Text>
+      <Text fontSize={"sm"}>506</Text>
+    </Flex>
+  );
+}
+
 function Day() {
   return (
-    <Flex direction={"column"} align={"center"}>
-      <Text color={"gray.500"} fontWeight={"semibold"}>
+    <Flex direction={"column"} align={"center"} gap={1}>
+      <Text color={"gray.500"} fontWeight={"semibold"} fontSize={"sm"}>
         Mon A
       </Text>
-      <Text>D&T</Text>
-      <Text>D&T</Text>
-      <Text>D&T</Text>
-      <Text>D&T</Text>
-      <Text>D&T</Text>
+      <Period />
+      <Period />
+      <Period />
+      <Period />
+      <Period />
     </Flex>
   );
 }
 
 export default function CycleTimetable() {
   return (
-    <Flex
-      direction={"column"}
-      p={5}
-      bg={useToken("colors", useColorModeValue("gray.300", "gray.700")) + "55"}
-      rounded={"lg"}
-    >
+    <Flex direction={"column"}>
       <Grid
         templateColumns="repeat(5, 1fr)"
         templateRows="repeat(3, 1fr)"