Skip to content

Commit 9f34aa5

Browse files
0xLeopoldo0xLeopoldo
authored
fix: arrow button, center logo responsive, hide aztec handbook
fixes: - arrow button responsive - center logo responsive - hide aztec handbook https://github.com/user-attachments/assets/36bf4b2a-169e-47d4-8a14-c6ffaf61e966 <img width="822" alt="Captura de pantalla 2025-07-08 a la(s) 10 45 18 a  m" src="https://github.com/user-attachments/assets/003fadef-7e25-418d-9bb0-8fb1a33f1d42" /> <img width="1168" alt="Captura de pantalla 2025-07-08 a la(s) 10 45 52 a  m" src="https://github.com/user-attachments/assets/dac98ebf-7004-45a5-bcbb-9dabf47d2cad" /> ISSUE #CHA-338 https://linear.app/defi-wonderland/issue/CHA-338/ui-fixes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Updated handbook section to display a default non-clickable card alongside a single handbook card for improved visual consistency. * **Style** * Refined navbar logo and pagination label styles for better responsiveness and alignment across devices. * Introduced a new CSS style for default handbook cards to visually distinguish them. * Enhanced footer spacing and alignment on smaller screens for improved layout. * **Chores** * Removed the "Disclaimer" button and external handbook dropdown from the navbar. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 2680aef commit 9f34aa5

5 files changed

Lines changed: 152 additions & 48 deletions

File tree

‎packages/common-config/preset/commonDocusaurusConfig.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@ const commonDocusaurusConfig: Partial<Config> = {
3636
},
3737
style: "dark",
3838
items: [
39-
{
40-
type: "html",
41-
position: "right",
42-
value:
43-
'<style>#disclaimer-btn::before { content: ""; width: 16px; height: 16px; background-image: url("/img/icons/information-circle.svg"); background-size: contain; background-repeat: no-repeat; margin-right: 8px; } #disclaimer-btn:hover { color: #d1d5db; } @media (max-width: 996px) { #disclaimer-btn { display: none !important; } }</style><button id="disclaimer-btn" style="background: none; border: none; color: #5D6B98; cursor: pointer; margin-left: 8px; display: flex; align-items: center; font-size: 14px; font-family: inherit; transition: color 0.2s ease;">Disclaimer</button>',
44-
},
39+
// {
40+
// type: "html",
41+
// position: "right",
42+
// value:
43+
// '<style>#disclaimer-btn::before { content: ""; width: 16px; height: 16px; background-image: url("/img/icons/information-circle.svg"); background-size: contain; background-repeat: no-repeat; margin-right: 8px; } #disclaimer-btn:hover { color: #d1d5db; } @media (max-width: 996px) { #disclaimer-btn { display: none !important; } }</style><button id="disclaimer-btn" style="background: none; border: none; color: #5D6B98; cursor: pointer; margin-left: 8px; display: flex; align-items: center; font-size: 14px; font-family: inherit; transition: color 0.2s ease;">Disclaimer</button>',
44+
// },
4545
{
4646
type: "dropdown",
4747
label: "Handbooks",
@@ -57,12 +57,12 @@ const commonDocusaurusConfig: Partial<Config> = {
5757
target: "_blank",
5858
rel: "noopener noreferrer",
5959
},
60-
{
61-
label: "Aztec",
62-
to: "https://aztec-handbook.example.com",
63-
target: "_blank",
64-
rel: "noopener noreferrer",
65-
},
60+
// {
61+
// label: "Aztec",
62+
// to: "https://aztec-handbook.example.com",
63+
// target: "_blank",
64+
// rel: "noopener noreferrer",
65+
// },
6666
],
6767
},
6868
{
@@ -84,12 +84,12 @@ const commonDocusaurusConfig: Partial<Config> = {
8484
],
8585
copyright: `© ${new Date().getFullYear()}. Wonder LTD. All Rights Reserved`,
8686
},
87-
prism: {
88-
theme: prismThemes.dracula,
89-
darkTheme: prismThemes.dracula,
90-
// Available languages: https://github.com/PrismJS/prism/tree/master/components
91-
// Default list: languagesToBundle - https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts#L9-L26
92-
additionalLanguages: ["solidity", "bash", "mermaid", "java", "nasm"],
87+
prism: {
88+
theme: prismThemes.dracula,
89+
darkTheme: prismThemes.dracula,
90+
// Available languages: https://github.com/PrismJS/prism/tree/master/components
91+
// Default list: languagesToBundle - https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts#L9-L26
92+
additionalLanguages: ["solidity", "bash", "mermaid", "java", "nasm"],
9393
},
9494
docs: {
9595
sidebar: {

‎packages/common-config/static/common/styles/global.css‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -441,14 +441,19 @@ nav.navbar.navbar--fixed-top + .main-wrapper {
441441

442442
.navbar__logo {
443443
margin: 0;
444-
height: 40px;
444+
height: 32px;
445+
transition: height 0.3s ease;
445446
}
446447
}
447448

448449
@media (max-width: 600px) {
449450
.navbar__inner {
450451
padding: 0;
451452
}
453+
454+
.navbar__logo {
455+
height: 28px;
456+
}
452457
}
453458

454459
/* Search input */
@@ -628,18 +633,25 @@ nav.navbar.navbar--fixed-top + .main-wrapper {
628633

629634
@media (max-width: 600px) {
630635
.footer {
631-
padding: 0.5rem 0;
636+
padding-top: 0.5rem;
637+
padding-bottom: 1rem;
632638
padding-right: 1rem;
633639
padding-left: 1rem;
640+
height: 100%;
634641
}
635642

636643
.footer .container {
637644
flex-direction: column;
638645
align-items: flex-start;
639646
justify-content: center;
640-
gap: 0.5rem;
647+
gap: 1rem;
641648
padding: 0;
642649
}
650+
651+
.footer__links {
652+
gap: 1.25rem;
653+
}
654+
643655
.footer .container > :first-child {
644656
order: 2;
645657
}
@@ -1141,13 +1153,29 @@ div[class*="buttonGroup"] button {
11411153
}
11421154

11431155
.pagination-nav__label {
1156+
display: inline-flex;
1157+
align-items: center;
1158+
gap: 0.3em;
11441159
font-family:
11451160
"Inter",
11461161
system-ui,
11471162
-apple-system,
11481163
sans-serif !important;
11491164
font-weight: 500;
11501165
color: var(--wonderland-gray-300);
1166+
white-space: nowrap;
1167+
}
1168+
1169+
@media (max-width: 1200px) {
1170+
.pagination-nav__label {
1171+
font-size: 0.75rem;
1172+
}
1173+
}
1174+
1175+
@media (max-width: 996px) {
1176+
.pagination-nav__label {
1177+
font-size: 0.9rem;
1178+
}
11511179
}
11521180

11531181
.pagination-nav__link:hover .pagination-nav__label {
@@ -1177,6 +1205,14 @@ div[class*="buttonGroup"] button {
11771205
min-height: 62px;
11781206
}
11791207

1208+
/* Center the logo on mobile */
1209+
.navbar__brand {
1210+
position: absolute;
1211+
left: 50%;
1212+
transform: translateX(-50%);
1213+
z-index: 1;
1214+
}
1215+
11801216
.navbar-sidebar {
11811217
z-index: 9999 !important;
11821218
position: fixed !important;

‎sites/wonderland/src/components/HandbookSection/index.tsx‎

Lines changed: 58 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
import styles from "./styles.module.css";
2-
import { ReactNode } from "react";
2+
import React, { ReactNode } from "react";
33

4-
const handbooks = [
4+
const handbooks: {
5+
title: string;
6+
image: string;
7+
href: string;
8+
color?: string;
9+
}[] = [
510
{
611
title: "Optimism handbook",
712
image: "/img/optimism-handbook.svg",
813
href: "/docs/handbook/overview",
914
},
10-
{
11-
title: "Aztec handbook",
12-
image: "/img/aztec-handbook.svg",
13-
href: "https://docs.aztec.network/aztec-handbook/overview",
14-
color: "#625CBFD1",
15-
},
15+
// {
16+
// title: "Aztec handbook",
17+
// image: "/img/aztec-handbook.svg",
18+
// href: "https://docs.aztec.network/aztec-handbook/overview",
19+
// color: "#625CBFD1",
20+
// },
1621
];
1722

1823
export default function HandbookSection(): ReactNode {
1924
return (
2025
<section className={styles.handbooksSection}>
21-
<img
22-
src="/img/star-icon.svg"
23-
alt="Star illustration"
24-
className={styles.starMobile}
25-
/>
26+
<img src="/img/star-icon.svg" alt="" className={styles.starMobile} />
2627
<div className={styles.handbooksSeparator}>
2728
<span className={`${styles.line} ${styles.mainLine}`}></span>
2829
<p>PARTNER HANDBOOKS</p>
@@ -35,32 +36,65 @@ export default function HandbookSection(): ReactNode {
3536
to others.
3637
</p>
3738
<div className={styles.handbooksCards}>
38-
{handbooks.map((handbook) => {
39-
return (
39+
{handbooks.length === 1 ? (
40+
<>
41+
{/* First handbook card */}
4042
<a
41-
key={handbook.title}
42-
href={handbook.href}
43+
key={handbooks[0].title}
44+
href={handbooks[0].href}
4345
target="_blank"
4446
className={styles.handbooksCard}
4547
>
46-
{handbook.color && (
48+
{handbooks[0].color && (
4749
<div
4850
className={styles.colorOverlay}
49-
style={{ backgroundColor: handbook.color }}
51+
style={{ backgroundColor: handbooks[0].color }}
5052
></div>
5153
)}
5254
<img
53-
src={handbook.image}
54-
alt={`${handbook.title} ICON`}
55+
src={handbooks[0].image}
56+
alt=""
5557
className={styles.handbooksCardIcon}
5658
/>
5759
</a>
58-
);
59-
})}
60+
61+
{/* Default handbook card (not a link) */}
62+
<div className={styles.handbooksCardDefault}>
63+
<img
64+
src="/img/default-handbook.svg"
65+
alt=""
66+
className={styles.handbooksCardIcon}
67+
/>
68+
</div>
69+
</>
70+
) : (
71+
handbooks.map((handbook) => {
72+
return (
73+
<a
74+
key={handbook.title}
75+
href={handbook.href}
76+
target="_blank"
77+
className={styles.handbooksCard}
78+
>
79+
{handbook.color && (
80+
<div
81+
className={styles.colorOverlay}
82+
style={{ backgroundColor: handbook.color }}
83+
></div>
84+
)}
85+
<img
86+
src={handbook.image}
87+
alt=""
88+
className={styles.handbooksCardIcon}
89+
/>
90+
</a>
91+
);
92+
})
93+
)}
6094
</div>
6195
<div className={styles.handbooksSeparator}>
6296
<span className={styles.line}></span>
63-
<img src="/img/star-icon.svg" alt="Star illustration" />
97+
<img src="/img/star-icon.svg" alt="" />
6498
<span className={styles.line}></span>
6599
</div>
66100
</section>

‎sites/wonderland/src/components/HandbookSection/styles.module.css‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,11 @@
3131
font-weight: 600;
3232
color: var(--wonderland-gray-100);
3333
text-transform: uppercase;
34-
font-family: "Sharp Grotesk", system-ui, -apple-system, sans-serif;
34+
font-family:
35+
"Sharp Grotesk",
36+
system-ui,
37+
-apple-system,
38+
sans-serif;
3539
padding-left: 2rem;
3640
padding-right: 2rem;
3741
text-align: center;
@@ -50,7 +54,11 @@
5054
font-weight: 400;
5155
color: var(--wonderland-gray-200);
5256
line-height: 150%;
53-
font-family: "Inter", system-ui, -apple-system, sans-serif;
57+
font-family:
58+
"Inter",
59+
system-ui,
60+
-apple-system,
61+
sans-serif;
5462
letter-spacing: -0.02em;
5563
text-align: center;
5664
padding-right: 1rem;
@@ -93,10 +101,30 @@
93101
overflow: hidden;
94102
}
95103

104+
.handbooksCardDefault {
105+
width: 100%;
106+
min-height: 220px;
107+
background: rgba(255, 255, 255, 0.08);
108+
display: flex;
109+
flex-direction: column;
110+
align-items: center;
111+
justify-content: center;
112+
gap: 0.5rem;
113+
border: 1px solid #ffffff4d;
114+
border-radius: 11.61px;
115+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
116+
backdrop-filter: blur(7px);
117+
-webkit-backdrop-filter: blur(7px);
118+
z-index: 100;
119+
position: relative;
120+
overflow: hidden;
121+
}
122+
96123
a.handbooksCard:hover {
97124
cursor: pointer;
98125
transform: translateY(-4px) scale(1.02);
99-
box-shadow: 0 4px 30px rgba(31, 85, 213, 0.2),
126+
box-shadow:
127+
0 4px 30px rgba(31, 85, 213, 0.2),
100128
0 0 20px rgba(233, 91, 155, 0.2);
101129
border-color: rgba(255, 255, 255, 0.3);
102130
}

‎sites/wonderland/static/img/default-handbook.svg‎

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)