refactor(protocol-designer): replace old CSS resets with minimal reset (

#1672) - remove normalize.css module - consolidate grid styles in PD - minimal `reset.css` - remove unused css files in protocol-designer/src/css - update LabwareDropdown.css (no longer rely on old resets) - remove all old '@value's - use Open Sans as default font
Opentrons · Jun 14, 2018 · aeb1785 · aeb1785
1 parent e302382
commit aeb1785
Show file tree

Hide file tree

Showing 14 changed files with 28 additions and 113 deletions.
diff --git a/protocol-designer/package.json b/protocol-designer/package.json
@@ -21,7 +21,6 @@
     "@opentrons/components": "3.2.0-beta.0",
     "classnames": "^2.2.5",
     "lodash": "^4.17.4",
-    "normalize.css": "^7.0.0",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

diff --git a/protocol-designer/src/components/App.js b/protocol-designer/src/components/App.js
@@ -6,16 +6,14 @@ import ConnectedDeckSetup from '../containers/ConnectedDeckSetup'
 import About from './About'
 import ProtocolEditor from './ProtocolEditor'
 
-// to clarify: normalize.css is an npm module
-// with a dot in its name, not a .css file in src/
-import 'normalize.css'
-import '../css/globals.css'
+import '../css/reset.css'
 
 export default function App () {
   return (
     <HashRouter>
       <div className='container'>
         <Route exact path='/' component={ProtocolEditor} />
+        {/* TODO: Ian 2018-06-08 remove these unused routes & their components */}
         <Route exact path='/old-ingredient-selector' component={ConnectedDeckSetup} />
         <Route path='/about' component={About} />
       </div>

diff --git a/protocol-designer/src/components/Form.css b/protocol-designer/src/components/Form.css
@@ -2,23 +2,7 @@
  * (more specifically, top of relative parent)
  */
 @import '@opentrons/components';
-
-/* TODO Ian 2018-01-24 generic column fraction classes available in component css? */
-.column_1_2 {
-  lost-column: 1/2;
-}
-
-.column_1_3 {
-  lost-column: 1/3;
-}
-
-.column_2_3 {
-  lost-column: 2/3;
-}
-
-.column_1_4 {
-  lost-column: 1/4;
-}
+@import '../css/grid.css';
 
 .form {
   background-color: white;

diff --git a/protocol-designer/src/components/LabwareDropdown.css b/protocol-designer/src/components/LabwareDropdown.css
@@ -1,6 +1,11 @@
 @import '@opentrons/components';
 
-@value disable_select, close from '../css/mixins.css';
+.close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: pointer;
+}
 
 .labware_dropdown {
   position: absolute;
@@ -14,7 +19,7 @@
   border: 3px solid darkgray;
   z-index: 500;
   color: var(--c-font-dark);
-  composes: disable_select;
+  user-select: none;
 }
 
 .labware_dropdown label {
@@ -23,7 +28,8 @@
   font-weight: bold;
 }
 
-.labware_dropdown > ul {
+.labware_dropdown ul {
+  list-style-type: none;
   background-color: white;
 
   /* Overflowing, even just y, messes with tooltips... */

diff --git a/protocol-designer/src/components/ProtocolEditor.css b/protocol-designer/src/components/ProtocolEditor.css
@@ -23,14 +23,4 @@
 .main_page_content {
   flex: 1 1;
   position: relative;
-
-  & h2 {
-    /** TODO Ian 2018-02-27 is there a better place for making h2's look like headers --
-     * without making TitleBar etc components headers wrong? */
-    @apply --font-header-dark;
-
-    line-height: 4rem;
-    padding: 0;
-    margin: 0;
-  }
 }
diff --git a/protocol-designer/src/components/SelectionRect.css b/protocol-designer/src/components/SelectionRect.css
@@ -1,20 +1,18 @@
-@value rectColor: rgba(0, 120, 255, 0.2);
-
 .selection_rect {
   pointer-events: none; /* prevents this div from occluding wells during document.elementFromPoint sampling */
 }
 
 rect.selection_rect {
   /* svg version */
-  fill: rectColor;
+  fill: var(--c-overlay);
   stroke: gray;
   stroke-width: 0.4;
   stroke-dasharray: 0.75, 0.5;
 }
 
 div.selection_rect {
   /* normal html version */
-  background-color: rectColor;
+  background-color: var(--c-overlay);
   position: fixed;
   z-index: 1000;
   border-radius: 0;

diff --git a/protocol-designer/src/components/modals/MoreOptionsModal.css b/protocol-designer/src/components/modals/MoreOptionsModal.css
@@ -1,5 +1,3 @@
-@import './grid.css';
-
 .big_text_box {
   height: 12rem;
 }

diff --git a/protocol-designer/src/css/colors.css b/protocol-designer/src/css/colors.css
diff --git a/protocol-designer/src/css/fontSizes.css b/protocol-designer/src/css/fontSizes.css
diff --git a/protocol-designer/src/css/globals.css b/protocol-designer/src/css/globals.css
diff --git a/...l-designer/src/components/modals/grid.css → protocol-designer/src/css/grid.css b/...l-designer/src/components/modals/grid.css → protocol-designer/src/css/grid.css
@@ -1,4 +1,4 @@
-/* TODO Ian 2018-02-07 This is duplicated in StepEditForm. Should be in component library? */
+/* TODO Ian 2018-07-08 Should be in component library? */
 
 .column_1_2 {
   lost-column: 1/2;

diff --git a/protocol-designer/src/css/mixins.css b/protocol-designer/src/css/mixins.css
diff --git a/protocol-designer/src/css/reset.css b/protocol-designer/src/css/reset.css
@@ -0,0 +1,13 @@
+/* TODO: Ian 2018-06-08 PD should import css reset from component library */
+
+body {
+  font-size: 16px;
+  line-height: 1;
+}
+
+* {
+  font-family: 'Open Sans', sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -7345,10 +7345,6 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
-normalize.css@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf"
-
 npm-lifecycle@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/npm-lifecycle/-/npm-lifecycle-2.0.3.tgz#696bedf1143371163e9cc16fe872357e25d8d90e"