josh/TicketingSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Retheme UI from blue to neutral zinc backgrounds with indigo accents
Build & Push / Test (client) (push) Successful in 33s
Details
Build & Push / Test (server) (push) Successful in 25s
Details
Build & Push / Build Client (push) Successful in 42s
Details
Build & Push / Build Server (push) Successful in 1m5s
Details

Browse Source 
Removes the blue tint from all dark-mode surfaces by switching CSS
variables to zinc-based neutrals, and replaces decorative blue classes
with indigo across buttons, focus rings, tabs, and links. Semantic blue
(severity badges, status badges, role badges, timeline markers) is
preserved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Wright
2026-04-21 13:29:50 -04:00
parent f98930b54f
commit a9bf332369
9 changed files with 60 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#2563eb" />
<meta name="theme-color" content="#4f46e5" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/icon.svg" />
client/src/components/CTISelect.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export default function CTISelect({ value, onChange, disabled }: CTISelectProps)
};
const selectClass =
'block w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed';
'block w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed';
return (
<div className="grid grid-cols-3 gap-3">
client/src/index.css
+35 -35
View File
@@ -5,70 +5,70 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--popover-foreground: 240 10% 3.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--primary: 263 70% 50.4%;
--primary-foreground: 0 0% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--destructive-foreground: 0 0% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 263 70% 50.4%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--primary: 263 70% 50.4%;
--primary-foreground: 0 0% 98%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--destructive-foreground: 0 0% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 263 70% 50.4%;
}
}
/* Native select dark option styling */
select option {
background-color: #1f2937;
background-color: #27272a;
color: #f3f4f6;
}
@@ -96,7 +96,7 @@ select option {
@apply mt-1 mb-0;
}
.prose a {
@apply text-blue-400 underline hover:text-blue-300;
@apply text-indigo-400 underline hover:text-indigo-300;
}
.prose strong {
@apply font-semibold;
client/src/pages/Login.tsx
+2 -2
View File
@@ -30,7 +30,7 @@ export default function Login() {
};
const inputClass =
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent';
return (
<div className="min-h-screen bg-gray-950 flex items-center justify-center px-4">
@@ -70,7 +70,7 @@ export default function Login() {
<button
type="submit"
disabled={isSubmitting}
className="w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
className="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 disabled:opacity-50 transition-colors"
>
{isSubmitting ? 'Signing in...' : 'Sign in'}
</button>
client/src/pages/MyTickets.tsx
+2 -2
View File
@@ -39,7 +39,7 @@ export default function MyTickets() {
<Link
key={ticket.id}
to={`/${ticket.displayId}`}
className="flex items-center gap-4 bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 hover:border-blue-500/50 transition-all group"
className="flex items-center gap-4 bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 hover:border-indigo-500/50 transition-all group"
>
<div
className={`w-1 self-stretch rounded-full flex-shrink-0 ${
@@ -66,7 +66,7 @@ export default function MyTickets() {
{ticket.category.name} › {ticket.type.name} › {ticket.item.name}
</span>
</div>
<p className="text-sm font-medium text-gray-200 truncate group-hover:text-blue-400">
<p className="text-sm font-medium text-gray-200 truncate group-hover:text-indigo-400">
{ticket.title}
</p>
</div>
client/src/pages/NewTicket.tsx
+2 -2
View File
@@ -49,7 +49,7 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
};
const inputClass =
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent';
const labelClass = 'block text-sm font-medium text-gray-300 mb-1';
const errorClass = 'mt-1 text-xs text-red-400';
@@ -162,7 +162,7 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
<button
type="submit"
disabled={isSubmitting}
className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
>
{isSubmitting ? 'Creating...' : 'Create Ticket'}
</button>
client/src/pages/TicketDetail.tsx
+7 -7
View File
@@ -291,7 +291,7 @@ export default function TicketDetail() {
type="text"
value={editForm.title}
onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
className="w-full text-2xl font-bold text-gray-100 bg-transparent border-0 border-b-2 border-blue-500 focus:outline-none pb-1"
className="w-full text-2xl font-bold text-gray-100 bg-transparent border-0 border-b-2 border-indigo-500 focus:outline-none pb-1"
autoFocus
/>
) : (
@@ -319,7 +319,7 @@ export default function TicketDetail() {
onClick={() => setTab(key)}
className={`flex items-center gap-2 px-4 py-3.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
tab === key
? 'border-blue-500 text-blue-400'
? 'border-indigo-500 text-indigo-400'
: 'border-transparent text-gray-500 hover:text-gray-300'
}`}
>
@@ -338,7 +338,7 @@ export default function TicketDetail() {
value={editForm.overview}
onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
rows={12}
className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-y font-mono"
className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-y font-mono"
/>
<div className="flex justify-end gap-2">
<button
@@ -349,7 +349,7 @@ export default function TicketDetail() {
</button>
<button
onClick={saveEdit}
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
>
<Check size={13} /> Save changes
</button>
@@ -426,7 +426,7 @@ export default function TicketDetail() {
onClick={() => setPreview(label === 'Preview')}
className={`text-xs py-2 border-b-2 -mb-px transition-colors ${
(label === 'Preview') === preview
? 'border-blue-500 text-blue-400'
? 'border-indigo-500 text-indigo-400'
: 'border-transparent text-gray-500 hover:text-gray-300'
}`}
>
@@ -468,7 +468,7 @@ export default function TicketDetail() {
<button
type="submit"
disabled={addComment.isPending || !commentBody.trim()}
className="flex items-center gap-2 px-4 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
className="flex items-center gap-2 px-4 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
>
<Send size={13} />
Comment
@@ -783,7 +783,7 @@ export default function TicketDetail() {
<button
onClick={saveReroute}
disabled={!pendingCTI.itemId}
className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
>
Save routing
</button>
client/src/pages/admin/CTI.tsx
+6 -6
View File
@@ -131,7 +131,7 @@ export default function AdminCTI() {
const itemClass = (active: boolean) =>
`flex items-center justify-between px-4 py-2.5 cursor-pointer group transition-colors ${
active
? 'bg-blue-600/20 border-l-2 border-blue-500'
? 'bg-indigo-600/20 border-l-2 border-indigo-500'
: 'hover:bg-gray-800 border-l-2 border-transparent'
}`;
@@ -144,7 +144,7 @@ export default function AdminCTI() {
<h3 className="text-sm font-semibold text-gray-300">Categories</h3>
<button
onClick={() => openAdd('category')}
className="text-blue-400 hover:text-blue-300 transition-colors"
className="text-indigo-400 hover:text-indigo-300 transition-colors"
>
<Plus size={16} />
</button>
@@ -199,7 +199,7 @@ export default function AdminCTI() {
{selectedCategory && (
<button
onClick={() => openAdd('type')}
className="text-blue-400 hover:text-blue-300 transition-colors"
className="text-indigo-400 hover:text-indigo-300 transition-colors"
>
<Plus size={16} />
</button>
@@ -257,7 +257,7 @@ export default function AdminCTI() {
{selectedType && (
<button
onClick={() => openAdd('item')}
className="text-blue-400 hover:text-blue-300 transition-colors"
className="text-indigo-400 hover:text-indigo-300 transition-colors"
>
<Plus size={16} />
</button>
@@ -314,7 +314,7 @@ export default function AdminCTI() {
onChange={(e) => setNameValue(e.target.value)}
required
autoFocus
className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
/>
</div>
<div className="flex justify-end gap-3">
@@ -328,7 +328,7 @@ export default function AdminCTI() {
<button
type="submit"
disabled={submitting}
className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
>
{submitting ? 'Saving...' : 'Save'}
</button>
client/src/pages/admin/Users.tsx
+4 -4
View File
@@ -174,7 +174,7 @@ export default function AdminUsers() {
};
const inputClass =
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
'w-full bg-gray-800 border border-gray-700 text-gray-100 placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent';
const labelClass = 'block text-sm font-medium text-gray-300 mb-1';
return (
@@ -183,7 +183,7 @@ export default function AdminUsers() {
action={
<button
onClick={openAdd}
className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors"
className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition-colors"
>
<Plus size={14} />
Add User
@@ -281,7 +281,7 @@ export default function AdminUsers() {
</div>
<button
onClick={closeModal}
className="w-full bg-blue-600 text-white py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors"
className="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm hover:bg-indigo-700 transition-colors"
>
Done
</button>
@@ -371,7 +371,7 @@ export default function AdminUsers() {
<button
type="submit"
disabled={submitting}
className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
>
{submitting ? 'Saving...' : modal === 'add' ? 'Create User' : 'Save Changes'}
</button>