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

Dark mode Signup Bug #439

Merged
merged 3 commits into from
Nov 10, 2024
Merged

Dark mode Signup Bug #439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8208579
fixed dark mode issue in signup page
Sourabh782 Nov 10, 2024
f448ee8
fixed dark mode issue in signup page
Sourabh782 Nov 10, 2024
0f1a764
Merge branch 'main' into signup
Sourabh782 Nov 10, 2024
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: 3 additions & 1 deletion client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,8 @@ function App() {
<Route exact path="/contributors" element={<Contributors mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/discussion" element={<Discussion mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/community" element={<Community mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/ai" element={<AI mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
{/* <Route exact path="/ai" element={ <Ai mode={mode} setProgress={setProgress} showAlert={showAlert} /> } /> */}

<Route exact path="/about" element={<About mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/feedback" element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path="/blog" element={<BlogPage mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
Expand All @@ -147,6 +148,7 @@ function App() {
<Route exact path='/reset-password' element={<ResetPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/codeofconduct' element={<CodeOfConduct mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/contactus' element={<ContactUs mode={mode} setProgress={setProgress} showAlert={showAlert} />} />

<Route exact path='/feedback' element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/privacypolicy' element={<PrivacyPolicy mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/termofuse' element={<TermOfUse mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
Expand Down
48 changes: 25 additions & 23 deletions client/src/component/Signup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ const Signup = ({ mode }) => {
const { userLoggedIn } = useAuth();
const navigate = useNavigate();

console.log(mode);

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
Expand Down Expand Up @@ -124,13 +126,13 @@ const Signup = ({ mode }) => {
<div
className="signup-wrapper"
style={{
backgroundColor: mode === "dark" ? "black" : "white",
backgroundColor: mode === "dark" ? "black" : "#fff",
}}
>
<div
className="signup-form"
style={{
color: mode === "dark" ? "white" : "black",
color: mode === "dark" ? "#fff" : "black",
}}
>
<h2
Expand All @@ -144,12 +146,12 @@ const Signup = ({ mode }) => {

<form className="w-3/4" onSubmit={handleSubmit}>
<div className="space-y-4 w-full">
<div className="signup-form-group items-start flex flex-col gap-2">
<div className="signup-form-group items-start flex flex-col gap-2 ">
<label
htmlFor="name"
className="text-md leading-none font-medium"
className="text-md leading-none font-medium dark:text-red-600"
style={{
color: mode === "dark" ? "white" : "black",
color: mode === "dark" ? "#fff" : "black",
}}
>
Full Name
Expand All @@ -165,8 +167,8 @@ const Signup = ({ mode }) => {
autoComplete="on"
required
style={{
backgroundColor: mode === "dark" ? "#333" : "white",
color: mode === "dark" ? "white" : "black",
backgroundColor: mode === "dark" ? "#333" : "#fff",
color: mode === "dark" ? "#fff" : "black",
}}
/>
{errors.name && (
Expand All @@ -179,7 +181,7 @@ const Signup = ({ mode }) => {
htmlFor="email"
className="text-md leading-none font-medium"
style={{
color: mode === "dark" ? "white" : "black",
color: mode === "dark" ? "#fff" : "black",
}}
>
Email
Expand All @@ -195,8 +197,8 @@ const Signup = ({ mode }) => {
autoComplete="on"
required
style={{
backgroundColor: mode === "dark" ? "#333" : "white",
color: mode === "dark" ? "white" : "black",
backgroundColor: mode === "dark" ? "#333" : "#fff",
color: mode === "dark" ? "#fff" : "black",
}}
/>
{errors.email && (
Expand All @@ -209,7 +211,7 @@ const Signup = ({ mode }) => {
htmlFor="password"
className="text-md font-medium"
style={{
color: mode === "dark" ? "white" : "black",
color: mode === "dark" ? "#fff" : "black",
}}
>
Password
Expand All @@ -224,22 +226,22 @@ const Signup = ({ mode }) => {
autoComplete="on"
required
style={{
backgroundColor: mode === "dark" ? "#333" : "white",
color: mode === "dark" ? "white" : "black",
backgroundColor: mode === "dark" ? "#333" : "#fff",
color: mode === "dark" ? "#fff" : "black",
}}
iconRender={(visible) =>
visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
}
/>
</div>
<div className="password-checklist text-left">
<p>Password must contain:</p>
<p className={`${mode == "dark" ? "text-white" : "text-black"}`}>Password must contain:</p>
<ul className="list-none pl-0">
<li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.length} readOnly /> <span>At least 8 characters</span></li>
<li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.uppercase} readOnly /> <span>At least one uppercase letter</span></li>
<li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.lowercase} readOnly /> <span>At least one lowercase letter</span></li>
<li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.number} readOnly /> <span>At least one number</span></li>
<li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.specialChar} readOnly /> <span>At least one special character</span></li>
<li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.length} readOnly /> <span className={`${mode == "dark" ? "text-white" : "text-black"}`}>At least 8 characters</span></li>
<li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.uppercase} readOnly /> <span className={`${mode == "dark" ? "text-white" : "text-black"}`}>At least one uppercase letter</span></li>
<li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.lowercase} readOnly /> <span className={`${mode == "dark" ? "text-white" : "text-black"}`}>At least one lowercase letter</span></li>
<li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.number} readOnly /> <span className={`${mode == "dark" ? "text-white" : "text-black"}`}>At least one number</span></li>
<li className="flex items-center"><input className="mr-2" type="radio" checked={requirements.specialChar} readOnly /> <span className={`${mode == "dark" ? "text-white" : "text-black"}`}>At least one special character</span></li>
</ul>
</div>

Expand All @@ -248,7 +250,7 @@ const Signup = ({ mode }) => {
htmlFor="cpassword"
className="text-md font-medium"
style={{
color: mode === "dark" ? "white" : "black",
color: mode === "dark" ? "#fff" : "black",
}}
>
Confirm Password
Expand All @@ -263,8 +265,8 @@ const Signup = ({ mode }) => {
autoComplete="on"
required
style={{
backgroundColor: mode === "dark" ? "#333" : "white",
color: mode === "dark" ? "white" : "black",
backgroundColor: mode === "dark" ? "#333" : "#fff",
color: mode === "dark" ? "#fff" : "black",
}}
iconRender={(visible) =>
visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
Expand Down Expand Up @@ -301,7 +303,7 @@ const Signup = ({ mode }) => {
</g>
<defs>
<clipPath id="clip0_17_40">
<rect width="48" height="48" fill="white" />
<rect width="48" height="48" fill="#fff" />
</clipPath>
</defs>
</svg>
Expand Down
Loading