Skip to content

Commit

Permalink
[BOOKINGSG-4566][WK] pr comments
Browse files Browse the repository at this point in the history
  • Loading branch information
Wilker0725 committed Sep 14, 2023
1 parent 49616df commit d955f94
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 14 deletions.
17 changes: 7 additions & 10 deletions src/timeline/timeline.style.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled, { css } from "styled-components";
import { TickCircleFillIcon } from "@lifesg/react-icons";
import { TickIcon } from "@lifesg/react-icons";
import { Color } from "../color";
import { MediaQuery } from "../media";
import { Text } from "../text";
Expand All @@ -23,7 +23,9 @@ interface VariantStyleProps {
// STYLE INTERFACES
// =============================================================================
export const CircleIndicator = styled.div<VariantStyleProps>`
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
margin-top: 4px;
Expand All @@ -45,6 +47,7 @@ export const CircleIndicator = styled.div<VariantStyleProps>`
`;
case "completed":
return css`
background-color: ${Color.Validation.Green.Icon};
svg {
display: block;
}
Expand All @@ -53,15 +56,9 @@ export const CircleIndicator = styled.div<VariantStyleProps>`
}}
`;

export const TickCircleIcon = styled(TickCircleFillIcon)`
export const IconTick = styled(TickIcon)`
color: ${Color.Neutral[8]};
display: none;
width: 100%;
height: 100%;
transform: scale(1.2);
path {
fill: ${Color.Validation.Green.Icon};
}
`;

export const LineIndicator = styled.div<VariantStyleProps>`
Expand Down
7 changes: 3 additions & 4 deletions src/timeline/timeline.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Text } from "../text";
import {
CircleIndicator,
IconTick,
LineIndicator,
TickCircleIcon,
TimelineIndicators,
TimelineItem,
TimelineItemContent,
Expand Down Expand Up @@ -79,8 +79,7 @@ export const Timeline = ({
? `circleindicator${index + 1}_div_${baseIndicatorTestId}`
: "circleindicator";
const variant =
(!_variant && index === 0 ? "current" : _variant) ||
"upcoming-active";
_variant || (index === 0 ? "current" : "upcoming-active");

return (
<TimelineItem key={`timeline-item-${index}`}>
Expand All @@ -89,7 +88,7 @@ export const Timeline = ({
data-testid={circleIndicatorTestId}
$variant={variant}
>
<TickCircleIcon />
<IconTick />
</CircleIndicator>
<LineIndicator $variant={variant} />
</TimelineIndicators>
Expand Down

0 comments on commit d955f94

Please sign in to comment.