Skip to content

Commit 1dcd267

Browse files
TechInnovatorAITechInnovatorAI
authored
Merge pull request #1 from TechInnovatorAI/new
commit
2 parents 707be5e + f9cf3fc commit 1dcd267

File tree

7 files changed

+159
-31
lines changed

7 files changed

+159
-31
lines changed

‎packages/guider/src/client/components/markdown/inline.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export function MarkdownStrong(props: MarkdownProps) {
66
<strong
77
{...props.attrs}
88
className={classNames(
9-
'gd-font-semibold gd-text-textHeading gd-text-opacity-85',
9+
'gd-font-semibold gd-text-textHeading gd-text-opacity-85 dark:text-black',
1010
props.attrs.class,
1111
)}
1212
>

‎packages/guider/src/client/components/markdown/paragraph.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export type MarkdownParagraphProps = {
99

1010
export function MarkdownParagraph(props: MarkdownParagraphProps) {
1111
return (
12-
<p className="gd-mb-3 gd-leading-relaxed" {...props.attrs}>
12+
<p className="gd-mb-3 gd-leading-relaxed sub-description" {...props.attrs}>
1313
{props.children}
1414
</p>
1515
);

‎packages/guider/src/client/partials/header/header.tsx

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ export function HeaderInternal() {
1717
const [isDark, setIsDark] = useState(false);
1818
const { site, settings } = useGuider(ctx?.meta);
1919

20-
console.log(settings.colors.background);
20+
useEffect(() => {
21+
// Apply theme based on state
22+
document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
23+
}, [isDark]);
2124

2225
const [isScrolledFromTop, setIsScrolledFromTop] = useState(false);
2326

@@ -35,42 +38,32 @@ export function HeaderInternal() {
3538
return (
3639
<div
3740
className={classNames(
38-
'gd-sticky gd-z-50 gd-top-0 gd-bg-bg gd-transition-colors gd-duration-300 gd-mb-8',
41+
'gd-sticky gd-z-50 gd-top-0 gd-transition-colors gd-duration-300 gd-mb-8',
3942
isScrolledFromTop ? 'gd-bg-opacity-100' : 'gd-bg-opacity-0',
43+
{ 'gd-dark': isDark, 'gd-light': !isDark }
4044
)}
4145
>
4246
<header
4347
className={classNames(
4448
'gd-max-w-[1480px] gd-mx-auto',
4549
'gd-p-6 gd-pb-0 gd-border-b gd-border-line',
46-
isScrolledFromTop ? 'gd-bg-opacity-100' : 'gd-bg-opacity-0',
50+
isScrolledFromTop ? 'gd-bg-opacity-100' : 'gd-bg-opacity-0'
4751
)}
4852
>
4953
<div className="gd-fixed neato-guider-overlay gd-transition-opacity gd-duration-150 gd-opacity-0 gd-inset-0 gd-bg-gradient-to-b gd-from-black/80 gd-to-transparent gd-z-[60] gd-pointer-events-none" />
5054
<div className="gd-flex gd-justify-between gd-mb-6 gd-items-center">
51-
<div className="gd-flex gd-items-center">
55+
<div>
5256
<GuiderLogo />
53-
{site.dropdown.length > 0 ? (
54-
<>
55-
<div className="gd-w-px gd-h-6 gd-bg-line gd-rotate-12 gd-mx-4" />
56-
<HeaderDropdown dropdown={site.dropdown} />
57-
</>
58-
) : null}
59-
<HeaderSearch />
6057
</div>
61-
<div className="gd-hidden md:gd-flex gd-items-center gd-space-x-3">
62-
<HeaderNav items={site.navigation} />
63-
{site.github ? (
64-
<GithubDisplay
65-
org={site.github.split('/')[0]}
66-
repo={site.github.split('/', 2)[1]}
67-
/>
68-
) : null}
58+
<HeaderSearch />
59+
<div className='gd-flex gd-items-center gd-space-x-6'>
60+
<h4 className='gd-text-sm'>Email Support</h4>
61+
<button className='gd-text-sm dark:gd-bg-transparent dark:gd-border dark:gd-border-[#2E5CFF] dark:gd-bg-[#0E1226] dark:gd-text-[#2E5CFF] gd-bg-[#2E5CFF] gd-text-white gd-py-1 gd-px-4 gd-rounded-full'>Polymarket</button>
62+
{isDark ?
63+
<Moon onClick={() => setIsDark(false)} /> :
64+
<Sun onClick={() => setIsDark(true)} />
65+
}
6966
</div>
70-
{/* {isDark ?
71-
<Moon onClick={() => setIsDark(false)} /> :
72-
<Sun onClick={() => setIsDark(true)} />
73-
} */}
7467
<div className="gd-flex md:gd-hidden gd-items-center">
7568
{site.navigation.length > 0 || site.github ? (
7669
<TopMobileNav

‎packages/guider/src/client/partials/header/search/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export function SearchButton(props: { onClick?: () => void }) {
55
<button
66
type="button"
77
onClick={props.onClick}
8-
className="!gd-bg-bgDark gd-gap-2 gd-py-1.5 gd-px-2 gd-text-left md:gd-w-48 hover:!gd-bg-bgLight active:gd-scale-95 hover:gd-text-textHeading gd-transition-[color,transform] gd-border gd-border-bgLightest gd-rounded-md gd-flex gd-items-center"
8+
className="header-search-btn !gd-bg-bgDark gd-gap-2 gd-py-1.5 gd-px-2 gd-text-left md:gd-w-48 hover:!gd-bg-bgLight active:gd-scale-95 hover:gd-text-textHeading gd-transition-[color,transform] gd-border gd-border-bgLightest gd-rounded-md gd-flex gd-items-center"
99
>
1010
<Icon
1111
icon="mingcute:search-2-fill"

‎packages/guider/src/client/partials/layout/theme.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function ThemeProvider() {
5555
}, [serializedSettings, overwrittenColors]);
5656
return (
5757
<Helmet helmetData={helmetData}>
58-
<body
58+
<body className='dark:gd-bg-red-300'
5959
style={
6060
Object.entries(style)
6161
.map((v) => v.join(': '))

‎packages/guider/src/client/partials/logo/logo.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ export function LogoInternal() {
1111

1212
const content = (
1313
<span className="gd-text-base gd-font-bold gd-text-textHeading">
14-
<img src={logoSrc} alt={site.logo.name ?? 'Guider'} style={{ height: 'auto', maxHeight: '50px' }} />
14+
<img className='dark:gd-block gd-hidden site-logo' src={logoSrc} alt={site.logo.name ?? 'Guider'} />
15+
<img className='dark:gd-hidden gd-block site-logo' src={"https://mintlify.s3-us-west-1.amazonaws.com/polymarket/logo/light.svg"} alt={site.logo.name ?? 'Guider'} />
1516
</span>
1617
);
1718
// const content = (

‎packages/guider/src/styles/global.css

Lines changed: 137 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ html {
22
scrollbar-gutter: stable;
33
}
44

5-
body {
6-
@apply gd-bg-bg gd-text-text gd-relative;
7-
}
5+
/* body {
6+
@apply gd-bg-bg gd-text-text gd-relative;
7+
} */
88

99
#__next {
1010
@apply gd-min-h-screen;
@@ -41,3 +41,137 @@ body[data-mobile-stop-overflow="true"] {
4141
/* For some reason the styles don't get applied without the width */
4242
width: 13px;
4343
}
44+
45+
46+
p.gd-font-bold.gd-mb-2.gd-text-primary.gd-text-sm {
47+
font-size: 14px;
48+
color: #2E5CFF;
49+
font-weight: 500;
50+
}
51+
52+
a.gd-flex.gd-items-center.gd-w-full.gd-py-1\.5.gd-text-sm.gd-px-4.gd-rounded-lg.hover\:gd-text-textLight.hover\:gd-bg-bgLight {
53+
color: #99A1B1;
54+
55+
}
56+
57+
a.neato-guider-active-link.gd-flex.gd-items-center.gd-w-full.gd-py-1\.5.gd-text-sm.gd-px-4.gd-rounded-lg.gd-bg-bgLightest.gd-text-primary {
58+
background-color: var(--menu-bg-color);
59+
color: #2E5CFF;
60+
font-weight: 500 !important;
61+
}
62+
63+
a.hover\:gd-text-textLight.gd-transition-colors.gd-duration-100.gd-text-primary {
64+
color: #2E5CFF;
65+
}
66+
67+
span.gd-size-7.gd-flex.gd-text-sm.gd-border-t-2.gd-justify-center.gd-items-center.gd-rounded-md.gd-transition-\[background-color\,color\,border-color\].gd-duration-100.group-hover\:gd-bg-bgLightest.group-hover\:gd-text-textHeading.gd-border-bgLightest.gd-bg-bgLight {
68+
background-color: transparent !important;
69+
border: 0.5px solid var(--box-border-color);
70+
}
71+
72+
span.gd-size-7.gd-flex.gd-text-sm.gd-border-t-2.gd-justify-center.gd-items-center.gd-rounded-md.gd-transition-\[background-color\,color\,border-color\].gd-duration-100.group-hover\:gd-bg-bgLightest.group-hover\:gd-text-textHeading.gd-border-bgLightest.gd-bg-bgLight .iconify-icon {
73+
color: #8E99B2 !important
74+
}
75+
76+
a.hover\:gd-text-textLight.gd-transition-colors.gd-duration-100 {
77+
color: #99A1B1;
78+
}
79+
80+
.sub-description,
81+
.sub-description strong {
82+
font-size: 18px;
83+
color: var(--text-color) !important;
84+
font-weight: 400;
85+
line-height: 28px;
86+
}
87+
88+
a.pl-4.group.flex.items-center.lg\:text-sm.lg\:leading-6.mb-5.sm\:mb-4.font-medium.text-gray-600.hover\:text-gray-900.dark\:text-gray-400.dark\:hover\:text-gray-300{
89+
color: var(--text-color) !important;
90+
91+
}
92+
93+
article h3 {
94+
font-weight: 500 !important;
95+
}
96+
97+
/* body {
98+
background-color: #0A0B10 !important;
99+
} */
100+
101+
button.header-search-btn {
102+
width: 450px;
103+
text-align: left;
104+
border: 1px solid var(--box-border-color);
105+
border-radius: 9px;
106+
padding: 5px 15px;
107+
box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
108+
background-color: var(--background-color) !important;
109+
}
110+
111+
button.header-search-btn svg{
112+
color: white;
113+
}
114+
115+
button.header-search-btn .gd-opacity-50{
116+
opacity: 1 !important;
117+
}
118+
119+
/* header .gd-flex.gd-justify-between.gd-mb-6.gd-items-center .gd-flex.gd-items-center{
120+
width: 100%;
121+
} */
122+
.site-logo{
123+
width: 130px;
124+
}
125+
header .gd-flex.gd-justify-between.gd-mb-6.gd-items-center .gd-flex.gd-items-center div:nth-child(1){
126+
width: 20%;
127+
background-color: var(--background-color) !important;
128+
}
129+
130+
header .gd-flex.gd-justify-between.gd-mb-6.gd-items-center .gd-flex.gd-items-center div:nth-child(4){
131+
width: 30%;
132+
}
133+
134+
.gd-w-px.gd-h-6.gd-bg-line.gd-rotate-12.gd-mx-4{
135+
opacity: 0;
136+
}
137+
138+
.gd-border-line{
139+
border-color: var(--box-border-color) !important;
140+
}
141+
142+
span.gd-flex-1.gd-transition-colors.gd-duration-100,
143+
header .gd-flex.gd-justify-between.gd-mb-6.gd-items-center .gd-flex.gd-items-center div:nth-child(1) span,
144+
header span.gd-text-right.gd-text-xs.gd-hidden.md\:gd-inline-block,
145+
header span.gd-flex-1.gd-hidden.md\:gd-inline-block{
146+
color: #99A1B1;
147+
}
148+
149+
150+
/* Light theme */
151+
:root {
152+
--background-color: #ffffff;
153+
--text-color: #374256;
154+
--heading-text-color: #121A2E;
155+
--menu-bg-color: #EAEEFF;
156+
--box-border-color: #DFE3EC;
157+
}
158+
159+
/* Dark theme */
160+
[data-theme='dark'] {
161+
--background-color: #0A0B10;
162+
--text-color: #99A1B1;
163+
--heading-text-color: #DFE3EC;
164+
--menu-bg-color: #0E1328;
165+
--box-border-color: #22252a;
166+
}
167+
168+
/* Apply theme variables */
169+
body {
170+
background-color: var(--background-color) ;
171+
color: var(--text-color);
172+
}
173+
174+
.gd-text-textHeading{
175+
color: var(--heading-text-color) !important;
176+
177+
}

0 commit comments

Comments
 (0)