From 57706b9e532e32b1b88ecef447bc9380ab90892e Mon Sep 17 00:00:00 2001
From: Idhibhat Pankam <marginpankam@gmail.com>
Date: Fri, 16 Aug 2024 15:00:16 +0700
Subject: [PATCH] ui

---
 frontend/package.json              |  1 +
 frontend/pnpm-lock.yaml            |  9 +++++++++
 frontend/src/app/Home.tsx          | 10 +++++++---
 frontend/src/components/Button.tsx |  9 +++++++--
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 85faa11..5fae620 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.7.3",
+    "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 497a618..212dd76 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       axios:
         specifier: ^1.7.3
         version: 1.7.3
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -625,6 +628,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1883,6 +1890,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
diff --git a/frontend/src/app/Home.tsx b/frontend/src/app/Home.tsx
index 03301a8..526d489 100644
--- a/frontend/src/app/Home.tsx
+++ b/frontend/src/app/Home.tsx
@@ -45,9 +45,13 @@ function Home() {
           <h3 className="mt-4 text-2xl font-medium">Logged in as</h3>
           <p className="mt-1">{credentials.email}</p>
           <Button onClick={handleSignout}>Logout</Button>
-          <div className="flex w-[80%] space-x-4">
+          <div className="flex w-[80%] flex-col md:flex-row md:space-x-4">
             {SERVICES_URL.map((url, idx) => (
-              <Button key={url} onClick={() => window.open(url, "_blank")}>
+              <Button
+                className="w-full"
+                key={url}
+                onClick={() => window.open(url, "_blank")}
+              >
                 Service {idx + 1}
               </Button>
             ))}
@@ -64,7 +68,7 @@ function Home() {
 
   return (
     <div className="flex h-screen w-screen items-center justify-center bg-gray-300">
-      <div className="flex h-[45vh] w-[60vw] flex-col items-center justify-center rounded-xl bg-white px-8 py-[10vh] drop-shadow-xl md:w-[40vw] xl:w-[30vw] 2xl:w-[20vw]">
+      <div className="flex h-[60vh] w-[80vw] flex-col items-center justify-center rounded-xl bg-white px-8 py-[10vh] drop-shadow-xl md:h-[45vh] md:w-[40vw] xl:w-[30vw] 2xl:w-[20vw]">
         <h1 className="text-4xl font-bold">SSO Login</h1>
         {SSOLoginStatus()}
         {loading && <p className="mt-4 text-gray-500">Loading...</p>}
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index b4201df..96c7cb1 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -1,15 +1,20 @@
+import clsx from "clsx";
 import { FC, ReactNode } from "react";
 
 interface ButtonProps {
   children: ReactNode;
+  className?: string;
   onClick: () => void;
 }
 
-export const Button: FC<ButtonProps> = ({ children, onClick }) => {
+export const Button: FC<ButtonProps> = ({ children, className, onClick }) => {
   return (
     <button
       onClick={onClick}
-      className="mt-8 flex w-[80%] items-center justify-center rounded-lg border border-gray-300 py-2 text-lg text-gray-600 duration-300 ease-in-out hover:bg-slate-100"
+      className={clsx(
+        "mt-8 flex w-[80%] items-center justify-center rounded-lg border border-gray-300 py-2 text-lg text-gray-600 duration-300 ease-in-out hover:bg-slate-100",
+        className
+      )}
     >
       {children}
     </button>