Skip to content
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

Jump to bottom

feat(frontend): support dark mode #727

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(frontend): support dark mode #727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dbfcb7e
feat: support dark mode
nakasyou Sep 15, 2024
1becb26
format code
nakasyou Sep 15, 2024
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
2 changes: 1 addition & 1 deletion frontend/components/HomepageHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function HomepageHero(
) {
return (
<div
class="w-screen -ml-[calc(50vw-50%)] -mt-6 bg-repeat py-32 lg:pt-48 relative before:absolute before:left-0 before:right-0 before:h-32 before:bg-gradient-to-t before:from-white before:bottom-0 before:z-10 before:pointer-events-none"
class="w-screen -ml-[calc(50vw-50%)] -mt-6 bg-repeat py-32 lg:pt-48 relative before:absolute before:left-0 before:right-0 before:h-32 before:bg-gradient-to-t before:from-white dark:before:from-jsr-cyan-950 before:bottom-0 before:z-10 before:pointer-events-none"
id="particles-js"
>
<HomepageHeroParticles />
Expand Down
34 changes: 23 additions & 11 deletions frontend/components/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function ListDisplay(
<div class="mt-8 ring-1 ring-jsr-cyan-100 rounded overflow-hidden">
{title &&
(
<div class="px-5 py-4 flex items-center justify-between border-b border-jsr-cyan-50 bg-jsr-gray-50 leading-none">
<div class="px-5 py-4 flex items-center justify-between border-b border-jsr-cyan-50 bg-jsr-gray-50 dark:bg-jsr-gray-600 leading-none">
<span class="font-semibold">{title}</span>
<div />
</div>
Expand All @@ -36,7 +36,7 @@ export function ListDisplay(
>
{item.content}

<ChevronRight class="text-jsr-cyan-800 flex-shrink-0" />
<ChevronRight class="text-jsr-cyan-800 dark:text-jsr-cyan-200 flex-shrink-0" />
</a>
</li>
))}
Expand All @@ -53,6 +53,20 @@ export function ListDisplay(
);
}

function PaginationButton(props: {
children: string;
href: string;
}) {
return (
<a
href={props.href}
class="relative inline-flex items-center rounded-md bg-white dark:bg-jsr-cyan-950 px-3 py-2 text-sm font-semibold text-jsr-gray-900 dark:text-white ring-1 ring-inset ring-jsr-gray-300 dark:ring-jsr-gray-100 hover:bg-jsr-gray-50 hover:dark:bg-jsr-cyan-800 focus-visible:outline-offset-0 select-none"
>
{props.children}
</a>
);
}

function Pagination(
{ currentUrl, itemsCount, pagination }: {
currentUrl: URL;
Expand All @@ -72,7 +86,7 @@ function Pagination(

return (
<nav
class="flex items-center justify-between border-t border-jsr-cyan-900/10 bg-white px-4 py-3 sm:px-6"
class="flex items-center justify-between border-t border-jsr-cyan-900/10 dark:border-jsr-cyan-100 bg-white dark:bg-jsr-cyan-950 px-4 py-3 sm:px-6"
aria-label="Pagination"
>
<Head>
Expand All @@ -88,7 +102,7 @@ function Pagination(
</Head>

<div class="hidden sm:block">
<p class="text-sm text-jsr-gray-700">
<p class="text-sm text-jsr-gray-700 dark:text-jsr-gray-200">
{start + itemsCount === 0 ? "No results found" : (
<>
Showing <span class="font-semibold">{start + 1}</span> to{" "}
Expand All @@ -99,25 +113,23 @@ function Pagination(
)}
</p>
</div>
<div class="flex flex-1 justify-between sm:justify-end">
<div class="flex flex-1 justify-between sm:justify-end gap-2">
{pagination.page > 1
? (
<a
<PaginationButton
href={prevURL.pathname + prevURL.search}
class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-jsr-gray-900 ring-1 ring-inset ring-jsr-gray-300 hover:bg-jsr-gray-50 focus-visible:outline-offset-0 select-none"
>
Previous
</a>
</PaginationButton>
)
: <span />}
{itemsCount >= pagination.limit
? (
<a
<PaginationButton
href={nextURL.pathname + nextURL.search}
class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-jsr-gray-900 ring-1 ring-inset ring-jsr-gray-300 hover:bg-jsr-gray-50 focus-visible:outline-offset-0 select-none"
>
Next
</a>
</PaginationButton>
)
: <span />}
</div>
Expand Down
10 changes: 7 additions & 3 deletions frontend/components/ListPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,14 @@ export function ListPanel(
</div>
)}
</div>
<ol class="border-1.5 border-jsr-cyan-950 rounded list-none overflow-hidden">
<ol class="border-1.5 border-jsr-cyan-950 dark:border-jsr-cyan-100 rounded list-none overflow-hidden">
{children.map((entry) => {
return (
<li class={children.length > 1 ? "odd:bg-jsr-cyan-50" : ""}>
<li
class={children.length > 1
? "odd:bg-jsr-cyan-50 odd:dark:bg-jsr-cyan-700"
: ""}
>
<a
class={`flex px-4 items-center py-3 group focus-visible:ring-2 ring-jsr-cyan-700 ring-inset outline-none hover:bg-jsr-yellow-200 focus-visible:bg-jsr-yellow-200 ${
entry.value === selected ? "text-jsr-cyan-700 font-bold" : ""
Expand All @@ -41,7 +45,7 @@ export function ListPanel(
{entry.value}
</span>
{entry.label && (
<div class="chip bg-jsr-cyan-200 max-w-20 truncate">
<div class="chip bg-jsr-cyan-200 dark:bg-jsr-cyan-600 max-w-20 truncate">
{entry.label}
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions frontend/components/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ export interface NavItemProps {
export function NavItem(props: NavItemProps) {
return (
<a
class={`md:px-3 px-4 py-2 text-sm md:text-base min-h-10 leading-none rounded-md hover:bg-jsr-cyan-100 flex items-center select-none ${
class={`md:px-3 px-4 py-2 text-sm md:text-base min-h-10 leading-none rounded-md hover:bg-jsr-cyan-100 hover:dark:bg-jsr-cyan-600 flex items-center select-none ${
props.active
? "bg-jsr-cyan-50 border-1 border-jsr-cyan-300/30 font-semibold"
? "bg-jsr-cyan-50 dark:bg-jsr-cyan-500 border-1 border-jsr-cyan-300/30 font-semibold"
: ""
}`}
data-active={props.active ? "true" : undefined}
Expand Down
6 changes: 3 additions & 3 deletions frontend/components/PackageHit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ export function PackageHit(pkg: OramaPackageHit | Package): ListDisplayItem {
content: (
<div class="grow-1 w-full flex flex-col md:flex-row gap-2 justify-between">
<div class="grow-1">
<div class="text-jsr-cyan-700 font-semibold">
<div class="text-jsr-cyan-700 dark:text-jsr-cyan-300 font-semibold">
{`@${pkg.scope}/${pkg.name}`}
</div>
<div class="text-sm text-jsr-gray-600">
<div class="text-sm text-jsr-gray-600 dark:text-jsr-gray-200">
{pkg.description}
</div>
</div>
Expand All @@ -34,7 +34,7 @@ export function PackageHit(pkg: OramaPackageHit | Package): ListDisplayItem {
style={`background-image: conic-gradient(transparent, transparent ${pkg.score}%, #e7e8e8 ${pkg.score}%)`}
title="Package score"
>
<div class="rounded-full aspect-square bg-white text-xs flex items-center justify-center font-semibold min-w-6">
<div class="rounded-full aspect-square bg-white text-black text-xs flex items-center justify-center font-semibold min-w-6">
{pkg.score}
</div>
</div>
Expand Down
12 changes: 9 additions & 3 deletions frontend/components/QuotaCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,12 @@ export function QuotaCard(
return (
<div class="border-1.5 border-jsr-gray-200 rounded-md px-4 py-5 flex flex-col justify-between">
<div>
<p class="font-semibold text-jsr-gray-900">{props.title}</p>
<p class="text-jsr-gray-600 text-sm">{props.description}</p>
<p class="font-semibold text-jsr-gray-900 dark:text-jsr-gray-100">
{props.title}
</p>
<p class="text-jsr-gray-600 text-sm dark:text-jsr-gray-400">
{props.description}
</p>
</div>
<QuotaUsage limit={props.limit} usage={props.usage} />
</div>
Expand All @@ -40,7 +44,9 @@ function QuotaUsage(props: { limit: number; usage: number }) {
>
</div>
</div>
<div class="text-xs text-jsr-gray-600">{props.usage}/{props.limit}</div>
<div class="text-xs text-jsr-gray-600 dark:text-jsr-gray-200">
{props.usage}/{props.limit}
</div>
</div>
);
}
8 changes: 4 additions & 4 deletions frontend/components/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function Table(
>
<div class="overflow-x-auto">
<table class="w-full divide-y divide-jsr-cyan-50">
<thead class="bg-jsr-cyan-50">
<thead class="bg-jsr-cyan-50 dark:bg-jsr-cyan-950">
<TableRow class="children:font-semibold">
{columns.map((column) => (
<TableHead
Expand Down Expand Up @@ -134,7 +134,7 @@ export function TableRow({
}: TableRowProps) {
return (
<tr
class={`children:whitespace-nowrap children:text-sm children:text-jsr-gray-700 ${
class={`dark:bg-jsr-cyan-950 dark:text-white children:whitespace-nowrap children:text-sm children:text-jsr-gray-700 ${
_class ?? ""
}`}
>
Expand All @@ -156,7 +156,7 @@ export function TableHead({
}: TableHeadProps) {
return (
<th
class={`py-4 px-3 first:pl-4 first:sm:pl-6 last:pr-4 last:sm:pr-6 whitespace-nowrap text-sm text-jsr-gray-900 ${
class={`py-4 px-3 first:pl-4 first:sm:pl-6 last:pr-4 last:sm:pr-6 whitespace-nowrap text-sm text-jsr-gray-900 dark:text-jsr-gray-50 ${
_class ?? ""
} ${align === "right" ? "text-right" : "text-left"}`}
>
Expand All @@ -182,7 +182,7 @@ export function TableData(
) {
return (
<td
class={`py-4 px-3 first:pl-4 first:sm:pl-6 last:pr-4 last:sm:pr-6 whitespace-nowrap text-sm text-jsr-gray-900 ${
class={`py-4 px-3 first:pl-4 first:sm:pl-6 last:pr-4 last:sm:pr-6 whitespace-nowrap text-sm text-jsr-gray-900 dark:text-jsr-gray-100 ${
_class ?? ""
} ${align === "right" ? "text-right" : "text-left"}`}
title={title}
Expand Down
6 changes: 3 additions & 3 deletions frontend/islands/UserMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import IconArrowRight from "$tabler_icons/arrow-right.tsx";
const SHARED_ITEM_CLASSES =
"flex items-center px-4 py-2.5 focus-visible:ring-2 ring-inset outline-none";
const DEFAULT_ITEM_CLASSES =
"hover:bg-jsr-cyan-50 focus-visible:bg-jsr-cyan-200 ring-jsr-cyan-700";
"hover:bg-jsr-cyan-50 dark:hover:bg-jsr-cyan-500 focus-visible:bg-jsr-cyan-200 ring-jsr-cyan-700";

const SUDO_CONFIRMATION =
"Are you sure you want to enable sudo mode? Sudo mode will be enabled for 5 minutes.";
Expand Down Expand Up @@ -52,7 +52,7 @@ export function UserMenu({ user, sudo, logoutUrl }: {
<div
aria-labelledby={`${prefix}-user-menu`}
role="region"
class={`absolute top-[120%] -right-4 z-[80] rounded border-1.5 border-current bg-white w-56 shadow overflow-hidden ${
class={`absolute top-[120%] -right-4 z-[80] rounded border-1.5 border-current bg-white dark:bg-cyan-950 w-56 shadow overflow-hidden ${
open
? "opacity-100 translate-y-0"
: "opacity-0 translate-y-5 pointer-events-none"
Expand Down Expand Up @@ -99,7 +99,7 @@ export function UserMenu({ user, sudo, logoutUrl }: {
<a
href="/new"
tabIndex={open ? undefined : -1}
class={`${SHARED_ITEM_CLASSES} justify-start gap-2 font-bold bg-jsr-yellow border-jsr-yellow hover:bg-jsr-yellow-300 hover:border-jsr-cyan-500 focus-visible:bg-jsr-yellow-300 focus-visible:border-jsr-yellow-300 ring-black`}
class={`${SHARED_ITEM_CLASSES} justify-start gap-2 font-bold bg-jsr-yellow dark:bg-jsr-yellow-600 border-jsr-yellow dark:border-jsr-yellow-600 hover:bg-jsr-yellow-300 hover:dark:bg-jsr-yellow-700 hover:border-jsr-cyan-500 focus-visible:bg-jsr-yellow-300 focus-visible:border-jsr-yellow-300 ring-black`}
>
<Plus />
Publish a package
Expand Down
10 changes: 5 additions & 5 deletions frontend/islands/new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ export function ScopeSelect(

if (scopes.value.length === 0) {
return (
<div class="space-y-4 bg-jsr-cyan-50 border-1.5 border-jsr-cyan-200 p-4 md:p-6 rounded-xl">
<span class="text-jsr-gray-700">
<div class="space-y-4 bg-jsr-cyan-50 dark:bg-jsr-cyan-900 border-1.5 border-jsr-cyan-200 p-4 md:p-6 rounded-xl">
<span class="text-jsr-gray-700 dark:text-jsr-gray-200">
You are not a member of any scopes. Create a new scope to publish your
package.
</span>
Expand Down Expand Up @@ -97,7 +97,7 @@ export function ScopeSelect(
</button>
</p>
)}
<p class="text-jsr-gray-700 text-sm mt-2">
<p class="text-jsr-gray-700 dark:text-jsr-gray-200 text-sm mt-2">
You can create {scopesLeft === 0 ? "no" : scopesLeft}{" "}
more scope{scopesLeft !== 1 && "s"}.{" "}
<a href="/account/settings" class="link">View quotas</a> or{" "}
Expand Down Expand Up @@ -353,14 +353,14 @@ export function CreatePackage({ scope, name, pkg, fromCli }: {
) return null;

return (
<div class="max-w-2xl mt-12 bg-jsr-cyan-50 border-1.5 border-jsr-cyan-200 rounded-lg p-4 md:p-6 overflow-x-hidden flex flex-wrap sm:flex-nowrap! justify-between items-center gap-8">
<div class="max-w-2xl mt-12 bg-jsr-cyan-50 dark:bg-jsr-cyan-900 border-1.5 border-jsr-cyan-200 rounded-lg p-4 md:p-6 overflow-x-hidden flex flex-wrap sm:flex-nowrap! justify-between items-center gap-8">
{pkg.value === null
? (
<>
<div>
<p>
The package{" "}
<code class="text-jsr-cyan-800">
<code class="text-jsr-cyan-800 dark:text-jsr-cyan-300">
@{scope}/{name}
</code>{" "}
does not exist yet. Create it now to publish your package.
Expand Down
2 changes: 1 addition & 1 deletion frontend/routes/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default async function App(
href={asset("/logo-square.svg")}
/>
</head>
<body>
<body class="dark:bg-jsr-cyan-950 dark:text-white">
<Component />
</body>
</html>
Expand Down
4 changes: 2 additions & 2 deletions frontend/routes/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function Layout(
<>
<div
class="min-h-[calc(100vh-3rem)]"
data-dark-theme="light"
data-dark-theme="dark"
>
<a
href="#main-content"
Expand All @@ -35,7 +35,7 @@ export default function Layout(
</div>
<footer
id="footer"
class="text-xs text-center mt-4 md:mt-6 p-4 text-jsr-gray-500"
class="text-xs text-center mt-4 md:mt-6 p-4 text-jsr-gray-500 dark:bg-jsr-cyan-950 dark:text-jsr-gray-200"
>
JSR - It is{" "}
<time datetime={currentDatetime.toISOString()}>
Expand Down
4 changes: 2 additions & 2 deletions frontend/routes/account/(_components)/AccountLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ export function AccountLayout({ user, active, children }: AccountLayoutProps) {
<h1 class="text-2xl leading-none font-semibold">
{user.name}
</h1>
<p class="text-xs text-jsr-gray-600">
<p class="text-xs text-jsr-gray-600 dark:text-jsr-gray-200">
Created account {twas(new Date(user.createdAt))}
</p>
<p class="text-xs text-jsr-gray-600">
<p class="text-xs text-jsr-gray-600 dark:text-jsr-gray-200">
<GitHubUserLink user={user} />
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/routes/account/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Reason: `;
<div class="flex flex-col gap-8">
<div class="flex flex-col justify-between gap-4">
<div class="max-w-xl">
<p class="text-jsr-gray-600">
<p class="text-jsr-gray-600 dark:text-jsr-gray-200">
Users have certain quotas to help prevent abuse. We are happy
to increase your quotas as needed — just send us an increase
request.
Expand Down Expand Up @@ -61,7 +61,7 @@ Reason: `;
</div>
<div>
<h2 class="text-xl mb-2 font-bold">Delete account</h2>
<p class="mt-2 text-jsr-gray-600 max-w-xl">
<p class="mt-2 text-jsr-gray-600 dark:text-jsr-gray-200 max-w-xl">
You may delete your account at any time. If you delete your account,
any scopes that you are the sole owner of will be orphaned. You will
not be able to recover your account after deletion.
Expand Down
Loading
Loading