Skip to content

Commit b244005

Browse files
liubchigoliubchigo
authored
feat: bring Xebia logo and purple colors (#103)
1 parent 0c49a68 commit b244005

8 files changed

Lines changed: 84 additions & 180 deletions

File tree

‎index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>GitHub Copilot Premium Requests Usage Analyzer</title>
7+
<title>Xebia - Copilot Premium Requests Usage Analyzer</title>
88
<link rel="stylesheet" href="/src/main.css" />
99
<link rel="stylesheet" href="/src/index.css" />
10-
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
10+
<link rel="icon" href="xebia-logo.png" type="image/png" />
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1113
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
1214
</head>
1315

‎public/xebia-logo.png‎

49.3 KB
Loading

‎src/App.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -354,15 +354,15 @@ function App() {
354354
const getModelColors = useCallback(() => {
355355
// Use a set of predefined colors that are visually distinct from exceeding requests red (#ef4444)
356356
const colors = [
357-
"#4285F4", // Blue
357+
"#8B5CF6", // Purple
358358
"#9C27B0", // Purple (changed from red to avoid confusion with exceeding requests)
359359
"#FBBC05", // Yellow
360-
"#34A853", // Green
360+
"#9333ea", // Purple
361361
"#8E44AD", // Purple
362362
"#F39C12", // Orange
363363
"#16A085", // Teal
364364
"#FF9800", // Amber (changed from red-orange to avoid confusion with exceeding requests)
365-
"#3498DB", // Light Blue
365+
"#A855F7", // Light Purple
366366
"#1ABC9C" // Turquoise
367367
];
368368

@@ -455,13 +455,11 @@ function App() {
455455
<div className="container max-w-7xl mx-auto py-8 px-4 min-h-screen">
456456
<header className="mb-8">
457457
<div className="flex items-center justify-between">
458-
<div>
459-
<h1 className="text-3xl font-bold tracking-tight text-foreground mb-2">
458+
<div className="flex items-center gap-4">
459+
<img src="xebia-logo.png" alt="Xebia Logo" className="h-10" />
460+
<h1 className="text-3xl font-bold tracking-tight text-foreground">
460461
GitHub Copilot Premium Requests Usage Analyzer
461462
</h1>
462-
<p className="text-muted-foreground">
463-
Upload your Copilot usage CSV export to visualize request patterns
464-
</p>
465463
</div>
466464
<Button variant="outline" size="sm" asChild>
467465
<a
@@ -558,7 +556,7 @@ function App() {
558556
</span>
559557
</div>
560558
<div
561-
className="flex items-center gap-2 cursor-pointer hover:text-orange-700 transition-colors"
559+
className="flex items-center gap-2 cursor-pointer hover:bg-purple-100/80 dark:hover:bg-purple-900/20 transition-colors rounded-md -m-1 p-1"
562560
onClick={() => setShowProjectedUsersDialog(true)}
563561
title="Click to see detailed list"
564562
>
@@ -568,7 +566,7 @@ function App() {
568566
</span>
569567
</div>
570568
<div
571-
className="flex items-center gap-2 cursor-pointer hover:text-orange-700 transition-colors"
569+
className="flex items-center gap-2 cursor-pointer hover:bg-purple-100/80 dark:hover:bg-purple-900/20 transition-colors rounded-md -m-1 p-1"
572570
onClick={() => setShowPotentialCostDetails(true)}
573571
title="Click to see cost breakdown"
574572
>
@@ -582,7 +580,7 @@ function App() {
582580
<TooltipTrigger asChild>
583581
<Sheet>
584582
<SheetTrigger asChild>
585-
<div className="flex items-center gap-2 cursor-pointer hover:text-blue-700 transition-colors">
583+
<div className="flex items-center gap-2 cursor-pointer hover:bg-purple-100/80 dark:hover:bg-purple-900/20 transition-colors rounded-md -m-1 p-1">
586584
<span className="text-sm text-muted-foreground">Power Users:</span>
587585
<span className="text-lg font-bold">{powerUserSummary.totalPowerUsers}</span>
588586
</div>
@@ -688,8 +686,7 @@ function App() {
688686
{/* Power User Requests Breakdown - Stacked Bar Chart */}
689687
<Card className="p-4">
690688
<div className="flex items-center justify-between mb-3">
691-
<h3
692-
className={`text-md font-medium ${selectedPowerUser ? 'cursor-pointer hover:text-blue-600 transition-colors' : ''}`}
689+
<h3 className={`text-md font-medium ${selectedPowerUser ? 'cursor-pointer hover:bg-purple-100/80 dark:hover:bg-purple-900/20 transition-colors rounded-md -m-1 p-1' : ''}`}
693690
onClick={() => selectedPowerUser && handlePowerUserSelect(null)}
694691
title={selectedPowerUser ? 'Click to show all power users' : undefined}
695692
>
@@ -959,7 +956,7 @@ function App() {
959956
))}
960957
</TableBody>
961958
<TableFooter>
962-
<TableRow>
959+
<TableRow className="bg-accent/20">
963960
<TableCell className="font-medium">Total</TableCell>
964961
<TableCell className="text-right font-medium">
965962
{modelSummary.reduce((sum, item) => sum + item.totalRequests, 0).toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 0})}

‎src/components/ui/chart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ function ChartContainer({
5353
data-slot="chart"
5454
data-chart={chartId}
5555
className={cn(
56-
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
56+
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-purple-500/20 [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
5757
className
5858
)}
5959
{...props}

‎src/components/ui/table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function TableRow({ className, ...props }: ComponentProps<"tr">) {
5555
<tr
5656
data-slot="table-row"
5757
className={cn(
58-
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
58+
"hover:bg-purple-50 data-[state=selected]:bg-purple border-b transition-colors",
5959
className
6060
)}
6161
{...props}

‎src/index.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
:root {
1313
/* Base colors */
14-
--background: oklch(0.98 0.01 240);
14+
--background: oklch(98.032% 0.01351 314.436);
1515
--foreground: oklch(0.25 0.01 240);
1616

1717
--card: oklch(1 0 0);
@@ -20,11 +20,11 @@
2020
--popover-foreground: oklch(0.25 0.01 240);
2121

2222
/* Action colors */
23-
--primary: oklch(0.55 0.18 250);
23+
--primary: #662551;
2424
--primary-foreground: oklch(1 0 0);
2525
--secondary: oklch(0.9 0.03 240);
2626
--secondary-foreground: oklch(0.3 0.01 240);
27-
--accent: oklch(0.65 0.15 145);
27+
--accent: oklch(67.684% 0.21945 311.066 / 0.474);
2828
--accent-foreground: oklch(0.2 0.01 240);
2929
--destructive: oklch(0.65 0.15 30);
3030
--destructive-foreground: oklch(1 0 0);
@@ -34,7 +34,7 @@
3434
--muted-foreground: oklch(0.55 0.01 240);
3535
--border: oklch(0.85 0.01 240);
3636
--input: oklch(0.85 0.01 240);
37-
--ring: oklch(0.55 0.18 250);
37+
--ring: #662551;
3838

3939
/* Border radius */
4040
--radius: 0.5rem;

‎src/prd.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,10 @@
5454

5555
### Color Strategy
5656
- **Color Scheme Type**: Custom palette with GitHub-inspired colors
57-
- **Primary Color**: GitHub-blue (oklch(0.55 0.18 250)) - represents the professional identity
57+
- **Primary Color**: Xebia-purple (oklch(0.6 0.2 280)) - represents the professional identity
5858
- **Secondary Colors**: Neutral grays for UI elements
5959
- **Accent Color**: Green for compliant requests, Red for quota-exceeding requests
60-
- **Color Psychology**: Blue conveys trustworthiness, green represents safety/compliance, red indicates warning/excess
60+
- **Color Psychology**: Purple conveys creativity and innovation
6161
- **Color Accessibility**: High contrast between text and backgrounds, distinct colors for data visualization
6262
- **Foreground/Background Pairings**:
6363
- Background (oklch(0.98 0.01 240)) / Foreground (oklch(0.25 0.01 240))

0 commit comments

Comments
 (0)