From 6e773b0a13804ff5658b10af960dbb806821a8ea Mon Sep 17 00:00:00 2001
From: MurakawaTakuya <murakawatakuya5@gmail.com>
Date: Mon, 2 Dec 2024 16:53:32 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=80=E3=83=83=E3=82=B7=E3=83=A5=E3=83=9C?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E3=81=AE=E8=A1=A8=E7=A4=BA=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/Progress/Progress.module.scss | 12 ---
 src/Components/Progress/Progress.tsx         | 77 ++++++++++++--------
 2 files changed, 48 insertions(+), 41 deletions(-)
 delete mode 100644 src/Components/Progress/Progress.module.scss

diff --git a/src/Components/Progress/Progress.module.scss b/src/Components/Progress/Progress.module.scss
deleted file mode 100644
index 846c790..0000000
--- a/src/Components/Progress/Progress.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.stepperBox {
-  background: #f3f3f3;
-  border-radius: 15px;
-  margin: 10px auto;
-  padding: 10px;
-  width: 90%;
-}
-
-.successPost {
-  display: flex;
-  flex-direction: column;
-}
diff --git a/src/Components/Progress/Progress.tsx b/src/Components/Progress/Progress.tsx
index 70b67d9..5251084 100644
--- a/src/Components/Progress/Progress.tsx
+++ b/src/Components/Progress/Progress.tsx
@@ -19,6 +19,12 @@ interface ProgressProps {
   pendingResults?: GoalWithId[];
 }
 
+const successPostIndicatorStyle = {
+  "& > div": {
+    placeSelf: "start",
+  },
+};
+
 export default function Progress({
   successResults = [],
   failedResults = [],
@@ -54,7 +60,7 @@ export default function Progress({
 
 const successStep = (result: SuccessResult) => {
   return (
-    <StepperBlock key={result.goalId} resultType="success">
+    <StepperBlock key={result.goalId}>
       <Step
         completed
         indicator={
@@ -63,17 +69,26 @@ const successStep = (result: SuccessResult) => {
           </StepIndicator>
         }
       >
-        <GoalCard deadline={result.deadline} goalText={result.goalText} />
+        <GoalCard
+          deadline={result.deadline}
+          goalText={result.goalText}
+          resultType="success"
+        />
       </Step>
       <Step
         completed
+        sx={successPostIndicatorStyle}
         indicator={
           <StepIndicator variant="solid" color="success">
             <CheckRoundedIcon />
           </StepIndicator>
         }
       >
-        <Card variant="soft" size="sm">
+        <Card
+          variant="outlined"
+          size="sm"
+          sx={{ borderColor: "#008d32", width: "93%" }}
+        >
           {result.storedId && (
             <CardOverflow>
               <AspectRatio ratio="2">
@@ -100,7 +115,7 @@ const successStep = (result: SuccessResult) => {
 
 const failedStep = (result: GoalWithId) => {
   return (
-    <StepperBlock key={result.goalId} resultType="failed">
+    <StepperBlock key={result.goalId}>
       <Step
         indicator={
           <StepIndicator variant="solid" color="danger">
@@ -108,7 +123,11 @@ const failedStep = (result: GoalWithId) => {
           </StepIndicator>
         }
       >
-        <GoalCard deadline={result.deadline} goalText={result.text} />
+        <GoalCard
+          deadline={result.deadline}
+          goalText={result.text}
+          resultType="failed"
+        />
       </Step>
     </StepperBlock>
   );
@@ -116,7 +135,7 @@ const failedStep = (result: GoalWithId) => {
 
 const pendingStep = (result: GoalWithId) => {
   return (
-    <StepperBlock key={result.goalId} resultType="pending">
+    <StepperBlock key={result.goalId}>
       <Step
         active
         indicator={
@@ -125,34 +144,19 @@ const pendingStep = (result: GoalWithId) => {
           </StepIndicator>
         }
       >
-        <GoalCard deadline={result.deadline} goalText={result.text} />
+        <GoalCard
+          deadline={result.deadline}
+          goalText={result.text}
+          resultType="pending"
+        />
       </Step>
     </StepperBlock>
   );
 };
 
-const StepperBlock = ({
-  children,
-  resultType,
-}: {
-  children: ReactNode;
-  resultType?: "success" | "failed" | "pending";
-}) => {
+const StepperBlock = ({ children }: { children: ReactNode }) => {
   return (
-    <Card
-      variant="outlined"
-      sx={{
-        width: "88%",
-        margin: "10px auto",
-        borderColor:
-          resultType == "success"
-            ? "#00cb48"
-            : resultType == "failed"
-            ? "#ff3f3f"
-            : "#2f74ff",
-      }}
-      size="sm"
-    >
+    <Card variant="soft" size="sm">
       <Stepper
         orientation="vertical"
         sx={(theme) => ({
@@ -192,12 +196,27 @@ const StepperBlock = ({
 const GoalCard = ({
   deadline,
   goalText,
+  resultType,
 }: {
   deadline: string;
   goalText: string;
+  resultType?: "success" | "failed" | "pending";
 }) => {
   return (
-    <Card variant="soft" size="sm">
+    <Card
+      variant="outlined"
+      size="sm"
+      sx={{
+        width: "93%",
+        margin: "2px auto",
+        borderColor:
+          resultType == "success"
+            ? "#008d32"
+            : resultType == "failed"
+            ? "#bb0000"
+            : "#003fbe",
+      }}
+    >
       <CardContent>
         <Typography level="body-sm">{formatStringToDate(deadline)}</Typography>
         <Typography level="body-lg">{goalText}</Typography>