refactor(web): mobile responsive updates

brunocroh · Jun 13, 2024 · b2d1a31 · b2d1a31
1 parent d9af892
commit b2d1a31
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/apps/web/app/room/[slug]/feedback/page.tsx b/apps/web/app/room/[slug]/feedback/page.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
@@ -9,8 +8,8 @@ import { sendFeedback } from './actions'
 
 export default function Page(): JSX.Element {
   return (
-    <section className="container z-20 mt-24 flex h-full flex-col items-center">
-      <h2 className="text-slate-6 w-full text-center text-[3rem] leading-10">
+    <section className="container z-20 mt-8 flex h-full flex-col items-center px-4 md:mt-24 md:px-8">
+      <h2 className="text-slate-6 w-full text-center text-3xl leading-10 md:text-[3rem]">
         How was your experience practicing english?
       </h2>
       <div className="mb-8 mt-4 w-full text-center text-slate-400">
@@ -20,29 +19,38 @@ export default function Page(): JSX.Element {
         <CardContent className="w-full">
           <form className="flex w-full flex-col items-start gap-4 ">
             <div className="flex w-full flex-col items-baseline gap-2 sm:flex-row">
-              <Label className="w-16">Twitter</Label>
+              <Label className="w-28 text-xl">Twitter</Label>
               <Input
                 id="twitter"
                 name="twitter"
-                className="max-w-xs"
+                className="h-12 text-xl md:text-base"
                 placeholder="@brunocroh"
               />
             </div>
             <div className="flex w-full flex-col items-baseline gap-2 sm:flex-row">
-              <Label className="w-16">Feedback</Label>
+              <Label className="w-28 text-xl">Feedback</Label>
               <Textarea
                 id="feedback"
                 name="feedback"
                 placeholder="Write here your feedback."
+                className="text-xl md:text-base"
               />
             </div>
-            <div className="flex flex-col gap-4 self-end sm:flex-row">
-              <Link href="/room/queue">
-                <Button variant="outline">
+            <div className="mt-4 flex w-full flex-col gap-4 self-end sm:flex-row md:w-2/3">
+              <Link href="/room/queue" className="w-full md:w-2/3">
+                <Button
+                  variant="secondary"
+                  className="h-12 w-full md:text-base"
+                >
                   Not now, go back to practicing
                 </Button>
               </Link>
-              <Button formAction={sendFeedback}>Send</Button>
+              <Button
+                formAction={sendFeedback}
+                className="h-12 w-full text-xl md:w-1/3 md:text-base"
+              >
+                Send
+              </Button>
             </div>
           </form>
         </CardContent>