Introduce Patternfly 4

Since Patternfly 4 (PF4) is a complete rewrite of the framework that
doesn't require bootstrap and comes with a new npm package, it's
possible to include both side-by-side in a project.

This change includes the necessary PF4 packages and updates the header,
navbar, drawer (shows the config errors) and global page layout with PF4
components. Once this is done, we should be able to update the other
components step by step to PF4.

Points to keep in mind for the migration phase:
  1. Some Patternfly 3 CSS rules are overridden by Patternfly 4
     wildcards, mostly (re)setting the padding and margin of various
     elements to 0.

     To fix this unwanted behaviour, there is a pf4-migration.css file
     included were we can keep track on those rules and ensure that the
     old padding and margin values are re-applied after Patternfly 4 is
     imported.

Change-Id: I77b81fa0f97fe718207ba5a506cee300371c693b

1 files changed, 3 insertions, 6 deletions

diff --git a/web/src/containers/timezone/SelectTz.jsx b/web/src/containers/timezone/SelectTz.jsx
index b8e5060be..8955129aa 100644
--- a/web/src/containers/timezone/SelectTz.jsx
+++ b/web/src/containers/timezone/SelectTz.jsx
@@ -14,7 +14,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import Select from 'react-select'
 import moment from 'moment-timezone'
-import { Icon } from 'patternfly-react'
+import { OutlinedClockIcon } from '@patternfly/react-icons'
 import { connect } from 'react-redux'
 import { setTimezoneAction } from '../../actions/timezone'
 
@@ -64,12 +64,8 @@ class SelectTz extends React.Component {
       borderWidth: '0 0 0 1px',
       cursor: 'pointer',
       display: 'initial',
-      fontSize: '11px',
       padding: '6px'
     }
-    const iconStyles = {
-      padding: '5px'
-    }
     const customStyles = {
       container: () => ({
         display: 'inline-block',
@@ -99,8 +95,9 @@ class SelectTz extends React.Component {
     }
     return (
         <div style={containerStyles}>
-        <Icon style={iconStyles} type="fa" name="clock-o" />
+        <OutlinedClockIcon/>
         <Select
+            className="zuul-select-tz"
             styles={customStyles}
             value={this.state.currentValue}
             onChange={this.handleChange}