feat: Improve UX of forms on mobile devices ✨

Author: GeeekyBoy

package.json

@@ -25,7 +25,7 @@
     "vite-plugin-svgr": "3.2.0"
   },
   "scripts": {
-    "start": "vite",
+    "start": "vite --host",
     "build": "vite build",
     "serve": "vite preview"
   },

src/components/Letters.jsx

@@ -38,7 +38,7 @@ const Letter = ({ onNextPage }) => {
   return (
     <Fade timeout={500} in={isShown} appear={isShown}>
       <Paper className="start-container">
-        <form noValidate autoComplete="off">
+        <form noValidate autoComplete="off" onSubmit={solve}>
           <div className="start-container-item">
             <center>
               <Typography variant="h4">Name The Inputs</Typography>
@@ -47,12 +47,14 @@ const Letter = ({ onNextPage }) => {
           <div className="start-container-item">
             <TextField
               id="outlined-basic"
-              label={`Enter ${varStore.initInputsNumber} Letters`}
+              label={`Enter ${varStore.initInputsNumber} letters`}
+              placeholder={Array(varStore.initInputsNumber).fill(0).map((_, i) => String.fromCharCode(65 + i)).join("")}
               helperText={errMsg ? errMsg : null}
               error={!!errMsg}
               onChange={handleChange}
               size="small"
               variant="filled"
+              autoFocus
             />
           </div>
           <div className="start-container-item">
@@ -61,6 +63,7 @@ const Letter = ({ onNextPage }) => {
                 endIcon={<CalculateRounded />}
                 variant="contained"
                 color="primary"
+                type="submit"
                 onClick={solve}
               >
                 Solve

src/components/Start.jsx

@@ -69,7 +69,7 @@ const Start = ({ onNextPage }) => {
   return (
     <Fade timeout={500} in={isShown} appear={isShown}>
       <Paper className="start-container">
-        <form noValidate autoComplete="off">
+        <form noValidate autoComplete="off" onSubmit={nextPage}>
           <div className="start-container-item">
             <center>
               <Typography variant="h4" className="logo">
@@ -82,6 +82,7 @@ const Start = ({ onNextPage }) => {
             <TextField
               id="minterms"
               label="Minterms"
+              placeholder="(e.g. 0, 1, 2, 5, 7, 8, 9, 10, 13, 15)"
               helperText={mintermsErrMsg ? mintermsErrMsg : null}
               error={!!mintermsErrMsg}
               onChange={handleMintermsChange}
@@ -93,6 +94,7 @@ const Start = ({ onNextPage }) => {
             <TextField
               id="donot-cares"
               label="Don't Cares"
+              placeholder="(e.g. 3, 4)"
               helperText={donotCaresErrMsg ? donotCaresErrMsg : null}
               error={!!donotCaresErrMsg}
               onChange={handleDonotCaresChange}
@@ -132,6 +134,7 @@ const Start = ({ onNextPage }) => {
                 endIcon={<ArrowForwardRounded />}
                 variant="contained"
                 color="primary"
+                type="submit"
                 onClick={nextPage}
               >
                 Next

src/styles.css

@@ -1,24 +1,32 @@
-.root {
+body {
+  position: absolute;
   background-image: url(./assets/img/bg.jpg);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
+  background-color: #073741;
   overflow-x: hidden;
+  overflow-y: auto;
+  min-height: 100%;
+  width: 100%;
+  margin: 0;
 }
 
 .centering-root {
   display: flex;
-  min-height: 100vh;
   margin: 0;
+  max-width: calc(100% - 30px);
   padding-left: 15px;
   padding-right: 15px;
   justify-content: center;
+  align-items: center;
 }
 
 .centered-container {
   align-self: center;
   width: 100%;
   max-width: 600px;
+  margin: 15px 0;
 }
 
 .start-container {
@@ -39,7 +47,7 @@
 }
 
 .mansory {
-  margin: 0 auto;
+  margin: 15px auto;
 }
 
 .grid-item {