Skip to content

Tremor-inspired dark palette and UI polish #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
msogin wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Tremor-inspired dark palette and UI polish #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions src/app/chat-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,8 @@ export default function ChatPanel({ org }: { org: string }) {
{open && (
<div className={`fixed z-50 bg-gray-900 border border-gray-800 shadow-2xl flex flex-col overflow-hidden no-print transition-all duration-200 ${
maximized
? 'inset-4 rounded-2xl'
: 'bottom-6 right-6 w-[420px] h-[600px] rounded-2xl'
? 'inset-4 rounded-lg'
: 'bottom-6 right-6 w-[420px] h-[600px] rounded-lg'
}`}>
{/* Header */}
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-800">
Expand Down
95 changes: 92 additions & 3 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,88 @@
.focus\:border-accent:focus { border-color: var(--accent); }
.focus\:border-accent-dark:focus { border-color: var(--accent-dark); }

/* ── Tremor dark-mode palette remapping ── */
/* Remap Tailwind grays to navy-tinted Tremor palette */
:root {
--tremor-page-bg: #111827;
--tremor-card-bg: #090E1A;
--tremor-input-bg: #1a2332;
--tremor-hover-bg: #1f2937;
--tremor-border: #1e293b;
--tremor-border-light: #334155;
}

/* Page / body background */
.bg-gray-950,
.bg-\[\#0F0F0F\],
.bg-\[\#0A0A0A\],
.bg-\[\#09090B\],
.bg-\[\#0C0A14\],
.bg-\[\#030712\] {
background-color: var(--tremor-page-bg) !important;
}

/* Card backgrounds — deep navy */
:root:not([data-theme-mode="light"]) .bg-gray-900 {
background-color: var(--tremor-card-bg) !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Input / hover backgrounds */
:root:not([data-theme-mode="light"]) .bg-gray-800 {
background-color: var(--tremor-input-bg) !important;
}
:root:not([data-theme-mode="light"]) .bg-gray-800\/50 {
background-color: rgba(26, 35, 50, 0.5) !important;
}
:root:not([data-theme-mode="light"]) .bg-gray-700 {
background-color: var(--tremor-hover-bg) !important;
}

/* Hover backgrounds (dark mode) */
:root:not([data-theme-mode="light"]) .hover\:bg-gray-800:hover {
background-color: var(--tremor-input-bg) !important;
}
:root:not([data-theme-mode="light"]) .hover\:bg-gray-700:hover {
background-color: var(--tremor-hover-bg) !important;
}
:root:not([data-theme-mode="light"]) .hover\:bg-gray-800\/50:hover {
background-color: rgba(26, 35, 50, 0.5) !important;
}
:root:not([data-theme-mode="light"]) .hover\:bg-gray-800\/30:hover,
:root:not([data-theme-mode="light"]) .hover\:bg-gray-800\/30 {
background-color: rgba(26, 35, 50, 0.3) !important;
}

/* Borders — slate-tinted */
:root:not([data-theme-mode="light"]) .border-gray-800 {
border-color: var(--tremor-border) !important;
}
:root:not([data-theme-mode="light"]) .border-gray-800\/50 {
border-color: rgba(30, 41, 59, 0.5) !important;
}
:root:not([data-theme-mode="light"]) .border-gray-700 {
border-color: var(--tremor-border-light) !important;
}
:root:not([data-theme-mode="light"]) .border-gray-700\/50 {
border-color: rgba(51, 65, 85, 0.5) !important;
}

/* Dividers */
:root:not([data-theme-mode="light"]) .divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
border-color: var(--tremor-border) !important;
}

/* Progress bars — use accent color instead of blue-500 */
:root:not([data-theme-mode="light"]) .bg-blue-500.h-full.rounded-full {
background-color: var(--accent) !important;
}

/* Table containers — less rounded for Tremor feel */
:root:not([data-theme-mode="light"]) .bg-gray-900.rounded-xl {
border-radius: 0.5rem;
}

/* ── Light theme overrides ── */
/* Remap dark-mode Tailwind classes to light equivalents */
[data-theme-mode="light"] {
Expand All @@ -52,7 +134,8 @@
/* Backgrounds: dark → light */
[data-theme-mode="light"] .bg-\[\#0F0F0F\],
[data-theme-mode="light"] .bg-\[\#0A0A0A\],
[data-theme-mode="light"] .bg-\[\#030712\] {
[data-theme-mode="light"] .bg-\[\#030712\],
[data-theme-mode="light"] .bg-\[\#111827\] {
background-color: var(--body-bg) !important;
}
[data-theme-mode="light"] .bg-gray-950 {
Expand Down Expand Up @@ -200,7 +283,12 @@

/* Shadow adjustments — dark mode uses no/subtle shadows; light needs them */
[data-theme-mode="light"] .bg-gray-900 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Reset Tremor card rounding in light mode */
[data-theme-mode="light"] .bg-gray-900.rounded-xl {
border-radius: 0.75rem;
}

@media print {
Expand Down Expand Up @@ -262,7 +350,8 @@
}

/* Page breaks */
.bg-gray-900.rounded-xl { break-inside: avoid; }
.bg-gray-900.rounded-xl,
.bg-gray-900.rounded-lg { break-inside: avoid; }
tr { break-inside: avoid; }

/* Remove max-height/overflow on tables for full print */
Expand Down
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className="bg-[#0F0F0F] text-gray-100 min-h-screen antialiased">
<body className="bg-[#111827] text-gray-100 min-h-screen antialiased">
<ThemeProvider>
<AuthProvider>
{children}
Expand Down
12 changes: 6 additions & 6 deletions src/app/llm-findings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export default function LlmFindings() {
<div className="space-y-6">
{/* Highlights */}
{highlightsLoading && (
<div className="bg-white/[0.03] border border-white/[0.07] rounded-2xl p-5">
<div className="bg-white/[0.03] border border-white/[0.07] rounded-lg p-5">
<div className="flex items-center gap-2 mb-3">
<span className="text-lg">📊</span>
<span className="text-xs font-bold tracking-widest uppercase text-white/40">Highlights</span>
Expand All @@ -113,7 +113,7 @@ export default function LlmFindings() {
</div>
)}
{!highlightsLoading && highlights && highlightsMeta && (
<div className="bg-white/[0.03] border border-white/[0.07] rounded-2xl p-5">
<div className="bg-white/[0.03] border border-white/[0.07] rounded-lg p-5">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<span className="text-lg">📊</span>
Expand All @@ -136,7 +136,7 @@ export default function LlmFindings() {

{/* Project Insights */}
{projectsLoading && (
<div className="bg-white/[0.03] border border-white/[0.07] rounded-2xl p-5">
<div className="bg-white/[0.03] border border-white/[0.07] rounded-lg p-5">
<div className="flex items-center gap-2 mb-3">
<span className="text-lg">🏗️</span>
<span className="text-xs font-bold tracking-widest uppercase text-white/40">Top Projects</span>
Expand All @@ -151,7 +151,7 @@ export default function LlmFindings() {
</div>
)}
{!projectsLoading && projects.length > 0 && projectsMeta && (
<div className="bg-white/[0.03] border border-white/[0.07] rounded-2xl p-5">
<div className="bg-white/[0.03] border border-white/[0.07] rounded-lg p-5">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<span className="text-lg">🏗️</span>
Expand Down Expand Up @@ -212,7 +212,7 @@ export default function LlmFindings() {

{/* Release Notes */}
{releaseNotes && !releaseNotesDismissed && (
<div className="bg-white/[0.03] border border-white/[0.07] rounded-2xl p-5 mb-4">
<div className="bg-white/[0.03] border border-white/[0.07] rounded-lg p-5 mb-4">
<div className="flex items-center gap-2 mb-3">
<span className="text-lg">🚀</span>
<span className="text-xs font-bold tracking-widest uppercase text-white/40">What&apos;s New in Glooker</span>
Expand All @@ -237,7 +237,7 @@ export default function LlmFindings() {
)}

{/* How Impact Score Works */}
<div className="bg-white/[0.03] border border-white/[0.07] rounded-2xl p-5">
<div className="bg-white/[0.03] border border-white/[0.07] rounded-lg p-5">
<div className="flex items-center gap-2 mb-4">
<span className="text-lg">📊</span>
<span className="text-xs font-bold tracking-widest uppercase text-white/40">How Impact Score Works</span>
Expand Down
22 changes: 11 additions & 11 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ interface Report {
}

const TYPE_COLORS: Record<string, string> = {
feature: 'bg-blue-500',
bug: 'bg-red-500',
refactor: 'bg-purple-500',
infra: 'bg-yellow-500',
docs: 'bg-gray-500',
test: 'bg-green-500',
other: 'bg-gray-600',
feature: 'bg-blue-500/10 text-blue-400 ring-1 ring-inset ring-blue-500/20',
bug: 'bg-red-500/10 text-red-400 ring-1 ring-inset ring-red-500/20',
refactor: 'bg-purple-500/10 text-purple-400 ring-1 ring-inset ring-purple-500/20',
infra: 'bg-yellow-500/10 text-yellow-400 ring-1 ring-inset ring-yellow-500/20',
docs: 'bg-gray-500/10 text-gray-400 ring-1 ring-inset ring-gray-500/20',
test: 'bg-green-500/10 text-green-400 ring-1 ring-inset ring-green-500/20',
other: 'bg-gray-500/10 text-gray-500 ring-1 ring-inset ring-gray-500/20',
};


Expand Down Expand Up @@ -637,7 +637,7 @@ export default function Home() {
{showReportForm && (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowReportForm(false)} />
<div className="relative bg-gray-900 rounded-xl p-6 w-full max-w-lg border border-gray-800 shadow-2xl">
<div className="relative bg-gray-900 rounded-lg p-6 w-full max-w-lg border border-gray-800 shadow-2xl">
<div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-semibold text-white">New Report</h3>
<button onClick={() => setShowReportForm(false)} className="text-gray-500 hover:text-gray-300">
Expand Down Expand Up @@ -933,7 +933,7 @@ export default function Home() {
const filteredDevs = filterLogins.size > 0 ? developers.filter(d => filterLogins.has(d.github_login)) : developers;
const hasJira = developers.some(d => (d.total_jira_issues ?? 0) > 0);
return filteredDevs.length > 0 && (
<div className="bg-gray-900 rounded-xl overflow-hidden">
<div className="bg-gray-900 rounded-lg overflow-hidden">
<table className="w-full text-sm table-fixed">
<thead>
<tr className="text-left text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800">
Expand Down Expand Up @@ -1067,7 +1067,7 @@ function ImpactBadge({ value }: { value: number }) {
n >= 4 ? 'bg-accent-dark' :
'bg-gray-700';
return (
<span className={`inline-block px-2 py-0.5 rounded text-xs font-bold text-white ${color}`}>
<span className={`inline-block px-2 py-0.5 rounded-md text-xs font-bold text-white ring-1 ring-inset ring-white/10 ${color}`}>
{n.toFixed(1)}
</span>
);
Expand Down Expand Up @@ -1105,7 +1105,7 @@ function TypeBreakdown({ breakdown }: { breakdown: Record<string, number> }) {
{entries.map(([type, count]) => (
<span
key={type}
className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs text-white ${TYPE_COLORS[type] || 'bg-gray-600'}`}
className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-xs ${TYPE_COLORS[type] || 'bg-gray-500/10 text-gray-500 ring-1 ring-inset ring-gray-500/20'}`}
>
{type} <span className="opacity-75">{count}</span>
</span>
Expand Down
Loading