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