Fix styling on progress bar and point badges

MaibornWolff · Dec 20, 2023 · ebcdd4e · ebcdd4e
1 parent a42dabe
commit ebcdd4e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/src/components/EpicDetailView/EpicDetailView.tsx b/src/components/EpicDetailView/EpicDetailView.tsx
@@ -40,6 +40,7 @@ import { StoryPointsHoverCard } from "../common/StoryPoints/StoryPointsHoverCard
 import { CommentSection } from "../DetailView/Components/CommentSection";
 import { getIssueTypes, setStatus } from "../CreateIssue/queryFunctions";
 import { StatusType } from "../../../types/status";
+import { getStatusTypeColor } from "../../common/status-color"
 
 export function EpicDetailView({
   issueKey,
@@ -188,13 +189,6 @@ export function EpicDetailView({
               radius="md"
               size={20}
               label="hello"
-              styles={{
-                label: {
-                  color: "black",
-                  fontSize: "14px",
-                  fontWeight: "normal",
-                },
-              }}
               sx={{
                 width: "400px",
                 marginRight: "5px",
@@ -204,25 +198,25 @@ export function EpicDetailView({
               sections={[
                 {
                   value: (tasksDone / totalTaskCount) * 100,
-                  color: "#10df10",
+                  color: getStatusTypeColor(StatusType.DONE),
                   label: `${tasksDone}`,
                   tooltip: `${tasksDone} Done`,
                 },
                 {
                   value: (tasksInProgress / totalTaskCount) * 100,
-                  color: "#6ba5d8",
+                  color: getStatusTypeColor(StatusType.IN_PROGRESS),
                   label: `${tasksInProgress}`,
                   tooltip: `${tasksInProgress} In progress`,
                 },
                 {
                   value: (tasksTodo / totalTaskCount) * 100,
-                  color: "rgb(225,223,223)",
+                  color: getStatusTypeColor(StatusType.TODO),
                   label: `${tasksTodo}`,
                   tooltip: `${tasksTodo} ToDo`,
                 },
                 {
                   value: 100,
-                  color: "rgb(225,223,223)",
+                  color: getStatusTypeColor(StatusType.TODO),
                   label: `0`,
                   tooltip: "Currently no child issues",
                 },
@@ -242,7 +236,7 @@ export function EpicDetailView({
             />
           </Group>
 
-          <Group sx={{ marginLeft: "-10px"}} grow>
+          <Group sx={{ marginLeft: "-10px" }} grow>
             <ChildIssues issues={childIssues} />
           </Group>
         </Stack>

diff --git a/src/components/common/StoryPoints/StoryPointsBadge.tsx b/src/components/common/StoryPoints/StoryPointsBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "@mantine/core"
+import { Badge, Box } from "@mantine/core";
 import { getStatusTypeColor } from "../../../common/status-color";
 import { StatusType } from "../../../../types/status";
 
@@ -10,13 +10,15 @@ export function StoryPointsBadge({
   storyPointsEstimate: number
 }) {
   return (
-    <Badge
-      px="7px"
-      color={getStatusTypeColor(statusType)}
-      variant="filled"
-      size="md"
-    >
-      {storyPointsEstimate}
-    </Badge>
+    <Box sx={{ lineHeight: 1 }}>
+      <Badge
+        px="7px"
+        color={getStatusTypeColor(statusType)}
+        variant="filled"
+        size="md"
+      >
+        {storyPointsEstimate}
+      </Badge>
+    </Box>
   )
 }