Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixing Dark Mode Color Contrast Issue on Login and Signup Page #521

Merged
merged 2 commits into from
Jul 26, 2023
Merged

Fixing Dark Mode Color Contrast Issue on Login and Signup Page #521

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3105903
fixing contrast issue
s2sharpit Jul 26, 2023
2d21fad
fixing type bugs
s2sharpit Jul 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/Auth/Auth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,10 +206,10 @@ export const Auth = ({ modal, setModal, buttonClass, setStyle }: Props) => {
</button>
<Tabs className={theme === 'dark' ? 'text-white bg-gray-900 ' : ''}>
<TabList className="flex flex-row justify-center space-x-1 rounded-xl bg-blue-900/20 p-1 text-sm">
<Tab className="w-full rounded-lg py-2.5 text-center font-medium leading-5 focus:text-blue-700 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 default:select-all focus:bg-white focus:shadow focus:outline-none focus:ring-2 aria-selected:bg-white aria-selected:shadow aria-selected:outline-none aria-selected:ring-2">
<Tab className="w-full rounded-lg py-2.5 text-center font-medium leading-5 aria-selected:text-blue-700 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 default:select-all focus:bg-white focus:shadow focus:outline-none focus:ring-2 aria-selected:bg-white aria-selected:shadow aria-selected:outline-none aria-selected:ring-2">
Signup
</Tab>
<Tab className="w-full rounded-lg py-2.5 text-center font-medium leading-5 focus:text-blue-700 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:bg-white focus:shadow focus:outline-none focus:ring-2 aria-selected:bg-white aria-selected:shadow aria-selected:outline-none aria-selected:ring-2">
<Tab className="w-full rounded-lg py-2.5 text-center font-medium leading-5 aria-selected:text-blue-700 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:bg-white focus:shadow focus:outline-none focus:ring-2 aria-selected:bg-white aria-selected:shadow aria-selected:outline-none aria-selected:ring-2">
Login
</Tab>
</TabList>
Expand Down
138 changes: 70 additions & 68 deletions src/components/Auth/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,77 +127,79 @@ export default function LogIn({ setModal }: setModalType) {
Login with your email
<hr className="mt-3" />
</fieldset>
<div className="mt-6">
<input
{...registerForm('email')}
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:text-gray-500 focus:outline-4"
type="email"
placeholder="Email"
aria-label="Enter your email"
aria-describedby="email-error"
/>
{errors.email && (
<div
className="mt-2 text-sm font-medium text-red-500"
role="alert"
id="email-error"
>
{errors.email.message}
</div>
)}
</div>
<div className="mt-6">
<div className="container relative">
<div className="dark:text-black">
<div className="mt-6">
<input
{...registerForm('password')}
type={isPasswordVisible ? 'text' : 'password'}
placeholder="Password"
{...registerForm('email')}
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:text-gray-500 focus:outline-4"
aria-label="Enter your password"
aria-describedby="password-error"
type="email"
placeholder="Email"
aria-label="Enter your email"
aria-describedby="email-error"
/>
<button
className="absolute inset-y-0 right-1 flex items-center px-4 text-gray-600 md:right-16"
onClick={(e) => togglePasswordVisibility(e)}
aria-label={isPasswordVisible ? 'Hide Password' : 'Show Password'}
>
{isPasswordVisible ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
)}
</button>
{errors.email && (
<div
className="mt-2 text-sm font-medium text-red-500"
role="alert"
id="email-error"
>
{errors.email.message}
</div>
)}
</div>
<div className="mt-6">
<div className="container relative">
<input
{...registerForm('password')}
type={isPasswordVisible ? 'text' : 'password'}
placeholder="Password"
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:text-gray-500 focus:outline-4"
aria-label="Enter your password"
aria-describedby="password-error"
/>
<button
className="absolute inset-y-0 right-1 flex items-center px-4 text-gray-600 md:right-16"
onClick={(e) => togglePasswordVisibility(e)}
aria-label={isPasswordVisible ? 'Hide Password' : 'Show Password'}
>
{isPasswordVisible ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
)}
</button>
</div>
</div>
{errors.password && (
<div
Expand Down
152 changes: 77 additions & 75 deletions src/components/Auth/Register.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,82 +122,84 @@ export default function SignUp({ setModal }: setModalType) {
<hr className="mt-3" />
</fieldset>

<div className="font-xl mt-6">
<input
{...registerForm('name')}
type="text"
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:font-sans placeholder:text-base placeholder:text-gray-500 focus:outline-4"
placeholder="Enter Your Name"
aria-label="Enter your name"
aria-describedby="name-error"
/>
{errors.name && (
<p
className="mt-2 text-sm font-medium text-red-500"
role="alert"
id="name-error"
>
{errors.name.message}
</p>
)}
</div>
<div className="dark:text-black">
<div className="font-xl mt-6">
<input
{...registerForm('name')}
type="text"
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:font-sans placeholder:text-base placeholder:text-gray-500 focus:outline-4"
placeholder="Enter Your Name"
aria-label="Enter your name"
aria-describedby="name-error"
/>
{errors.name && (
<p
className="mt-2 text-sm font-medium text-red-500"
role="alert"
id="name-error"
>
{errors.name.message}
</p>
)}
</div>

<div className="mt-6">
<input
{...registerForm('email')}
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:text-gray-500 focus:outline-4"
type="email"
placeholder="Email"
aria-label="Enter your email"
aria-describedby="email-error"
/>
{errors.email && (
<p
className="mt-2 text-sm font-medium text-red-500"
role="alert"
id="email-error"
>
{errors.email.message}
</p>
)}
</div>
<div className="mt-6">
<input
{...registerForm('password')}
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:text-gray-500 focus:outline-4"
type="password"
placeholder="Create New Password"
aria-label="Enter your password"
aria-describedby="password-error"
/>
{errors.password && (
<p
className="mt-2 text-sm font-medium text-red-500"
role="alert"
id="password-error"
>
{errors.password.message}
</p>
)}
</div>
<div className="mt-6">
<input
{...registerForm('confirmPassword')}
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:text-gray-500 focus:outline-4"
type="password"
placeholder="Confirm Password"
aria-label="Confirm your password"
aria-describedby="confirmPassword-error"
/>
{errors.confirmPassword && (
<p
className="mt-2 text-sm font-medium text-red-500"
role="alert"
id="confirmPassword-error"
>
{errors.confirmPassword.message}
</p>
)}
<div className="mt-6">
<input
{...registerForm('email')}
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:text-gray-500 focus:outline-4"
type="email"
placeholder="Email"
aria-label="Enter your email"
aria-describedby="email-error"
/>
{errors.email && (
<p
className="mt-2 text-sm font-medium text-red-500"
role="alert"
id="email-error"
>
{errors.email.message}
</p>
)}
</div>
<div className="mt-6">
<input
{...registerForm('password')}
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:text-gray-500 focus:outline-4"
type="password"
placeholder="Create New Password"
aria-label="Enter your password"
aria-describedby="password-error"
/>
{errors.password && (
<p
className="mt-2 text-sm font-medium text-red-500"
role="alert"
id="password-error"
>
{errors.password.message}
</p>
)}
</div>
<div className="mt-6">
<input
{...registerForm('confirmPassword')}
className="mx-auto h-10 w-72 max-w-full rounded-lg pl-5 outline outline-2 outline-offset-1 outline-blue-400 placeholder:text-gray-500 focus:outline-4"
type="password"
placeholder="Confirm Password"
aria-label="Confirm your password"
aria-describedby="confirmPassword-error"
/>
{errors.confirmPassword && (
<p
className="mt-2 text-sm font-medium text-red-500"
role="alert"
id="confirmPassword-error"
>
{errors.confirmPassword.message}
</p>
)}
</div>
</div>
<div className="mt-4">
<input
Expand Down
1 change: 0 additions & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ function withOpacity(variableName) {
}

module.exports = {
darkMode: 'class',
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
Expand Down
Loading