github-featured/triggerdotdev--trigger.dev
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Dark style

Browse Source
This commit is contained in:
Matt Aitken
2022-12-22 18:16:28 +00:00
parent 5ecc782b39
commit 4356642596
1 changed files with 11 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/webapp/app/components/Pagination.tsx
+11 -14
View File
@@ -1,9 +1,5 @@
import { ChevronRightIcon } from "@heroicons/react/24/outline";
import {
ArrowLongLeftIcon,
ArrowLongRightIcon,
ChevronLeftIcon,
} from "@heroicons/react/24/solid";
import { ChevronLeftIcon } from "@heroicons/react/24/solid";
import { Link, useLocation } from "@remix-run/react";
import classNames from "classnames";
import { LinkDisabled } from "./LinkWithDisabled";
@@ -22,12 +18,12 @@ export function PaginationControls({
const location = useLocation();
return (
<div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
<div className="flex items-center justify-between border-t border-slate-850 bg-slate-700/20 px-4 py-3 sm:px-6 text-slate-400">
<div className="flex flex-1 justify-between sm:hidden">
{currentPage > 1 && (
<Link
to={pageUrl(location, currentPage - 1)}
className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
className="relative inline-flex items-center rounded-md border border-gray-300 bg-slate-700/20 px-4 py-2 text-sm font-medium hover:bg-gray-50"
>
Previous
</Link>
@@ -35,7 +31,7 @@ export function PaginationControls({
{currentPage < totalPages && (
<Link
to={pageUrl(location, currentPage + 1)}
className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-slate-700/20 px-4 py-2 text-sm font-medium hover:bg-gray-50"
>
Next
</Link>
@@ -43,7 +39,7 @@ export function PaginationControls({
</div>
<div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
<div>
<p className="text-sm text-gray-700">
<p className="text-sm text-slate-400">
Showing{" "}
<span className="font-medium">
{(currentPage - 1) * pageSize + 1}
@@ -60,7 +56,7 @@ export function PaginationControls({
<LinkDisabled
to={pageUrl(location, currentPage - 1)}
disabled={currentPage === 1}
className="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
className="relative inline-flex items-center rounded-l-md border border-slate-500 bg-slate-700/20 px-2 py-2 text-sm font-medium text-slate-400 hover:bg-slate-500 hover:text-slate-900 focus:z-20"
disabledClassName="opacity-30"
>
<span className="sr-only">Previous</span>
@@ -74,7 +70,7 @@ export function PaginationControls({
<LinkDisabled
to={pageUrl(location, currentPage + 1)}
disabled={currentPage === totalPages}
className="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
className="relative inline-flex items-center rounded-r-md border border-slate-500 bg-slate-700/20 px-2 py-2 text-sm font-medium text-slate-400 hover:bg-slate-500 hover:text-slate-900 focus:z-20"
disabledClassName="opacity-30"
>
<span className="sr-only">Next</span>
@@ -101,8 +97,9 @@ function pageUrl(
const baseClass =
"relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20";
const unselectedClass =
"bg-white border-gray-300 text-gray-500 hover:bg-gray-50";
const selectedClass = "z-10 bg-indigo-50 border-indigo-500 text-indigo-600";
"bg-slate-700/20 border-slate-500 text-slate-400 hover:bg-slate-500 hover:text-slate-900";
const selectedClass =
"z-10 bg-slate-400 hover:bg-slate-200 border-slate-400 text-slate-900";
function PageLinkComponent({
page,
@@ -150,7 +147,7 @@ function NextPreviousButton({
return (
<Link
to={path}
className="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
className="relative inline-flex items-center rounded-l-md border border-gray-300 bg-slate-700/20 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
>
{children}
</Link>