Merge pull request #333 from cjdev/CJPM-17455

DataTable, TopNav, and Modal CSS changes

Author: Kadinvanvalin

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/BlankSlate/index.js

@@ -2,31 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '../Button';
 import './BlankSlate.css';
-import IconExample from 'mdi-react/BlurIcon';
-import { Panel } from '../../../lib/components/Panel';
 
 export const BlankSlate = ({
   children,
   alignment = '',
   title = 'You do not have any content.',
-  headerGraphic = <IconExample />,
+  headerGraphic = '',
   className = '',
   ...restProps
 }) => {
   return (
-    <Panel>
-      <div
-        {...restProps}
-        className={`vs-bs-container ${alignment === 'left-side' &&
-          'vs-bs-leftalign'} ${className}`}
-      >
-        <div className="vs-bs-img">{headerGraphic}</div>
-        <div className="vs-bs-content">
-          <h1 className="vs-bs-title">{title}</h1>
-          {children}
-        </div>
+    <div
+      {...restProps}
+      className={`vs-bs-container ${alignment === 'left-side' &&
+        'vs-bs-leftalign'} ${className}`}
+    >
+      <div className="vs-bs-img">{headerGraphic}</div>
+      <div className="vs-bs-content">
+        <h1 className="vs-bs-title">{title}</h1>
+        {children}
       </div>
-    </Panel>
+    </div>
   );
 };
 

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 {
@@ -153,6 +162,9 @@
   .modal-sm {
     width: 300px;
   }
+  .modal-md {
+    width: 400px;
+  }
 }
 @media (min-width: 992px) {
   .modal-lg {

packages/visual-stack/src/components/Table/DataTable/DataTable.css

@@ -28,6 +28,8 @@
   min-height: 32px;
   padding: 4px 8px;
   vertical-align: bottom;
+  border-bottom: 2px solid #d8dcdf;
+  color: #757575;
 }
 
 .vs-data-table-container .vs-tbody .vs-cell {