💅🏼 Formatting tweaks to tabs
This commit is contained in:
@@ -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")}
|
||||
>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user