Merge pull request #249 from Qsilver97/staging

Staging
Qsilver97 · Oct 18, 2024 · 2b9a0c1 · 2b9a0c1
2 parents 413298e + e10c689
commit 2b9a0c1
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 49 deletions.
diff --git a/app/client/src/components/commons/Button.tsx b/app/client/src/components/commons/Button.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 interface ButtonProps {
-    variant: "primary" | "secondary";
+    variant: "primary" | "secondary" | "outline";
     size?: "base" | "wide" | "full";
     font?: "base" | "regular";
     className?: string;
@@ -37,6 +37,7 @@ const Button: React.FC<ButtonProps> = ({
     const variantStyles = {
         primary: `bg-blue-500 ${fontStyles[font].color.primary} focus:ring-blue-500 hover:bg-blue-600`,
         secondary: `bg-gray-600 ${fontStyles[font].color.secondary} focus:ring-gray-500 hover:bg-gray-700`,
+        outline: "border border-input bg-gray-600 hover:bg-blue-600 ",
     };
 
     const sizesStyles = {

diff --git a/app/client/src/pages/Login/Login.tsx b/app/client/src/pages/Login/Login.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import Button from "../../components/commons/Button";
 import Input from "../../components/commons/Input";
 import LoginContainer from "./LoginContainer";
@@ -8,7 +8,7 @@ import { Text } from "../../components/commons";
 
 const Login = () => {
     const { login, socket, setRecoverStatus } = useAuth();
-    const navigate = useNavigate();
+
 
     const [isPasswordValid, setIsPasswordValid] = useState(true);
     const [password, setPassword] = useState<string>("");
@@ -44,61 +44,73 @@ const Login = () => {
             />
 
             <div className="w-2/5 flex flex-col gap-[60px]">
-                <img
-                    src="/assets/images/logo.svg"
-                    alt="Logo"
-                    className="h-[50px] self-start"
-                />
+                <img src="/assets/images/logo.svg" alt="Logo" className="h-[50px] " />
 
-                <div className="flex flex-col gap-10">
-                    <div>
+                <div className="flex flex-col gap-4">
+                    <div className="flex flex-col items-center">
+                        <h2 className="text-3xl font-semibold tracking-tight">Login</h2>
+                        <p className="text-sm text-zinc-400">
+                        Enter password to login to an existing wallet.
+                        </p>
                         <Input
-                            label="Password"
-                            inputId="password"
-                            type="password"
-                            onChange={handleChangePassword}
+                        //   label="Password"
+                        label=""
+                        inputId="password"
+                        type="password"
+                        onChange={handleChangePassword}
                         />
-                        {isPasswordValid && password != '' && (
-                            <Text
-                                size="sm"
-                                weight="semibold"
-                                className="text-moonstoneBlue mt-4"
-                            >
-                                Password does not exist.
-                            </Text>
+                        {isPasswordValid && password != "" && (
+                        <Text
+                            size="sm"
+                            weight="semibold"
+                            className="text-moonstoneBlue mt-4"
+                        >
+                            Password does not exist.
+                        </Text>
                         )}
-                    </div>
-                    <div className="flex justify-center gap-8 lg:gap-20">
-                        <Link
-                            to={"/signup"}
-                            className="inline-block w-full lg:w-fit"
+
+                        <Link to={"/dashboard"} className="mt-4">
+                        <Button
+                            variant="primary"
+                            size="wide"
+                            onClick={handleLogin}
+                            disable={isPasswordValid || password == ""}
+                            className={
+                            isPasswordValid || password == "" ? "cursor-not-allowed" : ""
+                            }
                         >
-                            <Button variant="primary" size="wide">
-                                Create
+                            Login
+                        </Button>
+                        </Link>
+                    </div>
+                    <hr className="h-px my-12 bg-blue-200 border-0"></hr>
+                    <div className="flex flex-col items-center gap-4">
+                        <h2 className="text-3xl font-semibold tracking-tight">Register</h2>
+                        <p className="text-sm text-zinc-400">
+                        Create new wallet or import using seed.
+                        </p>
+                        <div className="flex justify-center items-center">
+                            <br></br>
+                            <Link to={"/signup"} className="inline-block w-full lg:w-fit">
+                            <Button variant="outline" size="full">
+                            Create new wallet
                             </Button>
                         </Link>
-                        <Link
-                            to={"/dashboard"}
-                            className="inline-block w-full lg:w-fit"
-                        >
+                        <span className="mx-4">or</span>
+
+                        <Link to={"/signup"} className="inline-block w-full lg:w-fit">
                             <Button
-                                variant="primary"
-                                size="wide"
-                                onClick={handleLogin}
-                                disable={isPasswordValid || password == ''}
-                                className={isPasswordValid || password == '' ? 'cursor-not-allowed' : ''}
+                            variant="outline"
+                            size="full"
+                            onClick={() => {
+                                setRecoverStatus(true);
+                            }}
                             >
-                                Login
+                            Restore your wallet from your seed
                             </Button>
                         </Link>
-                    </div>
-
-                    <a
-                        onClick={() => { setRecoverStatus(true); navigate('/signup') }}
-                        className="mx-auto text-gray font-semibold text-sm cursor-pointer"
-                    >
-                        Restore your wallet from your seed
-                    </a>
+                        </div>
+                    </div>   
                 </div>
             </div>
         </LoginContainer>

diff --git a/app/client/src/utils/constants.ts b/app/client/src/utils/constants.ts
@@ -203,7 +203,7 @@ const marketOptions = [
 
 const MODES: ModeProps[] = [
     {
-        wsUrl: 'wss://websocket.qsilver.org',
+        wsUrl: 'wss://websocket.qsilver.org:5555',
         type: 'mainnet',
     },
     {
@@ -216,4 +216,4 @@ const currencies = [{ label: "US Dollar", value: "USDT" }]
 
 const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000";
 
-export { sideBarItems, summaryItems, assetsItems, summaryAccountItems, marketOptions, SERVER_URL, MODES, settingsSidebarItems, currencies, autoLockTimes, EXPECTEDTICKGAP };
+export { sideBarItems, summaryItems, assetsItems, summaryAccountItems, marketOptions, SERVER_URL, MODES, settingsSidebarItems, currencies, autoLockTimes, EXPECTEDTICKGAP };