feat: add dark theme

This commit is contained in:
Kentai Radiquum 2024-08-02 20:55:01 +05:00
parent 1588039542
commit 3e72866a08
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
22 changed files with 314 additions and 162 deletions

View file

@ -15,10 +15,10 @@ export const ReleaseInfoBasics = (props: {
></img>
<div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
<div className="flex flex-col gap-1">
<p className="text-xl font-bold text-black md:text-2xl">
<p className="text-xl font-bold text-black md:text-2xl dark:text-white">
{props.title.ru}
</p>
<p className="text-sm text-gray-500 md:text-base">
<p className="text-sm text-gray-500 md:text-base dark:text-gray-400">
{props.title.original}
</p>
</div>

View file

@ -53,7 +53,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
<span className="w-8 h-8 iconify-color mdi--animation-play-outline "></span>
<span className="w-8 h-8 iconify-color mdi--animation-play-outline dark:invert"></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
{props.episodes.released ? props.episodes.released : "?"}
@ -64,7 +64,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
<span className="w-8 h-8 iconify-color mdi--calendar-outline "></span>
<span className="w-8 h-8 iconify-color mdi--calendar-outline dark:invert"></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.category}
@ -76,7 +76,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
<span className="w-8 h-8 iconify-color mdi--people-group-outline "></span>
<span className="w-8 h-8 iconify-color mdi--people-group-outline dark:invert"></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.studio && (
@ -112,7 +112,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
<span className="w-8 h-8 iconify-color mdi--tag-outline "></span>
<span className="w-8 h-8 iconify-color mdi--tag-outline dark:invert"></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.genres &&
@ -129,7 +129,7 @@ export const ReleaseInfoInfo = (props: {
{props.status.toLowerCase() == "анонс" && (
<Table.Row>
<Table.Cell className="py-0">
<span className="w-8 h-8 iconify-color mdi--clock-outline "></span>
<span className="w-8 h-8 iconify-color mdi--clock-outline dark:invert"></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
{props.aired_on_date != 0 ? (

View file

@ -46,7 +46,7 @@ export const ReleaseInfoRating = (props: {
</p>
<Button
size={"xs"}
className="text-gray-500 border border-gray-600 rounded-full"
className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
color="inline"
>
изменить
@ -55,7 +55,7 @@ export const ReleaseInfoRating = (props: {
) : (
<Button
size={"xs"}
className="text-gray-500 border border-gray-600 rounded-full"
className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
color="inline"
>
оценить

View file

@ -17,7 +17,7 @@ export const ReleaseInfoRelated = (props: {
}) => {
return (
<Card>
<div className="flex justify-between py-2 border-b-2 border-black">
<div className="flex justify-between py-2 border-b-2 border-black dark:border-white">
<h1>Связанные релизы</h1>
{props.related && (
<Link href={`/related/${props.related.id}`}>

View file

@ -13,7 +13,7 @@ const lists = [
const DropdownTheme = {
floating: {
target:
"flex-1 bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
"flex-1",
},
};
@ -57,6 +57,7 @@ export const ReleaseInfoUserList = (props: {
label={lists[props.userList].name}
dismissOnClick={true}
theme={DropdownTheme}
color="blue"
>
{lists.map((list) => (
<Dropdown.Item
@ -68,7 +69,7 @@ export const ReleaseInfoUserList = (props: {
))}
</Dropdown>
<Button
className="bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
color="blue"
onClick={() => {
_addToFavorite();
}}