Skip to content

Commit

Permalink
Merge pull request #439 from Sourabh782/signup
Browse files Browse the repository at this point in the history 
Dark mode Signup Bug #439
  • Loading branch information
@Anuj3553
Anuj3553 authored Nov 10, 2024
2 parents 80970f5 + 0f1a764 commit c9a89eb
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 24 deletions.
4 changes: 3 additions & 1 deletion client/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,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 @@ -152,6 +153,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
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

0 comments on commit c9a89eb

Please sign in to comment.