fixed button spacing in provide

src/pages/Provide.js

@@ -22,13 +22,7 @@ function Provide() {
           <h3>Help your neighbor in your area of expertise</h3>
           <fieldset className="zip-code">
             <label htmlFor="zip-code">Enter your zipcode</label>
-            <input
-              id="zip-code"
-              type="text"
-              required
-              // inputMode="numeric"
-              pattern="^(?(^00000(| -0000)) | (\d{5}(| -\d{4})))$"
-            />
+            <input id="zip-code" type="number" min="0" required />
           </fieldset>
           <fieldset className="task-category">
             <p>Select a task category</p>
@@ -68,8 +62,3 @@ function Provide() {
   );
 }
 export default Provide;
-
-//? Pseudo Code
-//? Need an geolocation API to generate all zip codes within the 5 miles radius of the zip code entered in search input area
-//? All these zip codes would be used to match any zip codes in the forms' zip codes in the database
-//! Warning: a tag doesn't work in React, try Link or something else clickable

src/pages/Request.js

@@ -84,9 +84,8 @@ function Request() {
             <label htmlFor="zip">Zip Code ⁕</label>
             <input
               id="zip"
-              type="text"
-              inputMode="numeric"
-              // pattern="^(?(^00000(| -0000)) | (\d{5}(| -\d{4})))$"
+              type="number"
+              min="0"
               value={zipCode}
               onChange={(e) => setZipCode(e.target.value)}
               required

src/styles/provide.scss

@@ -14,7 +14,7 @@
 }
 .provide-button-box {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-evenly;
   margin-bottom: 10px;
 }
 input[type="checkbox"] {
@@ -27,7 +27,6 @@ input[type="checkbox"] {
   height: 16px;
   border: 2px solid $text;
   border-radius: 5px;
-  //padding: 10px;
   display: grid;
   place-content: center;
 }