Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Update logo component and refactor UserAuth for improved readability and consistency

This commit is contained in:
Vishnu 2025-04-28 09:25:51 +05:30
parent be4d8d458e
commit e64840a4e7
4 changed files with 170 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/components/icons/Logo.tsx
View File

@ -124,7 +124,6 @@ export function LogoIconLarge() {
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<circle cx="45" cy="45" r="45" fill="#FCFDFD" />
<circle <circle
cx="45.1957" cx="45.1957"
cy="45.1957" cy="45.1957"

218
app/src/pages/UserAuth.tsx
View File

@ -2,7 +2,11 @@ import React, { useState, FormEvent } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { LogoIconLarge } from "../components/icons/Logo"; import { LogoIconLarge } from "../components/icons/Logo";
import { EyeIcon } from "../components/icons/ExportCommonIcons"; import { EyeIcon } from "../components/icons/ExportCommonIcons";
import { useLoadingProgress, useOrganization, useUserName } from "../store/store"; import {
useLoadingProgress,
useOrganization,
useUserName,
} from "../store/store";
import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi"; import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi"; import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
@ -21,7 +25,7 @@ const UserAuth: React.FC = () => {
const handleLogin = async (e: FormEvent<HTMLFormElement>) => { const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
const organization = (email.split("@")[1]).split(".")[0]; const organization = email.split("@")[1].split(".")[0];
try { try {
const res = await signInApi(email, password, organization); const res = await signInApi(email, password, organization);
@ -39,7 +43,7 @@ const UserAuth: React.FC = () => {
} else if (res.message === "User Not Found!!! Kindly signup...") { } else if (res.message === "User Not Found!!! Kindly signup...") {
setError("Account not found"); setError("Account not found");
} }
} catch (error) { } } catch (error) {}
}; };
const handleRegister = async (e: FormEvent) => { const handleRegister = async (e: FormEvent) => {
@ -47,7 +51,7 @@ const UserAuth: React.FC = () => {
if (email && password && userName) { if (email && password && userName) {
setError(""); setError("");
try { try {
const organization = (email.split("@")[1]).split(".")[0]; const organization = email.split("@")[1].split(".")[0];
const res = await signUpApi(userName, email, password, organization); const res = await signUpApi(userName, email, password, organization);
if (res.message === "New User created") { if (res.message === "New User created") {
@ -56,123 +60,121 @@ const UserAuth: React.FC = () => {
if (res.message === "User already exists") { if (res.message === "User already exists") {
setError("User already exists"); setError("User already exists");
} }
} catch (error) { } } catch (error) {}
} else { } else {
setError("Please fill all the fields!"); setError("Please fill all the fields!");
} }
}; };
return ( return (
<> <div className="auth-container">
<div className="auth-container"> <div className="logo-icon">
<div className="logo-icon"> <LogoIconLarge />
<LogoIconLarge /> </div>
</div> <h1>Welcome to Dwinzo</h1>
<h1>Welcome to Dwinzo</h1> <p>
<p> {isSignIn ? (
{isSignIn ? ( <>
<> Don’t have an account?{" "}
Don’t have an account?{" "} <span
<span className="link"
className="link" onClick={() => setIsSignIn(false)}
onClick={() => setIsSignIn(false)} style={{ cursor: "pointer" }}
style={{ cursor: "pointer" }} >
> Register here!
Register here! </span>
</span> </>
</> ) : (
) : ( <>
<> Already have an account?{" "}
Already have an account?{" "} <span
<span className="link"
className="link" onClick={() => setIsSignIn(true)}
onClick={() => setIsSignIn(true)} style={{ cursor: "pointer" }}
style={{ cursor: "pointer" }} >
> Login here!
Login here! </span>
</span> </>
</> )}
)} </p>
</p>
<button className="google-login"> <button className="google-login">
<span className="google-icon">G</span> Continue with Google <span className="google-icon">G</span> Continue with Google
</button> </button>
{error && <div className="error-message">🛈 {error}</div>} {error && <div className="error-message">🛈 {error}</div>}
<form <form
onSubmit={isSignIn ? handleLogin : handleRegister} onSubmit={isSignIn ? handleLogin : handleRegister}
className="auth-form" className="auth-form"
> >
{!isSignIn && ( {!isSignIn && (
<input
type="text"
value={userName}
placeholder="Username"
onChange={(e) => setUserName(e.target.value)}
required
/>
)}
<input <input
type="email" type="text"
name="email" value={userName}
value={email} placeholder="Username"
placeholder="Email" onChange={(e) => setUserName(e.target.value)}
onChange={(e) => setEmail(e.target.value)}
required required
/> />
<div className="password-container"> )}
<input <input
name="password" type="email"
type={showPassword ? "text" : "password"} name="email"
value={password} value={email}
placeholder="Password" placeholder="Email"
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setEmail(e.target.value)}
required required
/> />
<button <div className="password-container">
type="button" <input
className="toggle-password" name="password"
onClick={() => setShowPassword(!showPassword)} type={showPassword ? "text" : "password"}
> value={password}
<EyeIcon isClosed={showPassword} /> placeholder="Password"
</button> onChange={(e) => setPassword(e.target.value)}
</div> required
{!isSignIn && ( />
<div className="policy-checkbox"> <button
<input type="checkbox" name="" id="" required /> type="button"
<div className="label"> className="toggle-password"
I have read and agree to the terms of service onClick={() => setShowPassword(!showPassword)}
</div> >
</div> <EyeIcon isClosed={showPassword} />
)}
<button type="submit" className="continue-button">
{isSignIn ? "Continue" : "Register"}
</button> </button>
</form> </div>
<p className="policy"> {!isSignIn && (
By signing up for, or logging into, an account, you agree to our{" "} <div className="policy-checkbox">
<span <input type="checkbox" name="" id="" required />
className="link" <div className="label">
onClick={() => navigate("/privacy")} I have read and agree to the terms of service
style={{ cursor: "pointer" }} </div>
> </div>
privacy policy )}
</span>{" "} <button type="submit" className="continue-button">
&{" "} {isSignIn ? "Continue" : "Register"}
<span </button>
className="link" </form>
onClick={() => navigate("/terms")} <p className="policy">
style={{ cursor: "pointer" }} By signing up for, or logging into, an account, you agree to our{" "}
> <span
terms of service className="link"
</span>{" "} onClick={() => navigate("/privacy")}
whether you read them or not. You can also find these terms on our style={{ cursor: "pointer" }}
website. >
</p> privacy policy
</div> </span>{" "}
</> &{" "}
<span
className="link"
onClick={() => navigate("/terms")}
style={{ cursor: "pointer" }}
>
terms of service
</span>{" "}
whether you read them or not. You can also find these terms on our
website.
</p>
</div>
); );
}; };

124
app/src/styles/abstracts/variables.scss
View File

@ -6,83 +6,69 @@
// text colors // text colors
// ---------- light mode ---------- // ---------- light mode ----------
// $text-color: #2b3344;
// $text-disabled: #b7b7c6;
// $input-text-color: #595965;
// $highlight-text-color: #6f42c1;
// ---------- dark mode ----------
// $text-color-dark: #f3f3fd;
// $text-disabled-dark: #6f6f7a;
// $input-text-color-dark: #b5b5c8;
// $highlight-text-color-dark: #B392F0;
// background colors
// ---------- light mode ----------
// $background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
// $background-color-secondary: #FCFDFD4D;
// $background-color-accent: #6f42c1;
// $background-color-button: #6f42c1;
// $background-color-drop-down: #6F42C14D;
// $background-color-input: #FFFFFF4D;
// $background-color-input-focus: #F2F2F7;
// $background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%);
// $background-color-selected: #E0DFFF;
// $background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
// ---------- dark mode ----------
// $background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
// $background-color-secondary-dark: #19191D99;
// $background-color-accent-dark: #6f42c1;
// $background-color-button-dark: #6f42c1;
// $background-color-drop-down-dark: #50505080;
// $background-color-input-dark: #FFFFFF33;
// $background-color-input-focus-dark: #333333;
// $background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
// $background-color-selected-dark: #403E66;
// $background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
// border colors
// ---------- light mode ----------
// $border-color: #E0DFFF;
// $border-color-accent: #6F42C1;
// ---------- dark mode ----------
// $border-color-dark: #564B69;
// $border-color-accent-dark: #6F42C1;
// highlight colors
// ---------- light mode ----------
// $highlight-accent-color: #e0dfff;
// $highlight-secondary-color: #c4abf1;
// ---------- dark mode ----------
// $highlight-accent-color-dark: #403e6a;
// $highlight-secondary-color-dark: #c4abf1;
// colors
// $color1: #A392CD;
// $color2: #7b4cd3;
// $color3: #B186FF;
// $color4: #8752E8;
// $color5: #C7A8FF;
// old variables
$text-color: #2b3344; $text-color: #2b3344;
$text-disabled: #b7b7c6; $text-disabled: #b7b7c6;
$input-text-color: #595965; $input-text-color: #595965;
$highlight-text-color: #6f42c1;
// ---------- dark mode ----------
$text-color-dark: #f3f3fd; $text-color-dark: #f3f3fd;
$text-disabled-dark: #6f6f7a; $text-disabled-dark: #6f6f7a;
$input-text-color-dark: #b5b5c8; $input-text-color-dark: #b5b5c8;
$highlight-text-color-dark: #B392F0;
// background colors
// ---------- light mode ----------
$background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
$background-color-secondary: #FCFDFD4D;
$background-color-accent: #6f42c1;
$background-color-button: #6f42c1;
$background-color-drop-down: #6F42C14D;
$background-color-input: #FFFFFF4D;
$background-color-input-focus: #F2F2F7;
$background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%);
$background-color-selected: #E0DFFF;
$background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
// ---------- dark mode ----------
$background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
$background-color-secondary-dark: #19191D99;
$background-color-accent-dark: #6f42c1;
$background-color-button-dark: #6f42c1;
$background-color-drop-down-dark: #50505080;
$background-color-input-dark: #FFFFFF33;
$background-color-input-focus-dark: #333333;
$background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
$background-color-selected-dark: #403E66;
$background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
// border colors
// ---------- light mode ----------
$border-color: #E0DFFF;
$border-color-accent: #6F42C1;
// ---------- dark mode ----------
$border-color-dark: #564B69;
$border-color-accent-dark: #6F42C1;
// highlight colors
// ---------- light mode ----------
$highlight-accent-color: #E0DFFF;
$highlight-secondary-color: #6F42C1;
// ---------- dark mode ----------
$highlight-accent-color-dark: #403E6A;
$highlight-secondary-color-dark: #C4ABF1;
// colors
$color1: #A392CD;
$color2: #7b4cd3;
$color3: #B186FF;
$color4: #8752E8;
$color5: #C7A8FF;
// old variables
$accent-color: #6f42c1; $accent-color: #6f42c1;
$accent-color-dark: #c4abf1; $accent-color-dark: #c4abf1;
$highlight-accent-color: #e0dfff; $highlight-accent-color: #e0dfff;

8
app/src/styles/base/global.scss
View File

@ -1,3 +1,5 @@
section{ section, .section{
padding: 12px;
} outline: 1px solid var(--border-color);
border-radius: 16px;
}