fix(styles): update theme property access in styled components

drumnation · drumnation · commit 836aff2022cb · 2025-04-06T12:01:48.000-04:00
- Refactored styled components to access theme properties without optional chaining, ensuring consistency and compatibility with the updated theme structure.
- Adjusted box-shadow properties across various components to align with the new theme shadow naming conventions.
diff --git a/src/components/Diagrams/AiIntegrationProcessDiagram/AiIntegrationProcessDiagram.styles.ts b/src/components/Diagrams/AiIntegrationProcessDiagram/AiIntegrationProcessDiagram.styles.ts
@@ -10,12 +10,12 @@ export const DiagramContainer = styled.div`
   h3 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
-    color: ${({ theme }) => theme.colors?.text?.primary || '#333'};
+    color: ${({ theme }) => theme.colors.text.primary || '#333'};
     text-align: center;
   }
   
   p {
-    color: ${({ theme }) => theme.colors?.text?.secondary || '#666'};
+    color: ${({ theme }) => theme.colors.text.secondary || '#666'};
     margin-bottom: 1.5rem;
     text-align: center;
     max-width: 800px;
@@ -27,5 +27,5 @@ export const DiagramWrapper = styled.div`
   max-width: 1000px;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: ${({ theme }) => theme.shadows?.elevation2 || '0 4px 6px rgba(0, 0, 0, 0.1)'};
+  box-shadow: ${({ theme }) => theme.shadows.elevation2 || '0 4px 6px rgba(0, 0, 0, 0.1)'};
 `; 
diff --git a/src/components/Diagrams/FlowchartDiagram/FlowchartDiagram.styles.ts b/src/components/Diagrams/FlowchartDiagram/FlowchartDiagram.styles.ts
@@ -58,7 +58,7 @@ export const DiagramContainer = styled.div<DiagramContainerProps>`
   background-color: ${props => props.$backgroundColor || 'rgba(74, 158, 255, 0.05)'};
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: ${({ theme }) => theme.shadows?.small || '0px 2px 4px rgba(0, 0, 0, 0.1)'};
+  box-shadow: ${({ theme }) => theme.shadows.sm || '0px 2px 4px rgba(0, 0, 0, 0.1)'};
   
   .react-flow__viewport {
     transition: transform 0.2s ease;
diff --git a/src/components/Diagrams/_wrappers/DiagramClientWrapper/DiagramClientWrapper.styles.ts b/src/components/Diagrams/_wrappers/DiagramClientWrapper/DiagramClientWrapper.styles.ts
@@ -19,13 +19,13 @@ export const DiagramContainer = styled.div<DiagramContainerProps>`
   h3 {
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
-    color: ${({ theme }) => theme.colors?.text?.primary || '#333'};
+    color: ${({ theme }) => theme.colors.text.primary || '#333'};
   }
   
   p {
     font-size: 1rem;
     line-height: 1.5;
-    color: ${({ theme }) => theme.colors?.text?.secondary || '#666'};
+    color: ${({ theme }) => theme.colors.text.secondary || '#666'};
     margin-bottom: 1rem;
   }
 `; 
diff --git a/src/shared-components/molecules/ComparisonTable/ComparisonTable.styles.ts b/src/shared-components/molecules/ComparisonTable/ComparisonTable.styles.ts
@@ -16,7 +16,7 @@ export const Table = styled.table<StyledTableProps>`
   border-spacing: 0;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: ${({ theme }) => theme.shadows.medium};
+  box-shadow: ${({ theme }) => theme.shadows.md};
   opacity: 0;
   transition: opacity 0.6s ease-out;
   
diff --git a/src/shared-components/molecules/MermaidDiagram/MermaidDiagram.styles.ts b/src/shared-components/molecules/MermaidDiagram/MermaidDiagram.styles.ts
@@ -12,7 +12,7 @@ export const DiagramContainer = styled.div<DiagramContainerProps>`
   background-color: ${({ $backgroundColor, theme }) => $backgroundColor || theme.colors.background.light};
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: ${({ theme }) => theme.shadows.small};
+  box-shadow: ${({ theme }) => theme.shadows.sm};
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/shared-components/molecules/ReactFlowDiagram/EnhancedReactFlowDiagram.tsx b/src/shared-components/molecules/ReactFlowDiagram/EnhancedReactFlowDiagram.tsx
@@ -26,13 +26,13 @@ const TitleContainer = styled.div`
   h3 {
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
-    color: ${({ theme }) => theme.colors?.text?.primary || '#333'};
+    color: ${({ theme }) => theme.colors.text.primary || '#333'};
   }
 
   p {
     font-size: 1rem;
     line-height: 1.5;
-    color: ${({ theme }) => theme.colors?.text?.secondary || '#666'};
+    color: ${({ theme }) => theme.colors.text.secondary || '#666'};
   }
 `;
 
diff --git a/src/shared-components/molecules/ReactFlowDiagram/ReactFlowClientWrapper.tsx b/src/shared-components/molecules/ReactFlowDiagram/ReactFlowClientWrapper.tsx
@@ -13,8 +13,8 @@ const LoadingContainer = styled.div`
   align-items: center;
   border: 1px dashed #ccc;
   border-radius: 8px;
-  background-color: ${({ theme }) => theme.colors?.background?.light || '#f8f8f8'};
-  color: ${({ theme }) => theme.colors?.text?.secondary || '#666'};
+  background-color: ${({ theme }) => theme.colors.background.light || '#f8f8f8'};
+  color: ${({ theme }) => theme.colors.text.secondary || '#666'};
 `;
 
 const WrapperContainer = styled.div`
diff --git a/src/shared-components/organisms/DebtAnalysis/DebtAnalysis.styles.ts b/src/shared-components/organisms/DebtAnalysis/DebtAnalysis.styles.ts
@@ -42,15 +42,15 @@ export const CardsContainer = styled.div`
 export const Card = styled.div<CardProps>`
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: ${({ theme }) => theme.shadows.medium};
+  box-shadow: ${({ theme }) => theme.shadows.md};
   height: 100%;
   display: flex;
   flex-direction: column;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   
   &:hover {
     transform: translateY(-5px);
-    box-shadow: ${({ theme }) => theme.shadows.large};
+    box-shadow: ${({ theme }) => theme.shadows.lg};
   }
   
   ${({ $style, theme }) => $style === 'gradient-cards' && css`
diff --git a/src/shared-components/organisms/Footer/Footer.styles.ts b/src/shared-components/organisms/Footer/Footer.styles.ts
@@ -35,9 +35,14 @@ const defaultColors = {
 };
 
 // Helper function to determine if theme is dark
-// We check if theme.colors exists and if dark[7] color exists which is typically present in Mantine dark themes
+// Check if theme has a dark color property that indicates it's a dark theme
 const isDarkTheme = (theme: any) => {
-  return theme.colors?.dark?.[7] === '#1A1B1E' || false;
+  // Since we're dealing with a potentially unknown theme structure,
+  // we need to safely check if this property exists
+  if (theme && theme.colors && theme.colors.dark) {
+    return theme.colors.dark[7] === '#1A1B1E';
+  }
+  return false;
 };
 
 export const FooterContainer = styled.div<{ 
diff --git a/src/shared-components/organisms/Header.tsx b/src/shared-components/organisms/Header.tsx
@@ -170,7 +170,7 @@ export function Header() {
               left: rem(8),
               right: rem(8),
               height: rem(2),
-              background: theme.other.accentGradient,
+              background: theme.colors?.gradient || 'linear-gradient(135deg, #2196f3 0%, #00bcd4 100%)',
               borderRadius: theme.radius.sm,
             }}
           />
diff --git a/src/shared-components/organisms/ImpactGrid/ImpactGrid.styles.ts b/src/shared-components/organisms/ImpactGrid/ImpactGrid.styles.ts
@@ -46,7 +46,7 @@ export const GridContainer = styled.div`
 export const Card = styled.div<CardProps>`
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: ${({ theme }) => theme.shadows.medium};
+  box-shadow: ${({ theme }) => theme.shadows.md};
   height: 100%;
   display: flex;
   flex-direction: column;
diff --git a/src/shared-components/organisms/NavigationCard/NavigationCard.styles.ts b/src/shared-components/organisms/NavigationCard/NavigationCard.styles.ts
@@ -16,7 +16,7 @@ export const Card = styled.div<CardProps>`
   height: 100%;
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: ${({ theme }) => theme.shadows.medium};
+  box-shadow: ${({ theme }) => theme.shadows.md};
   
   ${({ $style, theme }) => $style === 'gradient-card' && css`
     background: linear-gradient(135deg, ${theme.colors.primary.main}, ${theme.colors.secondary.main});
diff --git a/src/shared-components/organisms/NavigationMenu/NavigationMenu.stories.tsx b/src/shared-components/organisms/NavigationMenu/NavigationMenu.stories.tsx
@@ -131,7 +131,7 @@ export const RightPosition: Story = {
 const DemoContent = styled.div`
   padding: 2rem;
   margin: 2rem;
-  background: ${({ theme }) => theme.colors?.background?.paper || '#fff'};
+  background: ${({ theme }) => theme.colors.background.paper || '#fff'};
   border-radius: 12px;
   min-height: 400px;
 `;
diff --git a/src/shared-components/organisms/ProblemSolution/ProblemSolution.styles.ts b/src/shared-components/organisms/ProblemSolution/ProblemSolution.styles.ts
@@ -34,7 +34,7 @@ export const Card = styled.div<CardProps>`
   max-width: 800px;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: ${({ theme }) => theme.shadows.medium};
+  box-shadow: ${({ theme }) => theme.shadows.md};
   display: flex;
   flex-direction: ${({ $style }) => $style === 'split-card' ? 'row' : 'column'};
   
diff --git a/src/shared-components/organisms/ProcessFlow/ProcessFlow.styles.ts b/src/shared-components/organisms/ProcessFlow/ProcessFlow.styles.ts
@@ -82,7 +82,7 @@ export const StepNumber = styled.div<StepNumberProps>`
   flex-shrink: 0;
   position: relative;
   z-index: 2;
-  box-shadow: ${({ theme }) => theme.shadows.medium};
+  box-shadow: ${({ theme }) => theme.shadows.md};
 `;
 
 export const StepContent = styled.div`
diff --git a/src/shared-components/organisms/QuoteGrid/QuoteGrid.styles.ts b/src/shared-components/organisms/QuoteGrid/QuoteGrid.styles.ts
@@ -18,12 +18,12 @@ export const QuoteCard = styled(motion.div)<{ $style: string; $background: strin
     if ($style !== 'card') return 'transparent';
     
     if ($background === 'blue') {
-      return theme.colors?.primary?.main || '#4A72FF';
+      return theme.colors.primary.main || '#4A72FF';
     }
     
     return $background === 'dark' 
-      ? theme.colors?.background?.dark || '#2D3748' 
-      : theme.colors?.background?.light || '#FFFFFF';
+      ? theme.colors.background.dark || '#2D3748' 
+      : theme.colors.background.light || '#FFFFFF';
   }};
   border-radius: 12px;
   box-shadow: ${({ $style }) => $style === 'card' ? '0 4px 10px rgba(0, 0, 0, 0.08)' : 'none'};
@@ -42,10 +42,10 @@ export const IconWrapper = styled(motion.div)<{
   margin-bottom: 16px;
   color: ${({ $background, theme }) => {
     if ($background === 'blue') {
-      return theme.colors?.text?.light || '#FFFFFF';
+      return theme.colors.text.light || '#FFFFFF';
     }
     
-    return theme.colors?.primary?.main || '#4A72FF';
+    return theme.colors.primary.main || '#4A72FF';
   }};
   
   svg {
@@ -70,6 +70,6 @@ export const QuoteAuthor = styled(motion.p)`
 
 export const QuoteNote = styled(motion.p)`
   font-size: 0.875rem;
-  color: ${({ theme }) => theme.colors?.text?.secondary || '#718096'};
+  color: ${({ theme }) => theme.colors.text.secondary || '#718096'};
   margin: 0;
 `; 
diff --git a/src/shared-components/organisms/StatsComparison/StatsComparison.styles.ts b/src/shared-components/organisms/StatsComparison/StatsComparison.styles.ts
@@ -51,7 +51,7 @@ export const Card = styled.div<CardProps>`
   min-width: 250px;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: ${({ theme }) => theme.shadows.medium};
+  box-shadow: ${({ theme }) => theme.shadows.md};
   background: ${({ theme }) => theme.colors.accent.blue};
   color: white;
   
diff --git a/src/shared-components/sections/Experience/components/SkillsSection/SkillsSection.styles.ts b/src/shared-components/sections/Experience/components/SkillsSection/SkillsSection.styles.ts
@@ -36,7 +36,7 @@ export const SkillsGrid = styled.div`
 `;
 
 export const SkillTag = styled.div`
-  background-color: ${({ theme }) => theme.background?.paper || '#f5f5f5'};
+  background-color: ${({ theme }) => theme.colors.background.paper || '#f5f5f5'};
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
   font-size: 0.875rem;
diff --git a/src/shared-components/sections/RealWorldImpact/RealWorldImpact.styles.ts b/src/shared-components/sections/RealWorldImpact/RealWorldImpact.styles.ts
@@ -134,7 +134,7 @@ export const InsightCard = styled.div`
   background-color: ${({ theme }) => theme.colors.background.paper};
   border-radius: 8px;
   padding: 1.5rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  box-shadow: ${({ theme }) => theme.shadows.sm};
   height: 100%;
   
   h3 {
@@ -216,7 +216,7 @@ export const ActionButton = styled.a`
   &:hover {
     background: ${({ theme }) => theme.colors.primary.dark};
     transform: translateY(-2px);
-    box-shadow: ${({ theme }) => theme.shadows.button};
+    box-shadow: ${({ theme }) => theme.shadows.sm};
   }
 
   &:active {
@@ -278,13 +278,13 @@ export const BlueprintCard = styled.div`
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  box-shadow: ${({ theme }) => theme.shadows.card};
+  box-shadow: ${({ theme }) => theme.shadows.lg};
   border: 1px solid #e0e0e0;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 
   &:hover {
     transform: translateY(-4px);
-    box-shadow: ${({ theme }) => theme.shadows.elevated};
+    box-shadow: ${({ theme }) => theme.shadows.lg};
   }
 `;
 
@@ -352,14 +352,14 @@ export const GridContainer = styled.div`
 export const Card = styled(motion.div)`
   background: ${({ theme }) => theme.colors.background.paper};
   border-radius: ${({ theme }) => theme.borderRadius.lg};
-  box-shadow: ${({ theme }) => theme.shadows.card};
+  box-shadow: ${({ theme }) => theme.shadows.lg};
   padding: 2rem;
   border: 1px solid ${({ theme }) => theme.colors.border.light};
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 
   &:hover {
     transform: translateY(-4px);
-    box-shadow: ${({ theme }) => theme.shadows.elevated};
+    box-shadow: ${({ theme }) => theme.shadows.lg};
   }
 `;
 
@@ -698,7 +698,7 @@ export const AccentCard = styled.div`
   color: ${({ theme }) => theme.colors.text.light};
   padding: 2rem;
   border-radius: 1rem;
-  box-shadow: ${({ theme }) => theme.shadows.medium};
+  box-shadow: ${({ theme }) => theme.shadows.md};
   margin-bottom: 2rem;
   
   h3 {
@@ -721,7 +721,7 @@ export const GradientCard = styled.div`
   color: ${({ theme }) => theme.colors.text.light};
   padding: 2rem;
   border-radius: 1rem;
-  box-shadow: ${({ theme }) => theme.shadows.medium};
+  box-shadow: ${({ theme }) => theme.shadows.md};
   margin-bottom: 2rem;
   
   h2, h3 {

Original file line number	Diff line number	Diff line change
@@ -26,13 +26,13 @@ const TitleContainer = styled.div`
`26`	`26`	`h3 {`
`27`	`27`	`font-size: 1.5rem;`
`28`	`28`	`margin-bottom: 0.5rem;`
`29`		`- color: ${({ theme }) => theme.colors?.text?.primary \|\| '#333'};`
	`29`	`+ color: ${({ theme }) => theme.colors.text.primary \|\| '#333'};`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`p {`
`33`	`33`	`font-size: 1rem;`
`34`	`34`	`line-height: 1.5;`
`35`		`- color: ${({ theme }) => theme.colors?.text?.secondary \|\| '#666'};`
	`35`	`+ color: ${({ theme }) => theme.colors.text.secondary \|\| '#666'};`
`36`	`36`	`}`
`37`	`37`	`;
`38`	`38`