Replace hardcoded font sizes #2471
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update standardizes font sizing across the application by replacing hardcoded pixel, rem, and em values with predefined SCSS variables or theme properties. The changes span numerous SCSS and TypeScript files, updating both component-level and global styles. Several obsolete or redundant font size variables are removed from the theme configuration, and all references to these are updated accordingly. The alterations ensure that all font sizes are now sourced from a centralized theme, promoting consistency and maintainability. No logic, control flow, or exported entities are affected, as the changes are limited to styling and theme property usage. Changes
Sequence Diagram(s)sequenceDiagram
participant Component
participant ThemeProperties
Note over Component,ThemeProperties: On render or style computation
Component->>ThemeProperties: Request font size variable (e.g., fontSmall)
ThemeProperties-->>Component: Return font size value (e.g., '14px')
Component->>Component: Apply font size via SCSS variable or styled component
Note over Component: Font size now consistent with theme
Possibly related PRs
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
mohitb35
force-pushed
the
feature/rationalize-fonts
branch
from
3a1f5d8 to
401b0a1
Compare
- removes rem font size variables as they will not be used
- /src/features/common -/src/features/donations -/src/features/projectsV2 -/src/features/user -/src/tenants/planet/LeaderBoard - also removes some unused classes
mohitb35
force-pushed
the
feature/rationalize-fonts
branch
from
2421ef9 to
e3b3ad4
Compare
- adjusts font sizes to 10px where these were used - makes minor adjustments to align interventions and site dropdown correctly in mobile view
- affects payment history, recurring subscriptions, planetcash transactions
![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 (6)
src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss (1)
20-20: Consider using a theme spacing variable instead of hardcoded 5px
For consistency with the design system, you might replace the literal5pxgap with a predefined spacing token (e.g.$spacing-1or similar) rather than introducing a new hardcoded value.src/tenants/salesforce/Mangroves/styles/Landing.module.scss (1)
106-108: Consider replacing media‑query font-size with theme variable
Thefont-size: 15pxunder@include lgLaptopViewremains hardcoded. For full consistency, use an appropriate theme variable (e.g.,$fontSmallor another defined size) instead.src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss (1)
169-173: Inconsistent variable usage
The.exploreDescriptionusesvar(--font-xx-extra-small)instead of the SCSS variable approach used elsewhere. Consider replacing it with the corresponding SCSS variable (e.g.,$fontXXSmall) for consistency.src/features/user/TreeMapper/Analytics/components/Counter/components/CounterItem/index.module.scss (1)
14-26: Define pseudo-element separator for desktop
The&:afterwithmdTabletViewmixin cleanly adds separators; consider extracting these values into a shared mixin if reused elsewhere.src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss (2)
73-77: Avoid magic pixel offsets in positioning
Using a rawright: 30pxcould drift from global spacing. Consider leveraging$layoutPaddingSideor a theme spacing variable for consistency.
158-166: Use theme z-index scale
Hardcodingz-index: 50risks stacking conflicts. Consider adopting a named z-index variable or documenting its intended layer in the theme.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (75)
src/features/common/CarouselSlider/CarouselSlider.module.scss(1 hunks)src/features/common/InputTypes/BootstrapInput.tsx(2 hunks)src/features/common/InputTypes/MaterialTextField.tsx(2 hunks)src/features/common/InputTypes/MuiAutoComplete.tsx(2 hunks)src/features/common/LandingVideo/styles.module.scss(1 hunks)src/features/common/Layout/DashboardView/index.tsx(2 hunks)src/features/common/Layout/Footer/Footer.module.scss(1 hunks)src/features/common/Layout/Navbar/Navbar.scss(1 hunks)src/features/common/Layout/UserLayout/UserLayout.module.scss(1 hunks)src/features/common/RedeemCode/SuccessfullyRedeemed.tsx(1 hunks)src/features/common/RedeemCode/style/RedeemModal.module.scss(1 hunks)src/features/common/TreeCounter/TreeCounter.module.scss(2 hunks)src/features/common/WebappButton/WebappButton.module.scss(1 hunks)src/features/donations/styles/DirectGift.module.scss(2 hunks)src/features/projects/styles/PlantLocation.module.scss(2 hunks)src/features/projects/styles/ProjectSnippet.module.scss(4 hunks)src/features/projects/styles/ProjectsMap.module.scss(2 hunks)src/features/projects/styles/VegetationChange.module.scss(1 hunks)src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss(9 hunks)src/features/projectsV2/ProjectDetails/styles/ProjectReviews.module.scss(1 hunks)src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss(1 hunks)src/features/projectsV2/ProjectSnippet/styles/ProjectSnippet.module.scss(5 hunks)src/features/projectsV2/ProjectsMap/Credits/Credits.module.scss(1 hunks)src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss(4 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss(2 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MobileMapSettingsLayout.module.scss(2 hunks)src/features/projectsV2/ProjectsMap/MapFeatureExplorer/YearSlider/YearSlider.module.scss(1 hunks)src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/SiteDropdown.module.scss(3 hunks)src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss(1 hunks)src/features/projectsV2/ProjectsSection.module.scss(1 hunks)src/features/user/Account/AccountHistory.module.scss(5 hunks)src/features/user/CompleteSignup/CompleteSignup.module.scss(1 hunks)src/features/user/DonationReceipt/DonationReceipt.module.scss(7 hunks)src/features/user/GiftFunds/GiftFundDetails.tsx(2 hunks)src/features/user/ManagePayouts/components/BankAccountDetails.tsx(2 hunks)src/features/user/ManageProjects/ProjectsContainer.module.scss(1 hunks)src/features/user/ManageProjects/StepForm.module.scss(2 hunks)src/features/user/PlanetCash/components/AccountDetails.tsx(2 hunks)src/features/user/Profile/CommunityContributions/communityContributions.module.scss(1 hunks)src/features/user/Profile/ContributionsMap/Common/common.module.scss(2 hunks)src/features/user/Profile/ContributionsMap/ContributionsMap.module.scss(4 hunks)src/features/user/Profile/ForestProgress/ForestProgress.module.scss(8 hunks)src/features/user/Profile/InfoAndCTA/InfoAndCta.module.scss(1 hunks)src/features/user/Profile/MyContributions/GiftInfoTooltip.tsx(2 hunks)src/features/user/Profile/MyContributions/MyContributions.module.scss(1 hunks)src/features/user/Profile/ProfileCard/ProfileCard.module.scss(2 hunks)src/features/user/Profile/ProfileCard/ShareModal/ShareModal.module.scss(1 hunks)src/features/user/Profile/TpoProjects/TpoProjects.module.scss(1 hunks)src/features/user/RegisterTrees/RegisterModal.module.scss(0 hunks)src/features/user/Settings/EditProfile/AddressManagement/AddressManagement.module.scss(1 hunks)src/features/user/Settings/EditProfile/EditProfile.module.scss(3 hunks)src/features/user/Settings/ImpersonateUser/ImpersonateUser.module.scss(2 hunks)src/features/user/TreeMapper/Analytics/components/Counter/components/CounterItem/index.module.scss(1 hunks)src/features/user/TreeMapper/Analytics/components/Export/index.module.scss(1 hunks)src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.module.scss(2 hunks)src/features/user/TreeMapper/Analytics/components/Map/index.module.scss(1 hunks)src/features/user/TreeMapper/Analytics/components/SpeciesPlanted/Tooltip/index.module.scss(1 hunks)src/features/user/TreeMapper/Analytics/components/SpeciesPlanted/index.module.scss(1 hunks)src/features/user/TreeMapper/Analytics/components/TreePlanted/Tooltip/index.module.scss(1 hunks)src/features/user/TreeMapper/Analytics/components/TreePlanted/index.module.scss(1 hunks)src/features/user/TreeMapper/Import/Import.module.scss(2 hunks)src/features/user/TreeMapper/TreeMapper.module.scss(1 hunks)src/tenants/planet/LeaderBoard/components/LeaderBoard.module.scss(1 hunks)src/tenants/planet/LeaderBoard/components/Stats.module.scss(1 hunks)src/tenants/planet/LeaderBoard/components/Stories.module.scss(3 hunks)src/tenants/salesforce/Home/styles/Landing.module.scss(1 hunks)src/tenants/salesforce/Mangroves/styles/ContentSection.module.scss(1 hunks)src/tenants/salesforce/Mangroves/styles/Landing.module.scss(1 hunks)src/tenants/salesforce/OceanforceCampaign/styles/ContentSection.module.scss(1 hunks)src/tenants/salesforce/OceanforceCampaign/styles/Landing.module.scss(1 hunks)src/theme/_fonts.scss(0 hunks)src/theme/global.scss(5 hunks)src/theme/theme.ts(0 hunks)src/theme/themeProperties.ts(0 hunks)src/theme/themeStyles.ts(6 hunks)
💤 Files with no reviewable changes (4)
- src/features/user/RegisterTrees/RegisterModal.module.scss
- src/theme/theme.ts
- src/theme/_fonts.scss
- src/theme/themeProperties.ts
🔇 Additional comments (198)
src/features/user/TreeMapper/TreeMapper.module.scss (1)
437-439: Consistent font sizing with theme variable. Replacing the hardcoded size with$fontXXLargeimproves maintainability and aligns this component with the centralized typography definitions. Ensure$fontXXLargeis exported in your imported theme file and reflects the intended size.src/features/projectsV2/ProjectsMap/MapFeatureExplorer/YearSlider/YearSlider.module.scss (1)
35-39: Standardize obsolete size to$fontXXSmall. The switch from the removed$fontXXXXSmallNewto$fontXXSmallkeeps this slider in sync with current theme variables. Please verify the readability of the years at this size, especially on smaller screens.src/features/user/TreeMapper/Import/Import.module.scss (2)
20-25: Centralize title font size. Changing.pageTitlefrom a hardcoded2.25remto$fontXXLargeensures consistency across similar headings. Confirm alignment with other page titles and that this change doesn’t affect layout spacing.
47-49: Unify subtitle sizing. Replacing1remwith$fontSixteenstandardizes subtitles across the app. Validate that the line height and weight remain visually balanced at this size.src/features/user/TreeMapper/Analytics/components/TreePlanted/index.module.scss (1)
4-6: Use theme variable for analytics title. Swapping out the hardcoded16pxfor$fontSixteenin.titlealigns this component with the global typography system. Font weight retention is correct.src/features/user/TreeMapper/Analytics/components/Map/index.module.scss (1)
60-60: Replace fixed10pxwith$fontXXSmall. This change brings the font size in.plantLocationDetailsContainerunder the centralized theme control. Please check that the text remains legible against the map background.src/features/common/InputTypes/MuiAutoComplete.tsx (2)
2-2: Import themeProperties for standardized font sizing
Adding thethemePropertiesimport enables usage of centralized font size variables across components.
17-17: Use theme-based fontMedium variable
Replaced the hardcoded18value withthemeProperties.fontSizes.fontMediumto ensure consistency with the design system.src/features/projectsV2/ProjectsMap/Credits/Credits.module.scss (1)
7-7: Use SCSS variable for extra small font size
Swapped the fixed11pxfor the$fontXSmalltheme variable, aligning the.lngSwitchertext with the consolidated font scale.src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MobileMapSettingsLayout.module.scss (2)
1-1: Import theme to access SCSS font variables
Ensures the file has access to the global$fontSmallvariable and other design tokens defined in the theme.
33-33: Replace hardcoded 14px with theme variable
Changed from14pxto$fontSmallto maintain a unified typography scale across responsive layouts.src/features/common/Layout/DashboardView/index.tsx (2)
5-5: Import themeProperties for centralized styling
Bringing inthemePropertiesallows the component to reference the shared font-size definitions.
16-16: Use theme-based fontSixteen value
UpdatedfontSizefrom'1rem'tothemeProperties.fontSizes.fontSixteento match the theme’s 16px setting.src/features/projects/styles/VegetationChange.module.scss (1)
56-56: Standardize superscript font size with theme variable
Replaced the fixed8pxvalue on the<sup>element with$fontXXSmallfor consistency with other minimal text elements.src/features/projectsV2/ProjectsSection.module.scss (1)
52-52: Approve replacing hardcoded font size with theme variable
Good update: swapping out12pxfor$fontXSmallensures typography stays consistent and maintainable.src/features/common/LandingVideo/styles.module.scss (1)
47-47: Approve replacing fixed font size with theme variable
Swapping16pxfor$fontSixteenaligns perfectly with the centralized theming strategy.src/features/common/Layout/Footer/Footer.module.scss (1)
130-130: Approve use of theme font variable
Replacing the hardcoded9pxwith$fontXXSmallis consistent with the rest of the footer typography and the global theme.src/tenants/planet/LeaderBoard/components/Stats.module.scss (1)
43-43: Approve use of theme font variable
Good substitution of38pxwith$fontXXLargeto keep the leaderboard numbers in sync with theme specifications.src/features/common/WebappButton/WebappButton.module.scss (2)
48-48: Replace hardcoded font size with theme variable
Using the$fontSmallvariable for.webappButtonLabelstandardizes typography and aligns with the centralized theme.
85-85: Use appropriate theme variable for tertiary button label
Switching to$fontXSmallfor tertiary buttons maintains visual hierarchy and consistency.src/features/common/Layout/UserLayout/UserLayout.module.scss (1)
256-256: Standardize font size in sidebar navigation
Replacing the hardcoded size with$fontSmallensures all navlink buttons adhere to the UI scale defined in the theme.src/features/user/CompleteSignup/CompleteSignup.module.scss (1)
77-77: Adopt theme variable for page header
Changing.headerTitleto use$fontXLargecentralizes control over header sizing and matches the design system.src/tenants/salesforce/Home/styles/Landing.module.scss (1)
113-113: Replace footnote font size with theme variable
Using$fontXSmallfor.footnotealigns auxiliary text with the theme’s typography scale.src/features/common/Layout/Navbar/Navbar.scss (1)
166-166: Apply theme-based font size to submenu text
Switching.menuTextto$fontSixteenstandardizes submenu typography across breakpoints.src/features/user/GiftFunds/GiftFundDetails.tsx (2)
8-8: Standardized theme import
The new import ofthemePropertiesaligns this component with the centralized theme setup, enabling consistent font sizing across the app.
24-24: Applied centralized font size variable
Replacing the hardcoded font size withthemeProperties.fontSizes.fontSmallpromotes maintainability and consistency of typography.src/features/projectsV2/ProjectDetails/styles/ProjectReviews.module.scss (1)
16-16: Replaced hardcoded font size with SCSS variable
Using$fontXXSmallinstead of a fixed pixel value ensures consistency with the theme’s typography scale.src/tenants/planet/LeaderBoard/components/LeaderBoard.module.scss (1)
190-190: Unified font size using theme variable
Switching to$fontSmallin the.searchedUserCardspan ensures typography consistency within the leaderboard component.src/tenants/salesforce/OceanforceCampaign/styles/ContentSection.module.scss (1)
106-106: Standardized paragraph font size
Replacing18pxwith the$fontMediumSCSS variable in.projectItem paligns with the global typography system.src/features/user/Profile/CommunityContributions/communityContributions.module.scss (1)
172-172: Updated message font size to theme variable
Switching from0.75emto$fontXSmallcentralizes typography definitions and improves maintainability.src/tenants/salesforce/OceanforceCampaign/styles/Landing.module.scss (1)
101-101: Good replacement of hardcoded value with variableReplacing the hardcoded font size with the
$fontMediumvariable improves consistency and maintainability, aligning well with the PR objective of standardizing font sizes across the application.src/features/user/ManageProjects/ProjectsContainer.module.scss (1)
54-54: Good use of theme variable for font sizeReplacing the hardcoded
16pxvalue with the$fontSixteenvariable improves maintainability and ensures consistent typography throughout the application.src/features/user/ManagePayouts/components/BankAccountDetails.tsx (2)
8-8: Good addition of theme importCorrectly added the import for themeProperties to support the font size standardization.
18-18: Improved consistency by using theme propertiesGood replacement of the hardcoded
0.875remvalue with the theme propertyfontSmall. This change improves maintainability and ensures typography consistency across the application.src/features/user/PlanetCash/components/AccountDetails.tsx (2)
10-10: Good addition of theme importCorrectly added the import for themeProperties to support the font size standardization.
19-19: Improved consistency by using theme propertiesGood replacement of the hardcoded
0.875remvalue with the theme propertyfontSmall. This change improves maintainability and ensures typography consistency across the application.src/tenants/salesforce/Mangroves/styles/ContentSection.module.scss (1)
195-195: Use theme variable for project item text
Replaced a hardcoded18pxvalue with$fontMediumto align with the centralized typography scale and maintain consistency.src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss (1)
287-287: Standardize mobile filter result font size
The hardcoded14pxis correctly replaced with$fontSmall, ensuring consistency with other mobile text elements.src/features/user/Profile/ContributionsMap/Common/common.module.scss (2)
81-84: Use theme variable for stats font size
Replaced hardcoded12pxwith$fontXSmall, matching the theme’s extra-small typography scale.
95-98: Use theme variable for donation popup text
Replaced12pxwith$fontXSmallfor consistency in contribution popups.src/features/projects/styles/PlantLocation.module.scss (2)
11-11: Leverage theme variable for tree count text size
Replaced18pxwith$fontMedium, aligning the tree count typography with the centralized design tokens.
134-134: Minor formatting clean-up by removing a redundant space before thergbacolor value; no other changes to behavior or design.src/features/common/InputTypes/MaterialTextField.tsx (1)
29-29: Source font size from themeProperties
Replacing the hardcoded'14px'withthemeProperties.fontSizes.fontSmallensures the input label typography adheres to the centralized design tokens.src/features/common/CarouselSlider/CarouselSlider.module.scss (7)
1-2: Import theme variables: Adding@import '../../../theme/theme';at the top enables use of SCSS theme variables like$fontLarge. The import path looks correct.
4-6: Formatting adjustments in.carouselSliderContainer(indentation and gap) only; no functional impact.
12-16: Media query formatting for.carouselHeader; unrelated to font-size changes.
20-22: Use theme variable for title font size: Replaced hardcoded22pxwith$fontLargeas intended; aligns with centralized typography.
26-30: Styling in.arrowContainer > buttonunchanged aside from formatting; skip.
32-35: SVG styling under.arrowContaineronly; no effect on typography.
37-38: Media query for.arrowContainer(display: none) formatting only.src/features/user/Profile/MyContributions/MyContributions.module.scss (1)
65-70: Consistent small font usage: Updated.contributionCountOverflowfont-size to$fontXXSmall(formerly10px). Please confirm that$fontXXSmallcorrectly maps to the10pxsize in the theme and matches other small-text components.src/features/user/Settings/EditProfile/AddressManagement/AddressManagement.module.scss (1)
138-143: Replace hardcoded font size with theme variable: Changed.toggleContainerfont-size to$fontSmall(was14px). This ensures form text consistency; verify it matches the design spec.src/features/projects/styles/ProjectsMap.module.scss (2)
530-536: Use$fontXSmallfor.lngSwitcher: Swapped hardcoded11pxfor$fontXSmall. This centralizes typography; please check legibility at its fixed bottom‑right position on various screen sizes.
606-610: Use$fontSmallfor.clickForDetails: Good replacement of hardcoded14pxwith theme variable. Ensure the button label remains properly aligned and accessible after the change.src/features/common/InputTypes/BootstrapInput.tsx (2)
4-4: Import themeProperties module: Addedimport themeProperties from '../../../theme/themeProperties';to pull in centralized font size definitions. The import path is correct.
23-23: Apply theme-drivenfontSize: Replaced literal14withthemeProperties.fontSizes.fontSmall, aligning the input’s font size with the global theme.src/features/common/RedeemCode/style/RedeemModal.module.scss (1)
62-75: Standardized font sizing with theme variables is correct
The replacement of the hardcodedfont-size: 25pxwith$fontLargeand the new.subTextnested style using$fontMediumalign perfectly with our typography guidelines and the component’s updates.src/features/user/Profile/MyContributions/GiftInfoTooltip.tsx (2)
4-4: AddthemePropertiesimport
ImportingthemePropertiesis necessary to source font sizes from the centralized theme instead of hardcoding values.
14-14: Verify tooltip font size value
Ensure thatthemeProperties.fontSizes.fontXXSmallreturns a valid CSS font-size (either a string with units like"12px"or a numeric value interpreted correctly by MUI).src/features/common/RedeemCode/SuccessfullyRedeemed.tsx (2)
34-34: Apply.subTextclass to membership success message line 2
AddingclassName={styles.subText}for the second line in the membership redemption message correctly ties into the new SCSS styling.
38-38: Apply.subTextclass to general success message line 2
The same enhancement for non‑membership redemption messages ensures consistent styling across both variants.src/features/user/TreeMapper/Analytics/components/Export/index.module.scss (4)
3-6: Layout container styling is clean
The.containerblock’s flex layout and spacing are correct and maintain consistency with related components.
9-13: Date picker container adjustments look good
.datePickerContaineruses appropriate flex properties and spacing, matching design requirements.
16-17: Button container width is appropriate
Fixing the width on.buttonContaineraligns with the UI spec for the export panel actions.
21-23: Substitute fixed16pxwith$fontSixteen
Replacingfont-size: 16pxwith the$fontSixteenvariable standardizes typography across analytics components.src/features/donations/styles/DirectGift.module.scss (2)
39-39: Update link color to$primaryDarkColor
Switching the anchor color in.giftTo ato$primaryDarkColorenhances contrast and follows the theme’s color palette.
48-48: Use$fontLargefor the project selection label
Replacing the hardcoded20pxwith$fontLargeensures consistency with the global font size scale.src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.module.scss (2)
40-40: Replace hardcoded font-size with theme variable
Changingfont-size: 10pxto$fontXXSmallaligns this component with the centralized typography system, improving maintainability and consistency.
76-76: Use theme variable for header font-size
Swappingfont-size: 12pxfor$fontXSmallensures uniform typography across similar components.src/features/user/TreeMapper/Analytics/components/TreePlanted/Tooltip/index.module.scss (3)
13-14: Use theme variable for title font-size
Replacing the hardcodedfont-sizewith$fontXSmallbrings this tooltip into compliance with our global typography scale.
31-33: Standardize body title font-size
Updating.bodyTitleto use$fontXSmallremoves another hardcoded value and maintains consistency.
35-38: Use theme variable for value font-size
Switching the.valuefont-size to$fontXSmallensures all text in this tooltip follows the same design system rules.src/tenants/salesforce/Mangroves/styles/Landing.module.scss (1)
101-101: Replace hardcoded paragraph font-size with theme variable
Switching from18pxto$fontMediumcentralizes typography definitions and simplifies future updates.src/features/user/Profile/TpoProjects/TpoProjects.module.scss (1)
37-40: Allow full-width projects on extra-small phones
Addingmax-width: nonein thexsPhoneViewmedia query ensures project cards can expand to the viewport width on small devices, improving the mobile layout.src/features/user/Profile/ProfileCard/ProfileCard.module.scss (2)
73-73: Use theme variable for heading font-size
Replacing the fixed font-size with$fontXLargestandardizes heading scales across profile components.
87-87: Use theme variable for description text
Switching the paragraph font-size to$fontXSmallaligns descriptive text with our design system’s small size.src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss (2)
102-108: Standardized font sizing for explore items
Replacing the hardcoded value with$fontXSmallensures consistent typography aligned with the theme. Please verify that$fontXSmallis defined in your_fonts.scss.
145-152: Consistent popup typography
Using$fontXXSmallfor the layer info popup maintains the design system’s scale. This matches the PR’s theming strategy.src/features/user/TreeMapper/Analytics/components/SpeciesPlanted/Tooltip/index.module.scss (3)
12-15: Replaced hardcoded title size
Switching.titlefrom12pxto$fontXSmallaligns with the theme’s font scale.
32-34: Themed subtitle sizing
Updating.bodyTitleto use$fontXSmallkeeps font sizes consistent across tooltips.
36-39: Unified value font style
Using$fontXSmallfor.valueensures the data matches the design system’s scale.src/features/user/Settings/ImpersonateUser/ImpersonateUser.module.scss (1)
11-14: Use theme variable for font size
Replacing10pxwith$fontXXSmallstandardizes the alert text size to the theme’s scale.src/features/user/DonationReceipt/DonationReceipt.module.scss (7)
138-146: Themed error message font
Switching the.errorMessageto$fontXSmallmatches the design system’s typography for error states.
274-281: Consistent header sizing
Using$fontLargefor.contactManagementHeaderensures consistency with other major headings.
305-312: Standardized address error font
Applying$fontXSmallto the.errorMessagein the address section aligns with the theme’s error text sizing.
385-390: Unified list header typography
Updating.receiptListHeaderto$fontLargemaintains header hierarchy consistency.
421-428: Themed donation amount display
Using$fontXLargefor the card’s amount emphasizes the donation values per the theme guidance.
485-490: No-receipt state font alignment
Standardizing the.noReceiptFoundfont to$fontXSmallkeeps the UI unified.
519-524: Themed alert text
Replacing hardcoded sizes with$fontXSmallfor the login alert follows the project’s typography rules.src/tenants/planet/LeaderBoard/components/Stories.module.scss (4)
33-37: Elevated title font size
Switching the story title’s font from a fixed value to$fontXLargeensures it scales correctly across breakpoints.
45-51: Themed descriptor text
Using$fontXSmallfor the descriptor paragraph (p) aligns this component with the design system’s small-text usage.
68-71: Responsive title scaling
Adopting$fontXXLargeundermdTabletViewharmonizes the title’s large-screen font size with the theme.
73-76:✅ Verification successful
Verify custom variable
$fontSixteen
This mixin uses$fontSixteen, which deviates from the established naming pattern ($fontXSmall,$fontSmall, etc.). Please confirm that this variable is defined in_fonts.scssand consider renaming or replacing it with the standard theme variable to maintain consistency.
🏁 Script executed:
#!/bin/bash # Verify existence and definition of $fontSixteen in the theme rg '\$fontSixteen' -n src/theme/_fonts.scssLength of output: 82
🏁 Script executed:
#!/bin/bash # List all font size variables to verify naming conventions and identify alternatives rg '\$font' -n src/theme/_fonts.scssLength of output: 377
Confirmed
$fontSixteenIs Intentional and Defined
$fontSixteenis explicitly defined insrc/theme/_fonts.scss(line 5), matching the CSS variable--font-sixteen. There is no alternative “standard” font‑size variable for 16px in the theme, so using$fontSixteenhere is correct and consistent with the existing CSS vars.src/features/user/Settings/EditProfile/EditProfile.module.scss (4)
40-41: Replacement with theme variable is appropriate
Using$fontXSmallinstead of a hardcoded0.75remimproves consistency and maintainability.
137-141: Standardized large heading font
Switching to$fontLargealigns thish2design with the centralized theme scale.
143-147: Small label font sizing
The use of$fontSmallfor consent setting labels matches the theme’s small font tier.
165-170: Button text font size replaced
Applying$fontSixteenfor the primary buttons ensures uniform call‑to‑action typography.src/features/user/Profile/ContributionsMap/ContributionsMap.module.scss (7)
1-1: Importing theme variables
Validates the correct path for centralized SCSS variables import.
58-61: Applying extra small font
Replacing the hardcoded size with$fontXSmallfor.treesmaintains design consistency.
63-67: XXSmall font for location text
Using$fontXXSmallfor.countryAndTpofits the secondary text style.
85-90: Project name font sizing
Switching to$fontXXSmallensures legibility over images while keeping typography consistent.
105-109: Standardized small font for tree count
Applying$fontSmallfor.registeredTreesaligns with other small data points.
111-115: XXSmall label font
Using$fontXXSmallfor.registeredTreeLabelprovides a clear hierarchy.
117-120: XXSmall date font
Replacing the fixed pixel size with$fontXXSmallis consistent with theme guidelines.src/features/user/TreeMapper/Analytics/components/SpeciesPlanted/index.module.scss (3)
1-1: Import path update
Correct relative import to the shared theme file for SCSS variables.
3-6: Formatting consistency for italics
No styling change; braces and indentation now align with project SCSS conventions.
7-10: Title font size standardized
Replacing16pxwith$fontSixteenimproves maintainability and theme consistency.src/features/projects/styles/ProjectSnippet.module.scss (5)
14-20: Refactored edit button font sizing
Switching to$fontXSmallfor.projectEditBlockmatches other UI controls.
150-157: Badge font size alignment
Using$fontXSmallin.topProjectBadgekeeps badge text uniform across components.
205-211: Target amount font size standardized
Applying$fontXSmallfor.targetsupports a consistent numeric hierarchy.
213-220: Project TPO name font size
$fontXXSmallfits secondary text requirements and pairs well with the badge styling.
300-304: Hover icon font size consistency
Using$fontXXSmallfor.projectHoverIconensures uniform icon label sizing.src/features/user/Profile/ForestProgress/ForestProgress.module.scss (8)
49-55: Graph label font size
Replacing with$fontXSmallaligns chart labels with theme typography levels.
66-69: Community received font size
Applying$fontXXSmallfor less prominent data points maintains clarity.
84-90: Statistic value font size
Using$fontXSmallfor.stathighlights key numbers without breaking the theme scale.
98-102: Editable label font scaling
$fontXXSmallfor.editTargetLabelprovides a compact but readable label size.
131-139: Save button font size
Switching to$fontSixteenensures the primary action stands out consistently.
174-180: Icon label font size
Applying$fontXSmallin.targetInputIconMainContainer .labelaligns with other icon text.
188-196: Modal target label font
$fontSixteenfor.setTargetLabelmakes the dialog label prominent and consistent.
228-236: Set target button font size
Using$fontSixteenfor.setTargetButtonmatches other primary actions in this module.src/features/common/TreeCounter/TreeCounter.module.scss (2)
121-126: Standardize font sizes using theme variables
Great replacement of hardcoded values with$fontXXLargeand its responsive counterpart$fontLarge, enhancing consistency and maintainability.
142-147: Use consistent theme-based font sizes for tree counts
Switching to$fontXLargeand$fontXSmallin the responsive mixin aligns with the centralized typography scale.src/features/projectsV2/ProjectSnippet/styles/ProjectSnippet.module.scss (5)
127-129: Replace hardcoded badge font size with$fontXSmall
Adopting the theme token in.topProjectBadgeensures alignment with design specifications.
182-187: Standardize.targetfont-size to$fontXSmall
Consistent use of the theme variable replaces the magic number and unifies text sizing across components.
192-196: Consolidate.projectTpoNamefont size using$fontXXSmall
Using a predefined token instead of a hardcoded value enhances readability and theming.
223-228: Update.perUnitCostto use theme-based font settings
Switching to$primaryFontFamilyand$fontXSmallaligns this text block with the primary design system.
259-263: Normalize.projectHoverIconfont-size with$fontXXSmall
Replacing the removed size variable with a standardized token maintains consistency in hover-state labels.src/features/user/TreeMapper/Analytics/components/Counter/components/CounterItem/index.module.scss (4)
4-9: Introduce theme-based container styles
Applying$backgroundColor, consistent padding, and centering improves maintainability and aligns with global theming.
10-12: Hide divider on last child
The&:last-child::after { display: none; }effectively removes unwanted separators—nice detail.
28-37: Extend separator styling to large screens
The new media query ensures consistent divider behavior on tall viewports. Verify there are no overlapping rules that might override this.
40-43: Use theme variable for quantity font size
Switching to$fontXXLargestandardizes the numeric display with the rest of the theme.src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss (3)
37-44: Standardize label font size using$fontXXSmall
Replacing the deleted variable with a theme token keeps typography uniform across intervention labels.
138-141: Define consistent dropdown height for mobile
Addingheight: 40pxunderxsPhoneViewis clear—please verify it accommodates all button text without clipping.
167-170: Consistent list item font size adoption
Applying$fontXXSmallin the responsive view keeps list entries aligned with the design system.src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss (13)
20-23: Normalize.treeCountfont size to$fontSmall
Great substitution of the hardcoded12pxwith a theme token.
29-32: Normalize.interventionTitlefont size to$fontSmall
Using$fontSmallaligns section headers with global typography standards.
38-40: Apply$fontSmallto.hidclass
Replacing raw12pxwith a theme value improves consistency for hidden labels.
43-47: Standardize.plantingDetailsGroupfont size with$fontXSmall
Adapting to a theme token removes magic numbers and unifies small text groups.
50-53: Use$fontXSmallfor.otherInterventionGrouptext
Aligns auxiliary group text sizing to the design system.
69-72: Replace magic pixel with$fontXSmallin.label
Switching to the theme metric ensures label text scales appropriately.
73-78: Unify font size for.showWholeAreaand.data
Adopting$fontXSmallfor minor text elements enforces consistency across interactive labels.
90-93: Apply$fontXSmallto.speciesContainer
Consistent theme variable usage for section headings enhances UI uniformity.
110-115: Use$fontXSmallfor.treeMetrics p
Replacing14pxwith the token matches the global scale for metric details.
121-125: Standardize.sampleTreesContainerfont size
Updating to$fontXSmallremoves hardcoding and aligns with design tokens.
145-147: Replace raw size with$fontXSmallin.scientificNameContainer
Ensures scientific names and data metrics follow the theme’s small text standard.
168-170: Adopt$fontXSmallfor.treeMapperLabelSubContainertext
Switching to the theme token maintains consistent tooltip and label sizes.
181-184: Use$fontSmallfor.singlePlantLocationHeading
Replacing the hardcoded value with a theme variable improves maintainability.src/features/user/ManageProjects/StepForm.module.scss (3)
7-7: Consistent font sizing via theme variable
Replacing the hardcoded14pxwith$fontSmallensures this input adornment aligns with the global typography scale and improves maintainability.
11-12: Use centralized XXL font variable
Changing from40pxto$fontXXLargeand adding a fixedheight: 56pxmaintains visual emphasis while adhering to the theme’s sizing system.
775-775: Standardize button typography
Switching from1remto$fontSixteenfor the skip/save buttons leverages the theme’s defined font size and guarantees consistency across components.src/theme/global.scss (6)
43-43: Apply theme font size to body
Moving from a hardcoded value to$fontSmallfor thebodytag centralizes typography control and prevents scattershot overrides.
359-359: Use theme variable for profile page title
Replacing the explicit size with$fontXXLargestandardizes heading sizes and supports future global adjustments.
365-365: Standardize profile subtitle font size
Switching to$fontSixteenensures subtitles follow the theme’s medium text sizing.
662-662: Enable Firefox number-input style reset
Adding-moz-appearance: textfieldcomplements the existing WebKit rules and fully removes number spinners across browsers.
715-715: Override MUI body1 with theme font
Using$fontSmallfor.MuiTypography-body1unifies MUI’s default text with the custom design system.
751-751: Consistent sizing for access‑denied heading
Applying$fontXLargeto the<h2>in.accessDeniedContaineraligns error pages with the global style guide.src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/SiteDropdown.module.scss (4)
30-30: Update label to theme variable
Switching.sitesLabelfrom a deprecated$fontXXXSmallNewto$fontXXSmallensures consistency with the consolidated font-size palette.
124-125: Fix dropdown button height for mobile
Settingheight: 40pxin thexsPhoneViewmedia query stabilizes the button’s tap area without hardcoding the desktop dimensions.
146-148: Align dropdown panel and manage stacking context
Changing horizontal alignment fromrighttoleft: 0and addingz-index: 50correctly positions the options menu under the trigger and ensures it appears above other elements.
153-153: Use standardized font size for list items
Replacing the old custom size with$fontXXSmallin.listItemmaintains legibility and matches the revised scale.src/features/user/Profile/InfoAndCTA/InfoAndCta.module.scss (19)
1-1: Import theme file for variable access
Adding@import '../../../../theme/theme';ensures all color and font-size variables are available in this stylesheet.
3-7: Convert container to flex with theme-based layout
Defining.infoAndCtaContaineras a column flexbox withgapandpaddingdriven by variables or constants improves structure and responsiveness.
10-12: Ensure full‑width containers
Applyingwidth: 100%to both.publicProfileActionContainerand.SDGCardListContainerleverages variable-driven layouts for consistent spacing.
15-18: Standardize profile action layout
Switching.publicProfileActionContainerto a column flex layout with a$gapvalue aligns cards vertically on all breakpoints.
22-29: Use theme sizes for SDG card container
Defining.singleSDGCardContaineras a centered flex column and replacing hardcoded paddings and gaps with variables enhances maintainability.
31-35: Scale SDG card image responsively
Applying full‑width & height with border-radius via variables ensures consistent image handling across contexts.
39-45: Consolidate card title sizes under theme
The base size$fontXXSmalland responsive overrides to$fontSixteen/$fontMediumadhere to the theme’s scale without hardcoded px values.
52-67: Optimize icon container with theme breakpoints
Using flex layout and applying max‑height/width adjustments in the small-screen media query keeps icons legible while leveraging theme-friendly values.
71-77: Uniform header typography
Setting.headerTitleto$fontLargewith weight600in.publicProfileActionsHeaderfollows the standardized heading hierarchy.
81-85: Center action cards container
Adding flex display, gap, and width adjustments under$gapvariables gives the action cards consistent spacing and centering.
88-96: Leverage theme for profile card imagery
Imposingflex: 1and consistent hover transformations on the image container standardizes interactivity and spacing.
100-102: Cap text container width
Usingmax-width: 250pxdriven by design tokens ensures text blocks are readable and aligned.
105-112: Standardize profile card title
Applying$fontMediumand using responsive breakpoints with$fontSixteenfor.singleProfileActionCardTitlemaintains consistency across viewports.
115-121: Apply theme font for card text
Switching to$fontSmalland responsive$fontXSmallon.singleProfileActionCardTextaligns with the refined typographic scale.
124-127: Responsive stack for card container
Changing.publicProfileActionCardsContainerto a column layout under 700px using theme‑based gap values ensures usability on small screens.
129-137: Center header on narrow viewports
Adjusting.publicProfileActionsHeaderto column alignment with centered text enhances readability on mobile devices.
139-141: Fluid text container on mobile
Allowing.profileCardTextContainerto expand to100%ensures no overflow issues on small screens.
143-148: Maintain title readability on narrow screens
Retaining$fontMediumsize and centering.singleProfileActionCardTitleunder the small‑viewport media query preserves hierarchy and consistency.
150-154: Adjust card text for mobile legibility
Switching to$fontSixteenand centering text in.singleProfileActionCardTextimproves readability on devices ≤700px.src/features/user/Account/AccountHistory.module.scss (4)
168-168: Set status badge font size
Applying$fontXSmallto the.statuselement ensures the badge text is compact yet legible, matching other small labels.
236-236: Standardize filter header typography
Replacing hardcoded size with$fontMediumin.filterContainer > .headeraligns header text with the theme.
480-480: Unify donation option text size
Using$fontSmallfor each.optionunder.donationOptionsprovides a consistent button-style label.
690-690: Apply theme base font to records
Switching record container text to$fontSmallensures uniformity with other list items and improves readability.src/theme/themeStyles.ts (7)
3-3: Import alias update looks good.The import alias has been updated from
themetothemeProperties, which is a more descriptive name that better reflects its purpose.
14-16: Theme property references updated correctly.The palette's primary color properties now properly reference the centralized theme properties, which improves consistency.
19-20: Background color references updated properly.The background colors now reference the theme properties, aligning with the PR objective of centralizing style definitions.
23-23: Error and text color references updated appropriately.The error and text color references now properly use the theme properties, which ensures consistency across the application.
Also applies to: 26-26
44-44: Typography font sizes standardized with theme variables.All typography font sizes have been successfully updated to use theme property references instead of hardcoded values, which improves maintainability and consistency.
Also applies to: 47-48, 51-51, 59-59
80-80: Font weight and warning color references updated correctly.The button components now properly use theme properties for font weight and warning color, contributing to the standardization effort.
Also applies to: 83-83
91-91: Component-specific font sizes updated with theme variables.All component-specific font sizes (MuiTab, MuiAutocomplete, MuiFormControlLabel) have been successfully updated to use theme property references instead of hardcoded values.
Also applies to: 122-122, 141-141
src/features/user/Profile/ProfileCard/ShareModal/ShareModal.module.scss (8)
4-13: Layout improvements with flexbox properties.The modal popup layout has been improved with flexbox properties, enhancing its structure and responsiveness. The properties are properly aligned and well-organized.
14-30: Copy button styling updated with consistent properties.The copy button styling has been refined with proper padding, border-radius, and other properties. The font size now uses the
$fontSixteenvariable instead of a hardcoded value, aligning with the PR objective.
34-49: Social media icon container layout improved.The social media icon container now uses flexbox for better layout organization. The gap property provides consistent spacing between elements.
40-44: Heading styles standardized with theme variable.The heading now uses the
$fontSixteenvariable instead of a hardcoded font size, maintaining consistency with the theme.
51-58: Social media icon dimensions properly defined.The social media icon dimensions are now explicitly set with appropriate width and height values, ensuring consistent sizing.
62-68: Share link container layout enhanced.The share link container now uses flexbox for better organization, with appropriate gap and alignment properties.
71-87: Tablet view responsive adjustments properly implemented.The tablet view now has appropriate responsive adjustments, including proper sizing for the modal popup and social media icons. The layout changes from column to row for the share link container, improving the tablet user experience.
90-109: Phone view responsiveness improved with theme font variable.The phone view now has better responsive styling, including properly sized icons and buttons. The button font size uses the
$fontSmalltheme variable instead of a hardcoded value, in line with the PR objective.
| gap: 2vw; | ||
| gap: 5px; | ||
| right: 10px; | ||
| z-index: 2px; |
There was a problem hiding this comment.
Fix invalid z-index unit
z-index expects an integer value, not a length. Update as follows:
- z-index: 2px;
+ z-index: 2;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| z-index: 2px; | |
| z-index: 2; |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/theme/_fonts.scss (1)
12-27: Introduce dedicated SF font size variables for consistencyThis block cleanly centralizes Salesforce‐specific font sizes, grouping base and display sizes into theme variables and removing the older CSS custom property fallbacks. It promotes maintainability by defining all SF sizes in one place.
However, the inline comments for
$sfFontDisplay4(// Display text level 5) and$sfFontDisplay5(// Display text level 6) don’t align with the variable numbering (Display4 vs. “level 5”, Display5 vs. “level 6”). Please correct these comments to match the variable names (e.g., “Display text level 4” and “Display text level 5”) to avoid confusion.src/tenants/salesforce/Home/styles/ClimateAction.module.scss (1)
28-28: Inconsistent variable usage in responsive breakpointYou’ve replaced the base
h3font size with$sfFontLarge(24px) — good. But inside the@include lgLaptopViewblock, the font size is still set to the old$fontXXLarge. For consistency with Salesforce‐specific tokens, consider using one of the new$sfFont…variables (e.g.$sfFontXLor$sfFontXXL) that maps to the intended px value.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (36)
src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss(1 hunks)src/tenants/salesforce/Home/styles/ClimateAction.module.scss(4 hunks)src/tenants/salesforce/Home/styles/ContentSection.module.scss(5 hunks)src/tenants/salesforce/Home/styles/GrowingImpact.module.scss(4 hunks)src/tenants/salesforce/Home/styles/Landing.module.scss(4 hunks)src/tenants/salesforce/Home/styles/LeaderBoardSection.module.scss(2 hunks)src/tenants/salesforce/Home/styles/SeaOfTrees.module.scss(5 hunks)src/tenants/salesforce/Home/styles/Social.module.scss(2 hunks)src/tenants/salesforce/Home/styles/Timeline.module.scss(3 hunks)src/tenants/salesforce/Mangroves/styles/AdditionalContent.module.scss(2 hunks)src/tenants/salesforce/Mangroves/styles/BlueCarbon.module.scss(4 hunks)src/tenants/salesforce/Mangroves/styles/ContentSection.module.scss(3 hunks)src/tenants/salesforce/Mangroves/styles/Landing.module.scss(3 hunks)src/tenants/salesforce/Mangroves/styles/ProjectGrid.module.scss(3 hunks)src/tenants/salesforce/OceanforceCampaign/styles/AdditionalContent.module.scss(2 hunks)src/tenants/salesforce/OceanforceCampaign/styles/ContentSection.module.scss(4 hunks)src/tenants/salesforce/OceanforceCampaign/styles/Landing.module.scss(3 hunks)src/tenants/salesforce/OceanforceCampaign/styles/LeaderBoardSection.module.scss(2 hunks)src/tenants/salesforce/OceanforceCampaign/styles/ParticipationSection.module.scss(6 hunks)src/tenants/salesforce/TreeCounter/TreeCounter.module.scss(2 hunks)src/tenants/salesforce/VTOCampaign2023/styles/AdditionalInfo.module.scss(2 hunks)src/tenants/salesforce/VTOCampaign2023/styles/ContentSection.module.scss(3 hunks)src/tenants/salesforce/VTOCampaign2023/styles/Landing.module.scss(3 hunks)src/tenants/salesforce/VTOCampaign2023/styles/LeaderBoardSection.module.scss(2 hunks)src/tenants/salesforce/VTOCampaign2023/styles/ProjectGrid.module.scss(3 hunks)src/tenants/salesforce/VTOCampaign2024/styles/AdditionalInfo.module.scss(2 hunks)src/tenants/salesforce/VTOCampaign2024/styles/ContentSection.module.scss(3 hunks)src/tenants/salesforce/VTOCampaign2024/styles/Landing.module.scss(3 hunks)src/tenants/salesforce/VTOCampaign2024/styles/LeaderBoardSection.module.scss(2 hunks)src/tenants/salesforce/VTOCampaign2024/styles/ProjectGrid.module.scss(3 hunks)src/tenants/salesforce/VTOCampaign2025/styles/AdditionalInfo.module.scss(2 hunks)src/tenants/salesforce/VTOCampaign2025/styles/ContentSection.module.scss(3 hunks)src/tenants/salesforce/VTOCampaign2025/styles/Landing.module.scss(3 hunks)src/tenants/salesforce/VTOCampaign2025/styles/LeaderBoardSection.module.scss(2 hunks)src/tenants/salesforce/VTOCampaign2025/styles/ProjectGrid.module.scss(3 hunks)src/theme/_fonts.scss(1 hunks)
✅ Files skipped from review due to trivial changes (27)
- src/tenants/salesforce/VTOCampaign2025/styles/AdditionalInfo.module.scss
- src/tenants/salesforce/VTOCampaign2024/styles/AdditionalInfo.module.scss
- src/tenants/salesforce/Home/styles/Social.module.scss
- src/tenants/salesforce/VTOCampaign2023/styles/LeaderBoardSection.module.scss
- src/tenants/salesforce/VTOCampaign2024/styles/Landing.module.scss
- src/tenants/salesforce/VTOCampaign2023/styles/ContentSection.module.scss
- src/tenants/salesforce/VTOCampaign2024/styles/ContentSection.module.scss
- src/tenants/salesforce/VTOCampaign2024/styles/LeaderBoardSection.module.scss
- src/tenants/salesforce/Home/styles/LeaderBoardSection.module.scss
- src/tenants/salesforce/VTOCampaign2023/styles/AdditionalInfo.module.scss
- src/tenants/salesforce/Home/styles/SeaOfTrees.module.scss
- src/tenants/salesforce/VTOCampaign2025/styles/LeaderBoardSection.module.scss
- src/tenants/salesforce/VTOCampaign2024/styles/ProjectGrid.module.scss
- src/tenants/salesforce/OceanforceCampaign/styles/ParticipationSection.module.scss
- src/tenants/salesforce/VTOCampaign2023/styles/Landing.module.scss
- src/tenants/salesforce/VTOCampaign2025/styles/Landing.module.scss
- src/tenants/salesforce/VTOCampaign2025/styles/ContentSection.module.scss
- src/tenants/salesforce/VTOCampaign2025/styles/ProjectGrid.module.scss
- src/tenants/salesforce/Home/styles/Timeline.module.scss
- src/tenants/salesforce/Mangroves/styles/BlueCarbon.module.scss
- src/tenants/salesforce/Mangroves/styles/ProjectGrid.module.scss
- src/tenants/salesforce/Home/styles/GrowingImpact.module.scss
- src/tenants/salesforce/Mangroves/styles/AdditionalContent.module.scss
- src/tenants/salesforce/Home/styles/ContentSection.module.scss
- src/tenants/salesforce/OceanforceCampaign/styles/AdditionalContent.module.scss
- src/tenants/salesforce/OceanforceCampaign/styles/LeaderBoardSection.module.scss
- src/tenants/salesforce/VTOCampaign2023/styles/ProjectGrid.module.scss
🚧 Files skipped from review as they are similar to previous changes (6)
- src/tenants/salesforce/Mangroves/styles/Landing.module.scss
- src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss
- src/tenants/salesforce/OceanforceCampaign/styles/ContentSection.module.scss
- src/tenants/salesforce/Home/styles/Landing.module.scss
- src/tenants/salesforce/OceanforceCampaign/styles/Landing.module.scss
- src/tenants/salesforce/Mangroves/styles/ContentSection.module.scss
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (7)
src/tenants/salesforce/Home/styles/ClimateAction.module.scss (3)
52-52: Approve: Base paragraph small element mappingReplacing the hardcoded
15pxonp smallwith$sfFontBase(15px) correctly aligns with the new theme variable.
70-70: Approve: Uppercase label font sizeMapping the span’s
11pxto$sfFontXSis accurate and standardizes the styling.
82-82: Approve: Subheading font sizeUpdating
h4from20pxto$sfFontMedium(20px) correctly applies the theme variable.src/tenants/salesforce/TreeCounter/TreeCounter.module.scss (4)
13-13: Approve: Footnote font-size standardizationReplacing the hardcoded
13pxwith$sfFontSmallensures consistency with the centralized SF font tokens.
30-30: Approve: Counter base font-size updateSwitching
70pxto$sfFontDisplay2(70px) correctly leverages the new display‐level token.
33-33: Approve: Tablet breakpoint font-sizeUsing
$sfFontDisplay4(100px) inside@include mdTabletViewaligns with the intended responsive size.
37-37: Approve: Desktop breakpoint font-sizeApplying
$sfFontDisplay5(170px) within@include lgLaptopViewproperly replaces the hardcoded170px.
| $fontXXXSmallNew: var(--font-xxx-extra-small-new); | ||
| $fontXXXXSmallNew: var(--font-xxxx-extra-small-new); | ||
|
|
||
| // SF font sizes |
There was a problem hiding this comment.
If the naming convention $sfFont... reflects a specific design system (e.g., "SF" for Salesforce fonts), consider documenting this explicitly in the comments for future developers.
There was a problem hiding this comment.
The comment I've left indicates this sufficiently, and it is an isolated case, for now.
2 participants
Uh oh!
There was an error while loading. Please reload this page.