new footer design #1017
new footer design #1017
Conversation
mdumond
requested review from
andrashee,
mkue,
ssandino and
socialincome-dev
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
📝 WalkthroughWalkthroughThe pull request modifies the Changes
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
![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 (2)
website/src/components/footer/footer.tsx (2)
44-44: Avoid using !important override for background.The
!bg-backgroundoverride suggests a specificity issue. Consider restructuring the CSS to avoid using!important.
52-74: Consider keeping social media icons for better UX.Social media icons help with quick visual recognition. Their removal might impact user experience and accessibility.
<FooterLink label="Instagram" url="https://www.instagram.com/so_income" + Icon={SiInstagram} target="_blank" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/src/components/footer/footer.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Test website
- GitHub Check: Prettify
- GitHub Check: Security checks (typescript)
🔇 Additional comments (2)
website/src/components/footer/footer.tsx (2)
23-23: Verify typography size change impact across screen sizes.The typography size increase from "sm" to "xl" is significant. Ensure this doesn't cause layout issues on mobile devices.
48-48: LGTM! Consistent typography updates.The typography size changes are applied consistently across all section headers, creating a clear visual hierarchy.
Also applies to: 78-78, 92-92, 107-107
|
I forgot to add here that I did not manage to get the line height from Figma considering the font-size, because as far as I could tell they were linked together in the code. |
|
Looking good. Don't worry about line height, it's not pixel perfect on Figma either. It's even better to start with the default. And only make exception when really needed. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
ui/src/components/containers/base-container.tsx (1)
5-5: Consider using a union type for baseClassNames.Switching from a typed backgroundColor to string reduces type safety. Consider using a union type to maintain type checking.
-baseClassNames?: string; +type ThemeClass = 'theme-blue' | 'bg-yellow-50'; +baseClassNames?: ThemeClass;website/src/app/[lang]/[region]/(website)/arts/section-2.tsx (1)
15-15: Use theme classes consistently.Using hardcoded
bg-yellow-50contradicts the new theming approach. Consider using a theme class for consistency.-<BaseContainer baseClassNames="bg-yellow-50" className="flex flex-col space-y-1 py-16 md:px-20"> +<BaseContainer baseClassNames="theme-yellow" className="flex flex-col space-y-1 py-16 md:px-20">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
ui/src/components/containers/base-container.tsx(1 hunks)website/src/app/[lang]/[region]/(website)/arts/section-2.tsx(1 hunks)website/src/components/footer/footer.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- website/src/components/footer/footer.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Test website
| <div className={baseClassNames}> | ||
| <div className="mx-auto max-w-6xl px-3 md:px-6"> | ||
| <div className={twMerge(backgroundColor, className)} ref={ref} {...props}> | ||
| <div className={twMerge(baseClassNames, className)} ref={ref} {...props}> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Prevent duplicate class application.
baseClassNames is applied to both outer and inner divs, which could cause styling conflicts.
-<div className={baseClassNames}>
+<div className={baseClassNames}>
<div className="mx-auto max-w-6xl px-3 md:px-6">
- <div className={twMerge(baseClassNames, className)} ref={ref} {...props}>
+ <div className={twMerge(className)} ref={ref} {...props}>📝 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.
| <div className={baseClassNames}> | |
| <div className="mx-auto max-w-6xl px-3 md:px-6"> | |
| <div className={twMerge(backgroundColor, className)} ref={ref} {...props}> | |
| <div className={twMerge(baseClassNames, className)} ref={ref} {...props}> | |
| <div className={baseClassNames}> | |
| <div className="mx-auto max-w-6xl px-3 md:px-6"> | |
| <div className={twMerge(className)} ref={ref} {...props}> |
|
oh nice thanks! I was a bit unhappy with the background overrides |
Summary by CodeRabbit
baseClassNames.