mirror of
https://github.com/sergi0g/cup.git
synced 2025-11-17 01:23:39 -05:00
Tiny web UI changes
This commit is contained in:
@@ -53,7 +53,7 @@ export default function Image({ data }: { data: Image }) {
|
||||
<>
|
||||
<button onClick={handleOpen} className="w-full">
|
||||
<li
|
||||
className={`flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-${theme}-100 hover:dark:bg-${theme}-800/50 transition-colors duration-200`}
|
||||
className={`flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-${theme}-100 hover:dark:bg-${theme}-900/50 transition-colors duration-200`}
|
||||
>
|
||||
<Box className={`size-6 shrink-0 text-${theme}-500`} />
|
||||
<span className="font-mono">{data.reference}</span>
|
||||
@@ -83,21 +83,23 @@ export default function Image({ data }: { data: Image }) {
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group flex w-fit items-center justify-center gap-1 text-black hover:underline dark:text-white`}
|
||||
className={`group w-fit text-black hover:underline dark:text-white`}
|
||||
>
|
||||
<span>{data.reference}</span>
|
||||
<svg
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
width="10px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="transition-all duration-100 group-hover:rotate-45"
|
||||
>
|
||||
<path
|
||||
d="M11 9.283V1H2.727v1.44h5.83L1 9.99 2.01 11l7.556-7.55v5.833H11Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
{data.reference}
|
||||
<svg
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
height="1cap"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-1 inline transition-all duration-100 group-hover:rotate-45"
|
||||
>
|
||||
<path
|
||||
d="M11 9.283V1H2.727v1.44h5.83L1 9.99 2.01 11l7.556-7.55v5.833H11Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@@ -25,9 +25,9 @@ export default function Search({
|
||||
return (
|
||||
<div className={`w-full px-6 text-black dark:text-white`}>
|
||||
<div
|
||||
className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-800 peer flex-nowrap`}
|
||||
className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-900 peer flex-nowrap`}
|
||||
>
|
||||
<SearchIcon className="size-5" />
|
||||
<SearchIcon className={`size-5 text-${theme}-600 dark:text-${theme}-400`} />
|
||||
<div className="w-full">
|
||||
<input
|
||||
className={`h-10 w-full text-sm text-${theme}-800 dark:text-${theme}-200 peer bg-transparent focus:outline-none placeholder:text-${theme}-600 placeholder:dark:text-${theme}-400`}
|
||||
|
||||
@@ -16,7 +16,7 @@ export function Server({
|
||||
if (name.length === 0)
|
||||
return (
|
||||
<li className="mb-8 last:mb-0">
|
||||
<ul className={`dark:divide-${theme}-800 divide-y dark:text-white`}>
|
||||
<ul className={`dark:divide-${theme}-900 divide-y dark:text-white`}>
|
||||
{children}
|
||||
</ul>
|
||||
</li>
|
||||
@@ -34,7 +34,7 @@ export function Server({
|
||||
/>
|
||||
</DisclosureButton>
|
||||
<DisclosurePanel
|
||||
className={`dark:divide-${theme}-800 divide-y dark:text-white`}
|
||||
className={`dark:divide-${theme}-900 divide-y dark:text-white`}
|
||||
as="ul"
|
||||
transition
|
||||
>
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function Statistic({
|
||||
const displayName = name.replaceAll("_", " ");
|
||||
return (
|
||||
<div
|
||||
className={`before:bg-${theme}-200 before:dark:bg-${theme}-800 after:bg-${theme}-200 after:dark:bg-${theme}-800 gi`}
|
||||
className={`before:bg-${theme}-200 before:dark:bg-${theme}-900 after:bg-${theme}-200 after:dark:bg-${theme}-900 gi`}
|
||||
>
|
||||
<div className="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32">
|
||||
<dt
|
||||
|
||||
Reference in New Issue
Block a user