Skip to content

Commit 49b874a

Browse files
drumnationdrumnation
authored
Fix SSR theming issues on content pages (#3)
* Fix SSR theming issues by forcing light mode styling for content pages * Fix nav hover styles and ensure light mode colors for React Best Practices page content * Fix theming issues on React Best Practices page and nav hover styles
1 parent 2bd8361 commit 49b874a

File tree

7 files changed

+267
-293
lines changed

7 files changed

+267
-293
lines changed

‎src/shared-components/molecules/ComparisonTable/ComparisonTable.desktop.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ComparisonTableProps } from './ComparisonTable.types';
44
import * as S from './ComparisonTable.styles';
55
import { Group } from '@mantine/core';
66
import { IconUser, IconCpu, IconListDetails, IconTag } from '@tabler/icons-react';
7+
import { usePathname } from 'next/navigation';
78

89
// Replace framer-motion with CSS transitions
910
export const ComparisonTableDesktop: React.FC<ComparisonTableProps> = ({
@@ -13,6 +14,12 @@ export const ComparisonTableDesktop: React.FC<ComparisonTableProps> = ({
1314
variant = 'default',
1415
className,
1516
}) => {
17+
const pathname = usePathname();
18+
const isHomePage = pathname === '/';
19+
20+
// Only use accent/dark variant on homepage
21+
const effectiveVariant = isHomePage ? variant : 'default';
22+
1623
const [ref, inView] = useInView({
1724
triggerOnce: true,
1825
rootMargin: "-100px",
@@ -28,14 +35,14 @@ export const ComparisonTableDesktop: React.FC<ComparisonTableProps> = ({
2835
}, [inView]);
2936

3037
// Determine icon color based on variant for headers
31-
const headerIconColor = variant === 'accent' ? 'var(--mantine-color-white)' : 'var(--mantine-color-text)';
38+
const headerIconColor = effectiveVariant === 'accent' ? 'var(--mantine-color-white)' : 'var(--mantine-color-text)';
3239
// Icon color for body cells can be standard text color
3340
const bodyIconColor = 'var(--mantine-color-text)';
3441

3542
return (
3643
<S.Container className={className} ref={ref}>
37-
<S.Table $variant={variant} className={isVisible ? 'visible' : ''}>
38-
<S.TableHead $variant={variant}>
44+
<S.Table $variant={effectiveVariant} className={isVisible ? 'visible' : ''}>
45+
<S.TableHead $variant={effectiveVariant}>
3946
<tr>
4047
<S.TableHeaderCell>
4148
<Group gap="xs" wrap="nowrap">

‎src/shared-components/molecules/ComparisonTable/ComparisonTable.mobile.tsx‎

Lines changed: 69 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Stack, Card, Text, Title, Group, Divider, Box, useMantineTheme } from '
55
import { IconUser, IconCpu } from '@tabler/icons-react';
66
import * as S from './ComparisonTable.styles';
77
import { sectionContainerWithoutMarginStyle } from '../../pages/WhitePaper/components/AiAutopilotAnalogy/AiAutopilotAnalogy.styles'; // Import for padding values
8+
import { usePathname } from 'next/navigation';
89

910
// Mobile version with stacked layout using Mantine components
1011
export const ComparisonTableMobile: React.FC<ComparisonTableProps> = ({
@@ -14,10 +15,16 @@ export const ComparisonTableMobile: React.FC<ComparisonTableProps> = ({
1415
variant = 'default', // Variant might influence mobile styling too
1516
className,
1617
}) => {
18+
const pathname = usePathname();
19+
const isHomePage = pathname === '/';
20+
21+
// Only use accent/dark variant on homepage
22+
const effectiveVariant = isHomePage ? variant : 'default';
23+
1724
const theme = useMantineTheme();
1825
const [ref, inView] = useInView({
1926
triggerOnce: true,
20-
rootMargin: "-50px", // Adjusted rootMargin for mobile
27+
rootMargin: "-50px",
2128
threshold: 0.1
2229
});
2330

@@ -29,63 +36,81 @@ export const ComparisonTableMobile: React.FC<ComparisonTableProps> = ({
2936
}
3037
}, [inView]);
3138

32-
const getBackgroundColor = (themeVariant: typeof variant) => {
33-
return theme.white;
34-
};
39+
// Get color based on the variant and whether we're in a light context
40+
const headerBgColor = effectiveVariant === 'accent'
41+
? theme.colors.blue[7]
42+
: theme.colors.gray[1];
3543

36-
const getTextColor = (themeVariant: typeof variant) => {
37-
return theme.black;
38-
};
44+
const headerTextColor = effectiveVariant === 'accent'
45+
? theme.white
46+
: theme.black;
3947

40-
const categoryTitleColor = variant === 'accent' ? theme.colors.blue[6] : theme.primaryColor;
41-
42-
// Get horizontal padding from the shared style
43-
const horizontalPadding = sectionContainerWithoutMarginStyle.paddingLeft; // Assuming paddingLeft and paddingRight are the same
48+
const cardBgColor = theme.white;
49+
const cardTextColor = theme.black;
4450

4551
return (
46-
<Stack
47-
ref={ref}
48-
className={className}
49-
gap="lg"
50-
style={{
51-
paddingLeft: horizontalPadding,
52-
paddingRight: horizontalPadding,
53-
}}
54-
>
55-
{items.map((item, index) => (
52+
<Box ref={ref} className={className}>
53+
<Stack gap="lg">
54+
{/* Header Card */}
5655
<Card
57-
shadow="sm"
58-
padding="lg"
56+
p="md"
5957
radius="md"
60-
withBorder
61-
key={index}
62-
className={isVisible ? 'visible' : ''}
6358
style={{
59+
backgroundColor: headerBgColor,
6460
opacity: isVisible ? 1 : 0,
6561
transform: isVisible ? 'translateY(0)' : 'translateY(20px)',
66-
transition: `opacity 0.5s ease-out ${index * 0.1}s, transform 0.5s ease-out ${index * 0.1}s`,
67-
backgroundColor: getBackgroundColor(variant),
68-
color: getTextColor(variant),
62+
transition: 'opacity 0.3s ease, transform 0.5s ease',
6963
}}
7064
>
71-
<Stack gap="xs">
72-
<Title order={4} c={categoryTitleColor}>{item.category}</Title>
73-
<Divider my="xs" />
74-
<Group gap="xs" wrap="nowrap">
75-
<IconUser size={18} color={getTextColor(variant)} />
76-
<Text size="sm" fw={700} style={{ color: getTextColor(variant) }}>{leftTitle}:</Text>
65+
<Stack align="center" gap="xs">
66+
<Group gap="xs">
67+
<IconUser size={20} color={headerTextColor} />
68+
<Title order={5} style={{ color: headerTextColor }}>{leftTitle}</Title>
7769
</Group>
78-
<Text size="sm" style={{ color: getTextColor(variant), paddingLeft: '26px' }}>{item.leftContent}</Text>
79-
80-
<Divider my="xs" variant="dashed" />
81-
<Group gap="xs" wrap="nowrap">
82-
<IconCpu size={18} color={getTextColor(variant)} />
83-
<Text size="sm" fw={700} style={{ color: getTextColor(variant) }}>{rightTitle}:</Text>
70+
<Text size="sm" style={{ color: headerTextColor }}>vs.</Text>
71+
<Group gap="xs">
72+
<IconCpu size={20} color={headerTextColor} />
73+
<Title order={5} style={{ color: headerTextColor }}>{rightTitle}</Title>
8474
</Group>
85-
<Text size="sm" style={{ color: getTextColor(variant), paddingLeft: '26px' }}>{item.rightContent}</Text>
8675
</Stack>
8776
</Card>
88-
))}
89-
</Stack>
77+
78+
{/* Comparison Cards */}
79+
{items.map((item, index) => (
80+
<Card
81+
key={index}
82+
p="lg"
83+
radius="md"
84+
style={{
85+
backgroundColor: cardBgColor,
86+
opacity: isVisible ? 1 : 0,
87+
transform: isVisible ? 'translateY(0)' : 'translateY(20px)',
88+
transition: `opacity 0.3s ease, transform 0.5s ease ${index * 0.1}s`,
89+
}}
90+
>
91+
<Title order={6} mb="xs">{item.category}</Title>
92+
<Divider mb="md" />
93+
94+
<Stack gap="md">
95+
<Box>
96+
<Group gap="xs" mb="xs">
97+
<IconUser size={16} color={cardTextColor} />
98+
<Text size="sm" fw={600}>{leftTitle}</Text>
99+
</Group>
100+
<Text size="sm">{item.leftContent}</Text>
101+
</Box>
102+
103+
<Box>
104+
<Group gap="xs" mb="xs">
105+
<IconCpu size={16} color={cardTextColor} />
106+
<Text size="sm" fw={600}>{rightTitle}</Text>
107+
</Group>
108+
<Text size="sm">{item.rightContent}</Text>
109+
</Box>
110+
</Stack>
111+
</Card>
112+
))}
113+
</Stack>
114+
</Box>
90115
);
91116
};

‎src/shared-components/navigation/PageSubNav/SubNavLink.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,12 @@ export const SubNavLink: React.FC<SubNavLinkProps> = ({ item, onClick, isExpande
9696
pointerEvents: isClickable ? 'auto' : 'none',
9797
// Dim only if not clickable
9898
opacity: isClickable ? 1 : 0.7,
99+
// Improve hover feedback with a more noticeable transition
100+
transition: 'all 0.2s ease',
101+
'&:hover': isClickable ? {
102+
backgroundColor: isActive ? 'rgba(66, 153, 225, 0.1)' : 'rgba(0, 0, 0, 0.05)',
103+
borderLeftColor: !isHeader && isInteractive ? theme.colors[theme.primaryColor][5] : undefined,
104+
} : undefined,
99105
},
100106
label: {
101107
// fontWeight handled in textStyle

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

Lines changed: 57 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Icon } from '../../atoms/Icon';
33
import { Body } from '../../atoms/Typography';
44
import { ProblemSolutionCardProps } from './ProblemSolutionCard.types';
55
import * as S from './ProblemSolutionCard.styles';
6+
import { usePathname } from 'next/navigation';
67

78
/**
89
* ProblemSolutionCard displays a problem statement and its solution
@@ -15,45 +16,74 @@ export const ProblemSolutionCard: React.FC<ProblemSolutionCardProps> = ({
1516
impact,
1617
icon,
1718
className,
19+
variant = 'white',
1820
}) => {
21+
const pathname = usePathname();
22+
// Apply 'white' variant for all non-homepage paths to ensure light background
23+
const isHomePage = pathname === '/';
24+
const effectiveVariant = isHomePage ? variant : 'white';
25+
1926
return (
20-
<S.StyledCard $variant="white" className={className}>
21-
<S.IconHeader>
22-
<S.HeaderIcon>
23-
<Icon name={icon || 'chart-bar'} />
24-
</S.HeaderIcon>
25-
<S.HeaderSlug>{slug}</S.HeaderSlug>
26-
</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+
)}
2736

28-
<S.Content $variant="white">
29-
<S.Section>
30-
<S.StatusIcon type="problem">
31-
<Icon name="x" />
32-
</S.StatusIcon>
33-
<S.TextContent>
34-
<Body>{problem}</Body>
35-
</S.TextContent>
36-
</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+
)}
3753

38-
<S.Section>
39-
<S.StatusIcon type="solution">
40-
<Icon name="check" />
41-
</S.StatusIcon>
42-
<S.TextContent>
43-
<Body>{solution}</Body>
44-
</S.TextContent>
45-
</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+
)}
4669

4770
{impact && (
4871
<S.Section>
4972
<S.StatusIcon type="impact">
50-
<Icon name="chart-bar" />
73+
<Icon name="trendingUp" size={18} />
5174
</S.StatusIcon>
5275
<S.TextContent>
76+
<Body weight="semibold" color={effectiveVariant === 'blue' ? 'light' : 'primary'}>
77+
Impact
78+
</Body>
5379
<S.ImpactTextWrapper>
54-
<Body weight="bold">{impact.value}</Body>
80+
<Body weight="bold">
81+
{impact.value}
82+
</Body>
5583
{impact.label && (
56-
<Body color="secondary">{impact.label}</Body>
84+
<Body weight="regular" color={effectiveVariant === 'blue' ? 'light' : 'secondary'}>
85+
{impact.label}
86+
</Body>
5787
)}
5888
</S.ImpactTextWrapper>
5989
</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;

0 commit comments

Comments
 (0)