Adds styling to the form inputs

React/package-lock.json

@@ -8280,6 +8280,14 @@
         "brorand": "^1.0.1"
       }
     },
+    "milligram": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/milligram/-/milligram-1.4.1.tgz",
+      "integrity": "sha512-RCgh/boHhcXWOUfKJWm3RJRoUeaEguoipDg0mJ31G0tFfvcpWMUlO1Zlqqr12K4kAXfDlllaidu0x7PaL2PTFg==",
+      "requires": {
+        "normalize.css": "~8.0.1"
+      }
+    },
     "mime": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
@@ -8700,6 +8708,11 @@
         "sort-keys": "^1.0.0"
       }
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",

React/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "milligram": "^1.4.1",
     "oidc-client": "^1.9.1",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",

React/src/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import 'milligram/dist/milligram.min.css'
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import "milligram/dist/milligram.min.css";
+import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));

React/src/pages/components/Card.js

@@ -1,10 +1,10 @@
 import React from "react";
 
-const Card = ({ children, styles = {} }) => {
+const Card = ({ children, classes = "", styles = {} }) => {
   return (
     <div
       style={{ ...styles }}
-      className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-36 sm:py-36 px-20 py-16 my-20"
+      className={`xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-36 sm:py-36 px-20 py-16 my-20 ${classes}`}
     >
       {children}
     </div>

React/src/pages/components/VehicleRegisterForm.js

@@ -28,7 +28,7 @@ const VehicleRegisterForm = () => {
   }
 
   return (
-    <Card styles={{ padding: "60px" }}>
+    <Card styles={{ padding: "60px" }} classes="xl:w-2/5">
       <form onSubmit={(e) => e.preventDefault()} className="m-0 flex flex-col">
         <Heading3 styles={{ marginTop: "0" }}>Register A Vehicle</Heading3>
 
@@ -37,18 +37,21 @@ const VehicleRegisterForm = () => {
             label="Model"
             value={model}
             name="model"
+            placeholder="Model"
             onChangeEvent={(e) => setModel(e.target.value)}
           />
           <InputText
             label="License Plate"
             value={licensePlate}
             name="licensePlate"
+            placeholder="License Plate"
             onChangeEvent={(e) => setlicensePlate(e.target.value)}
           />
           <InputText
             label="Color"
             value={color}
             name="color"
+            placeholder="Color"
             onChangeEvent={(e) => setColor(e.target.value)}
           />
           <InputSelect
@@ -63,7 +66,11 @@ const VehicleRegisterForm = () => {
             ]}
           />
         </div>
-        <Button text="Register" onClickEvent={registerVehicle} />
+        <Button
+          text="Register"
+          onClickEvent={registerVehicle}
+          classes="mt-10"
+        />
       </form>
     </Card>
   );

React/src/pages/components/inputs/InputSelect.js

@@ -1,10 +1,31 @@
 import React from "react";
 
-const InputSelect = ({ label, value, name, onChangeEvent, options }) => {
+const InputSelect = ({
+  label,
+  value,
+  name,
+  placeholder,
+  onChangeEvent,
+  options,
+}) => {
   return (
-    <div>
-      <label>{label}</label>
-      <select value={value} name={name} onChange={onChangeEvent}>
+    <div className="flex flex-col items-start">
+      <label className="font-inter font-semibold text-2xl text-black-custom mb-4">
+        {label}
+      </label>
+      <select
+        value={value}
+        name={name}
+        onChange={onChangeEvent}
+        className="font-normal font-inter text-2xl text-black-custom mb-10 cursor-pointer"
+        style={{
+          borderRadius: ".25rem",
+          border: "none",
+          boxShadow: `0 1px 1px rgba(0, 0, 0, 0.2), 0 0 4px rgba(0, 0, 0, 0.1)`,
+          background: "none",
+          appearance: "auto",
+        }}
+      >
         {options.map((option, i) => (
           <option key={i} value={option.value}>
             {option.text}

React/src/pages/components/inputs/InputText.js

@@ -1,10 +1,25 @@
 import React from "react";
 
-const InputText = ({ label, value, name, onChangeEvent }) => {
+const InputText = ({ label, value, name, onChangeEvent, placeholder }) => {
   return (
-    <div>
-      <label>{label}</label>
-      <input value={value} type="text" name={name} onChange={onChangeEvent} />
+    <div className="flex flex-col items-start">
+      <label className="font-inter font-semibold text-2xl text-black-custom mb-4">
+        {label}
+      </label>
+      <input
+        value={value}
+        type="text"
+        name={name}
+        onChange={onChangeEvent}
+        className="font-normal font-inter text-2xl text-black-custom mb-10"
+        placeholder={placeholder}
+        autoComplete="off"
+        style={{
+          borderRadius: ".25rem",
+          border: "none",
+          boxShadow: `0 1px 1px rgba(0, 0, 0, 0.2), 0 0 4px rgba(0, 0, 0, 0.1)`,
+        }}
+      />
     </div>
   );
 };