refactor: ligth mode dark mode theme, typography and card styles on different themes#365
Closed
sanjayr-12 wants to merge 1 commit intoDeadlink-Hunter:mainfrom
Closed
refactor: ligth mode dark mode theme, typography and card styles on different themes#365sanjayr-12 wants to merge 1 commit intoDeadlink-Hunter:mainfrom
sanjayr-12 wants to merge 1 commit intoDeadlink-Hunter:mainfrom
Conversation
|
👋 Thanks for opening this Pull Request! 🎉 We'll review it as soon as possible. Before we proceed, please double check:
Happy contributing! 🚀 |
📝 WalkthroughWalkthroughThis pull request systematically implements dark mode support across the application by converting static style objects to dynamic style functions that accept an Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Comment Tip You can disable the changed files summary in the walkthrough.Disable the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (11)
src/components/Charts/DonutChart/DonutChart.tsx (2)
22-32: Excessive type assertions indicate a typing issue in the styles module.The multiple
as number,as string, andas React.CSSPropertiescasts are symptoms of theStylesObjectinterface being too loose. Consider splitting the styles into separate, properly typed objects or using a more precise interface to avoid these runtime assertions.♻️ Suggested approach in styles.ts
Define distinct interfaces for chart configuration vs CSS styles:
+interface ChartConfig { + paddingAngle: number; + thickness: number; + size: number; + strokeWidth: number; + strokeColor: string; + labelSize: number; +} + +interface ChartStyles { + container: CSSProperties; + labelsContainer: CSSProperties; + labelsGap: CSSProperties; + labelColor: (colorIndex: number) => CSSProperties; + labelText: CSSProperties; +} + +export const getChartStyles = (isDark: boolean): ChartConfig & ChartStyles => ({ // ...existing implementation -}) satisfies StylesObject; +});This would eliminate the need for type assertions in the component.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Charts/DonutChart/DonutChart.tsx` around lines 22 - 32, The component is using many "as" casts (paddingAngle, thickness, size, strokeWidth, strokeColor, labelsContainer, labelsGap, labelColor, labelText) because chartStyles is too loosely typed; fix this by tightening styles.ts: replace the broad StylesObject with two precise interfaces (e.g., ChartConfigProps for numeric/string chart config and ChartCssProps for React.CSSProperties), update chartStyles to use those interfaces and separate exports (or a typed grouped object), and adjust any calls to chartStyles.labelColor to return a correctly typed React.CSSProperties so the casts in DonutChart.tsx are no longer necessary.
9-11: Typo in component name:DountChartshould beDonutChart.This appears to be a pre-existing issue, but worth fixing while refactoring this file.
📝 Suggested fix
-export default function DountChart({ data, withToolTip = false }: DonutProps) { +export default function DonutChart({ data, withToolTip = false }: DonutProps) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Charts/DonutChart/DonutChart.tsx` around lines 9 - 11, The component function is misspelled as DountChart; rename the exported function to DonutChart (update the declaration export default function DountChart(...) -> export default function DonutChart(...)) and adjust any internal references like the DonutProps usage if needed; also search and update any imports or usages that reference DountChart to use DonutChart so the default export and callers remain consistent.src/pages/Home/Components/HowItWorks/styles.ts (2)
54-58: Consider adding theme-aware color to description style.The
titleandcardDescriptionstyles have theme-aware colors, butdescription(used for the subtitle) lacks an explicitcolorproperty. This may cause inconsistent text visibility in dark mode if the Typography component's default color doesn't match the intended design.Proposed fix
description: { maxWidth: '32.5rem', margin: `0 auto ${theme.spacing['2xl']}`, textAlign: 'center', + color: isDark ? rgba(theme.white, 0.72) : colors.gray[7], } satisfies CSSProperties,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Home/Components/HowItWorks/styles.ts` around lines 54 - 58, The description style object (named description) lacks a theme-aware color, causing potential contrast issues in dark mode; update the description style to include a color pulled from the theme (similar to title and cardDescription) — e.g. add color: theme.colors.textPrimary or the appropriate token (match the token used by title/cardDescription) so the subtitle uses the same theme-aware text color and maintains consistent visibility across themes.
7-7: Tracking TODO: Extract common title styles.The TODO comment flags code duplication for title styles. Consider creating a shared utility or extracting common patterns to a centralized location when convenient.
Would you like me to open an issue to track this refactoring task?
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Home/Components/HowItWorks/styles.ts` at line 7, There’s duplicated "title" styling noted by the TODO; extract the shared rules into a single reusable style (e.g., a styled-component or CSS-in-JS mixin) and replace duplicated definitions (e.g., Title and SectionTitle) to consume that shared style; create a single export (such as TitleBase or useTitleStyles) and update the components that currently duplicate font-size, weight, line-height, color, and responsive rules to extend or compose that shared symbol so all title variations import the common style.src/pages/Home/Components/HowItWorks/HowItWorkCard.tsx (1)
29-34: Consider using distinct Typography variants for title vs description.Both the card title and description use
variant='primary', but they serve different semantic purposes. While the inline styles override the variant defaults, usingvariant='title'for the title andvariant='secondary'for the description (as done inHowItWorkTitles.tsx) would improve semantic consistency across the codebase.Proposed fix
- <Typography variant='primary' style={howItWorksStyles.cardTitle}> + <Typography variant='title' style={howItWorksStyles.cardTitle}> {title} </Typography> - <Typography variant='primary' style={howItWorksStyles.cardDescription}> + <Typography variant='secondary' style={howItWorksStyles.cardDescription}> {description} </Typography>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Home/Components/HowItWorks/HowItWorkCard.tsx` around lines 29 - 34, Update the Typography variants to reflect semantic roles: change the card title Typography (the element rendering {title} and using howItWorksStyles.cardTitle) to use variant='title' and change the card description Typography (the element rendering {description} and using howItWorksStyles.cardDescription) to use variant='secondary' so they match the pattern used in HowItWorkTitles.tsx; keep the existing inline style objects untouched.src/pages/Home/Components/HowItWorks/HowItWork.tsx (1)
10-11: Minor: Styles computed but only partially used.The component computes
howItWorksStylesbut only uses.cards. SinceHowItWorkTitlesandHowItWorkCardeach compute their own styles internally, you could consider either:
- Only accessing
getHowItWorksStyles(isDark).cardsdirectly, or- Passing down
howItWorksStylesas a prop to child components to avoid redundant computations.This is a minor optimization and the current approach is perfectly acceptable for readability.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Home/Components/HowItWorks/HowItWork.tsx` around lines 10 - 11, The code calls getHowItWorksStyles(isDark) and stores it in howItWorksStyles but only uses howItWorksStyles.cards; either replace that variable with a direct call to getHowItWorksStyles(isDark).cards where needed (remove howItWorksStyles) or thread howItWorksStyles down as a prop to child components HowItWorkTitles and HowItWorkCard so they reuse the computed styles instead of recomputing; update references to isDark/getHowItWorksStyles/howItWorksStyles and adjust child component props accordingly.src/pages/About/components/styles.ts (2)
40-68: Inconsistent return type annotations across style getter functions.
getMissionCardStyleshas an explicit return type: CSSProperties, butgetFeatureCardStyles,getTitleStyle, andgetParagraphStylerely on type inference. For consistency and improved maintainability, consider adding explicit return types to all style getter functions.♻️ Proposed fix for consistent type annotations
-export const getFeatureCardStyles = (isDark: boolean) => ({ +export const getFeatureCardStyles = (isDark: boolean): CSSProperties => ({ backgroundColor: isDark ? colors.primary[8] : theme.white, ... }); -export const getTitleStyle = (isDark: boolean) => ({ +export const getTitleStyle = (isDark: boolean): CSSProperties => ({ color: isDark ? colors.primary[1] : theme.black, }); -export const getParagraphStyle = (isDark: boolean) => ({ +export const getParagraphStyle = (isDark: boolean): CSSProperties => ({ color: isDark ? colors.primary[2] : colors.gray[7], gridColumnStart: 2, });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/About/components/styles.ts` around lines 40 - 68, Add explicit return type annotations to make the style getters consistent: change getFeatureCardStyles, getTitleStyle, and getParagraphStyle to declare a return type of CSSProperties (matching getMissionCardStyles). Ensure the file imports or references CSSProperties from React/appropriate typing source if not already present, and update the function signatures for getFeatureCardStyles, getTitleStyle, and getParagraphStyle to use : CSSProperties.
65-68:gridColumnStartin shared paragraph style limits reusability.This property is specific to grid layouts (used by
FeatureCard), butgetParagraphStyleis also used byMissionCardwhich uses flex layout. Consider either:
- Extracting a base text style without layout properties
- Creating separate paragraph styles for grid vs flex contexts
♻️ Proposed refactor for better separation of concerns
+export const getBaseParagraphStyle = (isDark: boolean): CSSProperties => ({ + color: isDark ? colors.primary[2] : colors.gray[7], +}); + export const getParagraphStyle = (isDark: boolean): CSSProperties => ({ - color: isDark ? colors.primary[2] : colors.gray[7], + ...getBaseParagraphStyle(isDark), gridColumnStart: 2, });Then
MissionCardcould usegetBaseParagraphStyledirectly.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/About/components/styles.ts` around lines 65 - 68, getParagraphStyle currently mixes layout with text styling (it sets gridColumnStart) which breaks reuse in flex contexts like MissionCard; extract a neutral getBaseParagraphStyle that returns only text-related properties (e.g., color) and remove gridColumnStart from it, then create a getGridParagraphStyle (or keep getParagraphStyle) that composes getBaseParagraphStyle and adds gridColumnStart for FeatureCard; update MissionCard to use getBaseParagraphStyle and FeatureCard to use the grid-specific style so layout concerns are separated from text styling.src/pages/About/components/MissionCard.tsx (1)
12-12: Grid-specific style property applied to flex container.
getParagraphStyleincludesgridColumnStart: 2which is intended for grid layouts. SinceMissionCarduses a flex layout (viagetMissionCardStyles), this property has no effect here. While not a functional bug, it reduces code clarity.Consider creating a separate paragraph style for
MissionCardor extracting only the color property.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/About/components/MissionCard.tsx` at line 12, getParagraphStyle injects a grid-specific property (gridColumnStart: 2) which is irrelevant for the flex-based MissionCard (styled via getMissionCardStyles); remove the grid property for this component by either creating a dedicated paragraph style used in MissionCard (e.g., getMissionParagraphStyle or missionParagraphStyles) that only includes the color/typography, or modify getParagraphStyle to accept a layout flag and return a variant without gridColumnStart when called from MissionCard; update the MissionCard component to use the new paragraph style instead of getParagraphStyle so the flex layout isn't polluted with grid-only props.src/pages/Scanner/components/styles.ts (1)
142-146: Avoid fixed label width in responsive layout.At Line 145,
width: '500px'can overflow on smaller screens. Prefer fluid width with a max constraint.Proposed change
fieldLabel: { color: isDark ? colors.gray[0] : colors.gray[9], fontSize: theme.fontSizes.sm, - width: '500px', + width: '100%', + maxWidth: '500px', } satisfies CSSProperties,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Scanner/components/styles.ts` around lines 142 - 146, The fieldLabel style object uses a fixed width ('500px') which can break responsiveness; update the fieldLabel (the object that currently "satisfies CSSProperties") to use a fluid width and a maximum constraint (e.g., set width to '100%' and add maxWidth: '500px' or use theme breakpoints) so the label scales on small screens while keeping the intended max width.src/components/UI/Typography/styles.ts (1)
6-6: Preserve literal variant keys usingsatisfiesto improve type safety.At Line 6, the explicit
Record<string, TypographyVariant>return type erases literal keys. This causeskeyof ReturnType<typeof getTypographyVariants>to widen tostringinstead of the literal union"primary" | "secondary" | … | "subtitle", weakening type safety forvariantthroughout the codebase.Remove the explicit return type annotation and use
satisfies Record<string, TypographyVariant>)on the object literal instead. This preserves literal keys while still validating that all values conform toTypographyVariant.Suggested fix
-export const getTypographyVariants = (isDark: boolean): Record<string, TypographyVariant> => ({ +export const getTypographyVariants = (isDark: boolean) => ({ primary: { color: isDark ? colors.primary[5] : colors.primary[7] }, secondary: { color: isDark ? colors.gray[5] : colors.gray[7] }, tertiary: { color: isDark ? colors.gray[4] : colors.gray[8] }, cyan: { color: colors.cyan[5] }, purple: { color: colors.purple[5] }, success: { color: colors.success[5] }, warning: { color: colors.warning[5] }, error: { color: colors.error[5] }, title: { color: isDark ? colors.primary[1] : colors.primary[9], size: CUSTOM_SIZES.EXTRA_LARGE }, subtitle: { color: isDark ? colors.primary[6] : colors.primary[8], size: CUSTOM_SIZES.LARGE }, -}); +} satisfies Record<string, TypographyVariant>);-// src/components/UI/Typography/Typography.tsx -import { getTypographyVariants } from './styles'; +import { getTypographyVariants } from './styles'; ... -type TypographyVariantKey = keyof ReturnType<typeof getTypographyVariants>; +type TypographyVariantKey = keyof ReturnType<typeof getTypographyVariants>;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/UI/Typography/styles.ts` at line 6, Remove the explicit return type on getTypographyVariants (currently typed as Record<string, TypographyVariant>) so the object literal's keys remain literal, and instead apply a trailing "satisfies Record<string, TypographyVariant>" to the returned object literal to validate values without widening keys; keep the isDark parameter and existing object shape, and ensure the function still exports the object (e.g., drop the : Record<...> annotation and append satisfies to the object expression).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/Navbar/NavbarLinks.tsx`:
- Line 3: The NavbarLinks component imports Divider from '@mantine/core' but
uses variant='muted', which Mantine's Divider doesn't support; replace the
Mantine import with the project's custom Divider wrapper (the same one used in
MobileNav.tsx) so the 'muted' variant mapping is available—remove "import {
Divider } from '@mantine/core'" and import the project's Divider wrapper used in
MobileNav.tsx, ensuring the NavbarLinks usage of variant='muted' continues to
work.
---
Nitpick comments:
In `@src/components/Charts/DonutChart/DonutChart.tsx`:
- Around line 22-32: The component is using many "as" casts (paddingAngle,
thickness, size, strokeWidth, strokeColor, labelsContainer, labelsGap,
labelColor, labelText) because chartStyles is too loosely typed; fix this by
tightening styles.ts: replace the broad StylesObject with two precise interfaces
(e.g., ChartConfigProps for numeric/string chart config and ChartCssProps for
React.CSSProperties), update chartStyles to use those interfaces and separate
exports (or a typed grouped object), and adjust any calls to
chartStyles.labelColor to return a correctly typed React.CSSProperties so the
casts in DonutChart.tsx are no longer necessary.
- Around line 9-11: The component function is misspelled as DountChart; rename
the exported function to DonutChart (update the declaration export default
function DountChart(...) -> export default function DonutChart(...)) and adjust
any internal references like the DonutProps usage if needed; also search and
update any imports or usages that reference DountChart to use DonutChart so the
default export and callers remain consistent.
In `@src/components/UI/Typography/styles.ts`:
- Line 6: Remove the explicit return type on getTypographyVariants (currently
typed as Record<string, TypographyVariant>) so the object literal's keys remain
literal, and instead apply a trailing "satisfies Record<string,
TypographyVariant>" to the returned object literal to validate values without
widening keys; keep the isDark parameter and existing object shape, and ensure
the function still exports the object (e.g., drop the : Record<...> annotation
and append satisfies to the object expression).
In `@src/pages/About/components/MissionCard.tsx`:
- Line 12: getParagraphStyle injects a grid-specific property (gridColumnStart:
2) which is irrelevant for the flex-based MissionCard (styled via
getMissionCardStyles); remove the grid property for this component by either
creating a dedicated paragraph style used in MissionCard (e.g.,
getMissionParagraphStyle or missionParagraphStyles) that only includes the
color/typography, or modify getParagraphStyle to accept a layout flag and return
a variant without gridColumnStart when called from MissionCard; update the
MissionCard component to use the new paragraph style instead of
getParagraphStyle so the flex layout isn't polluted with grid-only props.
In `@src/pages/About/components/styles.ts`:
- Around line 40-68: Add explicit return type annotations to make the style
getters consistent: change getFeatureCardStyles, getTitleStyle, and
getParagraphStyle to declare a return type of CSSProperties (matching
getMissionCardStyles). Ensure the file imports or references CSSProperties from
React/appropriate typing source if not already present, and update the function
signatures for getFeatureCardStyles, getTitleStyle, and getParagraphStyle to use
: CSSProperties.
- Around line 65-68: getParagraphStyle currently mixes layout with text styling
(it sets gridColumnStart) which breaks reuse in flex contexts like MissionCard;
extract a neutral getBaseParagraphStyle that returns only text-related
properties (e.g., color) and remove gridColumnStart from it, then create a
getGridParagraphStyle (or keep getParagraphStyle) that composes
getBaseParagraphStyle and adds gridColumnStart for FeatureCard; update
MissionCard to use getBaseParagraphStyle and FeatureCard to use the
grid-specific style so layout concerns are separated from text styling.
In `@src/pages/Home/Components/HowItWorks/HowItWork.tsx`:
- Around line 10-11: The code calls getHowItWorksStyles(isDark) and stores it in
howItWorksStyles but only uses howItWorksStyles.cards; either replace that
variable with a direct call to getHowItWorksStyles(isDark).cards where needed
(remove howItWorksStyles) or thread howItWorksStyles down as a prop to child
components HowItWorkTitles and HowItWorkCard so they reuse the computed styles
instead of recomputing; update references to
isDark/getHowItWorksStyles/howItWorksStyles and adjust child component props
accordingly.
In `@src/pages/Home/Components/HowItWorks/HowItWorkCard.tsx`:
- Around line 29-34: Update the Typography variants to reflect semantic roles:
change the card title Typography (the element rendering {title} and using
howItWorksStyles.cardTitle) to use variant='title' and change the card
description Typography (the element rendering {description} and using
howItWorksStyles.cardDescription) to use variant='secondary' so they match the
pattern used in HowItWorkTitles.tsx; keep the existing inline style objects
untouched.
In `@src/pages/Home/Components/HowItWorks/styles.ts`:
- Around line 54-58: The description style object (named description) lacks a
theme-aware color, causing potential contrast issues in dark mode; update the
description style to include a color pulled from the theme (similar to title and
cardDescription) — e.g. add color: theme.colors.textPrimary or the appropriate
token (match the token used by title/cardDescription) so the subtitle uses the
same theme-aware text color and maintains consistent visibility across themes.
- Line 7: There’s duplicated "title" styling noted by the TODO; extract the
shared rules into a single reusable style (e.g., a styled-component or CSS-in-JS
mixin) and replace duplicated definitions (e.g., Title and SectionTitle) to
consume that shared style; create a single export (such as TitleBase or
useTitleStyles) and update the components that currently duplicate font-size,
weight, line-height, color, and responsive rules to extend or compose that
shared symbol so all title variations import the common style.
In `@src/pages/Scanner/components/styles.ts`:
- Around line 142-146: The fieldLabel style object uses a fixed width ('500px')
which can break responsiveness; update the fieldLabel (the object that currently
"satisfies CSSProperties") to use a fluid width and a maximum constraint (e.g.,
set width to '100%' and add maxWidth: '500px' or use theme breakpoints) so the
label scales on small screens while keeping the intended max width.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 676bf62f-ce26-4159-b89f-8c617e93f87e
📒 Files selected for processing (29)
src/components/Charts/DonutChart/DonutChart.tsxsrc/components/Charts/DonutChart/styles.tssrc/components/Navbar/DesktopNav.tsxsrc/components/Navbar/MobileNav.tsxsrc/components/Navbar/NavbarLink.tsxsrc/components/Navbar/NavbarLinks.tsxsrc/components/Navbar/styles.tssrc/components/UI/Card/Card.tsxsrc/components/UI/Card/styles.tssrc/components/UI/Typography/Typography.tsxsrc/components/UI/Typography/styles.tssrc/pages/About/components/FeatureCard.tsxsrc/pages/About/components/MissionCard.tsxsrc/pages/About/components/styles.tssrc/pages/Home/Components/ExploreToolkit.tsxsrc/pages/Home/Components/HowItWorks/HowItWork.tsxsrc/pages/Home/Components/HowItWorks/HowItWorkCard.tsxsrc/pages/Home/Components/HowItWorks/HowItWorkTitles.tsxsrc/pages/Home/Components/HowItWorks/styles.tssrc/pages/Home/Components/styles.tssrc/pages/Scanner/Scanner.page.tsxsrc/pages/Scanner/components/RepositoryScanForm.tsxsrc/pages/Scanner/components/ScanLinksCard.tsxsrc/pages/Scanner/components/ScanResultsCard.tsxsrc/pages/Scanner/components/ScanTitle.tsxsrc/pages/Scanner/components/SingleScanForm.tsxsrc/pages/Scanner/components/styles.tssrc/pages/Statistics/components/Charts.tsxsrc/pages/Statistics/components/styles.ts
| import { IconBrandGithub } from '@tabler/icons-react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { Divider, useMantineColorScheme } from '@mantine/core'; | ||
| import { Divider } from '@mantine/core'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "1) Inspect changed import + usage in NavbarLinks.tsx"
rg -n -C2 "import \{ Divider \} from '@mantine/core'|<Divider[^>]*variant='muted'" src/components/Navbar/NavbarLinks.tsx
echo
echo "2) Inspect Divider usage patterns in Navbar components"
rg -n -C2 "<Divider[^>]*variant='muted'|from '../UI/Divider/Divider'|from '@mantine/core'" src/components/Navbar
echo
echo "3) Inspect project Divider component API"
fd 'Divider.tsx' src/components/UI --exec sed -n '1,220p' {}Repository: Deadlink-Hunter/Broken-Link-Website
Length of output: 3584
🏁 Script executed:
fd 'Divider' src/components/UI --type f -name '*.tsx' -o -name '*.ts' | head -20Repository: Deadlink-Hunter/Broken-Link-Website
Length of output: 309
🏁 Script executed:
find src/components/UI/Divider -type f -name '*' | head -20Repository: Deadlink-Hunter/Broken-Link-Website
Length of output: 196
🏁 Script executed:
cat src/components/UI/Divider/styles.ts 2>/dev/null || cat src/components/UI/Divider/styles.tsx 2>/dev/null || echo "styles file not found"Repository: Deadlink-Hunter/Broken-Link-Website
Length of output: 798
🏁 Script executed:
rg "Divider" src --type tsx --type ts -A3 -B1 | grep -E "(import.*Divider|variant=)" | head -30Repository: Deadlink-Hunter/Broken-Link-Website
Length of output: 106
🌐 Web query:
Mantine v7 v8 Divider component variant prop supported values documentation
💡 Result:
Mantine Divider variant prop supported values:
- v7:
default(when omitted),dashed,dotted[1] - v8:
default(when omitted),dashed,dotted[2]
Sources: [1] [2]
🏁 Script executed:
rg "@mantine/core" package.json -A1 -B1Repository: Deadlink-Hunter/Broken-Link-Website
Length of output: 177
Mantine's Divider does not support the variant='muted' prop.
Line 3 imports Divider from @mantine/core, but Line 63 uses variant='muted'. Mantine v8.3.17's Divider only supports default, dashed, and dotted. The project's custom Divider wrapper (used in MobileNav.tsx) provides the necessary variant mappings.
Suggested fix
-import { Divider } from '@mantine/core';
+import { Divider } from '../UI/Divider/Divider';Also applies to: 63-63
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/Navbar/NavbarLinks.tsx` at line 3, The NavbarLinks component
imports Divider from '@mantine/core' but uses variant='muted', which Mantine's
Divider doesn't support; replace the Mantine import with the project's custom
Divider wrapper (the same one used in MobileNav.tsx) so the 'muted' variant
mapping is available—remove "import { Divider } from '@mantine/core'" and import
the project's Divider wrapper used in MobileNav.tsx, ensuring the NavbarLinks
usage of variant='muted' continues to work.
Member
|
@sanjayr-12 What about the option to change the typography to automatically support more visible text ? |
Contributor
Author
you mean global config for entire applicaiton? |
Member
|
@sanjayr-12 Ye, and you can do it inside |
Contributor
Author
|
@Tamir198 sure |
Member
|
@sanjayr-12 Im closing this pr for now, if you wish to work on this it will be much simpler to open a new pr, because this pr got a lot of conflicts already |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#345
made several UI changes. There is an inconsistency of typography on different themes.
Hero Section:
How it works cards:
Scanner Page:
About Cards:
@Tamir198 can u once verify the UI?
Summary by CodeRabbit
New Features
Refactor