1 files changed, 35 insertions, 18 deletions

diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index 1858c48..ba85aeb 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 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 { 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 = () => {
@@ -32,16 +32,16 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
         <>
           {profile.profile ? (
             <>
-              <Link to="/profile" tabIndex={-1} className="login">
-                <button className="sidebar-button">
+              <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
-                    className="avatar-img"
+                    className="rounded-[50px]"
                     src={profile.avatar_link}
                     alt=""
                   />
-                  <span>{profile.user_name}</span>
+                  <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>
-                <button className="logout-button" onClick={_logout}>
+                <button className="relative left-[210px] w-[50px] !pl-[10px] !bg-transparent" onClick={_logout}>
                   <img src={ExitIcon} alt="" />
                   <span />
                 </button>
@@ -49,16 +49,16 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
             </>
           ) : (
             <>
-              <Link to="/" tabIndex={-1} className="login">
-                <button className="sidebar-button">
+              <Link to="/" 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
-                    className="avatar-img"
+                    className="rounded-[50px]"
                     src={profile.avatar_link}
                     alt=""
                   />
-                  <span>Loading Profile...</span>
+                  <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>
                 </button>
-                <button disabled className="logout-button" onClick={_logout}>
+                <button disabled className="relative left-[210px] w-[50px] !pl-[10px] !bg-transparent hidden" onClick={_logout}>
                   <img src={ExitIcon} alt="" />
                   <span />
                 </button>
@@ -67,11 +67,28 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
           )}
         </>
       ) : (
-        <Link to="/api/v1/login" tabIndex={-1} className="login">
-          <button className="sidebar-button" onClick={_login}>
-            <img className="avatar-img" src={UserIcon} alt="" />
-            <span>
-              <img src={LoginIcon} alt="Sign in through Steam" />
+        <Link to="/api/v1/login" tabIndex={-1}>
+          <button
+            className={`${
+              isOpen
+                ? "grid grid-cols-[50px_auto] place-items-start pl-[11px]"
+                : "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>