feat: Update logo component and refactor UserAuth for improved readability and consistency
This commit is contained in:
parent
be4d8d458e
commit
e64840a4e7
|
|
@ -124,7 +124,6 @@ export function LogoIconLarge() {
|
|||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="45" cy="45" r="45" fill="#FCFDFD" />
|
||||
<circle
|
||||
cx="45.1957"
|
||||
cy="45.1957"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@ import React, { useState, FormEvent } from "react";
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import { LogoIconLarge } from "../components/icons/Logo";
|
||||
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 { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
|
||||
|
||||
|
|
@ -21,7 +25,7 @@ const UserAuth: React.FC = () => {
|
|||
const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
const organization = (email.split("@")[1]).split(".")[0];
|
||||
const organization = email.split("@")[1].split(".")[0];
|
||||
try {
|
||||
const res = await signInApi(email, password, organization);
|
||||
|
||||
|
|
@ -39,7 +43,7 @@ const UserAuth: React.FC = () => {
|
|||
} else if (res.message === "User Not Found!!! Kindly signup...") {
|
||||
setError("Account not found");
|
||||
}
|
||||
} catch (error) { }
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const handleRegister = async (e: FormEvent) => {
|
||||
|
|
@ -47,7 +51,7 @@ const UserAuth: React.FC = () => {
|
|||
if (email && password && userName) {
|
||||
setError("");
|
||||
try {
|
||||
const organization = (email.split("@")[1]).split(".")[0];
|
||||
const organization = email.split("@")[1].split(".")[0];
|
||||
const res = await signUpApi(userName, email, password, organization);
|
||||
|
||||
if (res.message === "New User created") {
|
||||
|
|
@ -56,14 +60,13 @@ const UserAuth: React.FC = () => {
|
|||
if (res.message === "User already exists") {
|
||||
setError("User already exists");
|
||||
}
|
||||
} catch (error) { }
|
||||
} catch (error) {}
|
||||
} else {
|
||||
setError("Please fill all the fields!");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="auth-container">
|
||||
<div className="logo-icon">
|
||||
<LogoIconLarge />
|
||||
|
|
@ -172,7 +175,6 @@ const UserAuth: React.FC = () => {
|
|||
website.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,83 +6,69 @@
|
|||
|
||||
// text colors
|
||||
// ---------- 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-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: #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-dark: #c4abf1;
|
||||
$highlight-accent-color: #e0dfff;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
section{
|
||||
|
||||
section, .section{
|
||||
padding: 12px;
|
||||
outline: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
}
|
||||
Loading…
Reference in New Issue