Add required fields

Author: ronellecaguioa

app/modals/AddModal.tsx

@@ -53,15 +53,16 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
         <p>Enter the database information used to track the service</p>
       </div>
       <form onSubmit={handleSubmit}>
+      <p>Required*</p>
         <div>
-          <label htmlFor="db-type">Type</label>
+          <label htmlFor="db-type">Type<span>*</span></label>
           <select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
             <option value="SQL">SQL</option>
             <option value="MongoDB">MongoDB</option>
           </select>
         </div>
         <div>
-          <label htmlFor="db-uri">URI</label>
+          <label htmlFor="db-uri">URI<span>*</span></label>
           <input
             id="db-uri"
             name="URI"
@@ -72,7 +73,7 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
           />
         </div>
         <div>
-          <label htmlFor="db-name">Name</label>
+          <label htmlFor="db-name">Name<span>*</span></label>
           <input
             id="db-name"
             type="text"

app/stylesheets/AddModal.scss

@@ -21,9 +21,23 @@
   /* Form */
   form {
     @include centerWithFlex($direction: column);
-    padding: 0 30px;
+    padding: 20px 30px;
     width: 100%;
 
+    p,
+    span {
+      color: rgb(211, 0, 0);
+    }
+
+    span {
+      font-weight: 300;
+      font-size: 80%;
+    }
+
+    p {
+      align-self: flex-start;
+    }
+
     div {
       @include centerWithFlex();
 
@@ -50,7 +64,7 @@
         flex: 1;
         border-radius: 3px;
       }
-      
+
       // Select field
       select {
         cursor: pointer;
@@ -84,6 +98,7 @@
 
     /* Submit button */
     button {
+      height: 40px;
       font-size: 115%;
       width: 50%;
       color: #fff;