ui

bookpanda · Aug 16, 2024 · 57706b9 · 57706b9
1 parent efdcdf2
commit 57706b9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git 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
diff --git 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
@@ -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>