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

Browse Source
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
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"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="45" cy="45" r="45" fill="#FCFDFD" />
<circle
cx="45.1957"
cy="45.1957"

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

@@ -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);
@@ -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") {
@@ -63,7 +67,6 @@ const UserAuth: React.FC = () => {
};
return (
<>
<div className="auth-container">
<div className="logo-icon">
<LogoIconLarge />
@@ -172,7 +175,6 @@ const UserAuth: React.FC = () => {
website.
</p>
</div>
</>
);
};

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

@@ -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;

6
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;
}