Skip to content

Commit cc0c6b8

Browse files
PVeazie951PVeazie951
authored
Merge pull request #30 from oslabs-beta/feature/configure-chat-ui
fix: UI legibility with styling
2 parents a5a44b3 + d562350 commit cc0c6b8

File tree

8 files changed

+143
-237
lines changed

8 files changed

+143
-237
lines changed

‎client/src/App.tsx‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// src/App.tsx
2-
import { BrowserRouter, Routes, Route, Navigate, Link } from "react-router-dom";
2+
import { BrowserRouter, Routes, Route, Navigate, Link, useLocation } from "react-router-dom";
33
import ConnectPage from "./pages/ConnectPage";
44
import ConfigurePage from "./pages/ConfigurePage";
55
import SecretsPage from "./pages/SecretsPage";
@@ -8,42 +8,59 @@ import Jenkins from "./routes/Jenkins";
88
import { useRepoStore } from "./store/useRepoStore";
99
import { usePipelineStore } from "./store/usePipelineStore";
1010

11-
// (optional) ShadCN test
12-
// import { Button } from "@/components/ui/button";
13-
1411
function NeedRepo({ children }: { children: JSX.Element }) {
1512
const { repo, branch } = useRepoStore();
1613
return !repo || !branch ? <Navigate to="/connect" replace /> : children;
1714
}
1815
function NeedPipeline({ children }: { children: JSX.Element }) {
1916
const { result } = usePipelineStore();
20-
const hasYaml =
21-
result?.generated_yaml || result?.yaml || result?.data?.generated_yaml;
17+
const hasYaml = result?.generated_yaml || result?.yaml || result?.data?.generated_yaml;
2218
return !hasYaml ? <Navigate to="/configure" replace /> : children;
2319
}
2420

21+
// optional: simple active-link helper
22+
function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
23+
const { pathname } = useLocation();
24+
const active = pathname.startsWith(to);
25+
return (
26+
<Link
27+
to={to}
28+
className={
29+
"transition-colors " +
30+
(active
31+
? "text-white"
32+
: "text-slate-200/80 hover:text-white")
33+
}
34+
>
35+
{children}
36+
</Link>
37+
);
38+
}
39+
2540
export default function App() {
2641
return (
27-
<div className="relative min-h-screen text-white overflow-hidden">
28-
{/* Base gradient (covers entire viewport) */}
29-
<div className="fixed inset-0 -z-10 bg-gradient-to-br from-slate-900 via-slate-800 to-gray-900" />
30-
{/* Frosted glass overlay */}
31-
<div className="fixed inset-0 -z-10 bg-white/10 backdrop-blur-3xl" />
42+
<div className="relative min-h-screen text-slate-100 overflow-hidden">
43+
{/* Base gradient */}
44+
<div className="fixed inset-0 -z-20 bg-gradient-to-br from-slate-900 via-slate-800 to-gray-900" />
45+
{/* Subtle dark veil for contrast */}
46+
<div className="fixed inset-0 -z-10 bg-black/20" />
47+
{/* Frosted glass shimmer – IMPORTANT: pointer-events-none so it never blocks clicks */}
48+
<div className="fixed inset-0 -z-10 bg-white/10 backdrop-blur-3xl pointer-events-none" />
3249

3350
{/* App content above blur */}
3451
<div className="relative z-10">
3552
<BrowserRouter>
3653
<header className="border-b border-white/15 px-4 py-3 bg-white/5 backdrop-blur">
3754
<nav className="flex gap-5 text-sm">
38-
<Link className="text-white/80 hover:text-white" to="/connect">1 Connect</Link>
39-
<Link className="text-white/80 hover:text-white" to="/configure">2 Configure</Link>
40-
<Link className="text-white/80 hover:text-white" to="/secrets">3 Secrets</Link>
41-
<Link className="text-white/80 hover:text-white" to="/dashboard">4 Dashboard</Link>
42-
<Link className="text-white/80 hover:text-white" to="/jenkins">5 Jenkins</Link>
43-
</nav>
55+
<NavLink to="/connect">1 Connect</NavLink>
56+
<NavLink to="/configure">2 Configure</NavLink>
57+
<NavLink to="/secrets">3 Secrets</NavLink>
58+
<NavLink to="/dashboard">4 Dashboard</NavLink>
59+
<NavLink to="/jenkins">5 Jenkins</NavLink>
60+
</nav>
4461
</header>
4562

46-
<main className="p-4 max-w-[960px] mx-auto">
63+
<main className="p-4 md:p-6 max-w-[960px] mx-auto">
4764
<Routes>
4865
<Route path="/" element={<Navigate to="/connect" replace />} />
4966
<Route path="/connect" element={<ConnectPage />} />

‎client/src/components/ui/Button.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,16 @@ const buttonVariants = cva(
1919
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
2020
ghost: "hover:bg-accent hover:text-accent-foreground",
2121
link: "text-primary underline-offset-4 hover:underline",
22+
23+
// ✅ Glass (matches Connect page look)
24+
glass:
25+
"border border-white/30 bg-white/10 text-slate-100 " +
26+
"hover:bg-white/20 backdrop-blur-md shadow-glass",
27+
28+
// optional: a slightly stronger white version for primary actions
29+
glassSolid:
30+
"border border-white/40 bg-white/20 text-slate-900 " +
31+
"hover:bg-white/30 backdrop-blur-md shadow-glass",
2232
},
2333
size: {
2434
default: "h-9 px-4 py-2",

‎client/src/components/ui/GlassButton.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export function GlassButton({ children, onClick }: any) {
2+
return (
3+
<button
4+
onClick={onClick}
5+
className="px-4 py-2 rounded-lg border border-white/30
6+
bg-white/10 backdrop-blur-md text-slate-100
7+
hover:bg-white/20 hover:shadow-glass
8+
transition-all duration-300"
9+
>
10+
{children}
11+
</button>
12+
);
13+
}

‎client/src/index.css‎

Lines changed: 42 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -1,195 +1,57 @@
1+
/* 1️⃣ Import Tailwind */
12
@import "tailwindcss";
2-
@plugin "tailwindcss-animate";
33

4-
@custom-variant dark (&:is(.dark *));
4+
/* 2️⃣ Import Satoshi font from Fontshare */
5+
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");
56

6-
@tailwind base;
7-
@tailwind components;
8-
@tailwind utilities;
7+
/* 3️⃣ Define theme variables (font + glass shadow) */
8+
@theme {
9+
--font-sans: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont,
10+
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
911

10-
/* src/index.css */
11-
html, body, #root { height: 100%; }
12-
body { background: transparent; }
13-
14-
15-
/* :root {
16-
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
17-
line-height: 1.5;
18-
font-weight: 400;
19-
20-
color-scheme: light dark;
21-
color: rgba(255, 255, 255, 0.87);
22-
background-color: #242424;
23-
24-
font-synthesis: none;
25-
text-rendering: optimizeLegibility;
26-
-webkit-font-smoothing: antialiased;
27-
-moz-osx-font-smoothing: grayscale;
28-
--radius: 0.625rem;
29-
--background: oklch(1 0 0);
30-
--foreground: oklch(0.13 0.028 261.692);
31-
--card: oklch(1 0 0);
32-
--card-foreground: oklch(0.13 0.028 261.692);
33-
--popover: oklch(1 0 0);
34-
--popover-foreground: oklch(0.13 0.028 261.692);
35-
--primary: oklch(0.21 0.034 264.665);
36-
--primary-foreground: oklch(0.985 0.002 247.839);
37-
--secondary: oklch(0.967 0.003 264.542);
38-
--secondary-foreground: oklch(0.21 0.034 264.665);
39-
--muted: oklch(0.967 0.003 264.542);
40-
--muted-foreground: oklch(0.551 0.027 264.364);
41-
--accent: oklch(0.967 0.003 264.542);
42-
--accent-foreground: oklch(0.21 0.034 264.665);
43-
--destructive: oklch(0.577 0.245 27.325);
44-
--border: oklch(0.928 0.006 264.531);
45-
--input: oklch(0.928 0.006 264.531);
46-
--ring: oklch(0.707 0.022 261.325);
47-
--chart-1: oklch(0.646 0.222 41.116);
48-
--chart-2: oklch(0.6 0.118 184.704);
49-
--chart-3: oklch(0.398 0.07 227.392);
50-
--chart-4: oklch(0.828 0.189 84.429);
51-
--chart-5: oklch(0.769 0.188 70.08);
52-
--sidebar: oklch(0.985 0.002 247.839);
53-
--sidebar-foreground: oklch(0.13 0.028 261.692);
54-
--sidebar-primary: oklch(0.21 0.034 264.665);
55-
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
56-
--sidebar-accent: oklch(0.967 0.003 264.542);
57-
--sidebar-accent-foreground: oklch(0.21 0.034 264.665);
58-
--sidebar-border: oklch(0.928 0.006 264.531);
59-
--sidebar-ring: oklch(0.707 0.022 261.325);
12+
--shadow-glass: 0 12px 40px rgba(0, 0, 0, 0.35);
6013
}
6114

62-
a {
63-
font-weight: 500;
64-
color: #646cff;
65-
text-decoration: inherit;
66-
}
67-
a:hover {
68-
color: #535bf2;
69-
}
15+
/* 4️⃣ Base styles that apply globally */
16+
@layer base {
17+
html {
18+
font-size: 19px; /* slightly larger base */
19+
}
7020

71-
body {
72-
margin: 0;
73-
display: flex;
74-
place-items: center;
75-
min-width: 320px;
76-
min-height: 100vh;
77-
}
21+
body {
22+
@apply font-sans antialiased text-slate-100 bg-transparent selection:bg-white/20;
23+
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
24+
}
7825

79-
h1 {
80-
font-size: 3.2em;
81-
line-height: 1.1;
26+
/* ✨ Ensure all inputs, selects, and buttons use white text */
27+
input, select, textarea, button {
28+
@apply text-slate-100 placeholder:text-slate-400;
29+
}
8230
}
8331

84-
button {
85-
border-radius: 8px;
86-
border: 1px solid transparent;
87-
padding: 0.6em 1.2em;
88-
font-size: 1em;
89-
font-weight: 500;
90-
font-family: inherit;
91-
background-color: #1a1a1a;
92-
cursor: pointer;
93-
transition: border-color 0.25s;
94-
}
95-
button:hover {
96-
border-color: #646cff;
97-
}
98-
button:focus,
99-
button:focus-visible {
100-
outline: 4px auto -webkit-focus-ring-color;
101-
}
10232

103-
@media (prefers-color-scheme: light) {
104-
:root {
105-
color: #213547;
106-
background-color: #ffffff;
107-
}
108-
a:hover {
109-
color: #747bff;
110-
}
111-
button {
112-
background-color: #f9f9f9;
113-
}
114-
}
11533

116-
@theme inline {
117-
--radius-sm: calc(var(--radius) - 4px);
118-
--radius-md: calc(var(--radius) - 2px);
119-
--radius-lg: var(--radius);
120-
--radius-xl: calc(var(--radius) + 4px);
121-
--color-background: var(--background);
122-
--color-foreground: var(--foreground);
123-
--color-card: var(--card);
124-
--color-card-foreground: var(--card-foreground);
125-
--color-popover: var(--popover);
126-
--color-popover-foreground: var(--popover-foreground);
127-
--color-primary: var(--primary);
128-
--color-primary-foreground: var(--primary-foreground);
129-
--color-secondary: var(--secondary);
130-
--color-secondary-foreground: var(--secondary-foreground);
131-
--color-muted: var(--muted);
132-
--color-muted-foreground: var(--muted-foreground);
133-
--color-accent: var(--accent);
134-
--color-accent-foreground: var(--accent-foreground);
135-
--color-destructive: var(--destructive);
136-
--color-border: var(--border);
137-
--color-input: var(--input);
138-
--color-ring: var(--ring);
139-
--color-chart-1: var(--chart-1);
140-
--color-chart-2: var(--chart-2);
141-
--color-chart-3: var(--chart-3);
142-
--color-chart-4: var(--chart-4);
143-
--color-chart-5: var(--chart-5);
144-
--color-sidebar: var(--sidebar);
145-
--color-sidebar-foreground: var(--sidebar-foreground);
146-
--color-sidebar-primary: var(--sidebar-primary);
147-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
148-
--color-sidebar-accent: var(--sidebar-accent);
149-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
150-
--color-sidebar-border: var(--sidebar-border);
151-
--color-sidebar-ring: var(--sidebar-ring);
152-
}
15334

154-
.dark {
155-
--background: oklch(0.13 0.028 261.692);
156-
--foreground: oklch(0.985 0.002 247.839);
157-
--card: oklch(0.21 0.034 264.665);
158-
--card-foreground: oklch(0.985 0.002 247.839);
159-
--popover: oklch(0.21 0.034 264.665);
160-
--popover-foreground: oklch(0.985 0.002 247.839);
161-
--primary: oklch(0.928 0.006 264.531);
162-
--primary-foreground: oklch(0.21 0.034 264.665);
163-
--secondary: oklch(0.278 0.033 256.848);
164-
--secondary-foreground: oklch(0.985 0.002 247.839);
165-
--muted: oklch(0.278 0.033 256.848);
166-
--muted-foreground: oklch(0.707 0.022 261.325);
167-
--accent: oklch(0.278 0.033 256.848);
168-
--accent-foreground: oklch(0.985 0.002 247.839);
169-
--destructive: oklch(0.704 0.191 22.216);
170-
--border: oklch(1 0 0 / 10%);
171-
--input: oklch(1 0 0 / 15%);
172-
--ring: oklch(0.551 0.027 264.364);
173-
--chart-1: oklch(0.488 0.243 264.376);
174-
--chart-2: oklch(0.696 0.17 162.48);
175-
--chart-3: oklch(0.769 0.188 70.08);
176-
--chart-4: oklch(0.627 0.265 303.9);
177-
--chart-5: oklch(0.645 0.246 16.439);
178-
--sidebar: oklch(0.21 0.034 264.665);
179-
--sidebar-foreground: oklch(0.985 0.002 247.839);
180-
--sidebar-primary: oklch(0.488 0.243 264.376);
181-
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
182-
--sidebar-accent: oklch(0.278 0.033 256.848);
183-
--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
184-
--sidebar-border: oklch(1 0 0 / 10%);
185-
--sidebar-ring: oklch(0.551 0.027 264.364);
35+
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
36+
37+
@import "tailwindcss";
38+
@plugin "tailwindcss-animate";
39+
40+
41+
42+
/* Global font + smoothing */
43+
/* html,
44+
body {
45+
@apply font-sans antialiased text-slate-100;
46+
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
47+
Roboto, Helvetica, Arial, sans-serif;
18648
}
18749
188-
@layer base {
189-
* {
190-
@apply border-border outline-ring/50;
191-
}
192-
body {
193-
@apply bg-background text-foreground;
194-
}
195-
} */
50+
@custom-variant dark (&:is(.dark *));
51+
52+
@tailwind base;
53+
@tailwind components;
54+
@tailwind utilities;
55+
56+
html, body, #root { height: 100%; }
57+
body { background: transparent; } */

‎client/src/lib/ai.ts‎

Whitespace-only changes.

0 commit comments

Comments
 (0)