Skip to content

Commit 5076265

Browse files
SamMorrowDrumsSamMorrowDrums
committed
style: use Primer CSS from CDN for OAuth pages
Use GitHub's official Primer design system via jsDelivr CDN instead of custom inline styles: - Link to @primer/css@22 from cdn.jsdelivr.net - Use Primer utility classes (Box, flash, color-fg-*, etc.) - Use Primer dark theme (data-color-mode="dark") - Proper Octicon markup from primer/octicons This ensures visual consistency with github.com and other GitHub products.
1 parent 6464002 commit 5076265

File tree

2 files changed

+30
-107
lines changed

2 files changed

+30
-107
lines changed

‎internal/oauth/templates/error.html‎

Lines changed: 15 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,25 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title>Authorization Failed</title>
7+
<link href="https://cdn.jsdelivr.net/npm/@primer/css@22/dist/primer.min.css" rel="stylesheet">
68
<style>
7-
body {
8-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
9-
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
10-
color: #e6edf3;
11-
min-height: 100vh;
12-
margin: 0;
13-
display: flex;
14-
align-items: center;
15-
justify-content: center;
16-
}
17-
.container {
18-
text-align: center;
19-
padding: 48px;
20-
background: #21262d;
21-
border-radius: 12px;
22-
border: 1px solid #30363d;
23-
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
24-
max-width: 400px;
25-
}
26-
.icon {
27-
width: 64px;
28-
height: 64px;
29-
margin-bottom: 24px;
30-
}
31-
h1 {
32-
color: #f85149;
33-
font-size: 24px;
34-
font-weight: 600;
35-
margin: 0 0 16px 0;
36-
}
37-
p {
38-
color: #8b949e;
39-
margin: 8px 0;
40-
line-height: 1.5;
41-
}
42-
.error {
43-
background: #21262d;
44-
border: 1px solid #f8514966;
45-
border-radius: 6px;
46-
padding: 12px;
47-
margin-top: 16px;
48-
font-family: monospace;
49-
font-size: 13px;
50-
color: #f85149;
51-
}
9+
html, body { height: 100%; }
10+
body { display: flex; align-items: center; justify-content: center; }
5211
</style>
5312
</head>
54-
<body>
55-
<div class="container">
56-
<svg class="icon" viewBox="0 0 24 24" fill="#e6edf3">
57-
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
58-
</svg>
59-
<h1>Authorization Failed</h1>
60-
<p class="error">{{.ErrorMessage}}</p>
61-
<p>You can close this window.</p>
13+
<body class="color-bg-default">
14+
<div class="Box color-shadow-medium p-6 text-center" style="max-width: 480px;">
15+
<svg class="octicon color-fg-default mb-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="64" height="64" fill="currentColor">
16+
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
17+
</svg>
18+
<h1 class="h2 color-fg-danger mb-3">Authorization Failed</h1>
19+
<div class="flash flash-error mt-4">
20+
<code class="f5">{{.ErrorMessage}}</code>
21+
</div>
22+
<p class="f4 color-fg-muted mt-4">You can close this window.</p>
6223
</div>
6324
</body>
6425
</html>

‎internal/oauth/templates/success.html‎

Lines changed: 15 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,25 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title>Authorization Successful</title>
7+
<link href="https://cdn.jsdelivr.net/npm/@primer/css@22/dist/primer.min.css" rel="stylesheet">
68
<style>
7-
body {
8-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
9-
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
10-
color: #e6edf3;
11-
min-height: 100vh;
12-
margin: 0;
13-
display: flex;
14-
align-items: center;
15-
justify-content: center;
16-
}
17-
.container {
18-
text-align: center;
19-
padding: 48px;
20-
background: #21262d;
21-
border-radius: 12px;
22-
border: 1px solid #30363d;
23-
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
24-
max-width: 400px;
25-
}
26-
.icon {
27-
width: 64px;
28-
height: 64px;
29-
margin-bottom: 24px;
30-
}
31-
h1 {
32-
color: #3fb950;
33-
font-size: 24px;
34-
font-weight: 600;
35-
margin: 0 0 16px 0;
36-
}
37-
p {
38-
color: #8b949e;
39-
margin: 8px 0;
40-
line-height: 1.5;
41-
}
42-
.hint {
43-
margin-top: 24px;
44-
padding: 12px;
45-
background: #161b22;
46-
border-radius: 6px;
47-
font-size: 14px;
48-
}
9+
html, body { height: 100%; }
10+
body { display: flex; align-items: center; justify-content: center; }
4911
</style>
5012
</head>
51-
<body>
52-
<div class="container">
53-
<svg class="icon" viewBox="0 0 24 24" fill="#e6edf3">
54-
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
55-
</svg>
56-
<h1>Authorization Successful</h1>
57-
<p>You have successfully authorized the GitHub MCP Server.</p>
58-
<div class="hint">
59-
<p>You can close this window and retry your request.</p>
60-
</div>
13+
<body class="color-bg-default">
14+
<div class="Box color-shadow-medium p-6 text-center" style="max-width: 480px;">
15+
<svg class="octicon color-fg-default mb-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="64" height="64" fill="currentColor">
16+
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
17+
</svg>
18+
<h1 class="h2 color-fg-success mb-3">Authorization Successful</h1>
19+
<p class="f4 color-fg-muted">You have successfully authorized the GitHub MCP Server.</p>
20+
<div class="flash mt-4">
21+
<p class="mb-0 f5">You can close this window and retry your request.</p>
22+
</div>
6123
</div>
6224
</body>
6325
</html>

0 commit comments

Comments
 (0)