fixed themes i think

This commit is contained in:
polaris 2024-01-08 20:27:43 -05:00
parent 5b1197200e
commit e920521438
15 changed files with 44 additions and 37 deletions

View File

@ -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%;

View File

@ -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>

View File

@ -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"

View File

@ -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>

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 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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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)",