Skip to content

Commit ab01012

Browse files
drumnationdrumnation
committed
Fix theming issues on React Best Practices page and nav hover styles
1 parent 75723f5 commit ab01012

File tree

4 files changed

+76
-39
lines changed

4 files changed

+76
-39
lines changed

‎src/shared-components/organisms/ProblemSolutionCard/ProblemSolutionCard.tsx‎

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,46 +21,69 @@ export const ProblemSolutionCard: React.FC<ProblemSolutionCardProps> = ({
2121
const pathname = usePathname();
2222
// Apply 'white' variant for all non-homepage paths to ensure light background
2323
const isHomePage = pathname === '/';
24-
const cardVariant = isHomePage && variant === 'blue' ? 'blue' : 'white';
24+
const effectiveVariant = isHomePage ? variant : 'white';
2525

2626
return (
27-
<S.StyledCard $variant={cardVariant} className={className}>
28-
<S.IconHeader>
29-
<S.HeaderIcon>
30-
<Icon name={icon || 'chart-bar'} />
31-
</S.HeaderIcon>
32-
<S.HeaderSlug>{slug}</S.HeaderSlug>
33-
</S.IconHeader>
27+
<S.StyledCard className={className} $variant={effectiveVariant}>
28+
{slug && (
29+
<S.IconHeader>
30+
<S.HeaderIcon>
31+
{icon && <Icon name={icon} size={24} />}
32+
</S.HeaderIcon>
33+
<S.HeaderSlug>{slug}</S.HeaderSlug>
34+
</S.IconHeader>
35+
)}
3436

35-
<S.Content $variant={cardVariant}>
36-
<S.Section>
37-
<S.StatusIcon type="problem">
38-
<Icon name="x" />
39-
</S.StatusIcon>
40-
<S.TextContent>
41-
<Body>{problem}</Body>
42-
</S.TextContent>
43-
</S.Section>
37+
<S.Content $variant={effectiveVariant}>
38+
{problem && (
39+
<S.Section>
40+
<S.StatusIcon type="problem">
41+
<Icon name="alertTriangle" size={18} />
42+
</S.StatusIcon>
43+
<S.TextContent>
44+
<Body weight="semibold" color={effectiveVariant === 'blue' ? 'light' : 'primary'}>
45+
Problem
46+
</Body>
47+
<Body weight="regular" color={effectiveVariant === 'blue' ? 'light' : 'secondary'}>
48+
{problem}
49+
</Body>
50+
</S.TextContent>
51+
</S.Section>
52+
)}
4453

45-
<S.Section>
46-
<S.StatusIcon type="solution">
47-
<Icon name="check" />
48-
</S.StatusIcon>
49-
<S.TextContent>
50-
<Body>{solution}</Body>
51-
</S.TextContent>
52-
</S.Section>
54+
{solution && (
55+
<S.Section>
56+
<S.StatusIcon type="solution">
57+
<Icon name="checkCircle" size={18} />
58+
</S.StatusIcon>
59+
<S.TextContent>
60+
<Body weight="semibold" color={effectiveVariant === 'blue' ? 'light' : 'primary'}>
61+
Solution
62+
</Body>
63+
<Body weight="regular" color={effectiveVariant === 'blue' ? 'light' : 'secondary'}>
64+
{solution}
65+
</Body>
66+
</S.TextContent>
67+
</S.Section>
68+
)}
5369

5470
{impact && (
5571
<S.Section>
5672
<S.StatusIcon type="impact">
57-
<Icon name="chart-bar" />
73+
<Icon name="trendingUp" size={18} />
5874
</S.StatusIcon>
5975
<S.TextContent>
76+
<Body weight="semibold" color={effectiveVariant === 'blue' ? 'light' : 'primary'}>
77+
Impact
78+
</Body>
6079
<S.ImpactTextWrapper>
61-
<Body weight="bold">{impact.value}</Body>
80+
<Body weight="bold">
81+
{impact.value}
82+
</Body>
6283
{impact.label && (
63-
<Body color="secondary">{impact.label}</Body>
84+
<Body weight="regular" color={effectiveVariant === 'blue' ? 'light' : 'secondary'}>
85+
{impact.label}
86+
</Body>
6487
)}
6588
</S.ImpactTextWrapper>
6689
</S.TextContent>

‎src/shared-components/pages/BestPractices/components/CategoryCard/CategoryCard.styles.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,18 @@ export const ItemIcon = styled.div<{ theme: MantineTheme }>`
8080
width: 40px;
8181
height: 40px;
8282
border-radius: ${({ theme }) => theme.radius.sm};
83-
background-color: ${({ theme }) => theme.colors.gray[0]};
83+
background-color: #f0f0f0;
8484
padding: ${({ theme }) => theme.spacing.xs};
8585
flex-shrink: 0;
86+
border: 1px solid #e0e0e0;
87+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
88+
color: ${({ theme }) => theme.colors[theme.primaryColor][6]};
89+
90+
svg {
91+
width: 100%;
92+
height: 100%;
93+
object-fit: contain;
94+
}
8695
`;
8796

8897
export const ItemContent = styled.div`
@@ -95,7 +104,7 @@ export const ItemContent = styled.div`
95104
export const ItemTitle = styled.h4<{ theme: MantineTheme }>`
96105
font-size: ${({ theme }) => theme.fontSizes.lg};
97106
margin: 0 0 ${({ theme }) => theme.spacing.xs} 0;
98-
color: ${({ theme }) => theme.black};
107+
color: ${({ theme }) => theme.colors.gray[8]};
99108
word-break: break-word;
100109
display: flex;
101110
align-items: center;

‎src/shared-components/pages/BestPractices/components/DetailedContent/DetailedContent.styles.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,23 +42,25 @@ export const useStyles = () => {
4242
width: ${rem(48)};
4343
height: ${rem(48)};
4444
border-radius: 50%;
45-
background-color: ${theme.black};
45+
background-color: #f0f0f0;
4646
padding: ${theme.spacing.xs};
4747
flex-shrink: 0;
48+
border: 1px solid #e0e0e0;
49+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
4850
}
4951
.${classes.sectionIcon} svg, .${classes.sectionIcon} img {
5052
width: 100%;
5153
height: 100%;
5254
object-fit: contain;
53-
fill: ${theme.white};
55+
fill: ${theme.colors[theme.primaryColor][6]};
5456
}
5557
5658
.${classes.detailedContentTitle} {
5759
font-size: ${theme.headings.sizes.h2.fontSize};
5860
font-weight: ${theme.headings.sizes.h2.fontWeight};
5961
line-height: 1.3;
6062
margin: 0;
61-
color: ${theme.black};
63+
color: ${theme.colors.gray[8]};
6264
}
6365
6466
.${classes.detailedContentText} {
@@ -88,7 +90,8 @@ export const useStyles = () => {
8890
}
8991
9092
.${classes.codeBlock} {
91-
background-color: ${theme.colors.gray[0]};
93+
background-color: #f9f9f9;
94+
border: 1px solid #e0e0e0;
9295
border-radius: ${theme.radius.md};
9396
padding: ${theme.spacing.lg};
9497
overflow-x: auto;
@@ -97,7 +100,7 @@ export const useStyles = () => {
97100
font-family: ${theme.fontFamilyMonospace};
98101
font-size: ${theme.fontSizes.sm};
99102
line-height: 1.5;
100-
color: ${theme.black};
103+
color: ${theme.colors.gray[8]};
101104
white-space: pre;
102105
}
103106
`;

‎src/shared-components/pages/BestPractices/components/ReactNativeFeature/ReactNativeFeature.styles.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,16 @@ export const FeatureIcon = styled.div<{ theme: MantineTheme }>`
3535
display: flex;
3636
align-items: center;
3737
justify-content: center;
38-
background-color: #000000;
38+
background-color: #f0f0f0;
3939
border-radius: ${({ theme }) => theme.radius.xl};
4040
padding: 0.5rem;
4141
color: ${({ theme }) => theme.colors[theme.primaryColor][6]};
4242
flex-shrink: 0;
43+
border: 1px solid #e0e0e0;
44+
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
4345
4446
img {
45-
filter: brightness(0) invert(1);
47+
filter: none;
4648
}
4749
4850
@media (max-width: ${({ theme }) => theme.breakpoints.md}) {
@@ -62,7 +64,7 @@ export const FeatureTitle = styled.h3<{ theme: MantineTheme }>`
6264
font-size: ${({ theme }) => theme.headings.sizes.h3.fontSize};
6365
font-weight: 600;
6466
margin: 0 0 ${({ theme }) => theme.spacing.xs};
65-
color: ${({ theme }) => theme.black};
67+
color: ${({ theme }) => theme.colors.gray[8]};
6668
`;
6769

6870
export const FeatureDescription = styled.p<{ theme: MantineTheme }>`
@@ -106,5 +108,5 @@ export const ItemIcon = styled.span<{ theme: MantineTheme }>`
106108

107109
export const FeatureItemText = styled.span<{ theme: MantineTheme }>`
108110
font-size: ${({ theme }) => theme.fontSizes.sm};
109-
color: ${({ theme }) => theme.black};
111+
color: ${({ theme }) => theme.colors.gray[7]};
110112
`;

0 commit comments

Comments
 (0)