forked from PolarisPyra/cozynet
fixed themes i think
This commit is contained in:
parent
5b1197200e
commit
e920521438
|
@ -33,6 +33,7 @@
|
|||
}
|
||||
|
||||
.dark {
|
||||
--buttontexthovercolor: 0, 0%, 100%;
|
||||
--buttonhovercolor: 0, 0%, 12%;
|
||||
--typographydropdown: 0, 0%, 68%;
|
||||
--buttonbackgroundcolor: 0, 0%, 2%;
|
||||
|
@ -76,6 +77,7 @@
|
|||
}
|
||||
|
||||
.light {
|
||||
--buttontexthovercolor: 0, 0%, 0%;
|
||||
--buttonhovercolor: 210, 25%, 50%;
|
||||
--typographydropdown: 210, 15%, 35%;
|
||||
--buttonbackgroundcolor: 0, 0%, 98%;
|
||||
|
@ -120,6 +122,7 @@
|
|||
--misstext: 33, 15%, 50%;
|
||||
}
|
||||
.gruvbox {
|
||||
--buttontexthovercolor: 30, 7%, 12%;
|
||||
--buttonhovercolor: 48, 75%, 57%;
|
||||
--typographydropdown: 48, 67%, 88%;
|
||||
--buttonbackgroundcolor: 30, 5%, 20%;
|
||||
|
@ -163,7 +166,8 @@
|
|||
}
|
||||
|
||||
.mocha {
|
||||
--buttonhovercolor: 48, 75%, 57%;
|
||||
--buttonhovercolor: 40, 70%, 78%;
|
||||
--buttontexthovercolor: 0, 0%, 0%;
|
||||
--typographydropdown: 48, 67%, 88%;
|
||||
--buttonbackgroundcolor: 30, 5%, 20%;
|
||||
--background: 232, 23%, 18%;
|
||||
|
|
|
@ -79,11 +79,11 @@ export default function Home() {
|
|||
<div className="overflow-hidden rounded-sm bg-subsectionbackgroundcolor">
|
||||
<div className="px-10 py-8">
|
||||
<div className="mb-8 text-center">
|
||||
<h1 className="text-2xl font-semibold text-text">USER LOGIN</h1>
|
||||
<h1 className="text-2xl font-semibold text-typography">USER LOGIN</h1>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block mb-2 text-sm font-medium text-text">
|
||||
<label className="block mb-2 text-sm font-medium text-typography">
|
||||
Username
|
||||
<Input
|
||||
type="text"
|
||||
|
@ -111,7 +111,7 @@ export default function Home() {
|
|||
<div className="flex justify-end items-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm font-bold uppercase cursor-pointer text-text start hover:underline"
|
||||
className="text-sm font-bold uppercase cursor-pointer text-typography start hover:underline"
|
||||
>
|
||||
Forgot Password?
|
||||
</Link>
|
||||
|
@ -119,7 +119,7 @@ export default function Home() {
|
|||
<div className="px-10 py-4 text-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm font-bold uppercase cursor-pointer bg-bu text-text hover:underline relative"
|
||||
className="text-sm font-bold uppercase cursor-pointer text-typography hover:underline relative"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading && (
|
||||
|
@ -132,10 +132,10 @@ export default function Home() {
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="px-10 py-4 text-center bg-buttonbackgroundcolor">
|
||||
<div className="px-10 py-4 text-center">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="text-sm font-bold uppercase cursor-pointer text-text start hover:underline"
|
||||
className="text-sm font-bold uppercase cursor-pointer text-typography hover:underline"
|
||||
>
|
||||
Create account
|
||||
</Link>
|
||||
|
|
|
@ -188,7 +188,7 @@ export default function Signup() {
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="px-10 py-4 bg-buttonbackgroundcolor text-center">
|
||||
<div className="px-10 py-4 text-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm text-text start uppercase font-bold hover:underline cursor-pointer"
|
||||
|
|
|
@ -39,7 +39,7 @@ const UserBox = () => {
|
|||
<Link href="/favorites"> {/* Replace '/favorites' with the actual path of your favorites page */}
|
||||
<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>
|
||||
<span className="mt-2 text-sm font-bold text-typography ">FAVORITES</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
|
|
|
@ -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 text-typography 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-[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"
|
||||
className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background 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-typography"
|
||||
className="text-gray-900"
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
|
@ -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-start pl-4">
|
||||
<div className="avatar_customization_dropdowns w-full md:w-1/2 flex flex-col justify-center items-center">
|
||||
<Dropdown
|
||||
options={avatarHeadOptions}
|
||||
onChange={(value) => handleSelectionChange("avatarHead", value)}
|
||||
|
@ -203,11 +203,10 @@ 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 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"
|
||||
className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
Update Avatar
|
||||
</button>
|
||||
|
|
|
@ -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-[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"
|
||||
className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
{options.map((option, index) => (
|
||||
<option
|
||||
|
@ -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 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"
|
||||
className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
Update Map Icon
|
||||
</button>
|
||||
|
|
|
@ -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-[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"
|
||||
className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
{options.map((option, index) => (
|
||||
<option
|
||||
|
@ -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 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"
|
||||
className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
Update Nameplate
|
||||
</button>
|
||||
|
|
|
@ -104,13 +104,13 @@ const RivalComponent = () => {
|
|||
<div className="flex items-center mt-4 space-x-2">
|
||||
<button
|
||||
onClick={handlePostRival}
|
||||
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"
|
||||
className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
Add Rival
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowAccessCode(!showAccessCode)}
|
||||
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"
|
||||
className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
{showAccessCode ? "Hide Rival Code" : "Show Rival Code"}
|
||||
</button>
|
||||
|
|
|
@ -49,7 +49,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
|
|||
<select
|
||||
value={trophyId}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
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"
|
||||
className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
{options.map((option, index) => (
|
||||
<option
|
||||
|
@ -121,7 +121,7 @@ const PlayerTropyComponent = () => {
|
|||
<div className=" mt-4">
|
||||
<button
|
||||
onClick={handlePostData}
|
||||
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"
|
||||
className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
Update Trophy
|
||||
</button>
|
||||
|
|
|
@ -82,13 +82,13 @@ const UpdateCard = () => {
|
|||
<div className="flex">
|
||||
<button
|
||||
onClick={handleGenerateAccessCode}
|
||||
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"
|
||||
className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
Generate Card
|
||||
</button>
|
||||
<button
|
||||
onClick={handleUpdateCard}
|
||||
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"
|
||||
className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
|
||||
Change Card
|
||||
|
|
|
@ -38,7 +38,7 @@ const Dropdown: React.FC<DropdownProps & { className?: string }> = ({
|
|||
<select
|
||||
value={id}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
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"
|
||||
className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
{options.map((option, index) => (
|
||||
<option
|
||||
|
@ -154,7 +154,7 @@ const SystemVoiceComponent = () => {
|
|||
<div className="flex items-center mt-4">
|
||||
<button
|
||||
onClick={handlePostData}
|
||||
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"
|
||||
className="text-typography px-3 py-2 mb-3 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
Update System Voice
|
||||
</button>
|
||||
|
|
|
@ -100,12 +100,12 @@ const PlayerTeamComponent = () => {
|
|||
placeholder="Enter Team Name"
|
||||
value={newTeamName}
|
||||
onChange={(e) => setNewTeamName(e.target.value)}
|
||||
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"
|
||||
className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] px-3 py-2 border border-transparent font-medium rounded-sm bg-background hover:bg-yellow focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
/>
|
||||
<div className="pl-2">
|
||||
<div className="pl-1">
|
||||
<button
|
||||
onClick={handlePostData}
|
||||
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"
|
||||
className="text-typography w-[180px] mr-2 px-3 py-2 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor 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-[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"
|
||||
className=" w-[230px] sm:w-[280px] md:w-[280px] lg:w-[280px] text-typography px-3 py-2 border border-transparent font-medium rounded-sm bg-background focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
<option value="">Select a Team</option>
|
||||
{playerTeamData.map((team) => (
|
||||
|
@ -125,10 +125,10 @@ const PlayerTeamComponent = () => {
|
|||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="pl-2 md:pl-2 lg:pl-2 xl:pl-2">
|
||||
<div className="pl-1">
|
||||
<button
|
||||
onClick={handlePostPlayerTeamProfile}
|
||||
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"
|
||||
className="text-typography w-[180px] px-3 py-2 border border-transparent font-medium rounded-sm bg-buttonbackgroundcolor hover:text-buttontexthovercolor hover:bg-buttonhovercolor focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
Set Player Team
|
||||
</button>
|
||||
|
|
|
@ -42,11 +42,11 @@ const AimeCard: React.FC<CreditCardProps> = () => {
|
|||
type="text"
|
||||
value={formatCardNumber()}
|
||||
readOnly
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-transparent font-mono"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md text-typography focus:outline-none focus:border-transparent font-mono"
|
||||
/>
|
||||
<button
|
||||
onClick={toggleShowNumbers}
|
||||
className="absolute top-1/2 right-4 transform -translate-y-1/2 px-2 py-1 dark:text-white rounded-md"
|
||||
className="absolute top-1/2 right-4 transform -translate-y-1/2 px-2 py-1 text-typography rounded-md"
|
||||
>
|
||||
{showNumbers ? 'Hide' : 'View'}
|
||||
</button>
|
||||
|
|
|
@ -140,13 +140,13 @@ const NewKeychipComponent = () => {
|
|||
<div className="flex flex-col items-center pt-4 pb-2">
|
||||
<button
|
||||
onClick={generateRandomSerial}
|
||||
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"
|
||||
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-buttontexthovercolor hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
Generate Random Serial
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
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"
|
||||
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-buttontexthovercolor hover:bg-red focus:outline-none transition duration-150 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
Create New Keychip
|
||||
</button>
|
||||
|
|
|
@ -213,6 +213,10 @@ const config = {
|
|||
DEFAULT: "hsl(var(--playerteambadge))",
|
||||
foreground: "hsl(var(--playerteambadge-foreground))",
|
||||
},
|
||||
buttontexthovercolor: {
|
||||
DEFAULT: "hsl(var(--buttontexthovercolor))",
|
||||
foreground: "hsl(var(--buttontexthovercolor-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
|
|
Loading…
Reference in New Issue