refactor(web): improve mobile and desktop responsiveness to queue and…

… chat room pages
brunocroh · Jun 13, 2024 · d9af892 · d9af892
1 parent b6de5e7
commit d9af892
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 22 deletions.
diff --git a/apps/web/app/room/[slug]/page.tsx b/apps/web/app/room/[slug]/page.tsx
@@ -213,7 +213,7 @@ export default function Page(): JSX.Element {
   }, [])
 
   return (
-    <section className="container flex h-full flex-col content-center items-center justify-center">
+    <section className="container flex flex-col content-center items-center justify-center px-4 md:px-8">
       <Countdown onFinishTime={handleHangUp} startTime={600_000} />
       <div className="flex w-full flex-col items-center">
         {error && (
@@ -233,8 +233,8 @@ export default function Page(): JSX.Element {
             !connected && 'invisible'
           )}
         >
-          <div className="flex flex-row gap-2 md:flex-col-reverse">
-            <Card className="border-slate-5 bg-slate-6 border border-b-0 md:self-start">
+          <div className="flex flex-col-reverse justify-center gap-2">
+            <Card className="border-slate-5 bg-slate-6 border border-b-0 md:size-4/6 md:self-center">
               <CardContent className="p-3">
                 <VideoPlayer
                   ref={videoRef}

diff --git a/apps/web/app/room/queue/page.tsx b/apps/web/app/room/queue/page.tsx
@@ -99,16 +99,18 @@ export default function Page(): JSX.Element {
 
   return (
     <main className="flex h-auto flex-col">
-      <section className="align-center container mb-5 flex h-full place-content-center content-center justify-center">
-        <div>
-          <h1 className="text-[2em]">
+      <section className="align-center container mb-5 flex h-full place-content-center content-center justify-center px-4 md:px-8">
+        <div className="flex w-full flex-col items-center">
+          <h1 className="mt-6 text-center text-xl sm:text-[2em] md:w-2/3">
             Before you start practicing, make sure to check your microphone and
             camera first.
           </h1>
-          <Badge>Users Online: {usersOnline}</Badge>
-          <div className="mt-8 flex w-full flex-col items-center sm:p-5">
-            <Card className="border-slate-5 bg-slate-6 w-full border border-b-0 pt-6 sm:w-3/4">
-              <CardContent>
+          <Badge className="md:text-md mt-4 text-sm">
+            Users Online: {usersOnline}
+          </Badge>
+          <div className="mt-4 flex w-full flex-col items-center md:p-5">
+            <Card className="border-slate-5 bg-slate-6 w-full border border-b-0 md:w-3/5">
+              <CardContent className="p-4 md:p-6">
                 {accessGranted ? (
                   <>
                     <VideoPlayer
@@ -133,8 +135,8 @@ export default function Page(): JSX.Element {
                       videoOff={videoOff}
                       onVideoOff={toggleVideo}
                     />
-                    <div className="mt-6 flex w-full items-center justify-between">
-                      <h2 className="mt-2 text-sm text-slate-500 sm:mt-0 sm:text-base">
+                    <div className="mt-2 flex w-full items-center justify-between">
+                      <h2 className="text-md md:text-md mt-2 text-slate-500 sm:mt-0">
                         {
                           "Each conversation room lasts for 10 minutes. When there are less than 2 minutes remaining, a timer will appear above the users' videos to indicate the time left."
                         }
@@ -144,11 +146,11 @@ export default function Page(): JSX.Element {
                       <h2 className="text-sm sm:text-base">
                         {inQueue
                           ? 'Finding a practice buddy'
-                          : "Hit the 'Ready' button when you feel ready to start practicing with someone."}
+                          : "Hit the 'I'm Ready' button when you feel ready to start practicing with someone."}
                       </h2>
                       <Button
                         onClick={onConnect}
-                        className="z-10 w-full rounded-xl sm:w-auto"
+                        className="z-10 h-12 w-full rounded-xl text-lg font-semibold sm:w-auto"
                       >
                         {inQueue ? 'Cancel' : "I'm Ready"}
                       </Button>
@@ -160,7 +162,9 @@ export default function Page(): JSX.Element {
                       We need access to your microphone and camera. Please
                       enable permissions to continue.
                     </h2>
-                    <Button onClick={handleRefresh}>Refresh</Button>
+                    <Button className="h-12" onClick={handleRefresh}>
+                      Refresh
+                    </Button>
                   </div>
                 )}
               </CardContent>

diff --git a/apps/web/components/video-player.tsx b/apps/web/components/video-player.tsx
@@ -1,11 +1,6 @@
 'use client'
 
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from 'react'
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import clsx from 'clsx'
 import {
   Headphones,
@@ -143,7 +138,7 @@ export const VideoPlayer = forwardRef<
             )}
           </div>
           {!remote && (
-            <div className="flex justify-center">
+            <div className="mt-5 flex justify-center p-4 sm:p-0">
               <div className="flex w-full flex-col gap-2 sm:flex-row md:w-fit md:gap-6">
                 <Select
                   onValueChange={setActiveAudioDevice}