Skip to content

Commit 8be5e39

Browse files
dannyrooseveltdannyroosevelt
committed
Dark mode styling
1 parent 064a246 commit 8be5e39

File tree

6 files changed

+138
-33
lines changed

6 files changed

+138
-33
lines changed

‎docs-v2/components/AccountConnectionDemo.jsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { useGlobalConnect } from "./GlobalConnectProvider";
44
import CodeBlock from "./CodeBlock";
5+
import { styles } from "../utils/componentStyles";
56

67
export default function AccountConnectionDemo() {
78
const {
@@ -15,18 +16,18 @@ export default function AccountConnectionDemo() {
1516
} = useGlobalConnect();
1617

1718
return (
18-
<div className="border rounded-md overflow-hidden mt-4">
19-
<div className="bg-gray-100 border-b px-4 py-2 font-medium text-sm">
19+
<div className={styles.container}>
20+
<div className={styles.header}>
2021
Connect an account from your frontend
2122
</div>
2223
<div className="p-4">
2324
<div className="mb-4">
2425
<label className="flex items-center mb-4">
25-
<span className="font-medium text-sm">App to connect:</span>
26+
<span className={styles.label}>App to connect:</span>
2627
<select
2728
value={appSlug}
2829
onChange={(e) => setAppSlug(e.target.value)}
29-
className="ml-2 p-1 border rounded text-sm"
30+
className={styles.select}
3031
>
3132
<option value="google_sheets">Google Sheets</option>
3233
<option value="github">GitHub</option>
@@ -47,22 +48,22 @@ export default function AccountConnectionDemo() {
4748
<button
4849
onClick={connectAccount}
4950
disabled={!tokenData}
50-
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors disabled:opacity-50 font-medium text-sm"
51+
className={styles.primaryButton}
5152
>
5253
Connect Account
5354
</button>
54-
{!tokenData && <p className="mt-2 text-sm text-gray-500"><a href="/docs/connect/managed-auth/quickstart/#generate-a-short-lived-token" className="font-semibold underline underline-offset-4 hover:decoration-2 decoration-brand/50">Generate a token above</a> in order to test the account connection flow</p>}
55+
{!tokenData && <p className={`mt-2 ${styles.text.muted}`}><a href="/docs/connect/managed-auth/quickstart/#generate-a-short-lived-token" className="font-semibold underline underline-offset-4 hover:decoration-2 decoration-brand/50">Generate a token above</a> in order to test the account connection flow</p>}
5556
</div>
5657

5758
{error && (
58-
<div className="mt-4 p-3 bg-red-50 border border-red-200 text-red-800 rounded-md">
59+
<div className={styles.statusBox.error}>
5960
<div className="font-medium text-sm">Error</div>
6061
<div className="mt-1 text-sm">{error}</div>
6162
</div>
6263
)}
6364

6465
{connectedAccount && (
65-
<div className="mt-4 p-3 bg-green-50 border border-green-200 text-green-800 rounded-md">
66+
<div className={styles.statusBox.success}>
6667
<div className="font-medium text-sm">Successfully connected your {appSlug} account!</div>
6768
<div className="mt-4 text-sm">
6869
{connectedAccount.loading

‎docs-v2/components/CodeBlock.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import {
44
useState, useEffect,
55
} from "react";
6-
import "prismjs/themes/prism.css";
6+
// We don't need the default Prism CSS as we're using our custom CSS
7+
// import "prismjs/themes/prism.css";
78

89
// We'll dynamically import Prism on the client side only
910
let Prism;
@@ -68,11 +69,11 @@ export default function CodeBlock({
6869

6970
return (
7071
<div className={`relative group ${className}`}>
71-
<pre className="overflow-x-auto rounded-lg font-medium border border-gray-200 bg-gray-50 p-4 text-[13px] leading-relaxed mb-0">
72+
<pre className="overflow-x-auto rounded-lg font-medium border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 p-4 text-[13px] leading-relaxed mb-0">
7273
<div className="absolute top-2 right-2 z-10">
7374
<button
7475
onClick={copyToClipboard}
75-
className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 rounded-md bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 hover:text-gray-700 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
76+
className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 rounded-md bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-300 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
7677
aria-label={copied
7778
? "Copied"
7879
: "Copy code"}
@@ -93,14 +94,14 @@ export default function CodeBlock({
9394
{isClient
9495
? (
9596
<code
96-
className={`language-${language} text-gray-800`}
97+
className={`language-${language} text-gray-800 dark:text-gray-200 [text-shadow:none]`}
9798
dangerouslySetInnerHTML={{
9899
__html: highlightedCode,
99100
}}
100101
/>
101102
)
102103
: (
103-
<code className={`language-${language} text-gray-800`}>{code}</code>
104+
<code className={`language-${language} text-gray-800 dark:text-gray-200 [text-shadow:none]`}>{code}</code>
104105
)}
105106
</pre>
106107
</div>

‎docs-v2/components/ConnectLinkDemo.jsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
useEffect,
66
} from "react";
77
import { useGlobalConnect } from "./GlobalConnectProvider";
8+
import { styles } from "../utils/componentStyles";
89

910
export default function ConnectLinkDemo() {
1011
const {
@@ -38,8 +39,8 @@ export default function ConnectLinkDemo() {
3839
// No token data or connect_link_url - need to generate a token
3940
if (!tokenData?.connect_link_url) {
4041
return (
41-
<div className="border border-gray-200 rounded-md p-4 mt-4">
42-
<p className="text-sm text-gray-500">
42+
<div className={`${styles.container} p-4`}>
43+
<p className={styles.text.muted}>
4344
<a href="/docs/connect/managed-auth/quickstart/#generate-a-short-lived-token" className="font-semibold underline underline-offset-4 hover:decoration-2 decoration-brand/50">Generate a token above</a>
4445
{" "} to see a Connect Link URL here
4546
</p>
@@ -48,18 +49,18 @@ export default function ConnectLinkDemo() {
4849
}
4950

5051
return (
51-
<div className="border rounded-md overflow-hidden mt-4">
52-
<div className="bg-gray-100 border-b px-4 py-2 font-medium text-sm">
52+
<div className={styles.container}>
53+
<div className={styles.header}>
5354
Connect Link URL
5455
</div>
5556
<div className="p-4">
5657
<div className="mb-4">
5758
<label className="flex items-center mb-4">
58-
<span className="font-medium text-sm">App to connect:</span>
59+
<span className={styles.label}>App to connect:</span>
5960
<select
6061
value={appSlug}
6162
onChange={(e) => setAppSlug(e.target.value)}
62-
className="ml-2 p-1 border rounded text-sm"
63+
className={styles.select}
6364
>
6465
<option value="slack">Slack</option>
6566
<option value="github">GitHub</option>
@@ -68,8 +69,8 @@ export default function ConnectLinkDemo() {
6869
</label>
6970

7071
<div className="mb-4">
71-
<div className="p-3 bg-gray-50 border border-gray-200 rounded-md">
72-
<code className="text-sm break-all">{connectLinkUrl}</code>
72+
<div className={styles.codeDisplay}>
73+
<code className={styles.codeText}>{connectLinkUrl}</code>
7374
</div>
7475
</div>
7576
</div>
@@ -79,7 +80,7 @@ export default function ConnectLinkDemo() {
7980
href={connectLinkUrl}
8081
target="_blank"
8182
rel="noopener noreferrer"
82-
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors disabled:opacity-50 font-medium text-sm inline-flex items-center"
83+
className={`${styles.primaryButton} inline-flex items-center`}
8384
>
8485
Open Connect Link
8586
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -91,7 +92,7 @@ export default function ConnectLinkDemo() {
9192
onClick={() => {
9293
navigator.clipboard.writeText(connectLinkUrl);
9394
}}
94-
className="px-4 py-2 bg-gray-100 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-200 transition-colors font-medium text-sm inline-flex items-center"
95+
className={styles.secondaryButton}
9596
>
9697
Copy URL
9798
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -100,14 +101,14 @@ export default function ConnectLinkDemo() {
100101
</button>
101102
</div>
102103

103-
<div className="mt-4 text-sm text-gray-600">
104+
<div className={`mt-4 ${styles.text.normal}`}>
104105
<p>
105106
This URL contains a Connect Token that expires in 4 hours
106-
<strong> or after it&apos;s used once</strong>.
107+
<strong className={styles.text.strong}> or after it&apos;s used once</strong>.
107108
You can send this link to your users via email, SMS, or chat.
108109
</p>
109-
<p className="mt-2 text-xs text-gray-500">
110-
<strong>Note:</strong> Connect tokens are single-use. After a successful connection,
110+
<p className={`mt-2 ${styles.text.small}`}>
111+
<strong className={styles.text.strongMuted}>Note:</strong> Connect tokens are single-use. After a successful connection,
111112
you&apos;ll need to generate a new token.
112113
</p>
113114
</div>

‎docs-v2/components/TokenGenerationDemo.jsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { useGlobalConnect } from "./GlobalConnectProvider";
44
import CodeBlock from "./CodeBlock";
5+
import { styles } from "../utils/componentStyles";
56

67
export default function TokenGenerationDemo() {
78
const {
@@ -13,15 +14,15 @@ export default function TokenGenerationDemo() {
1314
} = useGlobalConnect();
1415

1516
return (
16-
<div className="border rounded-md overflow-hidden mt-4">
17-
<div className="bg-gray-100 border-b px-4 py-2 font-medium text-sm">
17+
<div className={styles.container}>
18+
<div className={styles.header}>
1819
Generate a Connect Token from your server
1920
</div>
2021
<div className="p-4">
2122
<div className="mb-3">
2223
<div className="flex items-center mb-4">
23-
<span className="font-medium text-sm">External User ID:</span>
24-
<code className="ml-2 px-2 py-1 bg-gray-100 rounded text-sm">{externalUserId}</code>
24+
<span className={styles.label}>External User ID:</span>
25+
<code className={`ml-2 px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded text-sm ${styles.text.strong}`}>{externalUserId}</code>
2526
</div>
2627
<div className="mb-4">
2728
<div className="border border-blue-100 rounded-lg overflow-hidden">
@@ -34,7 +35,7 @@ export default function TokenGenerationDemo() {
3435
<button
3536
onClick={generateToken}
3637
disabled={tokenLoading}
37-
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors disabled:opacity-50 font-medium text-sm"
38+
className={styles.primaryButton}
3839
>
3940
{tokenLoading
4041
? "Generating..."
@@ -44,7 +45,7 @@ export default function TokenGenerationDemo() {
4445

4546
{tokenData && (
4647
<div className="mt-4">
47-
<div className="text-sm mb-2 font-medium">Response:</div>
48+
<div className={`text-sm mb-2 font-medium ${styles.text.strong}`}>Response:</div>
4849
<div className="border border-green-200 rounded-lg overflow-hidden">
4950
<CodeBlock
5051
code={JSON.stringify(tokenData, null, 2)}

‎docs-v2/styles/prism-custom.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,15 @@ pre[class*="language-"] {
1818
-moz-hyphens: none;
1919
-ms-hyphens: none;
2020
hyphens: none;
21+
text-shadow: none !important;
22+
}
23+
24+
/* Dark mode overrides */
25+
html.dark code[class*="language-"],
26+
html.dark pre[class*="language-"] {
27+
color: #e0e0e0;
28+
background: none;
29+
text-shadow: none !important;
2130
}
2231

2332
.token.comment,
@@ -79,6 +88,62 @@ pre[class*="language-"] {
7988
color: #e90;
8089
}
8190

91+
/* Dark mode token styles */
92+
html.dark .token.comment,
93+
html.dark .token.prolog,
94+
html.dark .token.doctype,
95+
html.dark .token.cdata {
96+
color: #8b9cb3;
97+
}
98+
99+
html.dark .token.punctuation {
100+
color: #bbb;
101+
}
102+
103+
html.dark .token.property,
104+
html.dark .token.tag,
105+
html.dark .token.boolean,
106+
html.dark .token.number,
107+
html.dark .token.constant,
108+
html.dark .token.symbol,
109+
html.dark .token.deleted {
110+
color: #f76d82;
111+
}
112+
113+
html.dark .token.selector,
114+
html.dark .token.attr-name,
115+
html.dark .token.string,
116+
html.dark .token.char,
117+
html.dark .token.builtin,
118+
html.dark .token.inserted {
119+
color: #a5d6a7;
120+
}
121+
122+
html.dark .token.operator,
123+
html.dark .token.entity,
124+
html.dark .token.url,
125+
html.dark .language-css .token.string,
126+
html.dark .style .token.string {
127+
color: #e6c07b;
128+
}
129+
130+
html.dark .token.atrule,
131+
html.dark .token.attr-value,
132+
html.dark .token.keyword {
133+
color: #61afef;
134+
}
135+
136+
html.dark .token.function,
137+
html.dark .token.class-name {
138+
color: #f06292;
139+
}
140+
141+
html.dark .token.regex,
142+
html.dark .token.important,
143+
html.dark .token.variable {
144+
color: #ffb74d;
145+
}
146+
82147
.token.important,
83148
.token.bold {
84149
font-weight: bold;

‎docs-v2/utils/componentStyles.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// Shared component style utilities for Connect demo components
2+
3+
export const styles = {
4+
// Container styles
5+
container: "border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden mt-4",
6+
7+
// Header styles
8+
header: "bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-2 font-medium text-sm text-gray-800 dark:text-gray-200",
9+
10+
// Form control styles
11+
label: "font-medium text-sm text-gray-800 dark:text-gray-200",
12+
select: "ml-2 p-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200",
13+
14+
// Button styles
15+
primaryButton: "px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors disabled:opacity-50 font-medium text-sm",
16+
secondaryButton: "px-4 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors font-medium text-sm inline-flex items-center",
17+
18+
// Code display
19+
codeDisplay: "p-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md",
20+
codeText: "text-sm break-all text-gray-800 dark:text-gray-200",
21+
22+
// Text styles
23+
text: {
24+
normal: "text-sm text-gray-600 dark:text-gray-400",
25+
muted: "text-sm text-gray-500 dark:text-gray-400",
26+
small: "text-xs text-gray-500 dark:text-gray-400",
27+
strong: "text-gray-800 dark:text-gray-200",
28+
strongMuted: "text-gray-700 dark:text-gray-300",
29+
},
30+
31+
// Status messages
32+
statusBox: {
33+
error: "mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-400 rounded-md",
34+
success: "mt-4 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-400 rounded-md",
35+
},
36+
};

0 commit comments

Comments
 (0)