Skip to content

Commit e924f7e

Browse files
kaushiktak19kaushiktak19
authored
fix(quickstart-filter): improve dark mode and fix alignment/padding (#697)
Signed-off-by: Kaushik Tak <[email protected]>
1 parent 131b9f4 commit e924f7e

File tree

1 file changed

+154
-88
lines changed

1 file changed

+154
-88
lines changed

‎src/components/QuickStartFilter.js‎

Lines changed: 154 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
import React, {useState} from "react";
1+
import React, { useState } from "react";
22
import quickstarts from "./QuickStartList";
33
import Link from "@docusaurus/Link";
4-
import {FaGolang} from "react-icons/fa6";
5-
import {FaJava} from "react-icons/fa";
6-
import {FaLaptopCode} from "react-icons/fa";
7-
import {FaRust} from "react-icons/fa";
8-
import {TbBrandCSharp} from "react-icons/tb";
9-
import {FaPython} from "react-icons/fa";
10-
import {FaDocker} from "react-icons/fa";
11-
import {IoLogoJavascript} from "react-icons/io5";
4+
import { FaGolang } from "react-icons/fa6";
5+
import { FaJava } from "react-icons/fa";
6+
import { FaLaptopCode } from "react-icons/fa";
7+
import { FaRust } from "react-icons/fa";
8+
import { TbBrandCSharp } from "react-icons/tb";
9+
import { FaPython } from "react-icons/fa";
10+
import { FaDocker } from "react-icons/fa";
11+
import { IoLogoJavascript } from "react-icons/io5";
12+
import { useColorMode } from "@docusaurus/theme-common";
1213

1314
// 🔹 Wrapper for icons to make them uniform
14-
const IconWrapper = ({icon, bg}) => (
15+
const IconWrapper = ({ icon, bg }) => (
1516
<div
1617
style={{
1718
width: "70px",
@@ -20,7 +21,7 @@ const IconWrapper = ({icon, bg}) => (
2021
alignItems: "center",
2122
justifyContent: "center",
2223
borderRadius: "50%",
23-
backgroundColor: bg || "#f3f4f6",
24+
backgroundColor: bg,
2425
boxShadow: "0 3px 6px rgba(0,0,0,0.1)",
2526
transition: "transform 0.2s ease",
2627
}}
@@ -30,7 +31,10 @@ const IconWrapper = ({icon, bg}) => (
3031
</div>
3132
);
3233

33-
export default function QuickstartFilter({defaultLanguage = null}) {
34+
export default function QuickstartFilter({ defaultLanguage = null }) {
35+
const { colorMode } = useColorMode();
36+
const isDark = colorMode === "dark";
37+
3438
// 👇 initialize with defaultLanguage if provided
3539
const [language, setLanguage] = useState(defaultLanguage);
3640
const [server, setServer] = useState(null);
@@ -42,6 +46,18 @@ export default function QuickstartFilter({defaultLanguage = null}) {
4246
);
4347
});
4448

49+
// Icon backgrounds for dark mode
50+
const darkIconBgs = {
51+
Go: "#223044",
52+
Python: "#243447",
53+
Java: "#392a2a",
54+
"JS/TS": "#3b3924",
55+
Rust: "#44392b",
56+
"C#": "#332e44",
57+
Local: "#44392b",
58+
Docker: "#233044",
59+
};
60+
4561
const languages = [
4662
{
4763
name: "Go",
@@ -88,8 +104,83 @@ export default function QuickstartFilter({defaultLanguage = null}) {
88104
},
89105
];
90106

107+
// ----- Styles -----
108+
const headingStyle = {
109+
textAlign: "left",
110+
marginLeft: "1rem",
111+
fontSize: "1.4rem",
112+
fontWeight: "600",
113+
color: isDark ? "#fff" : "#222",
114+
};
115+
116+
const serverContainer = {
117+
display: "flex",
118+
flexWrap: "wrap",
119+
gap: "1.5rem",
120+
justifyContent: "flex-start",
121+
marginTop: "1.5rem",
122+
marginLeft: "1rem",
123+
};
124+
125+
const stepContainer = {
126+
display: "flex",
127+
flexWrap: "wrap",
128+
gap: "1.5rem",
129+
marginLeft: "1rem",
130+
justifyContent: "flex-start",
131+
marginTop: "1.5rem",
132+
};
133+
134+
const buttonCard = {
135+
border: isDark
136+
? "2px solid #333"
137+
: "2px solid #ddd",
138+
borderRadius: "12px",
139+
padding: "1rem 2rem",
140+
cursor: "pointer",
141+
background: isDark ? "#222428" : "#fff",
142+
transition: "all 0.2s ease",
143+
textAlign: "center",
144+
display: "flex",
145+
flexDirection: "column",
146+
alignItems: "center",
147+
justifyContent: "center",
148+
gap: "0.5rem",
149+
color: isDark ? "#fff" : "#222",
150+
boxShadow: isDark
151+
? "0 2px 10px rgba(0,0,0,0.5)"
152+
: "0 2px 6px rgba(0, 0, 0, 0.08)",
153+
};
154+
155+
const gridContainer = {
156+
display: "grid",
157+
gap: "1.5rem",
158+
gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
159+
marginTop: "2rem",
160+
};
161+
162+
const cardStyle = {
163+
border: isDark ? "1px solid #333" : "1px solid #eee",
164+
borderRadius: "12px",
165+
padding: "1rem",
166+
background: isDark ? "#23272f" : "#fff",
167+
boxShadow: isDark
168+
? "0 2px 10px rgba(0,0,0,0.6)"
169+
: "0 2px 6px rgba(0, 0, 0, 0.08)",
170+
color: isDark ? "#fff" : "#222",
171+
};
172+
173+
const linkStyle = {
174+
marginTop: "0.8rem",
175+
display: "inline-block",
176+
color: "#f97316",
177+
fontWeight: "bold",
178+
textDecoration: "none",
179+
};
180+
181+
// ----- Render -----
91182
return (
92-
<div style={{marginTop: "2rem"}}>
183+
<div style={{ marginTop: "2rem" }}>
93184
{/* Language Selection */}
94185
<h2 style={headingStyle}>Choose your language</h2>
95186
<div style={stepContainer}>
@@ -100,21 +191,38 @@ export default function QuickstartFilter({defaultLanguage = null}) {
100191
style={{
101192
...buttonCard,
102193
border:
103-
language === lang.name ? "2px solid #f97316" : "2px solid #ddd",
194+
language === lang.name
195+
? "2px solid #f97316"
196+
: buttonCard.border,
104197
boxShadow:
105198
language === lang.name
106-
? "0 3px 8px rgba(249, 115, 22, 0.3)"
107-
: "none",
199+
? (isDark
200+
? "0 3px 12px rgba(249,115,22,0.2)"
201+
: "0 3px 8px rgba(249, 115, 22, 0.3)")
202+
: buttonCard.boxShadow,
108203
}}
109204
>
110-
<IconWrapper icon={lang.icon} bg={lang.bg} />
111-
<p style={{marginTop: "0.5rem", fontWeight: "500"}}>{lang.name}</p>
205+
<IconWrapper
206+
icon={lang.icon}
207+
bg={isDark ? (darkIconBgs[lang.name] || "#222") : lang.bg}
208+
/>
209+
<p
210+
style={{
211+
margin: 0,
212+
fontWeight: "500",
213+
color: isDark ? "#fff" : "#222",
214+
opacity: language === lang.name ? 1 : 0.7,
215+
transition: "color 0.2s, opacity 0.2s",
216+
}}
217+
>
218+
{lang.name}
219+
</p>
112220
</button>
113221
))}
114222
</div>
115223

116224
{/* Server Selection */}
117-
<h2 style={{...headingStyle, marginTop: "2rem"}}>
225+
<h2 style={{ ...headingStyle, marginTop: "2rem" }}>
118226
Where do you want to run the app server?
119227
</h2>
120228
<div style={serverContainer}>
@@ -125,33 +233,50 @@ export default function QuickstartFilter({defaultLanguage = null}) {
125233
style={{
126234
...buttonCard,
127235
border:
128-
server === srv.name ? "2px solid #f97316" : "2px solid #ddd",
236+
server === srv.name
237+
? "2px solid #f97316"
238+
: buttonCard.border,
129239
boxShadow:
130240
server === srv.name
131-
? "0 3px 8px rgba(249, 115, 22, 0.3)"
132-
: "none",
241+
? (isDark
242+
? "0 3px 12px rgba(249,115,22,0.2)"
243+
: "0 3px 8px rgba(249, 115, 22, 0.3)")
244+
: buttonCard.boxShadow,
133245
}}
134246
>
135-
<IconWrapper icon={srv.icon} bg={srv.bg} />
136-
<p style={{marginTop: "0.5rem", fontWeight: "500"}}>{srv.name}</p>
247+
<IconWrapper
248+
icon={srv.icon}
249+
bg={isDark ? (darkIconBgs[srv.name] || "#222") : srv.bg}
250+
/>
251+
<p
252+
style={{
253+
margin: 0,
254+
fontWeight: "500",
255+
color: isDark ? "#fff" : "#222",
256+
opacity: server === srv.name ? 1 : 0.7,
257+
transition: "color 0.2s, opacity 0.2s",
258+
}}
259+
>
260+
{srv.name}
261+
</p>
137262
</button>
138263
))}
139264
</div>
140265

141266
{/* Quickstarts */}
142267
{language && server && (
143268
<>
144-
<h2 style={{...headingStyle, marginTop: "2rem"}}>
269+
<h2 style={{ ...headingStyle, marginTop: "2rem" }}>
145270
✨ AI Suggested Sample Apps
146271
</h2>
147272
<div style={gridContainer}>
148273
{filteredQuickstarts.length > 0 ? (
149274
filteredQuickstarts.map((app, idx) => (
150275
<div key={idx} style={cardStyle}>
151-
<h3 style={{margin: "0 0 0.5rem 0", fontSize: "1.2rem"}}>
276+
<h3 style={{ margin: "0 0 0.5rem 0", fontSize: "1.2rem", color: isDark ? "#fff" : "#222" }}>
152277
{app.title}
153278
</h3>
154-
<p style={{color: "#555", fontSize: "0.95rem"}}>
279+
<p style={{ color: isDark ? "#ccc" : "#555", fontSize: "0.95rem" }}>
155280
{app.description}
156281
</p>
157282
<Link to={app.link} style={linkStyle}>
@@ -160,70 +285,11 @@ export default function QuickstartFilter({defaultLanguage = null}) {
160285
</div>
161286
))
162287
) : (
163-
<p>No quickstarts available for this selection.</p>
288+
<p style={{ color: isDark ? "#fff" : "#222" }}>No quickstarts available for this selection.</p>
164289
)}
165290
</div>
166291
</>
167292
)}
168293
</div>
169294
);
170-
}
171-
172-
// Styles
173-
const headingStyle = {
174-
textAlign: "left",
175-
marginLeft: "1rem",
176-
fontSize: "1.4rem",
177-
fontWeight: "600",
178-
};
179-
180-
const serverContainer = {
181-
display: "flex",
182-
flexWrap: "wrap",
183-
gap: "1.5rem",
184-
justifyContent: "flex-start",
185-
marginTop: "1.5rem",
186-
marginLeft: "1rem",
187-
};
188-
189-
const stepContainer = {
190-
display: "flex",
191-
flexWrap: "wrap",
192-
gap: "1.5rem",
193-
marginLeft: "1rem",
194-
justifyContent: "flex-start",
195-
marginTop: "1.5rem",
196-
};
197-
198-
const buttonCard = {
199-
border: "2px solid #ddd",
200-
borderRadius: "12px",
201-
padding: "1rem 2rem",
202-
cursor: "pointer",
203-
background: "#fff",
204-
transition: "all 0.2s ease",
205-
textAlign: "center",
206-
};
207-
208-
const gridContainer = {
209-
display: "grid",
210-
gap: "1.5rem",
211-
gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
212-
marginTop: "2rem",
213-
};
214-
215-
const cardStyle = {
216-
border: "1px solid #eee",
217-
borderRadius: "12px",
218-
padding: "1rem",
219-
background: "#fff",
220-
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.08)",
221-
};
222-
223-
const linkStyle = {
224-
marginTop: "0.8rem",
225-
display: "inline-block",
226-
color: "#f97316",
227-
fontWeight: "bold",
228-
textDecoration: "none",
229-
};
295+
}

0 commit comments

Comments
 (0)