fix: arrow button, center logo responsive, hide aztec handbook#49
fix: arrow button, center logo responsive, hide aztec handbook#490xLeopoldo merged 4 commits intodevfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
0xLeopoldo
requested review from
0xArdy,
0xLukeDev,
0xShishigami,
Onizuka-wl,
oxlumi and
th0rOdinson
and removed request for
0xArdy and
0xShishigami
📝 WalkthroughWalkthroughThis change comments out two previously active navbar items in the Docusaurus theme configuration: a custom HTML "Disclaimer" button and an external "Aztec" handbook dropdown, effectively removing them from the navbar without deleting their code. The indentation of the Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes were identified. All code modifications align with the objectives specified in the linked issue CHA-338. Possibly related PRs
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 300000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
Documentation and Community
|
![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)
sites/wonderland/src/components/HandbookSection/index.tsx (2)
2-2: Remove unnecessary React importReact is already available in the scope and doesn't need to be explicitly imported in modern React applications. The
ReactNodeimport is sufficient.-import React, { ReactNode } from "react"; +import { ReactNode } from "react";
43-97: Consider simplifying the conditional rendering logicWhile the current logic works, it could be simplified by using a more functional approach that reduces code duplication.
<div className={styles.handbooksCards}> - {handbooks.length === 1 ? ( - <> - {/* First handbook card */} - <a - key={handbooks[0].title} - href={handbooks[0].href} - target="_blank" - className={styles.handbooksCard} - > - {handbooks[0].color && ( - <div - className={styles.colorOverlay} - style={{ backgroundColor: handbooks[0].color }} - ></div> - )} - <img - src={handbooks[0].image} - alt={`${handbooks[0].title} ICON`} - className={styles.handbooksCardIcon} - /> - </a> - - {/* Default handbook card (not a link) */} - <div className={styles.handbooksCardDefault}> - <img - src="/img/default-handbook.svg" - alt="Default handbook ICON" - className={styles.handbooksCardIcon} - /> - </div> - </> - ) : ( - handbooks.map((handbook) => { - return ( - <a - key={handbook.title} - href={handbook.href} - target="_blank" - className={styles.handbooksCard} - > - {handbook.color && ( - <div - className={styles.colorOverlay} - style={{ backgroundColor: handbook.color }} - ></div> - )} - <img - src={handbook.image} - alt={`${handbook.title} ICON`} - className={styles.handbooksCardIcon} - /> - </a> - ); - }) - )} + {handbooks.map((handbook) => ( + <a + key={handbook.title} + href={handbook.href} + target="_blank" + className={styles.handbooksCard} + > + {handbook.color && ( + <div + className={styles.colorOverlay} + style={{ backgroundColor: handbook.color }} + ></div> + )} + <img + src={handbook.image} + alt={`${handbook.title} ICON`} + className={styles.handbooksCardIcon} + /> + </a> + ))} + + {handbooks.length === 1 && ( + <div className={styles.handbooksCardDefault}> + <img + src="/img/default-handbook.svg" + alt="Default handbook ICON" + className={styles.handbooksCardIcon} + /> + </div> + )} </div>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
sites/wonderland/static/img/default-handbook.svgis excluded by!**/*.svg
📒 Files selected for processing (4)
packages/common-config/preset/commonDocusaurusConfig.ts(3 hunks)packages/common-config/static/common/styles/global.css(3 hunks)sites/wonderland/src/components/HandbookSection/index.tsx(2 hunks)sites/wonderland/src/components/HandbookSection/styles.module.css(3 hunks)
🧰 Additional context used
🧠 Learnings (2)
packages/common-config/preset/commonDocusaurusConfig.ts (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
sites/wonderland/src/components/HandbookSection/index.tsx (2)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: scripts/src/create-handbook.ts:0-0
Timestamp: 2025-07-03T19:07:42.089Z
Learning: In the defi-wonderland/handbook repository, the `sites/template` directory is a repository structure that's guaranteed to have a package.json file, so validation checks for package.json existence are not needed in the create-handbook script.
⏰ Context from checks skipped due to timeout of 300000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test
🔇 Additional comments (12)
packages/common-config/preset/commonDocusaurusConfig.ts (3)
39-44: LGTM - Clean temporary removal of disclaimer buttonThe disclaimer button is properly commented out rather than deleted, making it easy to restore if needed.
60-65: LGTM - Aztec handbook successfully hidden as per PR objectivesThe Aztec handbook dropdown item is properly commented out, achieving the "hide aztec handbook" objective mentioned in the PR.
87-92: LGTM - Indentation formatting improvedThe prism configuration block is now properly indented and more readable.
sites/wonderland/src/components/HandbookSection/styles.module.css (3)
34-38: LGTM - Improved CSS formatting for readabilityThe font-family declarations are now formatted consistently across multiple lines, enhancing code readability without changing functionality.
Also applies to: 57-61
104-121: LGTM - New default card style supports updated component logicThe
.handbooksCardDefaultclass appropriately duplicates.handbooksCardstyling while omitting the background image, which aligns with the new rendering logic in the component that shows a default non-clickable card alongside the single handbook.
126-128: LGTM - Box-shadow formatting improvedThe multi-line box-shadow declaration improves readability while maintaining the same visual effect.
packages/common-config/static/common/styles/global.css (3)
409-411: LGTM - Responsive logo sizing with smooth transitionsThe logo height adjustment to 32px on tablets/small screens with a smooth transition enhances the responsive design as mentioned in the PR objectives.
418-422: LGTM - Further logo optimization for mobile devicesThe additional height reduction to 28px on screens under 600px ensures optimal logo sizing across all device sizes.
1114-1137: LGTM - Enhanced pagination responsivenessThe pagination label styling updates include proper flexbox alignment, responsive font sizes, and appropriate breakpoints that improve the overall user experience across different screen sizes.
sites/wonderland/src/components/HandbookSection/index.tsx (3)
4-9: LGTM - Excellent TypeScript typing additionThe explicit typing for the handbooks array improves type safety and code documentation, making the expected structure clear for future developers.
15-20: LGTM - Aztec handbook successfully hiddenThe Aztec handbook is properly commented out, achieving the PR objective while preserving the code for potential future restoration.
43-97: Default handbook image confirmed
The filedefault-handbook.svgis present atsites/wonderland/static/img/default-handbook.svg, so the hardcoded/img/default-handbook.svgreference is valid.
th0rOdinson
left a comment
th0rOdinson
left a comment
There was a problem hiding this comment.
Looks amazing! Just a few comments sir 💯
3 participants
fixes:
Grabacion.de.pantalla.2025-07-08.a.la.s.10.39.48.a.m.mov
ISSUE #CHA-338 https://linear.app/defi-wonderland/issue/CHA-338/ui-fixes
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Style
Chores