remove old dark
This commit is contained in:
@@ -11,15 +11,31 @@ export default function RevealDropDown(props: {
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="border-surface0 relative mb-4 overflow-visible rounded-lg border">
|
||||
<div class="relative mb-4 overflow-visible">
|
||||
{/* Button Header */}
|
||||
<div
|
||||
class="bg-mantle flex cursor-pointer items-center justify-between p-3"
|
||||
class="bg-mantle border-surface0 flex cursor-pointer items-center justify-between rounded-t p-3"
|
||||
style={
|
||||
isRevealed()
|
||||
? {
|
||||
"border-top-style": "var(--tw-border-style)",
|
||||
"border-inline-style": "var(--tw-border-style)",
|
||||
"border-top-width": "1px",
|
||||
"border-inline-width": "1px",
|
||||
"border-top-left-radius": "var(--radius-xl)",
|
||||
"border-top-right-radius": "var(--radius-xl)"
|
||||
}
|
||||
: {
|
||||
"border-style": "var(--tw-border-style)",
|
||||
"border-width": "1px",
|
||||
"border-radius": "var(--radius-xl)"
|
||||
}
|
||||
}
|
||||
onClick={toggleReveal}
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-gray-600 dark:text-gray-300">
|
||||
{/* Life and lineage icon */}
|
||||
<span class="h-12 w-12">
|
||||
<img src={"/LineageIcon.png"} />
|
||||
</span>
|
||||
<span class="font-medium">{props.title}</span>
|
||||
</div>
|
||||
@@ -46,15 +62,13 @@ export default function RevealDropDown(props: {
|
||||
|
||||
{/* Reveal Content */}
|
||||
<div
|
||||
class={`absolute right-0 left-0 z-10 overflow-scroll transition-all duration-300 ease-in-out ${
|
||||
class={`bg-mantle border-surface0 absolute right-0 left-0 z-10 overflow-scroll rounded-b-xl border-x border-b p-4 shadow-lg transition-all duration-300 ease-in-out ${
|
||||
isRevealed()
|
||||
? "mx-h-[75dvh] opacity-100 md:max-h-[60vh]"
|
||||
: "max-h-0 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div class="bg-mantle p-4 shadow-lg dark:bg-gray-900">
|
||||
{props.children}
|
||||
</div>
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -25,12 +25,12 @@ export interface CardProps {
|
||||
|
||||
export default function Card(props: CardProps) {
|
||||
return (
|
||||
<div class="bg-base relative z-0 mx-auto h-96 w-full overflow-hidden rounded-lg shadow-lg md:w-5/6 lg:w-3/4 dark:bg-zinc-900">
|
||||
<div class="bg-base border-text relative z-0 mx-auto h-96 w-full overflow-hidden rounded-lg border shadow-lg lg:w-5/6 xl:w-3/4">
|
||||
<Show when={props.privilegeLevel === "admin"}>
|
||||
<div class="border-opacity-20 bg-opacity-40 dark:bg-opacity-60 absolute top-0 w-full border-b border-white bg-white px-2 py-4 backdrop-blur-md md:px-6 dark:border-black dark:bg-zinc-800">
|
||||
<div class="border-opacity-20 bg-opacity-40 border-text bg-text absolute top-0 w-full border-b px-2 py-4 backdrop-blur-md md:px-6">
|
||||
<div class="flex justify-between">
|
||||
<Show when={!props.post.published}>
|
||||
<div class="text-center text-lg whitespace-nowrap text-black dark:text-white">
|
||||
<div class="text-center text-base text-lg whitespace-nowrap">
|
||||
Not Published
|
||||
</div>
|
||||
</Show>
|
||||
@@ -43,22 +43,20 @@ export default function Card(props: CardProps) {
|
||||
alt={props.post.title.replaceAll("_", " ") + " banner"}
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
<div class="border-opacity-20 bg-opacity-40 dark:bg-opacity-60 bg-base absolute bottom-0 w-full border-t border-white px-2 py-4 backdrop-blur-md md:px-6 dark:border-zinc-900 dark:bg-zinc-800">
|
||||
<div class="border-opacity-20 bg-opacity-40 bg-base border-text absolute bottom-0 w-full border-t px-2 py-4 backdrop-blur-md md:px-6">
|
||||
<div class="flex flex-col items-center justify-between md:flex-row">
|
||||
<div class="text-center md:text-left">
|
||||
<div class="text-2xl text-black md:text-3xl dark:text-white">
|
||||
<div class="text-center lg:text-left">
|
||||
<div class="text-2xl md:text-3xl">
|
||||
{props.post.title.replaceAll("_", " ")}
|
||||
</div>
|
||||
<div class="text-lg text-black md:text-xl dark:text-white">
|
||||
{props.post.subtitle}
|
||||
</div>
|
||||
<div class="text-lg md:text-xl">{props.post.subtitle}</div>
|
||||
</div>
|
||||
<div class="flex w-full justify-around pt-2 md:w-1/3 md:justify-between md:pt-0 md:pl-2">
|
||||
<div class="my-auto md:h-full">
|
||||
<p class="text-sm whitespace-nowrap text-black dark:text-white">
|
||||
<div class="flex w-full flex-col justify-around pt-2 lg:w-1/2 lg:flex-row lg:justify-between lg:pt-0 lg:pl-2">
|
||||
<div class="m-auto md:h-full md:pr-2">
|
||||
<p class="text-sm whitespace-nowrap">
|
||||
{props.post.total_comments || 0} Comments
|
||||
</p>
|
||||
<p class="text-sm whitespace-nowrap text-black dark:text-white">
|
||||
<p class="text-sm whitespace-nowrap">
|
||||
{props.post.total_likes || 0} Likes
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -19,7 +19,7 @@ export default function CardLinks(props: CardLinksProps) {
|
||||
onClick={() => setReadLoading(true)}
|
||||
class={`${
|
||||
readLoading() ? "bg-zinc-400" : "bg-lavender hover:brightness-125"
|
||||
} mb-1 ml-2 flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
|
||||
} mx-auto mb-1 flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
|
||||
>
|
||||
<Show when={readLoading()} fallback="Read">
|
||||
<LoadingSpinner height={24} width={24} />
|
||||
@@ -31,7 +31,7 @@ export default function CardLinks(props: CardLinksProps) {
|
||||
onClick={() => setEditLoading(true)}
|
||||
class={`${
|
||||
editLoading() ? "bg-zinc-400" : "bg-green-400 hover:bg-green-500"
|
||||
} ml-2 flex rounded px-4 py-2 font-light text-white shadow transition-all duration-300 ease-out active:scale-90`}
|
||||
} mx-auto flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
|
||||
>
|
||||
<Show when={editLoading()} fallback="Edit">
|
||||
<LoadingSpinner height={24} width={24} />
|
||||
|
||||
@@ -72,7 +72,7 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
|
||||
width={32}
|
||||
/>
|
||||
</div>
|
||||
<div class="my-auto pt-0.5 pl-2 text-sm text-black dark:text-white">
|
||||
<div class="my-auto pt-0.5 pl-2 text-sm">
|
||||
{likes().length} {likes().length === 1 ? "Like" : "Likes"}
|
||||
</div>
|
||||
<div class="tooltip-text -ml-12 w-12">Must be logged in</div>
|
||||
|
||||
Reference in New Issue
Block a user