Style AddModal

Author: ronellecaguioa

app/modals/AddModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext } from 'react';
 import { DashboardContext } from '../context/DashboardContext';
-import '../stylesheets/AddModal.css';
+import '../stylesheets/AddModal.scss';
 
 interface IFields {
   database: string;
@@ -49,7 +49,7 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
       <h2>Enter Your Database Information</h2>
       <form onSubmit={handleSubmit}>
         <div className="input-field">
-          <label htmlFor="db-type">Type: </label>
+          <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>
@@ -78,7 +78,7 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
             required
           />
         </div>
-        <button className="submitBtn">Submit</button>
+        <button>Submit</button>
       </form>
     </div>
   );

app/stylesheets/AddModal.css

@@ -0,0 +1,89 @@
+@import './constants.scss';
+
+.add-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 50px 40px;
+  background-color: #f4f4f4;
+  border-radius: 5px;
+  width: 50%;
+  max-width: 600px;
+
+  /* Header */
+  h2 {
+    margin: 0 auto 35px;
+    text-align: center;
+    font-weight: 700;
+    font-size: 200%;
+    color: #333;
+  }
+
+  /* Form */
+  form {
+    @include centerWithFlex(center, column);
+    padding: 0 30px;
+
+    div {
+      &:first-of-type {
+        margin-top: 0;
+      }
+
+      @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;
+        font-size: 100%;
+        padding: 5px;
+      }
+
+      /* Select field */
+      select {
+        appearance: none;
+        cursor: pointer;
+        height: 30px;
+        border: thin solid $lightgray;
+        flex: 1;
+        font-size: 100%;
+      }
+
+      label {
+        width: 100px;
+        font-size: 135%;
+        font-weight: 400;
+      }
+    }
+
+    /* Submit button */
+    button {
+      font-size: 115%;
+      width: 50%;
+      color: #333;
+      background-color: transparent;
+      transition: 0.1s;
+      margin: 20px 0;
+      font-weight: 400;
+      letter-spacing: 2px;
+      border: 2px solid #333;
+      padding: 4px;
+      text-transform: uppercase;
+
+      &:hover {
+        color: #fff;
+        background-color: #333;
+      }
+    }
+  }
+}
+
+::placeholder {
+  color: rgb(201, 201, 201);
+}

app/stylesheets/AddModal.scss

@@ -21,7 +21,7 @@ select {
   width: 250px;
   padding: 5px 35px;
   font-size: 100%;
-  border: 1px solid #ccc;
+  border: thin solid #ccc;
   height: 30px;
   appearance: none;
   cursor: pointer;

app/stylesheets/Header.scss

@@ -3,10 +3,11 @@ $sidebarblue: #24262f;
 $headergray: #e8e8e8;
 $lightgray: #c3c3c3;
 
-@mixin centerWithFlex($justify: center) {
+@mixin centerWithFlex($justify: center, $direction: row) {
   display: flex;
   align-items: center;
   justify-content: $justify;
+  flex-direction: $direction;
 }
 
 @keyframes blink {

app/stylesheets/constants.scss

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&family=Quicksand:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600&family=Quicksand:wght@300&display=swap');
 @import './constants.scss';
 
 * {
@@ -15,7 +15,7 @@
 body {
   background-color: #f4f4f4;
   font-size: 16px;
-  font-family: 'Nunito', sans-serif;
+  font-family: 'Nunito sans', sans-serif;
   font-weight: 300;
   overflow-x: hidden;
 }