PF3-independent CSS for About dialog

branding/style.css

@@ -5,6 +5,3 @@ put anything here that should override styles
 from brand.css.
 *********************************************/
 
-#about-modal a, #about-modal, #about-modal button {
-    color: #ffffff;
-}

src/components/About.js → src/components/About/About.js

@@ -4,8 +4,9 @@ import { connect } from 'react-redux'
 import { withMsg } from '_/intl'
 
 import { Modal, ModalVariant } from '@patternfly/react-core'
-import Product from '../version'
-import { fixedStrings } from '../branding'
+import Product from '../../version'
+import { fixedStrings } from '../../branding'
+import styles from './styles.css'
 
 const LegalInfo = () => {
   const idPrefix = 'about-legal'
@@ -65,16 +66,16 @@ class AboutDialog extends React.Component {
           <Modal
             id={`${idPrefix}-modal`}
             onClose={closeModal}
-            className='about-modal-pf obrand_aboutBackground'
+            className={`${styles['about-modal']} obrand_aboutBackground`}
             variant={ModalVariant.medium}
             position='top'
             isOpen={true}
 
           >
 
             <h1 id={`${idPrefix}-title`}>{fixedStrings.BRAND_NAME} {msg.vmPortal()}</h1>
-            <div className='product-versions-pf'>
-              <ul className='list-unstyled'>
+            <div className={styles['product-versions']}>
+              <ul className={styles['list-unstyled']}>
                 <li id={`${idPrefix}-version`}>
                   <div dangerouslySetInnerHTML={{ __html: webUiVersionText }} />
                 </li>

src/components/About/index.js

@@ -0,0 +1 @@
+export { default } from './About'

src/components/About/styles.css

@@ -0,0 +1,37 @@
+/** based on PF3 about-modal-pf **/
+.about-modal {
+    color: #fff;
+    padding-bottom: 16px;
+    padding-top: 16px;
+    padding-left: 40px;
+    padding-right: 40px;
+}
+
+/** based on PF3 product-versions-pf **/
+.product-versions {
+    margin-bottom: 30px;
+    margin-top: 30px;
+}
+
+/** based on PF3 list-unstyled **/
+.list-unstyled {
+    padding-left: 0;
+    list-style: none;
+}
+
+
+.about-modal a {
+    color: #ffffff;
+}
+
+/** close button styling */
+.about-modal :global(.pf-c-button.pf-m-plain:hover) {
+    color:#fff;
+}
+
+.about-modal :global(.pf-c-button.pf-m-plain) {
+    color:darkgrey
+}
+
+
+

src/components/VmsPageHeader/UserMenu.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import { logout } from '_/actions'
 
 import { MsgContext } from '_/intl'
-import AboutDialog from '../About'
+import AboutDialog from '_/components/About'
 import { Tooltip } from '_/components/tooltips'
 
 const UserMenu = ({ config, onLogout }) => {