Chore(frontend)/upgrade tailwind #78
Conversation
WalkthroughThe changes update dependencies and adjust the Tailwind CSS configuration while reordering CSS class names throughout numerous frontend components. The dependency updates include adding Changes
Suggested reviewers
Poem
✨ Finishing Touches
🪧 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 (
|
✅ Deploy Preview for kleros-website-v2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/styles/globals.css (1)
3-46: Introduction of Custom@themeBlock for Global Theming
A comprehensive theming block has been introduced using@themeto define various CSS custom properties (e.g., text sizes, line heights, and color variables). Note the following:
- The property name
--text-*(line 4) is unconventional since*is not typically allowed in custom property names. If this is intentional (perhaps used by a custom PostCSS plugin), please verify that your tooling supports it; otherwise, consider renaming it.- A number of static analysis warnings (e.g., unexpected characters and missing commas) are reported for these lines. These may be false positives if the syntax is valid within your custom configuration.
Consider documenting the rationale behind using the
@themedirective and any custom naming conventions so that future maintainers (and tools) understand the extended syntax.🧰 Tools
🪛 Biome (1.9.4)
[error] 4-4: expected
,but instead found*Remove *
(parse)
[error] 4-4: expected
,but instead found;Remove ;
(parse)
[error] 5-5: expected
,but instead found--text-smRemove --text-sm
(parse)
[error] 5-5: Unexpected value or character.
Expected one of:
(parse)
[error] 5-5: expected
,but instead foundremRemove rem
(parse)
[error] 5-5: expected
,but instead found;Remove ;
(parse)
[error] 6-6: expected
,but instead found--text-sm--line-heightRemove --text-sm--line-height
(parse)
[error] 6-6: Unexpected value or character.
Expected one of:
(parse)
[error] 6-6: expected
,but instead foundremRemove rem
(parse)
[error] 6-6: expected
,but instead found;Remove ;
(parse)
[error] 7-7: expected
,but instead found--text-baseRemove --text-base
(parse)
[error] 7-7: Unexpected value or character.
Expected one of:
(parse)
[error] 7-7: expected
,but instead foundremRemove rem
(parse)
[error] 7-7: expected
,but instead found;Remove ;
(parse)
[error] 8-8: expected
,but instead found--text-base--line-heightRemove --text-base--line-height
(parse)
[error] 8-8: Unexpected value or character.
Expected one of:
(parse)
[error] 8-8: expected
,but instead foundremRemove rem
(parse)
[error] 8-8: expected
,but instead found;Remove ;
(parse)
[error] 9-9: expected
,but instead found--text-lgRemove --text-lg
(parse)
[error] 9-9: Unexpected value or character.
Expected one of:
(parse)
[error] 9-9: expected
,but instead foundremRemove rem
(parse)
[error] 9-9: expected
,but instead found;Remove ;
(parse)
[error] 10-10: expected
,but instead found--text-lg--line-heightRemove --text-lg--line-height
(parse)
[error] 10-10: Unexpected value or character.
Expected one of:
(parse)
[error] 10-10: expected
,but instead foundremRemove rem
(parse)
[error] 10-10: expected
,but instead found;Remove ;
(parse)
[error] 11-11: expected
,but instead found--text-xlRemove --text-xl
(parse)
[error] 11-11: Unexpected value or character.
Expected one of:
(parse)
[error] 11-11: expected
,but instead foundremRemove rem
(parse)
[error] 11-11: expected
,but instead found;Remove ;
(parse)
[error] 12-12: expected
,but instead found--text-xl--line-heightRemove --text-xl--line-height
(parse)
[error] 12-12: Unexpected value or character.
Expected one of:
(parse)
[error] 12-12: expected
,but instead foundremRemove rem
(parse)
[error] 12-12: expected
,but instead found;Remove ;
(parse)
[error] 13-13: expected
,but instead found--text-2xlRemove --text-2xl
(parse)
[error] 13-13: Unexpected value or character.
Expected one of:
(parse)
[error] 13-13: expected
,but instead foundremRemove rem
(parse)
[error] 13-13: expected
,but instead found;Remove ;
(parse)
[error] 14-14: expected
,but instead found--text-2xl--line-heightRemove --text-2xl--line-height
(parse)
[error] 14-14: Unexpected value or character.
Expected one of:
(parse)
[error] 14-14: expected
,but instead foundremRemove rem
(parse)
[error] 14-14: expected
,but instead found;Remove ;
(parse)
[error] 15-15: expected
,but instead found--text-3xlRemove --text-3xl
(parse)
[error] 15-15: Unexpected value or character.
Expected one of:
(parse)
[error] 15-15: expected
,but instead foundremRemove rem
(parse)
[error] 15-15: expected
,but instead found;Remove ;
(parse)
[error] 16-16: expected
,but instead found--text-3xl--line-heightRemove --text-3xl--line-height
(parse)
[error] 16-16: Unexpected value or character.
Expected one of:
(parse)
[error] 16-16: expected
,but instead foundremRemove rem
(parse)
[error] 16-16: expected
,but instead found;Remove ;
(parse)
[error] 17-17: expected
,but instead found--text-4xlRemove --text-4xl
(parse)
[error] 17-17: Unexpected value or character.
Expected one of:
(parse)
[error] 17-17: expected
,but instead foundremRemove rem
(parse)
[error] 17-17: expected
,but instead found;Remove ;
(parse)
[error] 18-18: expected
,but instead found--text-4xl--line-heightRemove --text-4xl--line-height
(parse)
[error] 18-18: Unexpected value or character.
Expected one of:
(parse)
[error] 18-18: expected
,but instead foundremRemove rem
(parse)
[error] 18-18: expected
,but instead found;Remove ;
(parse)
[error] 20-20: expected
,but instead found--color-backgroundRemove --color-background
(parse)
[error] 20-20: expected
,but instead found(Remove (
(parse)
[error] 20-20: expected
,but instead found--backgroundRemove --background
(parse)
[error] 20-20: expected
,but instead found)Remove )
(parse)
[error] 21-21: expected
,but instead found--color-foregroundRemove --color-foreground
(parse)
[error] 21-21: expected
,but instead found(Remove (
(parse)
[error] 21-21: expected
,but instead found--foregroundRemove --foreground
(parse)
[error] 21-21: expected
,but instead found)Remove )
(parse)
[error] 22-22: expected
,but instead found--color-primary-textRemove --color-primary-text
(parse)
[error] 22-22: Unexpected value or character.
Expected one of:
(parse)
[error] 22-22: expected
,but instead found;Remove ;
(parse)
[error] 23-23: expected
,but instead found--color-secondary-textRemove --color-secondary-text
(parse)
[error] 23-23: Unexpected value or character.
Expected one of:
(parse)
[error] 23-23: expected
,but instead found;Remove ;
(parse)
[error] 24-24: expected
,but instead found--color-strokeRemove --color-stroke
(parse)
[error] 24-24: Unexpected value or character.
Expected one of:
(parse)
[error] 24-24: Expected an identifier but instead found '42498'.
Expected an identifier here.
(parse)
[error] 24-24: expected
,but instead foundfRemove f
(parse)
[error] 24-24: expected
,but instead found;Remove ;
(parse)
[error] 25-25: expected
,but instead found--color-primary-purpleRemove --color-primary-purple
(parse)
[error] 25-25: Unexpected value or character.
Expected one of:
(parse)
[error] 25-25: Expected an identifier but instead found '9747'.
Expected an identifier here.
(parse)
[error] 25-25: expected
,but instead foundffRemove ff
(parse)
[error] 25-25: expected
,but instead found;Remove ;
(parse)
[error] 26-26: expected
,but instead found--color-secondary-purpleRemove --color-secondary-purple
(parse)
[error] 26-26: Unexpected value or character.
Expected one of:
(parse)
[error] 26-26: expected
,but instead found;Remove ;
(parse)
[error] 27-27: expected
,but instead found--color-dark-purpleRemove --color-dark-purple
(parse)
[error] 27-27: Unexpected value or character.
Expected one of:
(parse)
[error] 27-27: Expected an identifier but instead found '230079'.
Expected an identifier here.
(parse)
[error] 28-28: expected
,but instead found--color-primary-blueRemove --color-primary-blue
(parse)
[error] 28-28: Unexpected value or character.
Expected one of:
(parse)
[error] 28-28: Expected an identifier but instead found '27'.
Expected an identifier here.
(parse)
[error] 28-28: expected
,but instead foundcdfeRemove cdfe
(parse)
[error] 28-28: expected
,but instead found;Remove ;
(parse)
[error] 29-29: expected
,but instead found--color-secondary-blueRemove --color-secondary-blue
(parse)
[error] 29-29: Unexpected value or character.
Expected one of:
(parse)
[error] 29-29: Expected an identifier but instead found '7'.
Expected an identifier here.
(parse)
[error] 29-29: expected
,but instead foundce2ffRemove ce2ff
(parse)
[error] 29-29: expected
,but instead found;Remove ;
(parse)
[error] 30-30: expected
,but instead found--color-background-1Remove --color-background-1
(parse)
[error] 30-30: Unexpected value or character.
Expected one of:
(parse)
[error] 30-30: Expected an identifier but instead found '1'.
Expected an identifier here.
(parse)
[error] 30-30: expected
,but instead foundb003fRemove b003f
(parse)
[error] 30-30: expected
,but instead found;Remove ;
(parse)
[error] 31-31: expected
,but instead found--color-background-2Remove --color-background-2
(parse)
[error] 31-31: Unexpected value or character.
Expected one of:
(parse)
[error] 31-31: Expected an identifier but instead found '220050'.
Expected an identifier here.
(parse)
[error] 32-32: expected
,but instead found--color-background-darkRemove --color-background-dark
(parse)
[error] 32-32: Unexpected value or character.
Expected one of:
(parse)
[error] 32-32: Expected an identifier but instead found '13002'.
Expected an identifier here.
(parse)
[error] 32-32: expected
,but instead founddRemove d
(parse)
[error] 32-32: expected
,but instead found;Remove ;
(parse)
[error] 33-33: expected
,but instead found--color-background-translucentRemove --color-background-translucent
(parse)
[error] 33-33: expected
,but instead found(Remove (
(parse)
[error] 33-33: Expected a relative selector but instead found '0'.
Expected a relative selector here.
(parse)
[error] 33-33: Expected a relative selector but instead found '80'.
Expected a relative selector here.
(parse)
[error] 33-33: Expected a relative selector but instead found '0.24);'.
Expected a relative selector here.
(parse)
[error] 34-34: expected
,but instead found--color-successRemove --color-success
(parse)
[error] 34-34: Unexpected value or character.
Expected one of:
(parse)
[error] 34-34: Expected an identifier but instead found '00'.
Expected an identifier here.
(parse)
[error] 34-34: expected
,but instead foundf068Remove f068
(parse)
[error] 34-34: expected
,but instead found;Remove ;
(parse)
[error] 36-36: expected
,but instead found--animate-h-scrollRemove --animate-h-scroll
(parse)
[error] 36-36: Expected a compound selector but instead found '10'.
Expected a compound selector here.
(parse)
[error] 36-36: expected
,but instead foundsRemove s
(parse)
[error] 36-36: expected
,but instead found;Remove ;
(parse)
[error] 38-38: expected
,but instead foundkeyframesRemove keyframes
(parse)
[error] 39-39: Expected a declaration, or an at rule but instead found '0% {'.
Expected a declaration, or an at rule here.
(parse)
[error] 42-42: Expected a declaration, or an at rule but instead found '100% {'.
Expected a declaration, or an at rule here.
(parse)
[error] 45-46: Expected a qualified rule, or an at rule but instead found '}
}'.Expected a qualified rule, or an at rule here.
(parse)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (89)
frontend/package.json(2 hunks)frontend/postcss.config.mjs(1 hunks)frontend/src/app/for-lawyers/components/Card.tsx(1 hunks)frontend/src/app/for-lawyers/components/Flowchart.tsx(2 hunks)frontend/src/app/for-lawyers/components/Hero.tsx(2 hunks)frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx(1 hunks)frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx(2 hunks)frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx(1 hunks)frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx(1 hunks)frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx(2 hunks)frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx(1 hunks)frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/HighlightedText.tsx(2 hunks)frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx(2 hunks)frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx(5 hunks)frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx(1 hunks)frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx(1 hunks)frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx(1 hunks)frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx(2 hunks)frontend/src/app/for-lawyers/components/KlerosParticipateSection/index.tsx(1 hunks)frontend/src/app/home/components/Hero.tsx(3 hunks)frontend/src/app/home/components/HowKlerosWorks.tsx(1 hunks)frontend/src/app/home/components/LearnPosts.tsx(1 hunks)frontend/src/app/home/components/TokenStats.tsx(1 hunks)frontend/src/app/home/components/TrustedBy.tsx(4 hunks)frontend/src/app/home/components/UseCases.tsx(1 hunks)frontend/src/app/layout.tsx(1 hunks)frontend/src/components/BrandAssets/Hero.tsx(2 hunks)frontend/src/components/BrandAssets/KlerosBadgesSection.tsx(1 hunks)frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx(1 hunks)frontend/src/components/BrandAssets/KlerosFontsSection.tsx(1 hunks)frontend/src/components/BrandAssets/KlerosLogoSection.tsx(1 hunks)frontend/src/components/BrandAssets/LogosPackageSection.tsx(1 hunks)frontend/src/components/BrandAssets/PnkTokenSection.tsx(1 hunks)frontend/src/components/BrandAssets/StyledImagesSection.tsx(1 hunks)frontend/src/components/Community/CommunitiesSection.tsx(1 hunks)frontend/src/components/Community/CommunityCard.tsx(1 hunks)frontend/src/components/Community/hero.tsx(2 hunks)frontend/src/components/Cooperative/MemberSection/index.tsx(1 hunks)frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx(2 hunks)frontend/src/components/Cooperative/ReportSection/ReportCard.tsx(2 hunks)frontend/src/components/Cooperative/hero.tsx(3 hunks)frontend/src/components/CtaBox.tsx(1 hunks)frontend/src/components/CtaCard.tsx(3 hunks)frontend/src/components/Divider.tsx(1 hunks)frontend/src/components/DownloadButton.tsx(1 hunks)frontend/src/components/Dropdown/DropdownItemButton.tsx(1 hunks)frontend/src/components/Dropdown/index.tsx(1 hunks)frontend/src/components/Earn/Hero.tsx(3 hunks)frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx(2 hunks)frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx(2 hunks)frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx(1 hunks)frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx(1 hunks)frontend/src/components/ExternalLink.tsx(1 hunks)frontend/src/components/Footer.tsx(2 hunks)frontend/src/components/ForBuilders/Hero.tsx(2 hunks)frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx(1 hunks)frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx(1 hunks)frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx(1 hunks)frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx(2 hunks)frontend/src/components/ForBuilders/UseCasesSection/index.tsx(1 hunks)frontend/src/components/IntegrateSection/index.tsx(2 hunks)frontend/src/components/LearnMore.tsx(1 hunks)frontend/src/components/Navbar/AppsDropdownContent/Card.tsx(3 hunks)frontend/src/components/Navbar/AppsDropdownContent/index.tsx(2 hunks)frontend/src/components/Navbar/MobileMenu.tsx(1 hunks)frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx(2 hunks)frontend/src/components/Navbar/index.tsx(2 hunks)frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx(1 hunks)frontend/src/components/PNKToken/BuySection/index.tsx(1 hunks)frontend/src/components/PNKToken/Explorers.tsx(1 hunks)frontend/src/components/PNKToken/Hero.tsx(2 hunks)frontend/src/components/PNKToken/TokenNeedSection/index.tsx(1 hunks)frontend/src/components/PNKToken/TokenomicsSection/Stat.tsx(1 hunks)frontend/src/components/PNKToken/TokenomicsSection/TokenStatDisplay.tsx(1 hunks)frontend/src/components/PNKToken/TokenomicsSection/index.tsx(1 hunks)frontend/src/components/Pagination.tsx(1 hunks)frontend/src/components/ResearchDevelopment/Hero.tsx(3 hunks)frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx(2 hunks)frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx(1 hunks)frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/index.tsx(1 hunks)frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx(1 hunks)frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx(1 hunks)frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/index.tsx(1 hunks)frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx(1 hunks)frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/index.tsx(1 hunks)frontend/src/components/Tab.tsx(1 hunks)frontend/src/components/Tag.tsx(1 hunks)frontend/src/styles/globals.css(1 hunks)frontend/tailwind.config.ts(0 hunks)
💤 Files with no reviewable changes (1)
- frontend/tailwind.config.ts
✅ Files skipped from review due to trivial changes (74)
- frontend/src/app/home/components/TokenStats.tsx
- frontend/src/app/home/components/UseCases.tsx
- frontend/src/components/Divider.tsx
- frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx
- frontend/src/components/BrandAssets/PnkTokenSection.tsx
- frontend/src/components/PNKToken/Explorers.tsx
- frontend/src/components/DownloadButton.tsx
- frontend/src/components/BrandAssets/LogosPackageSection.tsx
- frontend/src/components/ForBuilders/UseCasesSection/index.tsx
- frontend/src/components/Pagination.tsx
- frontend/src/components/Dropdown/DropdownItemButton.tsx
- frontend/src/components/ExternalLink.tsx
- frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx
- frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx
- frontend/src/components/Dropdown/index.tsx
- frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx
- frontend/src/components/PNKToken/TokenomicsSection/TokenStatDisplay.tsx
- frontend/src/components/Navbar/MobileMenu.tsx
- frontend/src/app/for-lawyers/components/Hero.tsx
- frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx
- frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx
- frontend/src/components/Community/hero.tsx
- frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
- frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx
- frontend/src/components/Community/CommunitiesSection.tsx
- frontend/src/components/Footer.tsx
- frontend/src/app/home/components/HowKlerosWorks.tsx
- frontend/src/components/Community/CommunityCard.tsx
- frontend/src/components/IntegrateSection/index.tsx
- frontend/src/app/home/components/LearnPosts.tsx
- frontend/src/components/BrandAssets/KlerosFontsSection.tsx
- frontend/src/components/Earn/Hero.tsx
- frontend/src/components/PNKToken/TokenomicsSection/index.tsx
- frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
- frontend/src/app/for-lawyers/components/KlerosParticipateSection/index.tsx
- frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/index.tsx
- frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx
- frontend/src/components/ResearchDevelopment/Hero.tsx
- frontend/src/components/Navbar/AppsDropdownContent/index.tsx
- frontend/src/components/BrandAssets/KlerosLogoSection.tsx
- frontend/src/components/Tag.tsx
- frontend/src/components/LearnMore.tsx
- frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
- frontend/src/components/Tab.tsx
- frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
- frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx
- frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx
- frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx
- frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/HighlightedText.tsx
- frontend/src/components/PNKToken/TokenomicsSection/Stat.tsx
- frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
- frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
- frontend/src/components/PNKToken/BuySection/index.tsx
- frontend/src/components/BrandAssets/KlerosBadgesSection.tsx
- frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx
- frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx
- frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx
- frontend/src/components/PNKToken/TokenNeedSection/index.tsx
- frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx
- frontend/src/app/for-lawyers/components/Card.tsx
- frontend/src/components/Cooperative/MemberSection/index.tsx
- frontend/src/components/CtaBox.tsx
- frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/index.tsx
- frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx
- frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx
- frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx
- frontend/src/components/CtaCard.tsx
- frontend/src/components/BrandAssets/StyledImagesSection.tsx
- frontend/src/app/for-lawyers/components/Flowchart.tsx
- frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx
- frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx
- frontend/src/components/Navbar/index.tsx
- frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
- frontend/src/app/home/components/TrustedBy.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
frontend/src/styles/globals.css
[error] 4-4: expected , but instead found *
Remove *
(parse)
[error] 4-4: expected , but instead found ;
Remove ;
(parse)
[error] 5-5: expected , but instead found --text-sm
Remove --text-sm
(parse)
[error] 5-5: Unexpected value or character.
Expected one of:
(parse)
[error] 5-5: expected , but instead found rem
Remove rem
(parse)
[error] 5-5: expected , but instead found ;
Remove ;
(parse)
[error] 6-6: expected , but instead found --text-sm--line-height
Remove --text-sm--line-height
(parse)
[error] 6-6: Unexpected value or character.
Expected one of:
(parse)
[error] 6-6: expected , but instead found rem
Remove rem
(parse)
[error] 6-6: expected , but instead found ;
Remove ;
(parse)
[error] 7-7: expected , but instead found --text-base
Remove --text-base
(parse)
[error] 7-7: Unexpected value or character.
Expected one of:
(parse)
[error] 7-7: expected , but instead found rem
Remove rem
(parse)
[error] 7-7: expected , but instead found ;
Remove ;
(parse)
[error] 8-8: expected , but instead found --text-base--line-height
Remove --text-base--line-height
(parse)
[error] 8-8: Unexpected value or character.
Expected one of:
(parse)
[error] 8-8: expected , but instead found rem
Remove rem
(parse)
[error] 8-8: expected , but instead found ;
Remove ;
(parse)
[error] 9-9: expected , but instead found --text-lg
Remove --text-lg
(parse)
[error] 9-9: Unexpected value or character.
Expected one of:
(parse)
[error] 9-9: expected , but instead found rem
Remove rem
(parse)
[error] 9-9: expected , but instead found ;
Remove ;
(parse)
[error] 10-10: expected , but instead found --text-lg--line-height
Remove --text-lg--line-height
(parse)
[error] 10-10: Unexpected value or character.
Expected one of:
(parse)
[error] 10-10: expected , but instead found rem
Remove rem
(parse)
[error] 10-10: expected , but instead found ;
Remove ;
(parse)
[error] 11-11: expected , but instead found --text-xl
Remove --text-xl
(parse)
[error] 11-11: Unexpected value or character.
Expected one of:
(parse)
[error] 11-11: expected , but instead found rem
Remove rem
(parse)
[error] 11-11: expected , but instead found ;
Remove ;
(parse)
[error] 12-12: expected , but instead found --text-xl--line-height
Remove --text-xl--line-height
(parse)
[error] 12-12: Unexpected value or character.
Expected one of:
(parse)
[error] 12-12: expected , but instead found rem
Remove rem
(parse)
[error] 12-12: expected , but instead found ;
Remove ;
(parse)
[error] 13-13: expected , but instead found --text-2xl
Remove --text-2xl
(parse)
[error] 13-13: Unexpected value or character.
Expected one of:
(parse)
[error] 13-13: expected , but instead found rem
Remove rem
(parse)
[error] 13-13: expected , but instead found ;
Remove ;
(parse)
[error] 14-14: expected , but instead found --text-2xl--line-height
Remove --text-2xl--line-height
(parse)
[error] 14-14: Unexpected value or character.
Expected one of:
(parse)
[error] 14-14: expected , but instead found rem
Remove rem
(parse)
[error] 14-14: expected , but instead found ;
Remove ;
(parse)
[error] 15-15: expected , but instead found --text-3xl
Remove --text-3xl
(parse)
[error] 15-15: Unexpected value or character.
Expected one of:
(parse)
[error] 15-15: expected , but instead found rem
Remove rem
(parse)
[error] 15-15: expected , but instead found ;
Remove ;
(parse)
[error] 16-16: expected , but instead found --text-3xl--line-height
Remove --text-3xl--line-height
(parse)
[error] 16-16: Unexpected value or character.
Expected one of:
(parse)
[error] 16-16: expected , but instead found rem
Remove rem
(parse)
[error] 16-16: expected , but instead found ;
Remove ;
(parse)
[error] 17-17: expected , but instead found --text-4xl
Remove --text-4xl
(parse)
[error] 17-17: Unexpected value or character.
Expected one of:
(parse)
[error] 17-17: expected , but instead found rem
Remove rem
(parse)
[error] 17-17: expected , but instead found ;
Remove ;
(parse)
[error] 18-18: expected , but instead found --text-4xl--line-height
Remove --text-4xl--line-height
(parse)
[error] 18-18: Unexpected value or character.
Expected one of:
(parse)
[error] 18-18: expected , but instead found rem
Remove rem
(parse)
[error] 18-18: expected , but instead found ;
Remove ;
(parse)
[error] 20-20: expected , but instead found --color-background
Remove --color-background
(parse)
[error] 20-20: expected , but instead found (
Remove (
(parse)
[error] 20-20: expected , but instead found --background
Remove --background
(parse)
[error] 20-20: expected , but instead found )
Remove )
(parse)
[error] 21-21: expected , but instead found --color-foreground
Remove --color-foreground
(parse)
[error] 21-21: expected , but instead found (
Remove (
(parse)
[error] 21-21: expected , but instead found --foreground
Remove --foreground
(parse)
[error] 21-21: expected , but instead found )
Remove )
(parse)
[error] 22-22: expected , but instead found --color-primary-text
Remove --color-primary-text
(parse)
[error] 22-22: Unexpected value or character.
Expected one of:
(parse)
[error] 22-22: expected , but instead found ;
Remove ;
(parse)
[error] 23-23: expected , but instead found --color-secondary-text
Remove --color-secondary-text
(parse)
[error] 23-23: Unexpected value or character.
Expected one of:
(parse)
[error] 23-23: expected , but instead found ;
Remove ;
(parse)
[error] 24-24: expected , but instead found --color-stroke
Remove --color-stroke
(parse)
[error] 24-24: Unexpected value or character.
Expected one of:
(parse)
[error] 24-24: Expected an identifier but instead found '42498'.
Expected an identifier here.
(parse)
[error] 24-24: expected , but instead found f
Remove f
(parse)
[error] 24-24: expected , but instead found ;
Remove ;
(parse)
[error] 25-25: expected , but instead found --color-primary-purple
Remove --color-primary-purple
(parse)
[error] 25-25: Unexpected value or character.
Expected one of:
(parse)
[error] 25-25: Expected an identifier but instead found '9747'.
Expected an identifier here.
(parse)
[error] 25-25: expected , but instead found ff
Remove ff
(parse)
[error] 25-25: expected , but instead found ;
Remove ;
(parse)
[error] 26-26: expected , but instead found --color-secondary-purple
Remove --color-secondary-purple
(parse)
[error] 26-26: Unexpected value or character.
Expected one of:
(parse)
[error] 26-26: expected , but instead found ;
Remove ;
(parse)
[error] 27-27: expected , but instead found --color-dark-purple
Remove --color-dark-purple
(parse)
[error] 27-27: Unexpected value or character.
Expected one of:
(parse)
[error] 27-27: Expected an identifier but instead found '230079'.
Expected an identifier here.
(parse)
[error] 28-28: expected , but instead found --color-primary-blue
Remove --color-primary-blue
(parse)
[error] 28-28: Unexpected value or character.
Expected one of:
(parse)
[error] 28-28: Expected an identifier but instead found '27'.
Expected an identifier here.
(parse)
[error] 28-28: expected , but instead found cdfe
Remove cdfe
(parse)
[error] 28-28: expected , but instead found ;
Remove ;
(parse)
[error] 29-29: expected , but instead found --color-secondary-blue
Remove --color-secondary-blue
(parse)
[error] 29-29: Unexpected value or character.
Expected one of:
(parse)
[error] 29-29: Expected an identifier but instead found '7'.
Expected an identifier here.
(parse)
[error] 29-29: expected , but instead found ce2ff
Remove ce2ff
(parse)
[error] 29-29: expected , but instead found ;
Remove ;
(parse)
[error] 30-30: expected , but instead found --color-background-1
Remove --color-background-1
(parse)
[error] 30-30: Unexpected value or character.
Expected one of:
(parse)
[error] 30-30: Expected an identifier but instead found '1'.
Expected an identifier here.
(parse)
[error] 30-30: expected , but instead found b003f
Remove b003f
(parse)
[error] 30-30: expected , but instead found ;
Remove ;
(parse)
[error] 31-31: expected , but instead found --color-background-2
Remove --color-background-2
(parse)
[error] 31-31: Unexpected value or character.
Expected one of:
(parse)
[error] 31-31: Expected an identifier but instead found '220050'.
Expected an identifier here.
(parse)
[error] 32-32: expected , but instead found --color-background-dark
Remove --color-background-dark
(parse)
[error] 32-32: Unexpected value or character.
Expected one of:
(parse)
[error] 32-32: Expected an identifier but instead found '13002'.
Expected an identifier here.
(parse)
[error] 32-32: expected , but instead found d
Remove d
(parse)
[error] 32-32: expected , but instead found ;
Remove ;
(parse)
[error] 33-33: expected , but instead found --color-background-translucent
Remove --color-background-translucent
(parse)
[error] 33-33: expected , but instead found (
Remove (
(parse)
[error] 33-33: Expected a relative selector but instead found '0'.
Expected a relative selector here.
(parse)
[error] 33-33: Expected a relative selector but instead found '80'.
Expected a relative selector here.
(parse)
[error] 33-33: Expected a relative selector but instead found '0.24);'.
Expected a relative selector here.
(parse)
[error] 34-34: expected , but instead found --color-success
Remove --color-success
(parse)
[error] 34-34: Unexpected value or character.
Expected one of:
(parse)
[error] 34-34: Expected an identifier but instead found '00'.
Expected an identifier here.
(parse)
[error] 34-34: expected , but instead found f068
Remove f068
(parse)
[error] 34-34: expected , but instead found ;
Remove ;
(parse)
[error] 36-36: expected , but instead found --animate-h-scroll
Remove --animate-h-scroll
(parse)
[error] 36-36: Expected a compound selector but instead found '10'.
Expected a compound selector here.
(parse)
[error] 36-36: expected , but instead found s
Remove s
(parse)
[error] 36-36: expected , but instead found ;
Remove ;
(parse)
[error] 38-38: expected , but instead found keyframes
Remove keyframes
(parse)
[error] 39-39: Expected a declaration, or an at rule but instead found '0% {'.
Expected a declaration, or an at rule here.
(parse)
[error] 42-42: Expected a declaration, or an at rule but instead found '100% {'.
Expected a declaration, or an at rule here.
(parse)
[error] 45-46: Expected a qualified rule, or an at rule but instead found '}
}'.
Expected a qualified rule, or an at rule here.
(parse)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - kleros-website-v2
- GitHub Check: Header rules - kleros-website-v2
- GitHub Check: Pages changed - kleros-website-v2
🔇 Additional comments (27)
frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx (1)
14-14: LGTM! Class name reordering aligns with PR objectives.The reordering of Tailwind class names is consistent with the broader effort to standardize class name ordering across components.
frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx (3)
39-39: LGTM!The reordering of Tailwind classes aligns with the PR objectives.
42-42: LGTM!The reordering of Tailwind classes aligns with the PR objectives.
52-52: LGTM!The reordering of Tailwind classes aligns with the PR objectives.
frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx (3)
16-16: LGTM! Class names are well organized.The class names are logically grouped by their purpose (spacing and responsive padding).
17-17: LGTM! Typography classes are well organized.The class names are logically grouped by their purpose (text color, size, and weight).
31-31: LGTM! Typography and spacing classes are well organized.The class names are logically grouped by their purpose (text color, padding, and responsive text size).
frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/index.tsx (3)
27-27: LGTM! Class names follow a logical ordering pattern.The reordering of Tailwind classes follows a clear pattern: layout → spacing → padding → responsive variants.
28-28: LGTM! Class names follow a logical ordering pattern.The reordering of Tailwind classes follows a clear pattern: text color → text size → font weight → responsive variants.
31-31: LGTM! Class names follow a logical ordering pattern.The reordering of Tailwind classes follows a clear pattern: text color → text size → responsive variants.
frontend/postcss.config.mjs (1)
4-4: Verify the Tailwind v4 plugin configuration.Let's confirm if
@tailwindcss/postcssis the correct plugin for Tailwind v4.✅ Verification successful
🌐 Web query:
What is the correct PostCSS plugin for Tailwind CSS v4?💡 Result:
The correct PostCSS plugin for Tailwind CSS v4 is
@tailwindcss/postcss, which replaces the previoustailwindcssPostCSS plugin used in earlier versions[7]. Here's how to implement it:Key Steps for Setup
Install required packages:
npm install tailwindcss @tailwindcss/postcss postcss -DConfigure PostCSS (in
postcss.config.js):export default { plugins: { '@tailwindcss/postcss': {}, } };Import Tailwind in your main CSS file:
@import 'tailwindcss';Important Changes in v4
- Removes need for
postcss-importandautoprefixer[7]- Handles CSS processing through Lightning CSS (vendor prefixing, nesting)[5][9]
- Requires explicit installation of separate
@tailwindcss/postcsspackage instead of built-in PostCSS support[7][9]For projects migrating from v3, remove old references to
tailwindcssin PostCSS config and replace them with@tailwindcss/postcss[7]. The new plugin works with modern build tools like Vite and Rsbuild while maintaining compatibility with existing workflows[1][5][9].Citations:
- 1: https://rsbuild.dev/guide/basic/tailwindcss
- 2: https://v4-test.tailwindcss.com/docs/installation/using-postcss
- 3: https://tailwindcss.com/docs/using-with-preprocessors
- 4: https://tailwindcss.com/docs/installation/using-postcss
- 5: https://tailwindcss.com/blog/tailwindcss-v4-alpha
- 6: https://laracasts.com/discuss/channels/laravel/cannot-get-laravel-to-work-with-tailwindcss-4
- 7: https://tailwindcss.com/docs/upgrade-guide
- 8: https://dev.to/osalumense/install-tailwind-css-v4-in-a-vue-3-vite-project-319g
- 9: https://tailwindcss.com/blog/tailwindcss-v4
- 10: https://www.npmjs.com/package/@tailwindcss/postcss/v/4.0.0-alpha.13
Tailwind v4 Plugin Configuration Verified
The configuration using
@tailwindcss/postcssis correct for Tailwind CSS v4 as per the upgrade guide. The usage infrontend/postcss.config.mjsproperly replaces the oldertailwindcssplugin.frontend/src/app/layout.tsx (1)
26-26: LGTM! Good use of CSS variables for theming.The changes look good:
- Class reordering is cosmetic and maintains functionality
- Using CSS variables (
--breakpoint-2xl) for max-width aligns with theme-based approachAlso applies to: 29-29
frontend/src/components/BrandAssets/Hero.tsx (1)
16-16: LGTM! Cosmetic class reordering.The changes maintain functionality while standardizing class ordering across components.
Also applies to: 35-35
frontend/src/components/PNKToken/Hero.tsx (1)
19-19: LGTM! Consistent class reordering.The changes maintain functionality while following the same class ordering pattern as other Hero components.
Also applies to: 39-39
frontend/src/components/Cooperative/hero.tsx (1)
18-18: LGTM! Class name reordering aligns with Tailwind upgrade.The reordering of Tailwind classes maintains the same visual styling while improving code organization.
Also applies to: 37-37, 46-46
frontend/src/components/ForBuilders/Hero.tsx (1)
17-17: LGTM! Consistent class name reordering.The changes maintain the same pattern of class name reordering seen across other components.
Also applies to: 50-50
frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx (1)
36-36: LGTM! Class name reordering follows established pattern.The reordering of text-related classes aligns with the standardization effort.
frontend/src/app/home/components/Hero.tsx (1)
27-27: LGTM! Class name reordering maintains consistency.The changes follow the same standardized pattern of class name reordering seen across other components.
Also applies to: 48-48, 57-57
frontend/package.json (3)
26-26: New Tailwind PostCSS Plugin Dependency Added
The addition of"@tailwindcss/postcss": "4.0.0"in the devDependencies is appropriate and aligns with the updated PostCSS configuration.
38-38: Updated Prettier Plugin for Tailwind CSS
The upgrade of"prettier-plugin-tailwindcss"from^0.6.9to^0.6.11is straightforward. Please ensure that formatted output remains consistent across the project.
39-39: Tailwind CSS Version Update – Exact Version Enforced
The Tailwind CSS dependency has been updated to"4.0.0", and the removal of the caret (^) enforces an exact version. Confirm that locking to version 4.0.0 is intentional for compatibility reasons.frontend/src/styles/globals.css (6)
1-1: Tailwind Import Update
Using@import 'tailwindcss';at the top of the file reflects the new integration approach for Tailwind CSS v4. Ensure that your build pipeline is set up to process this correctly.
48-55: Clear Documentation of Compatibility Styles
The updated comment block (lines 48–55) clearly explains the reason for including compatibility styles due to the Tailwind CSS v4 changes. This documentation is helpful for future reference and potential refactoring.
56-69:@layer baseCustomizations for Compatibility
The added@layer baseblock sets compatibility styles (e.g., border-color and cursor for interactive elements) to account for changes in Tailwind CSS v4 defaults. The implementation is straightforward; just ensure these styles still match the desired design outcomes.
71-73: Custom Utility: Text Balance
The@utility text-balanceblock introduces a utility to enable balanced text wrapping (text-wrap: balance;). As this CSS property has varying levels of browser support, please verify that its behavior meets your design requirements across target browsers.
75-81: Custom Utility: Hover Pause Child Animation
The@utility hover-pause-child-animationblock is a creative addition to pause animations on child elements when their parent is hovered. This approach should improve user experience in animated contexts, provided it integrates well with your other animation utilities.
84-134: Enhanced@layer utilitiesBlock for Global Styles and Scrollbar Customizations
Within the@layer utilitiesblock, global defaults for background, foreground, scrollbar, and body styles are defined:
- The CSS custom properties for
--backgroundand--foreground(lines 84–87) create a clear foundation for theming.- The scrollbar styles (lines 100–124) are detailed and maintain consistency with the design language.
This block is well-organized; however, if the new theming variables are not being flagged by your static analysis tools in the future, consider adding a parser configuration note to suppress false positives related to custom syntax.
Summary by CodeRabbit
Chores
Style