1 files changed, 73 insertions, 55 deletions
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index f1628b2..ba85aeb 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -1,19 +1,18 @@
-import React from 'react';
+import React from "react";
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from "react-router-dom";
-import { ExitIcon, UserIcon, LoginIcon } from '@images/Images';
+import { ExitIcon, UserIcon, LoginIcon } from "../images/Images";
-import { UserProfile } from '@customTypes/Profile';
+import { UserProfile } from "@customTypes/Profile";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-import "@css/Login.css";
 interface LoginProps {
  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
  profile?: UserProfile;
  setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
-};
+  isOpen: boolean; 
+}
-const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
+const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile, isOpen }) => {
  const navigate = useNavigate();
  const _login = () => {
@@ -29,52 +28,71 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
  return (
    <>
-      {profile
+      {profile ? (
-        ?
+        <>
-        (
+          {profile.profile ? (
-          <>
+            <>
-            {profile.profile ?
+              <Link to="/profile" tabIndex={-1} className="grid grid-cols-[50px_auto_200px]">
-              (
+                <button className="grid grid-cols-[50px_auto] place-items-start text-left bg-inherit cursor-pointer border-none w-[310px] h-10 rounded-[20px] py-[0.3em] px-0 pl-[11px] transition-all duration-300">
-                <>
+                  <img
-                  <Link to="/profile" tabIndex={-1} className='login'>
+                    className="rounded-[50px]"
-                    <button className='sidebar-button'>
+                    src={profile.avatar_link}
-                      <img className="avatar-img" src={profile.avatar_link} alt="" />
+                    alt=""
-                      <span>{profile.user_name}</span>
+                  />
-                    </button>
+                  <span className="font-[--font-barlow-semicondensed-regular] text-lg text-foreground h-8 leading-7 transition-opacity duration-100 max-w-[22ch] overflow-hidden">{profile.user_name}</span>
-                    <button className='logout-button' onClick={_logout}>
+                </button>
-                      <img src={ExitIcon} alt="" /><span />
+                <button className="relative left-[210px] w-[50px] !pl-[10px] !bg-transparent" onClick={_logout}>
-                    </button>
+                  <img src={ExitIcon} alt="" />
-                  </Link>
+                  <span />
-                </>
+                </button>
-              )
+              </Link>
-              :
+            </>
-              (
+          ) : (
-                <>
+            <>
-                  <Link to="/" tabIndex={-1} className='login'>
+              <Link to="/" tabIndex={-1} className="grid grid-cols-[50px_auto_200px]">
-                    <button className='sidebar-button'>
+                <button className="grid grid-cols-[50px_auto] place-items-start text-left bg-inherit cursor-pointer border-none w-[310px] h-10 rounded-[20px] py-[0.3em] px-0 pl-[11px] transition-all duration-300">
-                      <img className="avatar-img" src={profile.avatar_link} alt="" />
+                  <img
-                      <span>Loading Profile...</span>
+                    className="rounded-[50px]"
-                    </button>
+                    src={profile.avatar_link}
-                    <button disabled className='logout-button' onClick={_logout}>
+                    alt=""
-                      <img src={ExitIcon} alt="" /><span />
+                  />
-                    </button>
+                  <span className="font-[--font-barlow-semicondensed-regular] text-lg text-foreground h-8 leading-7 transition-opacity duration-100 max-w-[22ch] overflow-hidden">Loading Profile...</span>
-                  </Link>
+                </button>
-                </>
+                <button disabled className="relative left-[210px] w-[50px] !pl-[10px] !bg-transparent hidden" onClick={_logout}>
-              )
+                  <img src={ExitIcon} alt="" />
-            }
+                  <span />
-          </>
+                </button>
-        )
+              </Link>
-        :
+            </>
-        (
+          )}
-          <Link to="/api/v1/login" tabIndex={-1} className='login' >
+        </>
-            <button className='sidebar-button' onClick={_login}>
+      ) : (
-              <img className="avatar-img" src={UserIcon} alt="" />
+        <Link to="/api/v1/login" tabIndex={-1}>
-              <span>
+          <button
-                <img src={LoginIcon} alt="Sign in through Steam" />
+            className={`${
-              </span>
+              isOpen
-            </button>
+                ? "grid grid-cols-[50px_auto] place-items-start pl-[11px]"
-          </Link>
+                : "flex items-center justify-center"
-        )}
+            } text-left bg-inherit cursor-pointer border-none w-[310px] h-16 rounded-[20px] py-[0.3em] px-0 transition-all duration-300 ${isOpen ? "text-white" : "text-gray-400"}`}
+            onClick={_login}
+          >
+            <span className={`font-[--font-barlow-semicondensed-regular] text-lg h-12 leading-7 transition-opacity duration-100 ${isOpen ? " overflow-hidden" : ""}`}>
+              {isOpen ? (
+                <div className="bg-neutral-800 p-2 rounded-lg w-64 flex flex-row items-center justifyt-start gap-2 font-semibold">
+                  <LoginIcon />
+                  <span>
+                    Login with Steam
+                  </span>
+                </div>
+              ) : (
+                <div className="bg-neutral-800 p-2 rounded-lg w-">
+                  <LoginIcon />
+                </div>
+              )}
+            </span>
+          </button>
+        </Link>
+      )}
    </>
  );
 };

diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx index f1628b2..ba85aeb 100644 --- a/frontend/src/components/Login.tsx +++ b/frontend/src/components/Login.tsx
@@ -1,19 +1,18 @@
1	import React from 'react';	1	import React from "react";
2	import { Link, useNavigate } from 'react-router-dom';	2	import { Link, useNavigate } from "react-router-dom";
3		3
4	import { ExitIcon, UserIcon, LoginIcon } from '@images/Images';	4	import { ExitIcon, UserIcon, LoginIcon } from "../images/Images";
5	import { UserProfile } from '@customTypes/Profile';	5	import { UserProfile } from "@customTypes/Profile";
6	import { API } from '@api/Api';	6	import { API } from "@api/Api";
7	import "@css/Login.css";
8		7
9	interface LoginProps {	8	interface LoginProps {
10	setToken: React.Dispatch<React.SetStateAction<string \| undefined>>;	9	setToken: React.Dispatch<React.SetStateAction<string \| undefined>>;
11	profile?: UserProfile;	10	profile?: UserProfile;
12	setProfile: React.Dispatch<React.SetStateAction<UserProfile \| undefined>>;	11	setProfile: React.Dispatch<React.SetStateAction<UserProfile \| undefined>>;
13	};	12	isOpen: boolean;
14		13	}
15	const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
16		14
		15	const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile, isOpen }) => {
17	const navigate = useNavigate();	16	const navigate = useNavigate();
18		17
19	const _login = () => {	18	const _login = () => {
@@ -29,52 +28,71 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
29		28
30	return (	29	return (
31	<>	30	<>
32	{profile	31	{profile ? (
33	?	32	<>
34	(	33	{profile.profile ? (
35	<>	34	<>
36	{profile.profile ?	35	<Link to="/profile" tabIndex={-1} className="grid grid-cols-[50px_auto_200px]">
37	(	36	<button className="grid grid-cols-[50px_auto] place-items-start text-left bg-inherit cursor-pointer border-none w-[310px] h-10 rounded-[20px] py-[0.3em] px-0 pl-[11px] transition-all duration-300">
38	<>	37	<img
39	<Link to="/profile" tabIndex={-1} className='login'>	38	className="rounded-[50px]"
40	<button className='sidebar-button'>	39	src={profile.avatar_link}
41	<img className="avatar-img" src={profile.avatar_link} alt="" />	40	alt=""
42	<span>{profile.user_name}</span>	41	/>
43	</button>	42	<span className="font-[--font-barlow-semicondensed-regular] text-lg text-foreground h-8 leading-7 transition-opacity duration-100 max-w-[22ch] overflow-hidden">{profile.user_name}</span>
44	<button className='logout-button' onClick={_logout}>	43	</button>
45	<img src={ExitIcon} alt="" /><span />	44	<button className="relative left-[210px] w-[50px] !pl-[10px] !bg-transparent" onClick={_logout}>
46	</button>	45	<img src={ExitIcon} alt="" />
47	</Link>	46	<span />
48	</>	47	</button>
49	)	48	</Link>
50	:	49	</>
51	(	50	) : (
52	<>	51	<>
53	<Link to="/" tabIndex={-1} className='login'>	52	<Link to="/" tabIndex={-1} className="grid grid-cols-[50px_auto_200px]">
54	<button className='sidebar-button'>	53	<button className="grid grid-cols-[50px_auto] place-items-start text-left bg-inherit cursor-pointer border-none w-[310px] h-10 rounded-[20px] py-[0.3em] px-0 pl-[11px] transition-all duration-300">
55	<img className="avatar-img" src={profile.avatar_link} alt="" />	54	<img
56	<span>Loading Profile...</span>	55	className="rounded-[50px]"
57	</button>	56	src={profile.avatar_link}
58	<button disabled className='logout-button' onClick={_logout}>	57	alt=""
59	<img src={ExitIcon} alt="" /><span />	58	/>
60	</button>	59	<span className="font-[--font-barlow-semicondensed-regular] text-lg text-foreground h-8 leading-7 transition-opacity duration-100 max-w-[22ch] overflow-hidden">Loading Profile...</span>
61	</Link>	60	</button>
62	</>	61	<button disabled className="relative left-[210px] w-[50px] !pl-[10px] !bg-transparent hidden" onClick={_logout}>
63	)	62	<img src={ExitIcon} alt="" />
64	}	63	<span />
65	</>	64	</button>
66	)	65	</Link>
67	:	66	</>
68	(	67	)}
69	<Link to="/api/v1/login" tabIndex={-1} className='login' >	68	</>
70	<button className='sidebar-button' onClick={_login}>	69	) : (
71	<img className="avatar-img" src={UserIcon} alt="" />	70	<Link to="/api/v1/login" tabIndex={-1}>
72	<span>	71	<button
73	<img src={LoginIcon} alt="Sign in through Steam" />	72	className={`${
74	</span>	73	isOpen
75	</button>	74	? "grid grid-cols-[50px_auto] place-items-start pl-[11px]"
76	</Link>	75	: "flex items-center justify-center"
77	)}	76	} text-left bg-inherit cursor-pointer border-none w-[310px] h-16 rounded-[20px] py-[0.3em] px-0 transition-all duration-300 ${isOpen ? "text-white" : "text-gray-400"}`}
		77	onClick={_login}
		78	>
		79	<span className={`font-[--font-barlow-semicondensed-regular] text-lg h-12 leading-7 transition-opacity duration-100 ${isOpen ? " overflow-hidden" : ""}`}>
		80	{isOpen ? (
		81	<div className="bg-neutral-800 p-2 rounded-lg w-64 flex flex-row items-center justifyt-start gap-2 font-semibold">
		82	<LoginIcon />
		83	<span>
		84	Login with Steam
		85	</span>
		86	</div>
		87	) : (
		88	<div className="bg-neutral-800 p-2 rounded-lg w-">
		89	<LoginIcon />
		90	</div>
		91	)}
		92	</span>
		93	</button>
		94	</Link>
		95	)}
78	</>	96	</>
79	);	97	);
80	};	98	};