Add description to layout

Author: ronellecaguioa

app/modals/AddModal.tsx

@@ -51,14 +51,14 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
         <p>Enter the database information used to track the service</p>
       </div>
       <form onSubmit={handleSubmit}>
-        <div className="input-field">
+        <div>
           <label htmlFor="db-type">Type</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 className="input-field">
+        <div>
           <label htmlFor="db-uri">URI</label>
           <input
             id="db-uri"
@@ -69,7 +69,7 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
             required
           />
         </div>
-        <div className="input-field">
+        <div>
           <label htmlFor="db-name">Name</label>
           <input
             id="db-name"
@@ -81,6 +81,10 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
             required
           />
         </div>
+        <div>
+          <label htmlFor="db-desc">Description</label>
+          <textarea name="db-desc" id="db-desc" placeholder="Add a short description" />
+        </div>
         <button>Submit</button>
       </form>
     </div>

app/stylesheets/AddModal.scss

@@ -1,10 +1,11 @@
 @import './constants.scss';
 
 .add-container {
-  @include centerModal();
+  @include centerModal(30%, 500px);
 
   /* Header */
   .add-header {
+    width: 100%;
     padding: 20px 30px;
     text-align: center;
     border-bottom: thin solid $lightgray;
@@ -21,43 +22,61 @@
   form {
     @include centerWithFlex($direction: column);
     padding: 0 30px;
+    width: 100%;
 
     div {
-      display: flex;
-      align-items: center;
+      @include centerWithFlex();
 
+      // <select /> margins
       &:first-of-type {
         margin-top: 20px;
       }
 
+      // <textarea>
+      &:last-of-type {
+        @include centerWithFlex($justify: flex-start, $align: flex-start);
+      }
+
       @include centerWithFlex(space-between);
       width: 100%;
       margin: 15px 0;
 
-      /* Text input */
-      input {
-        height: 30px;
-        border: thin solid $lightgray;
-        border-radius: 3px;
-        flex: 1;
-        font-family: inherit;
+      select,
+      input,
+      textarea {
         font-size: 100%;
         padding: 5px;
+        border: thin solid $lightgray;
+        flex: 1;
+        border-radius: 3px;
       }
-
-      /* Select field */
+      
+      // Select field
       select {
+        cursor: pointer;
+        height: 30px;
         margin: 0;
         appearance: none;
-        cursor: pointer;
+        transition: 0.2s;
+
+        &:hover {
+          background-color: darken(#fff, 5%);
+        }
+      }
+
+      // Text input
+      input {
         height: 30px;
-        border: thin solid $lightgray;
-        flex: 1;
-        font-size: 100%;
+      }
+
+      // Textarea
+      textarea {
+        resize: none;
+        height: 90px;
       }
 
       label {
-        width: 100px;
+        width: 140px;
         font-size: 135%;
         font-weight: 400;
       }

app/stylesheets/constants.scss

@@ -4,21 +4,22 @@ $headergray: #e8e8e8;
 $lightgray: #c3c3c3;
 $boxshadow: 2px 2px 6px rgb(187, 187, 187);
 
-@mixin centerWithFlex($justify: center, $direction: row) {
+@mixin centerWithFlex($justify: center, $direction: row, $align: center) {
   display: flex;
-  align-items: center;
+  align-items: $align;
   justify-content: $justify;
   flex-direction: $direction;
 }
 
-@mixin centerModal($width: auto) {
+@mixin centerModal($width: auto, $minwidth: 400px) {
   @include centerWithFlex(center, column);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 5px;
   width: $width;
+  min-width: $minwidth;
   min-height: 100px;
   background-color: #f4f4f4;
 }