Some updates to the frontent

lib/components/create_env_form.dart

@@ -1,4 +1,3 @@
-import 'dart:html';
 import 'dart:js' as js;
 import 'package:flutter/material.dart';
 import 'package:grpc/grpc_web.dart';
@@ -120,7 +119,7 @@ class _CreateEnvFormState extends State<CreateEnvForm> {
                 TextButton(
                   onPressed: () => js.context.callMethod(
                       'open', ['https://stackoverflow.com/questions/ask']),
-                  child: Text("Read more about environment types here"),
+                  child: const Text("Read more about environment types here"),
                 ),
                 DropdownButtonFormField(
                   decoration: const InputDecoration(

lib/components/environment_card.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:softplayer_web/api/grpc/environments.dart';
 import 'package:softplayer_web/helpers/providers/common.dart';
 
-class EnvirnomentCard extends StatelessWidget {
+class EnvirnomentCard extends StatefulWidget {
   final EnvironmentLocalData env;
 
   const EnvirnomentCard({
@@ -10,52 +10,82 @@ class EnvirnomentCard extends StatelessWidget {
     required this.env,
   });
 
+  @override
+  State<EnvirnomentCard> createState() => _EnvirnomentCardState();
+}
+
+class _EnvirnomentCardState extends State<EnvirnomentCard> {
+  late double elevation = 1.0;
+
   @override
   Widget build(BuildContext context) {
-    Provider provider = ProviderHelper().getProvider(env.provider);
+    Provider provider = ProviderHelper().getProvider(widget.env.provider);
 
     String serverType;
     String serverLocation;
     try {
-      serverType = ProviderHelper().getServerType(env.serverType);
-      serverLocation = provider.getServerLocation(env.serverLocation);
+      serverType = ProviderHelper().getServerType(widget.env.serverType);
+      serverLocation = provider.getServerLocation(widget.env.serverLocation);
     } catch (e) {
       rethrow;
     }
 
-    return Card(
-      child: SelectionArea(
-        child: Column(
-          children: [
-            Text(env.name),
-            const Divider(),
-            Table(
-              border: const TableBorder(
-                bottom: BorderSide.none,
-                left: BorderSide.none,
-                right: BorderSide.none,
-                top: BorderSide.none,
+    return Container(
+      margin: const EdgeInsets.all(8.0),
+      height: 10,
+      child: MouseRegion(
+        onExit: (event) {
+          setState(() {
+            elevation = 1.0;
+          });
+        },
+        onEnter: (event) {
+          setState(() {
+            elevation = 5.0;
+          });
+        },
+        child: Card(
+          elevation: elevation,
+          child: SelectionArea(
+            child: InkWell(
+              onTap: () => showBottomSheet(
+                context: context,
+                builder: (context) => Text(widget.env.uuid!),
               ),
-              children: [
-                TableRow(children: [
-                  Text("Description"),
-                  Text(env.description),
-                ]),
-                TableRow(children: [
-                  Text("Provider"),
-                  Text(provider.getProviderName()),
-                ]),
-                TableRow(children: [
-                  Text("Server Type"),
-                  Text(serverType),
-                ]),
-                TableRow(children: [
-                  Text("Location"),
-                  Text(serverLocation),
-                ]),
-              ],
-            )
-          ],
+              child: Column(
+                children: [
+                  Text(widget.env.name),
+                  const Divider(),
+                  Table(
+                    border: const TableBorder(
+                      bottom: BorderSide.none,
+                      left: BorderSide.none,
+                      right: BorderSide.none,
+                      top: BorderSide.none,
+                    ),
+                    children: [
+                      TableRow(children: [
+                        const Text("Description"),
+                        Text(widget.env.description),
+                      ]),
+                      TableRow(children: [
+                        const Text("Provider"),
+                        Text(provider.getProviderName()),
+                      ]),
+                      TableRow(children: [
+                        const Text("Server Type"),
+                        Text(serverType),
+                      ]),
+                      TableRow(children: [
+                        const Text("Location"),
+                        Text(serverLocation),
+                      ]),
+                    ],
+                  )
+                ],
+              ),
+            ),
+          ),
         ),
       ),
     );

lib/components/environments.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:grpc/grpc_web.dart';
 import 'package:softplayer_web/api/grpc/creds.dart';
 import 'package:softplayer_web/api/grpc/environments.dart';
@@ -24,18 +23,22 @@ class _EnvirnomentListState extends State<EnvirnomentList> {
     envGrpc = EnvironmentsGrpc(widget.channel);
   }
 
+  final GlobalKey<ScaffoldState> _key = GlobalKey(); // Create a key
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+        key: _key,
+        endDrawer: const Drawer(child: Text("Env")),
         body: Container(
             width: double.infinity,
             height: double.infinity,
             decoration: const BoxDecoration(
-              image: DecorationImage(
-                image: AssetImage("assets/login_background.jpg"),
-                fit: BoxFit.cover,
-              ),
-            ),
+                gradient: LinearGradient(colors: [
+              Colors.blueGrey,
+              Colors.cyan,
+              Colors.yellow,
+            ])),
             child: StreamBuilder(
                 stream:
                     envGrpc.list(SoftplayerCredsHelpers().fromLocalStorage()),
@@ -51,14 +54,21 @@ class _EnvirnomentListState extends State<EnvirnomentList> {
                         if (data.isNotEmpty) {
                           return Column(children: [
                             Flexible(
-                              child: TextField(
-                                decoration: InputDecoration(
-                                  icon: Icon(Icons.search),
+                              child: Container(
+                                margin: const EdgeInsetsDirectional.fromSTEB(
+                                    50.0, 20.0, 50.0, 10.0),
+                                child: const TextField(
+                                  decoration: InputDecoration(
+                                      fillColor: Colors.white,
+                                      filled: true,
+                                      labelText: "Search",
+                                      prefixIcon: Icon(Icons.search)),
                                 ),
                               ),
                             ),
                             Flexible(
                                 child: GridView.count(
+                              childAspectRatio: (30 / 13),
                               crossAxisCount: 4,
                               children: snapshot.data!
                                   .map((e) => EnvirnomentCard(
@@ -71,15 +81,15 @@ class _EnvirnomentListState extends State<EnvirnomentList> {
                           return Center(
                               child: Container(
                             height: 300,
-                            child: Text(
-                                "To get strated, use the button in the corner"),
                             decoration: BoxDecoration(
                               border: Border.all(),
                               shape: BoxShape.rectangle,
                               borderRadius:
-                                  BorderRadius.all(Radius.circular(10)),
-                              color: Color.fromRGBO(100, 150, 80, 20),
+                                  const BorderRadius.all(Radius.circular(10)),
+                              color: const Color.fromRGBO(100, 150, 80, 20),
                             ),
+                            child: const Text(
+                                "To get strated, use the button in the corner"),
                           ));
                         }
                       }

lib/components/login_form.dart

@@ -98,6 +98,7 @@ class _LoginFormState extends State<LoginForm> {
           child: Center(
               child: Column(children: [
             TextFormField(
+              onFieldSubmitted: (value) => submitSignIn(),
               autofocus: true,
               controller: usernameCtrl,
               decoration: const InputDecoration(
@@ -110,6 +111,7 @@ class _LoginFormState extends State<LoginForm> {
               cursorRadius: const Radius.circular(10),
             ),
             TextFormField(
+              onFieldSubmitted: (value) => submitSignIn(),
               controller: passwordCtrl,
               obscureText: true,
               decoration: const InputDecoration(
@@ -155,6 +157,7 @@ class _LoginFormState extends State<LoginForm> {
           child: Center(
               child: Column(children: [
             TextFormField(
+              onFieldSubmitted: (value) => submitSignUp(),
               autofocus: true,
               controller: usernameCtrl,
               decoration: const InputDecoration(
@@ -167,6 +170,7 @@ class _LoginFormState extends State<LoginForm> {
               cursorRadius: const Radius.circular(10),
             ),
             TextFormField(
+              onFieldSubmitted: (value) => submitSignUp(),
               controller: emailCtrl,
               autofocus: true,
               decoration: const InputDecoration(
@@ -179,6 +183,7 @@ class _LoginFormState extends State<LoginForm> {
               cursorRadius: const Radius.circular(10),
             ),
             TextFormField(
+              onFieldSubmitted: (value) => submitSignUp(),
               controller: passwordCtrl,
               obscureText: true,
               decoration: const InputDecoration(
@@ -190,6 +195,7 @@ class _LoginFormState extends State<LoginForm> {
               cursorRadius: const Radius.circular(10),
             ),
             TextFormField(
+              onFieldSubmitted: (value) => submitSignUp(),
               controller: passwordVerifyCtrl,
               obscureText: true,
               decoration: const InputDecoration(