Experiment: Font changed to Anek Odia #95
Conversation
WalkthroughThis pull request introduces multiple updates across the codebase. A custom webpack configuration has been added to handle SVG imports—differentiating between asset URLs and React components—along with the addition of a new development dependency. Several new React components have been implemented (including updated Enterprise and homepage sections), and existing components saw modifications in their import paths, JSX structures, and styling (using Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer Code
participant Webpack as Webpack Config
participant Loader1 as File Loader (?url)
participant Loader2 as @svgr/webpack Loader
Dev->>Webpack: Import SVG (with or without ?url)
Webpack-->>Dev: Check applied rule for SVG
alt SVG with ?url
Webpack->>Loader1: Process using file loader
else Standard SVG import
Webpack->>Loader2: Process using @svgr/webpack loader
end
Loader1-->>Webpack: Return asset URL
Loader2-->>Webpack: Return React component
sequenceDiagram
participant User as User
participant Web3Comp as Web3 Component
participant API as GraphQL API
User->>Web3Comp: Load Web3 page
Web3Comp->>API: Execute web3Query
API-->>Web3Comp: Return { title, subtitle, cards }
Web3Comp->>User: Render Web3 component with data
Possibly related PRs
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 (
|
jaybuidl
changed the base branch from
master
to
fix(frontend)/apply-feedback-round-1
✅ 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.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 3
🧹 Nitpick comments (7)
frontend/src/styles/globals.css (1)
50-50: Font Update: Changing font-family to Anek Odia
The update changes the website’s primary font from Urbanist to Anek Odia. Make sure that the font is loaded (for example, via a Google Fonts link or import) and consider surrounding the font name with quotes (e.g.,"Anek Odia", Helvetica, sans-serif) if the actual font name contains spaces, to ensure proper parsing by the browser.frontend/src/components/ForBuilders/UseCasesSection/index.tsx (1)
14-19: Layout adjustment and code formatting changeThe padding has been changed from
py-16 md:py-24(padding on top and bottom) topt-16 md:pt-24(padding only on top). This removes the bottom padding, which might create tighter spacing between this section and whatever follows it. Additionally, theh1element's className has been reformatted to a multi-line style, though the classes themselves remain unchanged.Ensure that removing the bottom padding was intentional and doesn't cause spacing issues with adjacent elements. This layout change might be related to accommodating the new Anek Odia font mentioned in the PR description.
frontend/src/app/enterprise/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx (1)
1-74: Consider fixing filename typo in a future PRNote that the filename "TabelCardContent.tsx" contains a typo (should be "TableCardContent.tsx"). While not part of the current changes, this could be addressed in a future PR for better code organization and consistency.
frontend/src/app/home/components/Web3/index.tsx (1)
28-34: Consider adding error handling for the card renderingThe component maps directly over the
cardsarray without any checks for empty or undefined values. Consider adding a fallback or error handling for cases where the array might be empty or the data structure differs from expected.- {cards.map(({ icon, title, subtitle }) => ( + {cards?.length > 0 ? cards.map(({ icon, title, subtitle }) => ( <CtaCard className="flex-grow" key={title} {...{ icon, title, description: subtitle }} /> - ))} + )) : <p>No cards available</p>}frontend/src/app/enterprise/components/Hero.tsx (1)
10-12: Consider naming consistency between component location and data source.This component is located in the
enterprisedirectory but fetches data fromforLawyersPageHero. This naming inconsistency might cause confusion for developers. Consider either:
- Moving the component to a more appropriate directory
- Updating the query to fetch from an enterprise-related data source
- Adding a comment explaining the relationship
frontend/src/app/enterprise/page.tsx (1)
8-8: Remove commented-out codeCommented-out code creates unnecessary clutter and confusion in the codebase. Either remove the commented import completely or add a comment explaining why it's being kept.
-// import KlerosMediationSection from "./components/KlerosMediationSection";frontend/src/app/home/components/Hero.tsx (1)
23-23: Button now visible on large screens.
You removed thelg:hiddenstyle on thisdiv, making the button always visible on large screens. Confirm this matches your design specs.
🛑 Comments failed to post (3)
frontend/src/app/home/components/Enterprise/index.tsx (1)
10-10: 🛠️ Refactor suggestion
Component name
Web3doesn't match its directory locationEnterprise.There's a significant naming inconsistency here. According to the file path (Enterprise/index.tsx) and the data being fetched (homeEnterprise), this component appears to be enterprise-related, but it's named
Web3. This contradicts typical naming conventions where component names should align with their purpose or location.Consider renaming the component to match its directory or purpose (e.g.,
EnterpriseorEnterpriseSection) to improve code maintainability and readability.frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/index.tsx (1)
35-41:
⚠️ Potential issueFix missing dependencies in useEffect
The useEffect hook is missing
pageandnumPagesin its dependency array, which could lead to using stale values when the effect runs.- useEffect(() => { - if (itemsPerPage === 1) { - setPage(page * 2 - 1); - } else { - setPage(Math.min(Math.floor(page / 2) + 1, numPages)); - } - }, [itemsPerPage]); + useEffect(() => { + if (itemsPerPage === 1) { + setPage(page * 2 - 1); + } else { + setPage(Math.min(Math.floor(page / 2) + 1, numPages)); + } + }, [itemsPerPage, page, numPages]);📝 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.useEffect(() => { if (itemsPerPage === 1) { setPage(page * 2 - 1); } else { setPage(Math.min(Math.floor(page / 2) + 1, numPages)); } }, [itemsPerPage, page, numPages]);frontend/src/components/MobilePagination.tsx (1)
18-53:
⚠️ Potential issueFix incorrect aria-label for next page button.
The aria-label on the next page button incorrectly describes the action as moving to the previous page.
- aria-label="Move to the previous page" + aria-label="Move to the next page"📝 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.return ( <div className={clsx( "flex w-full items-center justify-center gap-8", className, )} > <button className={clsx( "size-6 rounded-full bg-primary-blue text-lg font-bold", "text-background-2 disabled:bg-stroke", )} disabled={currentPage === 1} aria-label="Move to the previous page" onClick={() => callback(currentPage - 1)} > <Arrow className="mx-auto fill-background-2" /> </button> <label className="w-12 text-center"> {currentPage}/{numPages} </label> <button className={clsx( "size-6 rounded-full bg-primary-blue text-lg font-bold", "text-background-2 disabled:bg-stroke", )} disabled={currentPage === numPages} aria-label="Move to the next page" onClick={() => callback(currentPage + 1)} > <Arrow className="mx-auto rotate-180 fill-background-2" /> </button> </div> ); };
https://fonts.google.com/specimen/Anek+Odia?preview.text=Justice%20as%20a%20Service
Summary by CodeRabbit
New Features
Refactor
Style