beerpsi
/
cozynet
forked from PolarisPyra/cozynet
1
0
Fork 0
Code Pull Requests Activity

added themes 

-  Catppuccin Mocha
- Gruvbox
- Dark
- Light
This commit is contained in:
polaris 2024-01-08 16:43:27 -05:00
parent 619e56dd7a
commit 4a946cca06
30 changed files with 506 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.json
View File

@ -7,7 +7,7 @@
"config": "tailwind.config.ts",
"css": "src/app/globals.css",
"baseColor": "slate",
"cssVariables": false,
"cssVariables": true,
"prefix": ""
},
"aliases": {

2
src/app/chunithm/page.tsx
View File

@ -4,7 +4,7 @@ import NavigationBar from "@/components/shared/NavigationBar/NavigationBar";
import ScoreCardList from "@/components/ScoreCard/ScoreCard";
export default function Chunithm() {
return (
<div className="p-2 min-h-screen dark:bg-base bg-lightbackground">
<div className="p-2 min-h-screen bg-background">
<NavigationBar />
<div className="flex flex-col gap-4 mt-2 md:gap-6 lg:flex-row lg:gap-8">
<div className="w-full lg:w-1/4 xl:w-1/5">

2
src/app/favorites/page.tsx
View File

@ -4,7 +4,7 @@ import NavigationBar from "@/components/shared/NavigationBar/NavigationBar";
const Ranking = () => {
return (
<div className="dark:bg-base bg-lightbackground min-h-screen p-4 lg:p-2">
<div className="bg-background min-h-screen p-4 lg:p-2">
<NavigationBar />
<SongCardList />
</div>

2
src/app/friends/page.tsx
View File

@ -3,7 +3,7 @@ import NavigationBar from "@/components/shared/NavigationBar/NavigationBar";
const Friends = () => {
return (
<div className="bg-base min-h-screen p-4 lg:p-2">
<div className="bg-background min-h-screen p-4 lg:p-2">
<NavigationBar />
</div>

197
src/app/globals.css
View File

@ -25,9 +25,6 @@
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
@ -36,33 +33,177 @@
}
.dark {
--background: 26 7% 15%;
--foreground: 210 40% 98%;
--buttonhovercolor: 0, 0%, 12%;
--typographydropdown: 0, 0%, 68%;
--buttonbackgroundcolor: 0, 0%, 2%;
--background: 0, 0%, 0%;
--subsectionbackgroundcolor: 0, 0%, 8%;
--cardsectionbackgroundcolor: 0, 0%, 8%;
--characterbadgetypography: 0, 0%, 68%;
--scorecardbadge: 0, 0%, 12%;
--scorecardbadgetypography: 0, 0%, 68%;
--playertrophybadge: 0, 0%, 12%;
--playerteambadge: 0, 0%, 12%;
--playertrophytext: 0, 0%, 68%;
--heartcolorfave: 40, 70%, 78%;
--heartcolornormal: 3, 70%, 50%;
--segmentedtabactivetypography: 0, 0%, 100%;
--typography: 0, 0%, 68%;
--foreground: 0, 0%, 68%;
--ratingincrease: 135, 29%, 52%;
--paginationtypographyhover: 0, 0%, 100%;
--ratingsame: 163, 29%, 60%;
--ratingdecrease: 360, 75%, 40%;
--songjacketborder: 0, 0%, 2%;
--segmentedtabnotactive: 0, 0%, 12%;
--segmentedtabactive: 0, 0%, 7%;
--segmentedtabtext: 0, 0%, 68%;
--segmentedtabtexthover: 0, 0%, 100%;
--bestrecentratingcolor: 0, 55%, 45%;
--texthover: 220, 83%, 75%;
--basicbadgecolor: 0, 0%, 0%;
--advancedbadgecolor: 0, 0%, 0%;
--expertbadgecolor: 0, 55%, 45%;
--masterbadgecolor: 251, 55%, 45%;
--worldsendbadgecolor: 0, 0%, 0%;
--newbadgecolor: 323, 55%, 45%;
--paginationbackground: 0, 0%, 8%;
--scoretext: 48, 75%, 57%;
--justicecriticaltext: 48, 75%, 57%;
--justicetext: 30, 83%, 47%;
--attacktext: 135, 29%, 52%;
--misstext: 0, 0%, 68%;
}
--card: 26 7% 15%;
--card-foreground: 210 40% 98%;
.light {
--buttonhovercolor: 210, 25%, 50%;
--typographydropdown: 210, 15%, 35%;
--buttonbackgroundcolor: 0, 0%, 98%;
--background: 0, 0%, 100%;
--paginationbackground: 0, 0%, 0%;
--subsectionbackgroundcolor: 0, 0%, 96%;
--cardsectionbackgroundcolor: 0, 0%, 96%;
--characterbadgetypography: 0, 0%, 0%;
--scorecardbadge: 210, 25%, 50%;
--scorecardbadgetypography: 0, 0%, 0%;
--playertrophybadge: 210, 25%, 50%;
--playerteambadge: 210, 25%, 50%;
--playertrophytext: 0, 0%, 0%;
--typography: 0, 0%, 0%;
--foreground: 210, 15%, 35%;
--ratingincrease: 135, 29%, 52%;
--paginationtypography: 0, 0%, 100%;
--paginationhover: 210, 25%, 50%;
--paginationtypographyhover: 210, 25%, 50%;
--ratingsame: 163, 29%, 60%;
--ratingdecrease: 360, 75%, 40%;
--songjacketborder: 233, 80%, 65%;
--heartcolorfave: 40, 70%, 78%;
--heartcolornormal: 3, 70%, 50%;
--segmentedtabnotactive: 210, 25%, 50%;
--segmentedtabactive: 210, 25%, 80%;
--segmentedtabtext: 0, 0%, 10%;
--segmentedtabtexthover: 0, 0%, 100%;
--texthover: 220, 83%, 75%;
--segmentedtabactivetypography: 0, 0%, 0%;
--bestrecentratingcolor: 343, 81%, 75%;
--basicbadgecolor: 135, 29%, 52%;
--advancedbadgecolor: 48, 75%, 57%;
--expertbadgecolor: 360, 50%, 70%;
--masterbadgecolor: 315, 22%, 51%;
--worldsendbadgecolor: 135, 29%, 52%;
--newbadgecolor: 342, 48%, 61%;
--scoretext: 48, 75%, 50%;
--justicecriticaltext: 48, 75%, 50%;
--justicetext: 30, 83%, 50%;
--attacktext: 135, 29%, 50%;
--misstext: 33, 15%, 50%;
}
.gruvbox {
--buttonhovercolor: 48, 75%, 57%;
--typographydropdown: 48, 67%, 88%;
--buttonbackgroundcolor: 30, 5%, 20%;
--background: 30, 7%, 12%;
--subsectionbackgroundcolor: 30, 11%, 37%;
--cardsectionbackgroundcolor: 30, 11%, 37%;
--characterbadgetypography: 270, 5%, 18%;
--scorecardbadge: 48, 75%, 57%;
--scorecardbadgetypography: 270, 5%, 18%;
--paginationbackground: 0, 0%, 0%;
--playertrophybadge: 48, 75%, 57%;
--playerteambadge: 48, 75%, 57%;
--playertrophytext: 233, 23%, 15%;
--heartcolorfave: 40, 70%, 78%;
--heartcolornormal: 3, 70%, 50%;
--typography: 48, 67%, 88%;
--foreground: 48, 67%, 88%;
--ratingincrease: 135, 29%, 52%;
--ratingsame: 163, 29%, 60%;
--ratingdecrease: 360, 75%, 40%;
--songjacketborder: 30, 5%, 20%;
--paginationtypographyhover: 0, 0%, 100%;
--segmentedtabnotactive: 48, 75%, 57%;
--segmentedtabactive: 42, 76%, 44%;
--segmentedtabtext: 0, 0%, 0%;
--segmentedtabtexthover: 0, 0%, 100%;
--texthover: 220, 83%, 75%;
--segmentedtabactivetypography: 0, 0%, 100%;
--bestrecentratingcolor: 342, 48%, 61%;
--basicbadgecolor: 135, 29%, 52%;
--advancedbadgecolor: 48, 75%, 57%;
--expertbadgecolor: 360, 75%, 40%;
--masterbadgecolor: 315, 22%, 51%;
--worldsendbadgecolor: 135, 29%, 52%;
--newbadgecolor: 342, 48%, 61%;
--scoretext: 48, 75%, 57%;
--justicecriticaltext: 48, 75%, 57%;
--justicetext: 30, 83%, 47%;
--attacktext: 135, 29%, 52%;
--misstext: 33, 15%, 60%;
}
--popover: 26 7% 15%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 26 7% 15%;
--secondary: 210 8% 32%;
--secondary-foreground: 210 40% 98%;
--muted: 210 8% 32%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 210 8% 32%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 210 8% 32%;
--input: 210 8% 32%;
--ring: 212.7 26.8% 83.9%;
.mocha {
--buttonhovercolor: 48, 75%, 57%;
--typographydropdown: 48, 67%, 88%;
--buttonbackgroundcolor: 30, 5%, 20%;
--background: 232, 23%, 18%;
--subsectionbackgroundcolor: 236, 23%, 12%;
--cardsectionbackgroundcolor: 236, 23%, 12%;
--characterbadgetypography: 227, 68%, 88%;
--scorecardbadge: 40, 70%, 78%;
--scorecardbadgetypography: 236, 23%, 12%;
--paginationbackground: 236, 23%, 12%;
--playertrophybadge: 40, 70%, 78%;
--playerteambadge: 233, 23%, 15%;
--playertrophytext: 233, 23%, 15%;
--heartcolorfave: 40, 70%, 78%;
--heartcolornormal: 3, 70%, 50%;
--typography: 227, 68%, 88%;
--foreground: 48, 67%, 88%;
--ratingincrease: 115, 54%, 76%;
--ratingsame: 220, 83%, 75%;
--ratingdecrease: 343, 81%, 75%;
--songjacketborder: 233, 23%, 15%;
--paginationtypographyhover: 0, 0%, 100%;
--paginationtypography: 227, 68%, 88%;
--segmentedtabnotactive: 236, 23%, 12%;
--segmentedtabactivetypography: 0, 0%, 0%;
--segmentedtabactive: 40, 70%, 78%;
--segmentedtabtext: 227, 68%, 88%;
--segmentedtabtexthover: 0, 0%, 0%;
--texthover: 220, 83%, 75%;
--bestrecentratingcolor: 343, 81%, 75%;
--basicbadgecolor: 115, 54%, 76%;
--advancedbadgecolor: 48, 75%, 57%;
--expertbadgecolor: 343, 81%, 75%;
--masterbadgecolor: 267, 83%, 80%;
--worldsendbadgecolor: 170, 57%, 73%;
--newbadgecolor: 343, 81%, 75%;
--scoretext: 40, 70%, 78%;
--justicecriticaltext: 40, 70%, 78%;
--justicetext: 11, 70%, 56%;
--attacktext: 105, 48%, 72%;
--misstext: 227, 68%, 88%;
}
}

1
src/app/layout.tsx
View File

@ -24,6 +24,7 @@ export default function RootLayout({
attribute="class"
defaultTheme="system"
enableSystem
themes={['gruvbox', 'light', 'dark', 'mocha']}
disableTransitionOnChange
>
<SettingsProvider>

2
src/app/management/page.tsx
View File

@ -6,7 +6,7 @@ import NewKeychipComponent from "@/components/whitelistKeychips/page";
export default function Dashboard() {
return (
<div className="p-4 min-h-screen dark:bg-base bg-lightbackground lg:p-2">
<div className="p-4 min-h-screen bg-back lg:p-2">
<NavigationBar />
<div className="flex flex-col items-center pt-4">
<UpdateCard />

2
src/app/ranking/page.tsx
View File

@ -6,7 +6,7 @@ import NewKeychipComponent from "@/components/whitelistKeychips/page";
export default function Dashboard() {
return (
<div className="p-4 min-h-screen bg-base lg:p-2">
<div className="p-4 min-h-screen bg-background lg:p-2">
<NavigationBar />
<div className="flex flex-col items-center pt-4">
</div>

2
src/app/settings/page.tsx
View File

@ -7,7 +7,7 @@ import NewKeychipComponent from "@/components/whitelistKeychips/page";
export default function Settings() {
return (
<div className="p-4 min-h-screen dark:bg-base bg-lightbackground lg:p-2">
<div className="p-4 min-h-screen bg-background lg:p-2">
<NavigationBar />
<div className="pt-4"> <SettingsPage /></div>
</div>

6
src/app/userbox/page.tsx
View File

@ -10,7 +10,7 @@ import { FaHeart } from 'react-icons/fa'; // Import heart icon from react-icons
import Link from 'next/link'; // Import Link from next/link
const UserBox = () => {
return (
<div className="dark:bg-base bg-lightbackground min-h-screen p-4 lg:p-2">
<div className="bg-background min-h-screen p-4 lg:p-2">
<NavigationBar />
<div className="dark:bg-base bg-lightbackgroundmin-h-screen flex flex-col items-center ">
@ -37,8 +37,8 @@ const UserBox = () => {
<RivalComponent />
</div>
<Link href="/favorites"> {/* Replace '/favorites' with the actual path of your favorites page */}
<div className="mt-2 w-full h-[120px] cursor-pointer dark:bg-crust bg-color15 p-4 rounded-sm flex flex-col hover:bg-color13 dark:hover:bg-mantle items-center justify-center">
<FaHeart className="mr-2 text-color9 dark:text-red" style={{ fontSize: '5em' }} />
<div className="mt-2 w-full h-[120px] cursor-pointer bg-subsectionbackgroundcolor p-4 rounded-sm flex flex-col hover:bg-color13 dark:hover:bg-mantle items-center justify-center">
<FaHeart className="mr-2 text-heartcolornormal" style={{ fontSize: '5em' }} />
<span className="mt-2 text-sm font-bold dark:text-white ">FAVORITES</span>
</div>
</Link>

28
src/components/CharacterCard/Page.tsx
View File

@ -36,7 +36,7 @@ const CharacterImage = ({ characterId }: CharacterImageProps) => {
alt="Character Image"
width={64}
height={64}
className="absolute top-2 left-2 w-10 h-10 border-4 md:w-20 md:h-20 md:top-4 md:left-6 border-mantle"
className="absolute top-2 left-2 w-10 h-10 border-4 md:w-20 md:h-20 md:top-4 md:left-6 border-songjacketborder"
/>
);
};
@ -47,7 +47,7 @@ type TeamInfoProps = {
};
const TeamInfo = ({ teamName }: TeamInfoProps) => (
<div className="absolute top-2 left-24 p-1 mt-1 text-xs uppercase rounded-sm font-semibold bg-gray-300 font-semi dark:bg-mantle dark:text-text md:p-3 md:mt-2 md:top-6 md:left-28">
<div className="absolute top-2 left-24 p-1 mt-1 text-xs uppercase rounded-sm font-semibold font-semi bg-playerteambadge text-characterbadgetypography md:p-3 md:mt-2 md:top-6 md:left-28">
{teamName
? `Belongs to team ${teamName}`
: "You do not belong to a team."}
@ -94,7 +94,7 @@ const CharacterCard = () => {
return (
<div
key={index}
className="p-2 md:p-6 dark:bg-crust bg-color15 rounded-sm relative mb-2 w-full sm:w-[200px] md:w-[200px] lg:w-[700px] xl:w-[800px] 2xl:w-[1400px] "
className="p-2 md:p-6 bg-cardsectionbackgroundcolor rounded-sm relative mb-2 w-[432px] sm:w-[630px] md:w-[830px] lg:w-[680px] xl:w-[780px] 2xl:w-[1380px] "
>
<div className="flex items-center">
<CharacterImage characterId={characterId} />
@ -102,15 +102,15 @@ const CharacterCard = () => {
<TeamInfo teamName={teamName} />
<div className="pt-14 md:pt-20">
<div className="mt-2 mb-2 ml-1 text-xs uppercase md:text-sm md:-ml-1">
<span className="px-2 py-1 font-semibold rounded-sm bg-yellow dark:bg-yellow dark:text-mantle">
<span className="px-2 py-1 font-semibold rounded-sm bg-playertrophybadge text-playertrophytext">
{trophyname || "New comer"}
</span>
</div>
<div className="mb-2 md:mb-2">
<span className="text-xs uppercase dark:text-text">
<span className="text-xs uppercase text-typography">
Lv.
{reincarnationNum > 0 && (
<span className="text-xs uppercase dark:text-text">
<span className="text-xs uppercase text-typography">
<span className="text-lg font-bold"> {reincarnationNum}{level}</span>
</span>
)}
@ -118,32 +118,32 @@ const CharacterCard = () => {
<span className="text-lg font-bold"> {level}</span>
)}
</span>
<span className="ml-2 font-bold md:text-lg md:ml-2 dark:text-text">
<span className="ml-2 font-bold md:text-lg md:ml-2 text-typography">
{userName}
</span>
</div>
<div className="mb-2 md:mb-2">
<span className="text-xs uppercase dark:text-text">Rating</span>
<span className="text-xs uppercase text-typography">Rating</span>
<div className="flex items-center">
<span className="mr-1 font-bold dark:text-text">
<span className="mr-1 font-bold text-typography">
{(playerRating / 100).toFixed(2)}
</span>
<span className="ml-1 text-xs font-bold dark:text-text">
<span className="ml-1 text-xs font-bold text-typography">
(max): {(highestRating / 100).toFixed(2)}
</span>
</div>
</div>
<div className="mb-2 md:mb-2">
<span className="text-xs uppercase dark:text-text">
<span className="text-xs uppercase text-typography">
Over Power
</span>
<div className="flex items-center dark:text-text">
<span className="mr-1 font-bold dark:text-text">
<div className="flex items-center text-typography">
<span className="mr-1 font-bold text-typography">
{(overPowerRate / 100).toFixed(2)} %
</span>
</div>
</div>
<div className="text-xs dark:text-text">
<div className="text-xs text-typography">
Last play date{" "}
<span className="font-bold">
{lastPlayDate || "Not available"}

13
src/components/CharacterCustomization/Page.tsx
View File

@ -40,20 +40,20 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
}) => {
return (
<div className={`dropdown-container relative ${className}`}>
<label className="block text-sm font-medium dark:text-text pb-1 pt-2 ">
<label className="block text-sm font-medium text-typography pb-1 pt-2 ">
{label}
</label>
<div className="mt-1 relative">
<select
value={value}
onChange={(e) => onChange(e.target.value)}
className="w-[300px] md:w-[200px] lg:w-[300px] sm:w-[200px] pl-3 pr-10 py-2 border-gray-300 focus:outline-none sm:text-sm rounded-md shadow-sm"
className=" w-[280px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
{options.map((option, index) => (
<option
key={`${option.value}-${index}`}
value={option.value}
className=" text-black dark:text-white"
className=" text-typography"
>
{option.label}
</option>
@ -156,7 +156,7 @@ const AvatarCustomizationData: React.FC = () => {
const avatarWearOptions = dropdownOptions.filter((option) => option.category === "1");
return (
<div className="dark:bg-crust bg-color15 rounded-sm w-[380px] sm:w-[700px] mx-auto">
<div className="bg-subsectionbackgroundcolor rounded-sm w-[380px] sm:w-[700px] mx-auto">
<div className="flex flex-col md:flex-row justify-center items-center">
<div className="avatar_group w-full md:w-1/2 flex justify-center items-center">
<div className="avatar_base">
@ -168,7 +168,7 @@ const AvatarCustomizationData: React.FC = () => {
</div>
</div>
<div className="avatar_customization_dropdowns w-full md:w-1/2 flex flex-col justify-center items-center">
<div className="avatar_customization_dropdowns w-full md:w-1/2 flex flex-col justify-center items-start pl-4">
<Dropdown
options={avatarHeadOptions}
onChange={(value) => handleSelectionChange("avatarHead", value)}
@ -203,10 +203,11 @@ const AvatarCustomizationData: React.FC = () => {
label="Outfit Options: "
value={avatarCustomizationData[0].avatarWear}
/>
<div className="pt-4">
<button
onClick={handlePostData}
className=" px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-red text-black dark:text-text dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow hover:text-black dark:hover:text-black focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Update Avatar
</button>

8
src/components/PlayerMapIcon/page.tsx
View File

@ -38,7 +38,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
}) => {
return (
<div className={`dropdown-container relative ${className}`}>
<label className="block text-sm font-medium dark:text-text pb-1 pt-2 ">
<label className="block text-sm font-medium text-typography pb-1 pt-2 ">
{str}
</label>
<div className="mt-1 relative">
@ -48,7 +48,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
// console.log("Dropdown value changed:", e.target.value);
onChange(e.target.value);
}}
className="w-[300px] md:w-[200px] lg:w-[300px] sm:w-[200px] pl-3 pr-10 py-2 border-gray-300 focus:outline-none sm:text-sm rounded-md shadow-sm"
className=" w-[280px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
{options.map((option, index) => (
<option
@ -136,7 +136,7 @@ const PlayerMapIconComponent: React.FC = () => {
}
return (
<div className="dark:bg-crust bg-color15 rounded-sm md:flex-row justify-center items-center pl-4 pt-4">
<div className="bg-subsectionbackgroundcolor rounded-sm md:flex-row justify-center items-center pl-4 pt-4">
{selectedNameplateId && (
<img
className="w-[140px] h-[140px]"
@ -165,7 +165,7 @@ const PlayerMapIconComponent: React.FC = () => {
<div className="flex items-center mt-4">
<button
onClick={handlePostData}
className=" px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-red dark:text-text dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow hover: dark:hover: focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Update Map Icon
</button>

8
src/components/PlayerNameplate/page.tsx
View File

@ -38,7 +38,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
}) => {
return (
<div className={`dropdown-container relative ${className}`}>
<label className="block text-sm font-medium dark:text-text pb-1 pt-2 ">
<label className="block text-sm font-medium text-typography pb-1 pt-2 ">
{str}
</label>
<div className="mt-1 relative">
@ -48,7 +48,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
// console.log("Dropdown value changed:", e.target.value);
onChange(e.target.value);
}}
className="w-[300px] md:w-[200px] lg:w-[300px] sm:w-[200px] pl-3 pr-10 py-2 border-gray-300 focus:outline-none sm:text-sm rounded-md shadow-sm"
className=" w-[280px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
{options.map((option, index) => (
<option
@ -137,7 +137,7 @@ const PlayerNamePlateComponent: React.FC = () => {
}
return (
<div className="dark:bg-crust bg-color15 rounded-sm md:flex-row justify-center items-center pl-4 pt-4">
<div className="bg-subsectionbackgroundcolor rounded-sm md:flex-row justify-center items-center pl-4 pt-4">
{selectedNameplateId && (
<img
className="w-[300px]"
@ -166,7 +166,7 @@ const PlayerNamePlateComponent: React.FC = () => {
<div className="flex items-center mt-4">
<button
onClick={handlePostData}
className=" px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-red dark:text-text dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow hover: dark:hover: focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Update Nameplate
</button>

20
src/components/PlayerRivals/page.tsx
View File

@ -85,10 +85,10 @@ const RivalComponent = () => {
}, [successMessage]);
return (
<div className="dark:bg-crust bg-color15 rounded-sm md:flex-row justify-center items-center pl-4 pt-4">
<div className="bg-subsectionbackgroundcolor rounded-sm md:flex-row justify-center items-center pl-4 pt-4">
<div className="flex flex-col items-start w-full md:w-auto">
<div className="mt-1 relative">
<label className="block text-sm font-medium dark:text-text pb-1 pt-2">
<label className="block text-sm font-medium text-typography pb-1 pt-2">
Enter Rival Aime Card:
</label>
<Input
@ -101,39 +101,39 @@ const RivalComponent = () => {
{successMessage && (
<div className="text-green mt-2">{successMessage}</div>
)}
<div className="flex items-center mt-4">
<div className="flex items-center mt-4 space-x-2">
<button
onClick={handlePostRival}
className=" px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-red dark:text-text dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow hover: dark:hover: focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Add Rival
</button>
<button
onClick={() => setShowAccessCode(!showAccessCode)}
className=" ml-3 px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-red dark:text-text dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow hover: dark:hover: focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
{showAccessCode ? "Hide Rival Code" : "Show Rival Code"}
</button>
</div>
{showAccessCode && (
<div>
<label className="text-sm font-medium text-text">
<label className="text-sm font-medium text-typography">
Your Rival code:
</label>
<div className="text-lg font-bold text-green">
<div className="text-lg font-bold text-typography">
{decodedToken.rivalCode}
</div>
</div>
)}
{rivals.length > 0 && (
<div>
<label className="text-xs font-medium text-color9 dark:text-red">Rivals need to have played once on the most recent version that your server supports to show up here.</label>
<div className="mb-1"> <label className="text-sm font-medium dark:text-text">Your Rivals:</label>
<label className="text-xs font-medium text-typography">Rivals need to have played once on the most recent version that your server supports to show up here.</label>
<div className="mb-1"> <label className="text-sm font-medium text-typography">Your Rivals:</label>
</div>
<div className="pb-2">
<ul>
{rivals.map((rival, index) => (
<li key={index} className="text-md font-bold text-color2 dark:text-green">
<li key={index} className="text-md font-bold ">
Rival {index + 1}: {rival.username}
</li>
))}

6
src/components/PlayerTrophySelector/page.tsx
View File

@ -49,7 +49,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
<select
value={trophyId}
onChange={(e) => onChange(e.target.value)}
className="w-[300px] md:w-[200px] lg:w-[300px] sm:w-[200px] pl-3 pr-10 py-2 border-gray-300 focus:outline-none sm:text-sm rounded-md shadow-sm"
className=" w-[280px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
{options.map((option, index) => (
<option
@ -109,7 +109,7 @@ const PlayerTropyComponent = () => {
}
return (
<div className="dark:bg-crust bg-color15 rounded-sm md:flex-row justify-center items-center pl-4 pt-4" >
<div className="bg-subsectionbackgroundcolor rounded-sm md:flex-row justify-center items-center pl-4 pt-4" >
<div className="flex flex-col items- w-full md:w-auto">
<Dropdown
options={PlayerTrophies} // Removed sorting
@ -121,7 +121,7 @@ const PlayerTropyComponent = () => {
<div className=" mt-4">
<button
onClick={handlePostData}
className=" px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-red dark:text-text dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow hover: dark:hover: focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Update Trophy
</button>

11
src/components/PlayerUpdateCard/page.tsx
View File

@ -1,6 +1,7 @@
"use client"
import { useState, ChangeEvent } from 'react';
import { UsePostNewCard } from '@/app/hooks/usePostApi';
import { Input } from '../ui/input';
const UpdateCard = () => {
const [newAccessCode, setNewAccessCode] = useState('');
@ -59,12 +60,12 @@ const UpdateCard = () => {
return (
<div className="flex items-center justify-center">
<div className="dark:bg-crust bg-color15 w-[390px] rounded-sm p-2 relative flex flex-col pb-4">
<label className="block dark:text-text text-sm font-bold mb-2 pt-1 pb-1">
<div className="bg-subsectionbackgroundcolor w-[390px] rounded-sm p-2 relative flex flex-col pb-4">
<label className="block text-typography text-sm font-bold mb-2 pt-1 pb-1">
Change Aime Card - Must be 20 digits long
</label>
<div className=" flex-grow">
<input
<Input
type="text"
name="newAccessCode"
placeholder="New Aime Card"
@ -81,13 +82,13 @@ const UpdateCard = () => {
<div className="flex">
<button
onClick={handleGenerateAccessCode}
className="dark:text-text bg-red w-[180px] px-3 py-2 border-transparent font-medium rounded-sm dark:bg-mantle dark:hover:text-black hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
className="px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Generate Card
</button>
<button
onClick={handleUpdateCard}
className="dark:text-text bg-red w-[180px] px-3 py-2 border-transparent font-medium rounded-sm dark:bg-mantle dark:hover:text-black hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap ml-2"
className="px-3 py-2 mb-3 ml-2 border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Change Card

72
src/components/ScoreCard/ScoreCard.tsx
View File

@ -15,7 +15,7 @@ const JacketImage: React.FC<JacketImageProps> = ({ jacketPath }) => (
alt="Character Image"
width={90}
height={90}
className="mt-4 ml-1 border-4 border-black dark:border-gray-400 border-sm"
className="mt-4 ml-1 border-4 border-songjacketborder dark:border-gray-400 border-sm"
/>
);
interface ScoreCardProps {
@ -68,22 +68,22 @@ const ScoreCard: React.FC<ScoreCardProps> = ({
const { isBestPossibleEnabled } = useSettings();
return (
<div className="rounded-sm bg-color15 p-2 dark:bg-crust dark:bg-text-text h-50">
<div className="rounded-sm p-2 bg-cardsectionbackgroundcolor text-typography h-50">
<div className="flex justify-between items-center">
<span className="text-lg dark:bg-text-text">{userPlayDate}</span>
<span className="text-lg text-typography">{userPlayDate}</span>
<div className="flex justify-end">
<div className="flex flex-col justify-center items-end">
<div className="flex items-center">
<span
className={`justify-center p-1 text-sm font-bold text-center rounded-sm ${getDifficultyClass(
className={`px-2 justify-center p-1 text-sm font-bold text-center rounded-sm ${getDifficultyClass(
chartId
)} dark:text-crust`}
)} text-scorecardbadgetypography`}
>
{getDifficultyText(chartId)}{" "}
{level !== undefined ? level.toString() : "N/A"}{" "}
</span>
{isNewRecord !== 0 && isNewRecord ? (
<span className="p-1 ml-2 text-sm font-bold rounded-sm bg-color13 dark:bg-pink dark:text-crust">
<span className="p-1 px-2 ml-2 text-sm font-bold rounded-sm bg-color13 bg-newbadgecolor text-scorecardbadgetypography">
NEW!!
</span>
) : (
@ -106,19 +106,19 @@ const ScoreCard: React.FC<ScoreCardProps> = ({
<div className="flex items-start space-x-4">
<JacketImage jacketPath={formattedJacketPath} />
<div className="flex flex-col justify-center pt-3">
<h2 className="text-xs truncate pb-2 w-[200px] lg:w-[310px]">
<h2 className="text-xs truncate pb-2 w-[200px] lg:w-[310px] text-typography">
{title}
</h2>
<div className="w-[180px] h-[1] overflow-hidden text-xs truncate pb-2">
<div className="w-[180px] h-[1] overflow-hidden text-xs truncate text-typography pb-2">
{artist}
</div>
<div className="text-xs">{genre}</div>
<div className="text-xs text-typography">{genre}</div>
</div>
</div>
</div>
<div className="pt-4 pl-1 flex">
<div
className={`dark:bg-yellow bg-yellow font-bold mr-2 dark:text-crust px-2 py-1 rounded-sm text-sm ${isFullCombo ? "dark:bg-blue-500" : isAllJustice ? "dark:bg-green-500" : ""
className={` bg-scorecardbadge font-bold mr-2 text-scorecardbadgetypography px-2 py-1 rounded-sm text-sm ${isFullCombo ? "bg-scorecardbadge" : isAllJustice ? "dark:bg-green-500" : ""
}`}
>
{isAllJustice
@ -128,30 +128,30 @@ const ScoreCard: React.FC<ScoreCardProps> = ({
: `Combo: ${maxCombo}`}
</div>
<div
className={`dark:bg-yellow bg-yellow font-bold mr-2 dark:text-crust px-4 py-1 rounded-sm text-sm ${isClear === 0 ? "dark:bg-red-500" : ""
className={`bg-scorecardbadge font-bold mr-2 text-scorecardbadgetypography px-4 py-1 rounded-sm text-sm ${isClear === 0 ? "bg-scorecardbadge" : ""
}`}
>
{isClear === 1 ? "CLEAR" : "UNCLEARED"}
</div>
<div className="px-4 py-1 text-sm font-bold rounded-sm dark:bg-yellow bg-yellow dark:text-crust ">
<div className="px-4 py-1 text-sm font-bold rounded-sm bg-scorecardbadge bg-yellow text-scorecardbadgetypography ">
{getGrade(score)}
</div>
</div>
<div className="flex justify-start items-center pt-2">
<div className="pr-1 text-xs dark:text-yellow text-color11 md:pr-2">
<div className="pr-1 text-xs text-scoretext md:pr-2">
Score: {score.toLocaleString()}
</div>
<div className="flex justify-start items-center">
<div className="pr-1 text-xs dark:text-yellow text-color11 md:pr-2 ">
<div className="pr-1 text-xs text-justicecriticaltext md:pr-2 ">
Justice Critical: {realJusticeCritical}
</div>
<div className="pr-1 text-xs dark:text-orange-400 text-orange-500 md:pr-2">
<div className="pr-1 text-xs text-justicetext md:pr-2">
Justice: {judgeJustice}
</div>
<div className="pr-1 text-xs dark:text-green text-color2 md:pr-2">
<div className="pr-1 text-xs text-attacktext md:pr-2">
Attack: {judgeAttack}
</div>
<div className="text-xs dark:text-gray-100 text-color0">Miss: {judgeGuilty}</div>
<div className="text-xs text-misstext">Miss: {judgeGuilty}</div>
</div>
</div>
</div>
@ -168,17 +168,17 @@ const getDifficultyClass = (difficulty: number) => {
switch (difficulty.toString()) {
case "0":
return "dark:bg-green bg-color10"; // Green for easy
return "bg-basicbadgecolor"; // Green for basic
case "1":
return "dark:bg-yellow-300 bg-color3"; // Yellow for hard
return "bg-advancebadgecolor"; // Yellow for advance
case "2":
return "dark:bg-red bg-color9"; // Red for expert
return "bg-expertbadgecolor"; // Red for expert
case "3":
return "dark:bg-mauve bg-mauve "; // Purple for master
return "bg-masterbadgecolor "; // Purple for master
case "4":
return "dark:bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-black via-red to-black bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-black via-red to-black"; // Gradient for another level
return "bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-black via-red to-black";
case "5":
return "dark:bg-teal bg-teal"; // Teal for another level
return "bg-worldsendbadgecolor"; // worlds end
default:
return "default-class"; // Replace with an appropriate default class for unknown difficulty
}
@ -222,11 +222,11 @@ const getDifficultyText = (chartId: number) => {
const getRatingChangeColor = (ratingChange: string) => {
switch (ratingChange) {
case "Increase":
return "dark:text-green text-color2"; // Green for Increase
return "text-ratingincrease"; // Green for Increase
case "Same":
return "dark:text-blue text-color12"; // Blue for Same
return "text-ratingsame"; // Blue for Same
case "Decrease":
return "dark:text-red text-color9"; // Red for Decrease
return "text-ratingdecrease"; // Red for Decrease
default:
return "dark:text-gray"; // Default color
}
@ -261,7 +261,7 @@ const NavigationButtons: React.FC<NavigationButtonsProps> = ({
<button
onClick={onPrevious}
disabled={currentPage === 1}
className="px-4 font-bold dark:bg-black text-white bg-color0 rounded hover:dark:bg-mantle dark:bg-text-text disabled:opacity-70 dark:disabled:opacity-30"
className="px-4 font-bold text-paginationtypography bg-paginationbackground rounded hover:text-paginationtypographyhover disabled:opacity-40"
>
Previous
</button>
@ -270,7 +270,7 @@ const NavigationButtons: React.FC<NavigationButtonsProps> = ({
key={page}
onClick={() => onPageChange(page)}
disabled={currentPage === page}
className={`dark:bg-black hover:dark:bg-mantle dark:text-white dark:bg-text-text font-bold px-2 rounded ${currentPage === page ? "bg-color0 text-white dark:bg-blue" : ""
className={`bg-paginationbackground hover:text-paginationtypographyhover text-paginationtypography font-bold px-2 rounded ${currentPage === page ? " " : ""
}`}
>
{page}
@ -279,7 +279,7 @@ const NavigationButtons: React.FC<NavigationButtonsProps> = ({
<button
onClick={onNext}
disabled={currentPage === totalPages}
className="px-4 font-bold dark:text-white text-white dark:bg-black rounded hover:dark:bg-mantle bg-color0 disabled:opacity-70 dark:disabled:opacity-30"
className="px-4 font-bold text-paginationtypography bg-paginationbackground rounded hover:text-paginationtypographyhover disabled:opacity-40"
>
Next
</button>
@ -348,25 +348,25 @@ const ScoreCardList = () => {
}
return (
<div className="w-full sm:w-[650px] md:w-[850px] lg:w-[700px] xl:w-[800px] 2xl:w-[1400px]">
<div className="my-2 w">
<div className=" w-[430px] sm:w-[640px] md:w-[840px] lg:w-[690px] xl:w-[790px] 2xl:w-[1390px] ">
<div className="">
<Input
type="text"
placeholder="Search by artist, level, song title, or grade. "
className={`w-full dark:bg-transparent bg-transparent dark:border-gray-300 transition duration-300 ease-in-out focus:outline-none dark:bg-text-text`}
className={` focus-visible: w-[432px] sm:w-[630px] md:w-[830px] lg:w-[680px] text-typography xl:w-[780px] 2xl:w-[1380px] dark:bg-transparent bg-transparent dark:border-gray-300 transition duration-300 ease-in-out focus:outline-none`}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<div className="sm:w-[650px] md:w-[850px] lg:w-[700px] xl:w-[800px] 2xl:w-[1400px] grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 2xl:grid-cols-3 gap-2 gap-y-0">
<div className="w-[430px] sm:w-[640px] md:w-[840px] lg:w-[690px] xl:w-[790px] 2xl:w-[1390px] grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 2xl:grid-cols-3">
{currentItems.map((scoreCardInfo, index) => (
<div key={index} className="p-2 mb-2 rounded-sm dark:bg-crust">
<div key={index} className="mb-2 mt-2 mr-2 rounded-sm dark:bg-crust">
<ScoreCard {...scoreCardInfo} />
</div>
))}
</div>
<div className="flex justify-around ">
<div className=" rounded-md ">
<div className="flex justify-around mt-4"> {/* Added flex and justify-center for centering */}
<div className="rounded-md">
<NavigationButtons
currentPage={currentPage}
totalPages={totalPages}

13
src/components/SingleComponents/darkmodetoggle.tsx
View File

@ -19,20 +19,23 @@ export function ModeToggle() {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-typography" />
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 text-foreground" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="ml-4">
<DropdownMenuContent align="end" className="ml-16 bg-subsectionbackgroundcolor text-typography">
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
<DropdownMenuItem onClick={() => setTheme("gruvbox")}>
Gruvbox
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("mocha")}>
Catppuccin Mocha
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

20
src/components/SongCard/SongCard.tsx
View File

@ -17,7 +17,7 @@ const JacketImage: React.FC<JacketImageProps> = ({ jacketPath }) => (
alt="Character Image"
width={90}
height={90}
className=" border-4 border-gray-400 border-sm"
className=" border-4 border-songjacketborder border-sm"
/>
);
@ -66,15 +66,15 @@ const SongCard: React.FC<songCardProps> = ({
<JacketImage jacketPath={formattedJacketPath} />
</div>
<div className="ml-4">
<span className="block dark:text-text text-black font-semibold">{title}</span>
<span className="block dark:text-text text-black">{artist}</span>
<span className="block dark:text-typography text-typography font-semibold">{title}</span>
<span className="block dark:text-typography text-typography">{artist}</span>
</div>
<button
className="ml-auto p-2"
onClick={handleFavoriteClick}
>
<FaHeart
className={`text-${isFavorite ? 'yellow' : 'red'}`}
className={`${isFavorite ? 'text-heartcolornormal' : 'text-heartcolorfave'}`}
style={{ fontSize: '2em' }}
/>
</button>
@ -108,11 +108,11 @@ const NavigationButtons: React.FC<NavigationButtonsProps> = ({
);
return (
<div className="flex justify-center items-center space-x-1">
<div className="flex justify-center items-center space-x-1 ">
<button
onClick={onPrevious}
disabled={currentPage === 1}
className="px-4 font-bold dark:bg-black text-white bg-color0 rounded hover:dark:bg-mantle dark:bg-text-text disabled:opacity-70 dark:disabled:opacity-30"
className="px-4 font-bold text-paginationtypography bg-paginationbackground rounded hover:text-paginationtypographyhover disabled:opacity-40"
>
Previous
</button>
@ -121,7 +121,7 @@ const NavigationButtons: React.FC<NavigationButtonsProps> = ({
key={page}
onClick={() => onPageChange(page)}
disabled={currentPage === page}
className={`dark:bg-black hover:dark:bg-mantle text-black dark:text-white dark:bg-text-text font-bold px-2 rounded ${currentPage === page ? "bg-color0 text-white dark:bg-blue" : ""
className={`bg-paginationbackground hover:text-paginationtypographyhover text-paginationtypography font-bold px-2 rounded ${currentPage === page ? " " : ""
}`}
>
{page}
@ -130,7 +130,7 @@ const NavigationButtons: React.FC<NavigationButtonsProps> = ({
<button
onClick={onNext}
disabled={currentPage === totalPages}
className="px-4 font-bold dark:text-white text-white dark:bg-black rounded hover:dark:bg-mantle bg-color0 disabled:opacity-70 dark:disabled:opacity-30"
className="px-4 font-bold text-paginationtypography bg-paginationbackground rounded hover:text-paginationtypographyhover disabled:opacity-40"
>
Next
</button>
@ -193,14 +193,14 @@ const SongCardList = () => {
<Input
type="text"
placeholder="Search by title"
className="w-full bg-transparent border-b border-gray-300 transition duration-300 ease-in-out focus:outline-none dark:text-text text-black"
className="w-full bg-transparent border-b border-gray-300 transition duration-300 ease-in-out focus:outline-none dark:text-typography text-typography"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<div className="sm:w-[650px] md:w-[850px] lg:w-[700px] xl:w-[800px] 2xl:w-[1400px]">
{currentItems.map((songCardInfo, index) => (
<div key={index} className="p-2 mb-2 rounded-sm shadow-lg dark:bg-crust bg-color15">
<div key={index} className="p-2 mb-2 rounded-sm shadow-lg bg-subsectionbackgroundcolor">
<SongCard
{...songCardInfo}
isFavorite={playerFavoriteSongs.some(

10
src/components/SystemVoiceUserBox/page.tsx
View File

@ -31,20 +31,20 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
}) => {
return (
<div className={`dropdown-container relative ${className}`}>
<label className="block text-sm font-medium dark:text-text pb-1 pt-2">
<label className="block text-sm font-medium text-typography pb-1 pt-2">
{str}
</label>
<div className="mt-1 relative">
<select
value={id}
onChange={(e) => onChange(e.target.value)}
className="w-[300px] md:w-[200px] lg:w-[300px] sm:w-[200px] pl-3 pr-10 py-2 border-gray-300 focus:outline-none sm:text-sm rounded-md shadow-sm"
className=" w-[280px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-background hover:bg-yellow dark:hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
{options.map((option, index) => (
<option
key={`${option.id}-${index}`}
value={option.id}
className="text-black dark:text-white"
className="text-typography"
>
{option.str}
</option>
@ -129,7 +129,7 @@ const SystemVoiceComponent = () => {
const DEFAULT_IMAGE = `${process.env.NEXT_PUBLIC_CDN}systemVoice/CHU_UI_SystemVoice_00000001.png`;
return (
<div className="dark:bg-crust bg-color15 rounded-sm md:flex-row justify-center items-center pl-4 pt-4">
<div className="bg-subsectionbackgroundcolor rounded-sm md:flex-row justify-center items-center pl-4 pt-4">
{selectedDuelId && (
<img
className="w-[200px] h-[128px]"
@ -154,7 +154,7 @@ const SystemVoiceComponent = () => {
<div className="flex items-center mt-4">
<button
onClick={handlePostData}
className=" px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-red text-black dark:text-text dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow hover:text-black dark:hover:text-black focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
className="px-3 py-2 mb-3 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Update System Voice
</button>

38
src/components/TopScores/Page.tsx
View File

@ -61,14 +61,14 @@ const PlayerInfo = () => {
}, [bestTop, recentRatingTable, selectedSegment]);
return (
<div className="md:px-0 md:mx-auto justify-center">
<div className="flex justify-end mb-4">
<div className="flex justify-start pb-2">
<div className="inline-flex rounded-md shadow-sm" role="group">
<button
onClick={() => setSelectedSegment("Top30")}
className={`${selectedSegment === "Top30"
? "dark:bg-yellow bg-color11 dark:text-black shadow"
: "dark:bg-crust bg-color3 dark:dark:text-text dark:hover:bg-mantle"
} text-sm font-medium py-2 px-4 rounded-l-lg focus:outline-none transition-colors duration-300 dark:text-black`}
? "bg-segmentedtabactive text-segmentedtabactivetypography shadow"
: "bg-segmentedtabnotactive text-segmentedtabtext hover:text-segmentedtabtexthover hover:bg-segmentedtabactive"
} text-sm font-bold py-2 px-4 rounded-l-lg focus:outline-none transition-colors duration-300 text-segmentedtabactivetypography`}
>
Top 30 Scores
@ -76,9 +76,9 @@ const PlayerInfo = () => {
<button
onClick={() => setSelectedSegment("Recent10")}
className={`${selectedSegment === "Recent10"
? "dark:bg-yellow bg-color11 dark:text-black shadow"
: "dark:bg-crust bg-color3 dark:dark:text-text dark:hover:bg-mantle"
} text-sm font-medium py-2 px-4 rounded-r-lg focus:outline-none transition-colors duration-300 dark:text-black`}
? "bg-segmentedtabactive text-segmentedtabactivetypography shadow "
: "bg-segmentedtabnotactive text-segmentedtabtext hover:text-segmentedtabtexthover hover:bg-segmentedtabactive"
} text-sm font-bold py-2 px-4 rounded-r-lg focus:outline-none transition-colors duration-300 text-segmentedtabactivetypography`}
>
Recent 10 Scores
</button>
@ -88,9 +88,11 @@ const PlayerInfo = () => {
<div>
{loading && <div></div>}
{error && <div>Error: {error}</div>}
<div className=" dark:text-text">
{isAverageEnabled && selectedSegment === "Top30" && <p>Average Rating {(averageTop30Rating / 100).toFixed(2)}</p>}
{isAverageEnabled && selectedSegment === "Recent10" && <p>Average Rating {(averageRecentRating / 100).toFixed(2)}</p>}
<div className="">
<div className=" text-typography">
{isAverageEnabled && selectedSegment === "Top30" && <p>Average Rating {(averageTop30Rating / 100).toFixed(2)}</p>}
{isAverageEnabled && selectedSegment === "Recent10" && <p>Average Rating {(averageRecentRating / 100).toFixed(2)}</p>}
</div>
</div>
<div style={{ height: "1095px", overflowY: "auto" }}>
@ -102,9 +104,9 @@ const PlayerInfo = () => {
return (
<div
key={index}
className="dark:bg-crust p-2 rounded-sm relative mb-4 flex items-center"
className="bg-cardsectionbackgroundcolor p-2 rounded-sm relative mb-4 flex items-center "
>
<div className="dark:text-maroon text-lg font-bold flex items-center pr-2">
<div className="text-typography text-lg font-bold flex items-center pr-2 ">
{index + 1}.
</div>
<div className="flex-none">
@ -113,19 +115,19 @@ const PlayerInfo = () => {
alt={`${user.title} Jacket Art`}
width={90}
height={90}
className="border-sm border-4 border-gray-400"
className="border-sm border-4 border-songjacketborder"
/>
</div>
<div className="flex-grow pl-2">
<div className="dark:text-maroon "> {user.title}</div>
<div className="dark:dark:text-text pt-1">
<div className="flex-grow pl-2 ">
<div className="text-typography"> {user.title}</div>
<div className="text-typography pt-1">
{user.level}
<span className="dark:text-red">
<span className="text-bestrecentratingcolor">
{" "}
{(user.rating / 100).toFixed(2)}
</span>
</div>
<div className="dark:text-yellow pt-1">
<div className="text-typography pt-1">
{parseInt(user.score, 10).toLocaleString()}
</div>
</div>

14
src/components/UserSettings/page.tsx
View File

@ -11,30 +11,26 @@ const SettingsPage: React.FC = () => {
const { isBestPossibleEnabled, toggleBestPossible } = useSettings();
return (
<div className="absolute ml-10">
<div className="dark:bg-crust bg-color15 p-4 rounded-sm">
<h1 className='text-xl dark:text-text font-bold mb-4'>UI Settings</h1>
<div className="bg-subsectionbackgroundcolor p-4 rounded-sm">
<h1 className='text-xl text-typography font-bold mb-4'>UI Settings</h1>
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-2">
<Switch id="airplane-mode" checked={isAverageEnabled} onCheckedChange={toggleAverage} />
<Label htmlFor="airplane-mode">Average Rating</Label>
<Label htmlFor="airplane-mode" className='text-typography'>Average Rating</Label>
</div>
</div>
<div className='pt-2'></div>
<div className="flex items-center space-x-2">
<Switch id="airplane-mode" checked={isBestPossibleEnabled} onCheckedChange={toggleBestPossible} />
<Label htmlFor="airplane-mode">Show best rating formula rating on score card</Label>
<Label htmlFor="airplane-mode" className='text-typography'>Show best rating formula rating on score card</Label>
</div>
<div className='mt-2 flex items-center'>
<ModeToggle />
<span className='text-lg dark:text-text ml-2'>
<span className='text-lg text-typography ml-2'>
Select Theme
</span>
</div>
{/* <div className="border-b w-full my-2"></div> */}
</div>
{/* <div className='mt-4 dark:bg-crust bg-color15 p-4 rounded-sm'>
<PasswordResetForm />
</div> */}
</div>
);
};

10
src/components/UserTeams/page.tsx
View File

@ -92,7 +92,7 @@ const PlayerTeamComponent = () => {
if (loading) return <div>Loading...</div>;
return (
<div className="dark:bg-crust bg-color15 rounded-sm md:flex-row justify-center items-center pl-4 pt-4">
<div className="bg-subsectionbackgroundcolor rounded-sm md:flex-row justify-center items-center pl-4 pt-4">
<div className="flex flex-col w-full">
<div className="flex items-center mb-4">
<Input
@ -100,12 +100,12 @@ const PlayerTeamComponent = () => {
placeholder="Enter Team Name"
value={newTeamName}
onChange={(e) => setNewTeamName(e.target.value)}
className="w-[150px] md:w-[200px] lg:w-[200px] sm:w-[200px] pl-3 py-2 border-gray-300 focus:outline-none sm:text-sm rounded-md shadow-sm"
className="w-[160px] sm:w-[220px] md:w-[220px] lg:w-[220px] pl-3 py-2 border-gray-300 focus:outline-none sm:text-sm rounded-md shadow-sm"
/>
<div className="pl-2">
<button
onClick={handlePostData}
className=" w-40 px-3 py-2 border border-transparent font-medium rounded-sm bg-red text-black dark:text-text dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow hover:text-black dark:hover:text-black focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
className="px-3 py-2 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Create Team
</button>
@ -116,7 +116,7 @@ const PlayerTeamComponent = () => {
<select
value={selectedTeam}
onChange={handleSelectTeam}
className="w-[150px] md:w-[200px] lg:w-[200px] sm:w-[200px] pl-3 py-2 border-gray-300 focus:outline-none sm:text-sm rounded-md shadow-sm"
className="w-[160px] sm:w-[220px] md:w-[220px] lg:w-[220px] px-3 py-2 border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
<option value="">Select a Team</option>
{playerTeamData.map((team) => (
@ -128,7 +128,7 @@ const PlayerTeamComponent = () => {
<div className="pl-2 md:pl-2 lg:pl-2 xl:pl-2">
<button
onClick={handlePostPlayerTeamProfile}
className="w-40 px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-red text-black dark:text-text dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow hover:text-black dark:hover:text-black focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
className="px-3 py-2 w-[190px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Set Player Team
</button>

9
src/components/ViewAimeCardComponent/page.tsx
View File

@ -19,10 +19,8 @@ const AimeCard: React.FC<CreditCardProps> = () => {
const toggleShowNumbers = () => {
setShowNumbers(!showNumbers);
};
const formatCardNumber = () => {
const cardNumber = playAimeCard?.accessCode || '';
if (showNumbers) {
return cardNumber;
} else {
@ -32,12 +30,11 @@ const AimeCard: React.FC<CreditCardProps> = () => {
return `${visiblePart}${hiddenPart}${lastFourDigits}`;
}
};
return (
<div className="flex items-center justify-center">
<div className="max-w-md p-2 dark:bg-crust bg-color15 rounded-sm w-[390px]">
<div className="max-w-md p-2 bg-subsectionbackgroundcolor rounded-sm w-[390px]">
<div className="mb-2">
<label className="block dark:text-text text-sm font-bold mb-2 pt-1 pb-1">
<label className="block text-typography text-sm font-bold mb-2 pt-1 pb-1">
Aime Card Number
</label>
<div className="relative">
@ -49,7 +46,7 @@ const AimeCard: React.FC<CreditCardProps> = () => {
/>
<button
onClick={toggleShowNumbers}
className="absolute top-1/2 right-4 transform -translate-y-1/2 px-2 py-1 bg-blue-500 dark:text-white rounded-md"
className="absolute top-1/2 right-4 transform -translate-y-1/2 px-2 py-1 dark:text-white rounded-md"
>
{showNumbers ? 'Hide' : 'View'}
</button>

2
src/components/shared/LogoutButton/Page.tsx
View File

@ -50,7 +50,7 @@ const LogoutButton = () => {
<main>
<button
onClick={handleLogout}
className="dark:text-text font-bold uppercase"
className="text-typography font-bold uppercase text-bg-typography hover:text-texthover "
>
Logout
</button>

36
src/components/shared/NavigationBar/NavigationBar.tsx
View File

@ -2,16 +2,6 @@
import { useState } from 'react';
import Link from 'next/link';
import LogoutButton from '../LogoutButton/Page';
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuIndicator,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
NavigationMenuViewport,
} from "@/components/ui/navigation-menu"
const NavigationBar = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
@ -40,31 +30,33 @@ const NavigationBar = () => {
</svg>
</div>
<div className="hidden flex-1 justify-end md:flex">
<Link href="/chunithm" className="pl-2 font-bold uppercase dark:text-text hover:text-color6 dark:hover:text-blue ">SCORES</Link>
<Link href="/userbox" className="pl-2 font-bold uppercase dark:text-text hover:text-color6 dark:hover:text-blue">USERBOX</Link>
<Link href="/management" className="pl-2 font-bold uppercase dark:text-text hover:text-color6 dark:hover:text-blue">MANAGEMENT</Link>
<Link href="/settings" className="pl-2 font-bold uppercase dark:text-text hover:text-color6 dark:hover:text-blue">SETTINGS</Link>
<Link href="/chunithm" className="pl-2 font-bold uppercase text-typography hover:text-texthover ">SCORES</Link>
<Link href="/userbox" className="pl-2 font-bold uppercase text-typography hover:text-texthover ">USERBOX</Link>
<Link href="/management" className="pl-2 font-bold uppercase text-typography hover:text-texthover ">MANAGEMENT</Link>
<Link href="/settings" className="pl-2 font-bold uppercase text-typography hover:text-texthover ">SETTINGS</Link>
<div className='pl-2 font-bold uppercase dark:bg-text-text hover:text-color6 dark:hover:text-blue'>
<div className='pl-2 font-bold uppercase '>
<LogoutButton />
</div>
</div>
</nav>
{/* Side Menu */}
<div
className={`fixed top-0 left-0 w-64 h-full bg-mantle transform ease-in-out transition-all duration-300 z-300 ${isMenuOpen ? 'translate-x-0 ' : '-translate-x-full'}`}
className={`fixed top-0 left-0 w-64 h-full bg-subsectionbackgroundcolor transform ease-in-out transition-all duration-300 z-300 ${isMenuOpen ? 'translate-x-0 ' : '-translate-x-full'}`}
>
<div className="flex flex-col mt-10">
<Link href="/chunithm" className="pb-2 pl-4 font-bold uppercase dark:text-text hover:text-color6 dark:hover:text-blue">SCORES</Link>
<Link href="/userbox" className="pb-2 pl-4 font-bold uppercase dark:text-text hover:text-color6 dark:hover:text-blue">USERBOX</Link>
<Link href="/management" className="pb-2 pl-4 font-bold uppercase dark:text-text hover:text-color6 dark:hover:text-blue">MANAGEMENT</Link>
<Link href="/settings" className="pl-2 font-bold uppercase dark:text-text hover:text-color6 dark:hover:text-blue">SETTINGS</Link>
<Link href="/chunithm" className="pb-2 pl-2 font-bold uppercase text-typography hover:text-texthover ">SCORES</Link>
<Link href="/userbox" className="pb-2 pl-2 font-bold uppercase text-typography hover:text-texthover ">USERBOX</Link>
<Link href="/management" className="pb-2 pl-2 font-bold uppercase text-typography hover:text-texthover ">MANAGEMENT</Link>
<Link href="/settings" className="pl-2 pb-2 font-bold uppercase text-typography hover:text-texthover ">SETTINGS</Link>
<div className='pb-2 pl-4 font-bold uppercase dark:bg-text-text dark:hover:text-blue'>
<div className='pb-2 pl-2 font-bold uppercase text-bg-typography hover:text-texthover '>
<LogoutButton />
</div>
</div>
<button className="pl-4 font-bold uppercase dark:bg-text-text dark:hover:text-blue" onClick={handleMenuClick}>CLOSE MENU</button>
<button className="pl-2 font-bold uppercase dark:bg-text-text " onClick={handleMenuClick}>CLOSE MENU</button>
</div>
{/* Overlay */}
{isMenuOpen && (

4
src/components/ui/input.tsx
View File

@ -3,7 +3,7 @@ import * as React from "react"
import { cn } from "@/lib/utils"
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
extends React.InputHTMLAttributes<HTMLInputElement> { }
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}

17
src/components/whitelistKeychips/page.tsx
View File

@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
import jwt from "jsonwebtoken";
import { useCookies } from "next-client-cookies";
import { UsePostNewKeychip } from "@/app/hooks/usePostApi";
import { Input } from "../ui/input";
const NewKeychipComponent = () => {
const { get } = useCookies();
const token = get("LOGIN_INFO");
@ -99,15 +100,15 @@ const NewKeychipComponent = () => {
return <div></div>;
}
return (
<div className="dark:bg-crust bg-color15 p-2 rounded-sm w-[390px] mx-auto">
<label className="block text-black dark:text-text text-sm font-bold mb-2 pt-1 pb-1">
<div className="bg-subsectionbackgroundcolor p-2 rounded-sm w-[390px] mx-auto">
<label className="block text-black text-typography text-sm font-bold mb-2 pt-1 pb-1">
Create New Keychip
</label>
{successMessage && <div className="text-green mb-4">{successMessage}</div>}
{accessCodeError && <div className="text-red mb-4">{accessCodeError}</div>}
<div>
<div className="mb-4">
<input
<Input
type="text"
name="name"
value={keychipData.name}
@ -117,17 +118,17 @@ const NewKeychipComponent = () => {
/>
</div>
<div className="mb-4">
<input
<Input
type="text"
name="arcade_nickname"
value={keychipData.arcade_nickname}
onChange={handleChange}
placeholder="Arcade Nickname"
className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="">
<input
<Input
type="text"
name="serial"
value={keychipData.serial}
@ -139,13 +140,13 @@ const NewKeychipComponent = () => {
<div className="flex flex-col items-center pt-4 pb-2">
<button
onClick={generateRandomSerial}
className="w-full mt-2 bg-red dark:text-text px-3 py-2 border-transparent font-medium rounded-sm dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow dark:hover:text-black hover:text-black focus:outline-none transition duration-150 ease-in-out"
className="px-3 py-2 mb-3 w-[220px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Generate Random Serial
</button>
<button
onClick={handleSubmit}
className="w-full mt-2 bg-red dark:text-text px-3 py-2 border-transparent font-medium rounded-sm dark:bg-mantle hover:bg-yellow dark:hover:bg-yellow dark:hover:text-black hover:text-black focus:outline-none transition duration-150 ease-in-out"
className="px-3 py-2 mb-3 w-[220px] border border-transparent font-medium rounded-sm bg-background hover:bg-buttonhovercolor text-typography hover:text-white hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
>
Create New Keychip
</button>

224
tailwind.config.ts
View File

@ -52,71 +52,167 @@ const config = {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
lightbackground: "#f4f4f4",
lightforeground: "#3e3e3e",
cursor: "#3f3f3f",
selection_background: "#a9c1e2",
color0: "#3e3e3e",
color8: "#666666",
color1: "#970b16",
color9: "#de0000",
color2: "#07962a",
color10: "#87d5a2",
color3: "#f7edc7",
color11: "#f0cf06",
color4: "#003e8a",
color12: "#2e6cba",
color5: "#e94691",
color13: "#ffa29f",
color6: "#89d1ec",
color14: "#1cfafe",
color7: "#ffffff",
color15: "#ffffff",
selection_foreground: "#f4f4f4",
darkborder: "hsl(var(--border))",
darkinput: "hsl(var(--input))",
darkring: "hsl(var(--ring))",
darkbackground: "hsl(var(--background))",
darkforeground: "hsl(var(--foreground))",
rosewater: "#f4dbd6",
flamingo: "#f0c6c6",
pink: "#f5bde6",
mauve: "#c6a0f6",
red: "#ed8796",
maroon: "#ee99a0",
peach: "#f5a97f",
yellow: "#eed49f",
green: "#a6da95",
teal: "#8bd5ca",
sky: "#91d7e3",
sapphire: "#7dc4e4",
blue: "#8aadf4",
lavender: "#b7bdf8",
text: "#cad3f5",
subtext1: "#b8c0e0",
subtext0: "#a5adcb",
overlay2: "#939ab7",
overlay1: "#8087a2",
overlay0: "#6e738d",
surface2: "#5b6078",
surface1: "#494d64",
surface0: "#363a4f",
base: "#24273a",
mantle: "#1e2030",
crust: "#181926",
darkslateblue: "#0a3f93",
palegoldenrod: "#fcfab7",
darkslategray: {
"100": "#00607b",
"200": "#202c39",
typography: {
DEFAULT: "hsl(var(--typography))",
foreground: "hsl(var(--typography-foreground))",
},
scorecardbadge: {
DEFAULT: "hsl(var(--scorecardbadge))",
foreground: "hsl(var(--scorecardbadge-foreground))",
},
playertrophybadge: {
DEFAULT: "hsl(var(--playertrophybadge))",
foreground: "hsl(var(--playertrophybadge-foreground))",
},
characterbadgetypography: {
DEFAULT: "hsl(var(--characterbadgetypography))",
foreground: "hsl(var(--characterbadgetypography-foreground))",
},
ratingsame: {
DEFAULT: "hsl(var(--ratingsame))",
foreground: "hsl(var(--ratingsame-foreground))",
},
ratingincrease: {
DEFAULT: "hsl(var(--ratingincrease))",
foreground: "hsl(var(--ratingincrease-foreground))",
},
ratingdecrease: {
DEFAULT: "hsl(var(--ratingdecrease))",
foreground: "hsl(var(--ratingdecrease-foreground))",
},
expertbadgecolor: {
DEFAULT: "hsl(var(--expertbadgecolor))",
foreground: "hsl(var(--expertbadgecolor-foreground))",
},
masterbadgecolor: {
DEFAULT: "hsl(var(--masterbadgecolor))",
foreground: "hsl(var(--masterbadgecolor-foreground))",
},
basicbadgecolor: {
DEFAULT: "hsl(var(--basicbadgecolor))",
foreground: "hsl(var(--basicbadgecolor-foreground))",
},
advancebadgecolor: {
DEFAULT: "hsl(var(--advancebadgecolor))",
foreground: "hsl(var(--advancebadgecolor-foreground))",
},
worldsendbadgecolor: {
DEFAULT: "hsl(var(--worldsendbadgecolor))",
foreground: "hsl(var(--worldsendbadgecolor-foreground))",
},
newbadgecolor: {
DEFAULT: "hsl(var(--newbadgecolor))",
foreground: "hsl(var(--newbadgecolor-foreground))",
},
scoretext: {
DEFAULT: "hsl(var(--scoretext))",
foreground: "hsl(var(--scoretext-foreground))",
},
justicecriticaltext: {
DEFAULT: "hsl(var(--justicecriticaltext))",
foreground: "hsl(var(--justicecriticaltext-foreground))",
},
justicetext: {
DEFAULT: "hsl(var(--justicetext))",
foreground: "hsl(var(--justicetext-foreground))",
},
attacktext: {
DEFAULT: "hsl(var(--attacktext))",
foreground: "hsl(var(--attacktext-foreground))",
},
misstext: {
DEFAULT: "hsl(var(--misstext))",
foreground: "hsl(var(--misstext-foreground))",
},
segmentedtabnotactive: {
DEFAULT: "hsl(var(--segmentedtabnotactive))",
foreground: "hsl(var(--segmentedtabnotactive-foreground))",
},
segmentedtabactive: {
DEFAULT: "hsl(var(--segmentedtabactive))",
foreground: "hsl(var(--segmentedtabactive-foreground))",
},
segmentedtabtext: {
DEFAULT: "hsl(var(--segmentedtabtext))",
foreground: "hsl(var(--segmentedtabtext-foreground))",
},
songjacketborder: {
DEFAULT: "hsl(var(--songjacketborder))",
foreground: "hsl(var(--songjacketborder-foreground))",
},
buttonbackgroundcolor: {
DEFAULT: "hsl(var(--buttonbackgroundcolor))",
foreground: "hsl(var(--buttonbackgroundcolor-foreground))",
},
subsectionbackgroundcolor: {
DEFAULT: "hsl(var(--subsectionbackgroundcolor))",
foreground: "hsl(var(--subsectionbackgroundcolor-foreground))",
},
typographydropdown: {
DEFAULT: "hsl(var(--typographydropdown))",
foreground: "hsl(var(--typographydropdown-foreground))",
},
buttonhovercolor: {
DEFAULT: "hsl(var(--buttonhovercolor))",
foreground: "hsl(var(--buttonhovercolor-foreground))",
},
cardsectionbackgroundcolor: {
DEFAULT: "hsl(var(--cardsectionbackgroundcolor))",
foreground: "hsl(var(--cardsectionbackgroundcolor-foreground))",
},
scorecardbadgetypography: {
DEFAULT: "hsl(var(--scorecardbadgetypography))",
foreground: "hsl(var(--scorecardbadgetypography-foreground))",
},
paginationtypography: {
DEFAULT: "hsl(var(--paginationtypography))",
foreground: "hsl(var(--paginationtypography-foreground))",
},
paginationhover: {
DEFAULT: "hsl(var(--paginationhover))",
foreground: "hsl(var(--paginationhover-foreground))",
},
paginationbackground: {
DEFAULT: "hsl(var(--paginationbackground))",
foreground: "hsl(var(--paginationbackground-foreground))",
},
paginationtypographyhover: {
DEFAULT: "hsl(var(--paginationtypographyhover))",
foreground: "hsl(var(--paginationtypographyhover-foreground))",
},
segmentedtabactivetypography: {
DEFAULT: "hsl(var(--segmentedtabactivetypography))",
foreground: "hsl(var(--segmentedtabactivetypography-foreground))",
},
bestrecentratingcolor: {
DEFAULT: "hsl(var(--bestrecentratingcolor))",
foreground: "hsl(var(--bestrecentratingcolor-foreground))",
},
heartcolorfave: {
DEFAULT: "hsl(var(--heartcolorfave))",
foreground: "hsl(var(--heartcolorfave-foreground))",
},
heartcolornormal: {
DEFAULT: "hsl(var(--heartcolornormal))",
foreground: "hsl(var(--heartcolornormal-foreground))",
},
playertrophytext: {
DEFAULT: "hsl(var(--playertrophytext))",
foreground: "hsl(var(--playertrophytext-foreground))",
},
segmentedtabtexthover: {
DEFAULT: "hsl(var(--segmentedtabtexthover))",
foreground: "hsl(var(--segmentedtabtexthover-foreground))",
},
texthover: {
DEFAULT: "hsl(var(--texthover))",
foreground: "hsl(var(--texthover-foreground))",
},
playerteambadge: {
DEFAULT: "hsl(var(--playerteambadge))",
foreground: "hsl(var(--playerteambadge-foreground))",
},
honeydew: "#ecf5ea",
black: "#000",
deeppink: "#ff2c85",
lightyellow: "#f9f9db",
cornsilk: "#f8f1d4",
crimson: "#e92829",
gainsboro: "#d9d9d9",
},
borderRadius: {
lg: "var(--radius)",