prettier login

lib/pages/login_page.dart

@@ -7,39 +7,50 @@ class LoginPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final width = MediaQuery.of(context).size.width;
+    double width = MediaQuery.of(context).size.width / 2;
+    width = width < 400 ? 400 : width;
     TextEditingController username = TextEditingController();
     return Scaffold(
       body: Center(
+        child: Card(
+          child: Padding(
+            padding: const EdgeInsets.all(15.0),
             child: SizedBox(
-          width: width / 2,
+              width: width,
               child: Column(
+                mainAxisSize: MainAxisSize.min,
                 children: [
-              const Text('Welcome!',
+                  Text(
-                  style: TextStyle(
+                    'Welcome!',
-                    fontSize: 35,
+                    style: Theme.of(context)
-                    fontWeight: FontWeight.bold,
+                        .textTheme
-                    color: Colors.white,
+                        .displayMedium!
-                  )),
+                        .copyWith(fontWeight: FontWeight.bold),
-              const Padding(padding: EdgeInsets.symmetric(vertical: 20)),
+                  ),
+                  const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
+                  Text('please enter your first name to get started',
+                      style: Theme.of(context).textTheme.bodyLarge),
+                  const Padding(padding: EdgeInsets.symmetric(vertical: 15)),
                   TextField(
                     controller: username,
                     onSubmitted: (value) => DbHelper.login(username.text),
                     textInputAction: TextInputAction.done,
                     decoration: const InputDecoration(
-                  label: Text('Username'),
+                      label: Text('Your first name'),
                       border: OutlineInputBorder(),
                     ),
                   ),
-              const Padding(padding: EdgeInsets.symmetric(vertical: 20)),
+                  const Padding(padding: EdgeInsets.symmetric(vertical: 15)),
-              ElevatedButton(
+                  FloatingActionButton.extended(
                     onPressed: () => DbHelper.login(username.text),
-                child: const Text('Login'),
+                    label: const Text('READY'),
                   )
                 ],
               ),
             ),
           ),
+        ),
+      ),
     );
   }
 }