💅🏼 Formatting tweaks to tabs

This commit is contained in:
2024-03-30 21:28:48 -04:00
parent b4d1b678b1
commit c6f719e78b
4 changed files with 12 additions and 10 deletions

View File

@@ -116,8 +116,8 @@ export const DownloadsPanel = (
href="#"
className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
activeTab === "directconnect"
? "bg-slate-200 text-slate-800"
: "text-slate-200"
? "bg-slate-200 dark:text-slate-200 dark:bg-slate-400 text-slate-800"
: "dark:text-slate-400 text-slate-800"
}`}
aria-current="page"
onClick={() => setActiveTab("directconnect")}
@@ -130,7 +130,7 @@ export const DownloadsPanel = (
className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
activeTab === "torrents"
? "bg-slate-200 text-slate-800"
: "text-slate-200"
: "dark:text-slate-400 text-slate-800"
}`}
onClick={() => setActiveTab("torrents")}
>

View File

@@ -13,9 +13,9 @@ export const TabControls = (props): ReactElement => {
{filteredTabs.map(({ id, name, icon }) => (
<a
key={id}
className={`inline-flex shrink-0 items-center gap-2 px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 ${
className={`inline-flex shrink-0 items-center gap-2 px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:border-b hover:dark:text-slate-200 ${
active === id
? "border-b-2 border-700 dark:text-slate-200"
? "border-b border-cyan-50 dark:text-slate-200"
: "border-b border-transparent"
}`}
aria-current="page"

View File

@@ -9,7 +9,7 @@ export const TorrentDownloads = (props) => {
<>
{data.map(({ torrent }) => {
return (
<dl className="mt-5">
<dl className="mt-5 dark:text-slate-200 text-slate-600">
<dt className="text-lg">{torrent.name}</dt>
<p className="text-sm">{torrent.hash}</p>
<p className="text-sm">
@@ -28,7 +28,7 @@ export const TorrentDownloads = (props) => {
<span>{Math.floor(torrent.progress * 100)}%</span>
{/* downloaded/left */}
<p className="inline-flex items-center bg-slate-50 text-green-800 dark:text-green-900 text-xs font-medium px-2.5 py-1 rounded-md dark:bg-slate-400">
<p className="inline-flex items-center bg-slate-200 text-green-800 dark:text-green-900 text-xs font-medium px-2.5 py-1 rounded-md dark:bg-slate-400">
<span className="pr-1">
<i className="icon-[solar--arrow-to-down-left-outline] h-4 w-4"></i>
</span>
@@ -48,7 +48,7 @@ export const TorrentDownloads = (props) => {
</p>
<div className="flex gap-4 mt-2">
{/* Peers */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="inline-flex items-center bg-slate-200 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1">
<i className="icon-[solar--station-minimalistic-line-duotone] h-5 w-5"></i>
</span>
@@ -58,7 +58,7 @@ export const TorrentDownloads = (props) => {
</span>
{/* Size */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="inline-flex items-center bg-slate-200 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--mirror-right-bold-duotone] h-4 w-4"></i>
</span>

View File

@@ -10,6 +10,7 @@ export const WantedComics = (props): ReactElement => {
const {
data: wantedComics,
isSuccess,
isFetched,
isError,
isLoading,
} = useQuery({
@@ -41,6 +42,7 @@ export const WantedComics = (props): ReactElement => {
minWidth: 350,
accessorFn: (data) => data,
cell: (value) => {
console.log("ASDASd", value);
const row = value.getValue()._source;
return row && <MetadataPanel data={row} />;
},
@@ -172,7 +174,7 @@ export const WantedComics = (props): ReactElement => {
</div>
</div>
</header>
{isSuccess ? (
{isSuccess && wantedComics?.data.hits?.hits ? (
<div>
<div className="library">
<T2Table