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

app/src/components/icons/Logo.tsx

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

app/src/pages/UserAuth.tsx

@@ -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>
-    </>
   );
 };
 

app/src/styles/abstracts/variables.scss

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

app/src/styles/base/global.scss

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