PEER-232: Add styles for match form

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/src/routes/match/main.tsx

@@ -2,22 +2,20 @@ import { observer } from 'mobx-react';
 import { Suspense } from 'react';
 import { Await, useLoaderData } from 'react-router-dom';
 
+import { ScrollArea } from '@/components/ui/scroll-area';
+
 import { MatchForm } from './match-form';
 
 export const Match = observer(() => {
   const { topics } = useLoaderData() as { topics: Promise<Array<string>> };
 
   return (
-    <div className='m-auto flex grow items-center justify-center'>
+    <ScrollArea className='flex size-full py-8'>
       <Suspense fallback={<div>Loading topics...</div>}>
         <Await resolve={topics}>
-          {(resolvedTopics) => (
-            <div className='flex size-full items-center justify-center'>
-              <MatchForm topics={resolvedTopics.topics} />
-            </div>
-          )}
+          {(resolvedTopics) => <MatchForm topics={resolvedTopics.topics} />}
         </Await>
       </Suspense>
-    </div>
+    </ScrollArea>
   );
 });

frontend/src/routes/match/match-form.tsx

@@ -40,11 +40,11 @@ export const MatchForm = ({ topics }: MatchFormProps) => {
   }, [socketPort]);
 
   return (
-    <div className='flex h-full items-center justify-center'>
+    <div className='flex size-full items-center justify-center'>
       <Card
         className={cn(
           'text-card-foreground bg-primary-foreground rounded-xl border border-border shadow',
-          'flex w-full max-w-[400px] md:size-full md:max-h-[600px]',
+          'flex max-w-[400px] size-full md:max-h-[600px]',
           'flex-col items-center justify-center'
         )}
       >

frontend/src/routes/match/waiting-room/main.tsx

@@ -24,7 +24,7 @@ export const WaitingRoomModal: FC<IMatchingModalProps> = ({
 }) => {
   return (
     <Dialog modal={true} open={isModalOpen}>
-      <DialogContent className='max-h-[500px] [&>button]:hidden'>
+      <DialogContent className='border-border max-h-[500px] [&>button]:hidden'>
         <DialogHeader>
           <VisuallyHidden>
             <DialogTitle>Waiting Room</DialogTitle>

frontend/src/routes/match/waiting-room/waiting.tsx

@@ -17,19 +17,22 @@ type IWaitingRoomProps = {
 
 type IWaitingRoomUIState = {
   connected: boolean;
-  cancel: boolean;
+  isCancelling: boolean;
+  canCancel: boolean;
   uiState: (typeof UI_STATUS)[keyof typeof UI_STATUS];
 };
 
 export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) => {
   const navigate = useNavigate();
   const { values } = useMatchRequest();
 
-  const [{ connected, cancel, uiState }, setUIState] = useState<IWaitingRoomUIState>({
-    connected: false,
-    cancel: false,
-    uiState: UI_STATUS.WAITING_STATUS,
-  });
+  const [{ connected, isCancelling, canCancel, uiState }, setUIState] =
+    useState<IWaitingRoomUIState>({
+      connected: false,
+      isCancelling: false,
+      canCancel: false,
+      uiState: UI_STATUS.WAITING_STATUS,
+    });
 
   const countdownRef = useRef(31);
   const timerRef = useRef<number | null>(null);
@@ -45,11 +48,12 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
   };
 
   useEffect(() => {
-    if (cancel) {
+    if (isCancelling) {
       clearInterval(timerRef.current!);
       setUIState((state) => ({
         ...state,
-        cancel: true,
+        isCancelling: true,
+        canCancel: false,
       }));
     } else if (connected) {
       timerRef.current = window.setInterval(() => {
@@ -68,7 +72,7 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
     }
 
     return () => clearInterval(timerRef.current!);
-  }, [connected, cancel]);
+  }, [connected, isCancelling]);
 
   useEffect(() => {
     if (!socketPort) {
@@ -101,10 +105,12 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
 
       socket.on(MATCHING_EVENT.MATCHING, () => {
         console.log('Matching in progress');
+        setUIState((prev) => ({ ...prev, canCancel: false }));
       });
 
       socket.on(MATCHING_EVENT.PENDING, () => {
         console.log('Waiting in pool');
+        setUIState((prev) => ({ ...prev, canCancel: true }));
       });
 
       socket.on(MATCHING_EVENT.SUCCESS, (data) => {
@@ -148,7 +154,7 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
     try {
       setUIState((prevState) => ({
         ...prevState,
-        cancel: true,
+        isCancelling: true,
         uiState: UI_STATUS.CANCELLING_STATUS,
       }));
       countdownRef.current = 0;
@@ -166,8 +172,13 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
         {uiState.icon}
         <p className='mt-4 whitespace-pre-wrap text-lg'>{uiState.description}</p>
       </div>
-      {countdownRef.current > 0 || cancel ? (
-        <Button className='mt-5' variant='destructive' onClick={handleCancel} disabled={cancel}>
+      {countdownRef.current > 0 || isCancelling ? (
+        <Button
+          className='mt-5'
+          variant='destructive'
+          onClick={handleCancel}
+          disabled={isCancelling || !canCancel}
+        >
           Cancel
         </Button>
       ) : (