CJPM-17497: Changed Modal and Form styles per UX

Author: joshhidley

CONTRIBUTING.md

@@ -26,6 +26,9 @@ For components from visual-stack that require state management, this library pro
 This is a microsite providing documentation and live examples of components. This package depends on the other two.
 
 ### Running locally
+Install lerna: `npm install -g lerna`
+
+Make sure you are using node 14 or below (`npm install -g n` can be helpful here)
 
 From a fresh clone of the repo, start by bootstrapping the project from the root with `npm run bootstrap`. This will install all external dependencies, create links between local dependent packages and build all three packages.
 

packages/visual-stack/src/components/Form/Form.css

@@ -147,10 +147,6 @@ fieldset.group ul.checkbox li.focus {
   margin-top: -4px;
 }
 
-.vs-field {
-  margin-bottom: 24px;
-}
-
 .vs-field-optional {
   color: #777;
   font-size: 1.3rem;

packages/visual-stack/src/components/Modal.css

@@ -43,6 +43,7 @@
 
 .modal-content {
   position: relative;
+  top: 80px;
   background-color: #fff;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -79,7 +80,14 @@
 
 .modal-header {
   padding: 15px;
-  border-bottom: 1px solid #e5e5e5;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+.modal-header-grid {
+  display: grid;
+  grid-template-columns: 1fr 36px;
+  align-items: center;
 }
 
 .modal-header h1 {
@@ -99,12 +107,13 @@
 .modal-body {
   position: relative;
   padding: 15px;
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
 .modal-footer {
   padding: 15px;
   text-align: right;
-  border-top: 1px solid #e5e5e5;
 }
 
 .modal-footer .btn + .btn {
@@ -143,7 +152,7 @@
 
 @media (min-width: 768px) {
   .modal-dialog {
-    width: 600px;
+    width: 400px;
     margin: 30px auto;
   }
   .modal-content {