refactor: tabs component and page

components/lobby/FastJoinButton.tsx

@@ -74,7 +74,7 @@ const FastJoinButton: FC = () => {
 
         <div className="relative inline-flex">
           <select
-            className="appearance-none bg-white border border-gray-300 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
+            className="appearance-none text-primary-800 bg-white border border-gray-300 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
             value={selectedOption?.id}
             onChange={handleSelectChange}
           >

components/rooms/RoomBreadcrumb.tsx

@@ -13,7 +13,7 @@ function RoomBreadcrumb({ roomInfo }: RoomBreadcrumbType) {
 
   const combinedText = roomInfo.name + "-" + maxPlayerText + "-" + statusText;
   return (
-    <Breadcrumb className="text-white">
+    <Breadcrumb className="text-primary-100">
       <Breadcrumb.Item text={isPublicText} href="/rooms" />
       <Breadcrumb.Item text={combinedText} href="" />
     </Breadcrumb>

components/rooms/RoomButtonGroup.tsx

@@ -1,4 +1,4 @@
-import Button from "@/components/shared/Button";
+import Button from "@/components/shared/Button/v2";
 
 type RoomButtonGroupProps = {
   isHost: boolean;
@@ -19,43 +19,21 @@ function RoomButtonGroup(props: RoomButtonGroupProps) {
     isReady,
   } = props;
   return (
-    <div className="flex items-center">
-      <div className="flex flex-col gap-[18px] font-normal text-sm leading-[22px] ml-[40px] mr-[52px]">
-        {isHost || (
-            <Button
-            variant={isReady ? "danger" : "primary"}
-            className="rounded-[21px] w-[165px] h-10 flex justify-center"
-            onClick={onToggleReady}
-          >
-            {isReady ? "取消準備" : "準備"}
-          </Button>
-        )}
-        <Button
-          variant="dark"
-          className="rounded-[21px] w-[165px] h-10 flex justify-center"
-          onClick={onClickLeave}
-        >
-          退出房間
-        </Button>
-        {isHost && (
-          <Button
-            variant="dark"
-            className="rounded-[21px] w-[165px] h-10 flex justify-center"
-            onClick={onClickClose}
-          >
-            關閉房間
-          </Button>
-        )}
-      </div>
-
-      {isHost && (
-        <Button
-          variant="secondary"
-          className="min-w-[152px] w-[166px] h-[132px] rounded-[30px] text-white text-2xl leading-9 flex justify-center"
-          onClick={onClickStart}
-        >
+    <div className="flex items-center gap-4 m-4">
+      <Button
+        variant="secondary"
+        onClick={isHost ? onClickClose : onClickLeave}
+      >
+        離開房間
+      </Button>
+      {isHost ? (
+        <Button variant="primary" onClick={onClickStart}>
           開始遊戲
         </Button>
+      ) : (
+        <Button variant="secondary" onClick={onToggleReady}>
+          {isReady ? "取消準備" : "準備"}
+        </Button>
       )}
     </div>
   );

components/rooms/RoomUserCardList/RoomUserCardList.tsx

@@ -46,7 +46,7 @@ function RoomUserCardList({
     return [...userCards, ...emptyCards];
   }
   return (
-    <div className="pt-4 grid grid-cols-5 gap-x-5 gap-y-[60px]">
+    <div className="pt-4 grid grid-cols-5 gap-5">
       {renderUserCards(roomInfo.players)}
     </div>
   );

components/rooms/RoomUserCardList/UserCard/UserCard.tsx

@@ -45,26 +45,24 @@ function UserCard(props: any) {
   const nameText = getNameText();
 
   return (
-    <div className="max-w-[200px] aspect-square w-full rounded-[10px] ">
-      <div
-        className={cn(
-          "relative w-full h-[170px] rounded-[10px] border ",
-          isHost && hostClass,
-          disabled && disabledClass
-        )}
-      >
-        {onKickUser && (
-          <div
-            onClick={() => onKickUser({ id, nickname })}
-            data-testid="kick-user-svg"
-            className={"absolute top-[5px] right-[6px] cursor-pointer"}
-          >
-            <Icon name="kickUser" />
-          </div>
-        )}
+    <div
+      className={cn(
+        "relative h-28 rounded-[10px] border ",
+        isHost && hostClass,
+        disabled && disabledClass
+      )}
+    >
+      {onKickUser && (
+        <div
+          onClick={() => onKickUser({ id, nickname })}
+          data-testid="kick-user-svg"
+          className={"absolute top-[5px] right-[6px] cursor-pointer"}
+        >
+          <Icon name="kickUser" />
+        </div>
+      )}
 
-        {isReady && readyContent}
-      </div>
+      {isReady && readyContent}
       <span className="mt-[10px] block font-bold text-base text-white">
         {nameText}
       </span>

components/shared/Button/v2/Button.tsx

@@ -17,7 +17,7 @@ export enum ButtonSize {
 }
 
 const commonDisabledClasses =
-  "disabled:cursor-not-allowed disabled:bg-none disabled:bg-gray-800 disabled:border-gray-500 disabled:text-gray-200 disabled:stroke-gray-200 disabled:fill-gray-200";
+  "disabled:cursor-not-allowed disabled:bg-none disabled:bg-grey-800 disabled:border-grey-500 disabled:text-grey-200 disabled:stroke-grey-200 disabled:fill-grey-200";
 
 const buttonTypeClasses: Record<ButtonVariant, string> = {
   primary:
@@ -51,7 +51,7 @@ type InnerButtonComponent = (
 const iconTypeClasses: Record<ButtonVariant, string> = {
   primary:
     "stroke-primary-700 hover:stroke-primary-50 active:stroke-primary-50",
-  secondary: "stroke-primary-200 disabled:stroke-gray-500",
+  secondary: "stroke-primary-200 disabled:stroke-grey-500",
   highlight: "stroke-primary-50",
 };
 

components/shared/Tabs/Tab.test.tsx

@@ -11,31 +11,27 @@ describe("Tab", () => {
     expect(screen.getByRole("tab")).toHaveTextContent(label);
   });
 
-  it("should renders tab button with the correct className", () => {
-    const className = "test-class test-class2";
-    render(<Tab label="test" tabKey={"test"} className={className} />);
-
-    expect(screen.getByRole("tab")).toHaveClass(className);
-  });
-
   it("should call the onClick handler when the tab is clicked", () => {
     const handleClickTab = jest.fn();
-    render(<Tab label="test" tabKey={"test"} onTabClick={handleClickTab} />);
+    render(<Tab label="test" tabKey={"test"} onClick={handleClickTab} />);
 
     fireEvent.click(screen.getByRole("tab"));
 
     expect(handleClickTab).toHaveBeenCalled();
   });
 
   it('should apply the active class when the "active" prop is true', () => {
-    render(<Tab label="test" tabKey={"test"} active />);
+    render(<Tab label="test" tabKey={"test"} isActive />);
 
-    expect(screen.getByRole("tab")).toHaveClass("is-active");
+    expect(screen.getByRole("tab")).toHaveAttribute("aria-selected", "true");
   });
 
   it('should not apply the active class when the "active" prop is falsy', () => {
     render(<Tab label="test" tabKey={"test"} />);
 
-    expect(screen.getByRole("tab")).not.toHaveClass("is-active");
+    expect(screen.getByRole("tab")).not.toHaveAttribute(
+      "aria-selected",
+      "true"
+    );
   });
 });