Rainnny/rainnny.club
Rainnny/rainnny.club
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Activity

Make the Discord status card work with light mode

Browse Source
This commit is contained in:
Braydon 2024-09-04 15:54:25 -04:00
parent 1914751649
commit 1c19294739
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/landing/discord-status.tsx
View File

@ -79,7 +79,7 @@ const DiscordStatus = (): ReactElement | undefined => {
return ( return (
<div className="flex justify-center select-none"> <div className="flex justify-center select-none">
<div className="flex flex-col bg-zinc-900 rounded-xl"> <div className="flex flex-col bg-zinc-300 dark:bg-zinc-900 rounded-xl">
<BannerAvatar <BannerAvatar
discordData={discordData} discordData={discordData}
discordUser={discordUser} discordUser={discordUser}
@ -96,7 +96,7 @@ const DiscordStatus = (): ReactElement | undefined => {
{/* Activity */} {/* Activity */}
{discordData.activities.length > 0 && ( {discordData.activities.length > 0 && (
<div className="mt-2 p-2 bg-zinc-950/65 rounded-lg"> <div className="mt-2 p-2 bg-zinc-100 dark:bg-zinc-950/65 rounded-lg">
{discordData.activities[0].name !== {discordData.activities[0].name !==
"Spotify" ? ( "Spotify" ? (
<GameActivity <GameActivity
@ -129,7 +129,7 @@ const BannerAvatar = ({
}): ReactElement => ( }): ReactElement => (
<div className="relative pointer-events-none"> <div className="relative pointer-events-none">
<Image <Image
className="border-2 border-zinc-900 rounded-t-xl" className="border-2 border-zinc-300 dark:border-zinc-900 rounded-t-xl"
src={`https://cdn.discordapp.com/banners/${discordUser.id}/${dcdnUser.banner}.webp?size=1024`} src={`https://cdn.discordapp.com/banners/${discordUser.id}/${dcdnUser.banner}.webp?size=1024`}
alt={`${discordUser.username}'s Banner`} alt={`${discordUser.username}'s Banner`}
width={300} width={300}
@ -137,7 +137,7 @@ const BannerAvatar = ({
/> />
<div className="relative"> <div className="relative">
<Image <Image
className="absolute left-2 -bottom-12 border-[5px] border-zinc-900 rounded-full" className="absolute left-2 -bottom-12 border-[5px] border-zinc-300 dark:border-zinc-900 rounded-full"
src={`https://cdn.discordapp.com/avatars/${discordUser.id}/${discordUser.avatar}.webp?size=1024`} src={`https://cdn.discordapp.com/avatars/${discordUser.id}/${discordUser.avatar}.webp?size=1024`}
alt={`${discordUser.username}'s Avatar`} alt={`${discordUser.username}'s Avatar`}
width={96} width={96}
@ -145,7 +145,7 @@ const BannerAvatar = ({
/> />
<div <div
className={cn( className={cn(
"absolute left-[4.5rem] -bottom-12 w-7 h-7 border-[5px] border-zinc-900 rounded-full", "absolute left-[4.5rem] -bottom-12 w-7 h-7 border-[5px] border-zinc-300 dark:border-zinc-900 rounded-full",
statusColors[discordData.discord_status] statusColors[discordData.discord_status]
)} )}
/> />
@ -155,7 +155,7 @@ const BannerAvatar = ({
const Bio = ({ bio }: { bio: string }): ReactElement => ( const Bio = ({ bio }: { bio: string }): ReactElement => (
<SimpleTooltip content={bio}> <SimpleTooltip content={bio}>
<div className="p-2 bg-zinc-950/65 text-sm rounded-xl"> <div className="p-2 bg-zinc-100 dark:bg-zinc-950/65 text-sm rounded-xl">
{truncateText(bio, 15)} {truncateText(bio, 15)}
</div> </div>
</SimpleTooltip> </SimpleTooltip>