Skip to content

Sober design pass across the public site and admin chrome #159

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

Merged
djoufson merged 3 commits into from
Jun 7, 2026
Merged

Sober design pass across the public site and admin chrome #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6094e0
sober design pass on the Home page and its surrounding chrome
djoufson Jun 7, 2026
f7b96d1
update SPA favicon
djoufson Jun 7, 2026
fd546be
sober design pass on About, Events, Jobs, Contact, Error, Login + adm…
djoufson Jun 7, 2026
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
9 changes: 8 additions & 1 deletion src/admin/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,16 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>admin</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="root"></div>
Expand Down
Binary file added src/admin/public/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/admin/public/favicon.svg
View file
Open in desktop

This file was deleted.

40 changes: 33 additions & 7 deletions src/admin/src/components/AdminHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,48 @@
import { useAuthMe } from '../api/auth';
import { useRouterState } from '@tanstack/react-router';
import { LogOut, CircleUser } from 'lucide-react';

const TITLES: Array<{ match: RegExp; title: string }> = [
{ match: /^\/events\/new$/, title: 'New event' },
{ match: /^\/events\/[^/]+\/edit$/, title: 'Edit event' },
{ match: /^\/events/, title: 'Events' },
{ match: /^\/partners/, title: 'Partners' },
{ match: /^\/banners\/new$/, title: 'New banner' },
{ match: /^\/banners\/[^/]+\/edit$/, title: 'Edit banner' },
{ match: /^\/banners/, title: 'Banners' },
{ match: /^\/apps\/register$/, title: 'Register application' },
{ match: /^\/apps/, title: 'Applications' },
{ match: /^\/$/, title: 'Dashboard' },
];

function titleForPath(pathname: string): string {
return TITLES.find((t) => t.match.test(pathname))?.title ?? '';
}

export function AdminHeader() {
const { data: user } = useAuthMe();
const { location } = useRouterState();
const title = titleForPath(location.pathname);

return (
<header className="h-14 border-b border-gray-200/80 bg-white flex items-center justify-between px-6">
<div />
<div className="flex items-center gap-5">
<header className="h-14 border-b border-gray-200/80 bg-white/95 backdrop-blur-sm flex items-center justify-between px-6 sticky top-0 z-10">
<div className="flex items-center gap-2.5 min-w-0">
{title && (
<h1 className="text-sm font-medium text-gray-700 truncate">{title}</h1>
)}
</div>
<div className="flex items-center gap-3">
{user && (
<div className="flex items-center gap-2">
<CircleUser size={18} className="text-gray-400" />
<span className="text-sm text-gray-600">{user.email}</span>
<div className="flex items-center gap-2 px-2.5 py-1 rounded-md text-gray-600">
<CircleUser size={16} className="text-gray-400" />
<span className="text-sm">{user.email}</span>
</div>
)}
<a
href="/account/logout"
className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-red-500 transition-colors"
className="inline-flex items-center justify-center size-8 rounded-md text-gray-400 hover:text-red-500 hover:bg-red-50 transition-colors"
aria-label="Sign out"
title="Sign out"
>
<LogOut size={15} />
</a>
Expand Down
21 changes: 21 additions & 0 deletions src/admin/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}

html {
font-family: Lexend, 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 300;
}
Expand All @@ -47,6 +50,10 @@
@apply bg-gray-50 text-gray-900 antialiased;
}

input, select, textarea, button {
font: inherit;
}

input, select, textarea {
@apply text-sm;
}
Expand Down Expand Up @@ -124,6 +131,20 @@
.section-title {
@apply text-sm font-medium text-gray-500 uppercase tracking-wider;
}

/* Eyebrow — small uppercase tracked label used above section headings. */
.eyebrow {
@apply inline-flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500;
}

.eyebrow::before {
content: '';
display: inline-block;
width: 22px;
height: 1px;
background: currentColor;
opacity: 0.5;
}
}

/* Scrollbar */
Expand Down
25 changes: 15 additions & 10 deletions src/app/Components/Components/ActivityCard.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
<div class="rounded-lg overflow-hidden shadow w-[350px]">
<img src="@ImageName" alt=".NET Cameroon @Title" class="h-[200px] w-full object-cover">
<div class="p-6 h-[150px]">
<h2 class="heading heading-3 text-secondary">@Title</h2>
<p>@Description</p>
<article class="group bg-white rounded-xl overflow-hidden border border-gray-200/70 hover:border-gray-300 transition-colors flex flex-col h-full">
<div class="aspect-[16/10] overflow-hidden bg-gray-100">
<img src="@ImageName" alt=".NET Cameroon @Title"
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]" />
</div>
<div class="p-6 h-[100px]">
@if(!string.IsNullOrWhiteSpace(Link) && !string.IsNullOrWhiteSpace(LinkText))
<div class="p-6 flex flex-col flex-1">
<h3 class="heading font-semibold text-lg text-dark-purple">@Title</h3>
<p class="text-gray-600 text-sm leading-relaxed mt-2 flex-1">@Description</p>
@if (!string.IsNullOrWhiteSpace(Link) && !string.IsNullOrWhiteSpace(LinkText))
{
<a href="@Link" target="_blank" class="link link-secondary">@LinkText</a>
<a href="@Link" target="_blank"
class="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-secondary hover:text-secondary-accentuation transition-colors w-fit">
@LinkText
<i class="ph ph-arrow-up-right text-sm"></i>
</a>
}
</div>
</div>
</article>

@code{
@code {
[Parameter]
public string Title { get; set; } = string.Empty;

Expand Down
10 changes: 2 additions & 8 deletions src/app/Components/Components/BannerStack.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,9 @@
<div class="banner @VariantBgClass(banner.Variant) @textColor relative overflow-hidden"
data-banner-id="@banner.Id"
data-banner-dismissible="@(banner.Dismissible.ToString().ToLowerInvariant())">
<div class="pointer-events-none absolute inset-0 opacity-40">
<div class="absolute -top-20 -right-20 w-72 h-72 rounded-full @(isLight ? "bg-white/40" : "bg-white/15") blur-3xl"></div>
<div class="absolute -bottom-20 left-1/4 w-56 h-56 rounded-full @(isLight ? "bg-white/30" : "bg-white/10") blur-3xl"></div>
<div class="absolute top-1/2 -translate-y-1/2 left-[55%] w-44 h-44 rounded-full @(isLight ? "bg-white/20" : "bg-white/8") blur-2xl"></div>
<div class="pointer-events-none absolute inset-0 opacity-25">
<div class="absolute -top-16 -right-16 w-56 h-56 rounded-full @(isLight ? "bg-white/30" : "bg-white/10") blur-3xl"></div>
</div>
@if (banner.Variant == BannerVariant.Advertisement)
{
<div class="banner-shine pointer-events-none absolute inset-0"></div>
}
@if (hasTitle)
{
@* Rich layout: title + subtitle | message | CTA | dismiss *@
Expand Down
Loading
Loading