Fix the CSS

Remove colors settings in global css and add the theme property to the
menubar correctly (not via global prop anymore)

Issue-ID: CLAMP-477
Change-Id: Ie0ba1ea350e393d452108b1dadb10e7dbe1dab23
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

diff --git a/ui-react/package-lock.json b/ui-react/package-lock.json
index 8861304..4f64bb3 100644 (file)
--- a/ui-react/package-lock.json
+++ b/ui-react/package-lock.json
@@ -10739,9 +10739,9 @@
       }
     },
     "react-bootstrap": {
-      "version": "1.0.0-beta.11",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.11.tgz",
-      "integrity": "sha512-D8rAORkNRMf0ECvB8LHCTibeo1JeWptKs4CA5/tn1x5fTu5W4DUD7fQxLm9QdbzOM0qg2FjcfTKeM9gCqhTcoA==",
+      "version": "1.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.12.tgz",
+      "integrity": "sha512-qBEAthAzqM+OTS2h5ZCfV5/yZUadQcMlaep4iPyPqsu92JzdcznhSDjw6b+asiepsyQgiS33t8OPeLLRiIDh9Q==",
       "requires": {
         "@babel/runtime": "^7.4.2",
         "@react-bootstrap/react-popper": "1.2.1",

diff --git a/ui-react/package.json b/ui-react/package.json
index 2517605..358152b 100644 (file)
--- a/ui-react/package.json
+++ b/ui-react/package.json
@@ -29,7 +29,7 @@
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-scripts": "3.1.1",
-    "react-bootstrap": "1.0.0-beta.11",
+    "react-bootstrap": "1.0.0-beta.12",
     "bootstrap-css-only": "4.3.1",
     "styled-components": "4.3.2",
     "react-router-dom": "5.0.1",

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index b64cfba..9389ad6 100644 (file)
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -45,12 +45,29 @@ import PerformAction from './components/dialogs/PerformActions';
 import RefreshStatus from './components/dialogs/RefreshStatus';
 import DeployLoop from './components/dialogs/DeployLoop';
 
+import { Link } from 'react-router-dom';
+
+const StyledMainDiv = styled.div`
+       background-color: ${props => props.theme.backgroundColor};
+`
+
 const ProjectNameStyled = styled.a`
        vertical-align: middle;
        padding-left: 30px;
-       font-size: 30px;
+       font-size: 36px;
+       font-weight: bold;
+`
 
+const StyledRouterLink = styled(Link)`
+       color: ${props => props.theme.menuFontColor};
+       background-color: ${props => props.theme.backgroundColor};
 `
+
+const StyledLoginInfo = styled.a`
+       color: ${props => props.theme.menuFontColor};
+       background-color: ${props => props.theme.backgroundColor};
+`
+
 const LoopViewDivStyled = styled.div`
        height: 100%;
        overflow: hidden;
@@ -113,7 +130,9 @@ export default class LoopUI extends React.Component {
        renderUserLoggedNavBar() {
                return (
                        <Navbar.Text>
-                               Signed in as: <a href="/login">{this.state.userName}</a>
+                       <StyledLoginInfo>Signed in as: </StyledLoginInfo>
+                               <StyledRouterLink to="/userInfo">{this.state.userName}</StyledRouterLink>
+                               <StyledRouterLink to="/logout/"> (logout)</StyledRouterLink>
                        </Navbar.Text>
                );
        }
@@ -129,8 +148,9 @@ export default class LoopUI extends React.Component {
 
        renderNavBar() {
                return (
-                       <Navbar expand="lg">
+                       <Navbar >
                                {this.renderLogoNavBar()}
+                               <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                                {this.renderMenuNavBar()}
                                {this.renderUserLoggedNavBar()}
                        </Navbar>
@@ -188,7 +208,7 @@ export default class LoopUI extends React.Component {
        
  render() {
                return (
-                               <div id="main_div">
+                               <StyledMainDiv id="main_div">
                                <Route path="/operationalPolicyModal"
                                        render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
                                <Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
@@ -206,7 +226,7 @@ export default class LoopUI extends React.Component {
                                        <GlobalClampStyle />
                                        {this.renderNavBar()}
                                        {this.renderLoopViewer()}
-                               </div>
+                               </StyledMainDiv>
                );
        }
 }

diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css
deleted file mode 100644 (file)
index 94a91c2..0000000
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.disabled {
-       background-color: #dddd;
-}
-
-label {
-       text-align: right;
-       vertical-align: middle;
-}
-
-.leftPolicyPanel {
-       padding: 0 10px 0 0;
-}
-
-.idError {
-       color: red;
-       padding: 50px 0px;
-       text-align: center;
-       display: none;
-}
-
-.policyPanel {
-       background-color: #f5f5f5;
-       padding: 15px 5px 0 5px;
-}
-
-.form-group.clearfix {
-       display: -webkit-flex;
-       display: flex;
-       align-items: center;
-}
-
-label {
-       margin-bottom: 0px;
-}
-
-.withnote {
-       margin-bottom: 0px;
-}
-
-.note {
-       font-size:10px;
-       margin-left: 250px;
-       font-weight: normal;
-}
-
-#policyTable {
-       cursor: pointer;
-       width: 100%;
-}
-
-#policyTable tr {
-       border-bottom: 1px solid #ddd;
-       border-collapse: collapse;
-       text-align: left;
-       font-size: 12px;
-       font-weight: normal;
-}
-
-#policyTable td {
-       padding: 8px 10px;
-}
-
-#policyTable tr.highlight {
-       background-color: #f5f5f5;
-       font-weight: bold;
-       font-size: 13px;
-}
-
-#policyTableHolder {
-       height: 200px;
-       width: 100%;
-       overflow: auto;
-}
\ No newline at end of file

diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
index 6db38fd..7f349a1 100644 (file)
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
+++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
@@ -78,7 +78,6 @@ export default class OperationalPolicyModal extends React.Component {
 
        setDefaultJsonEditorOptions() {
                JSONEditor.defaults.options.theme = 'bootstrap4';
-               // JSONEditor.defaults.options.iconlib = 'bootstrap2';
 
                JSONEditor.defaults.options.object_layout = 'grid';
                JSONEditor.defaults.options.disable_properties = true;
@@ -89,7 +88,6 @@ export default class OperationalPolicyModal extends React.Component {
                JSONEditor.defaults.options.array_controls_top=true;
                JSONEditor.defaults.options.show_errors = 'always';
                JSONEditor.defaults.options.keep_oneof_values=false;
-               JSONEditor.defaults.options.ajax=true;
                JSONEditor.defaults.options.collapsed=true;
                //JSONEditor.defaults.options.template = 'default';
        }

diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 121787f..b68e237 100644 (file)
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -27,10 +27,10 @@ import NavDropdown from 'react-bootstrap/NavDropdown';
 import LoopUI from '../../LoopUI';
 import 'bootstrap-css-only/css/bootstrap.min.css';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom';
 
 const StyledLink = styled(Link)`
-       color: ${props => props.theme.menuColor};
+       color: ${props => props.theme.menuFontColor};
        background-color: ${props => props.theme.menuBackgroundColor};
        font-weight: normal;
        display: block;
@@ -41,21 +41,34 @@ const StyledLink = styled(Link)`
        white-space: nowrap;
        border: 0;
        :hover {
-                       text-decoration: none;
-                       background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
-                       color:  ${props => props.theme.loopViewerHeaderFontColor};
+               text-decoration: none;
+               background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+               color:  ${props => props.theme.menuHighlightedFontColor};
        }
 `;
 const StyledNavLink = styled(Nav.Link)`
-       color: ${props => props.theme.menuColor};
+       color: ${props => props.theme.menuFontColor};
        background-color: ${props => props.theme.menuBackgroundColor};
-  font-weight: normal;
+       font-weight: normal;
        padding: .25rem 1.5rem;
        :hover {
-                       background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
-                       color:  ${props => props.theme.loopViewerHeaderFontColor}
+               background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+               color:  ${props => props.theme.menuHighlightedFontColor};
+       }
+`;
+
+const StyledNavDropdown = styled(NavDropdown)`
+       color: ${props => props.theme.menuFontColor};
+       & .dropdown-toggle {
+       color: ${props => props.theme.menuFontColor};
+       background-color: ${props => props.theme.backgroundColor};
+       font-weight: normal;
+               :hover {
+                               font-weight: bold;
+               }
        }
 `;
+
 export default class MenuBar extends React.Component {
        state = {
                loopName: this.props.loopName,
@@ -72,28 +85,29 @@ export default class MenuBar extends React.Component {
 
        render () {
                return (
+
                                <Navbar.Collapse>
-                                       <NavDropdown title="Closed Loop">
+                                       <StyledNavDropdown title="Closed Loop">
                                                        <NavDropdown.Item as={StyledLink} to="/openLoop">Open CL</NavDropdown.Item>
                                                        <NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties CL</NavDropdown.Item>
                                                        <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close Model</NavDropdown.Item>
-                                       </NavDropdown>
-                                       <NavDropdown title="Manage">
+                                       </StyledNavDropdown>
+                                       <StyledNavDropdown title="Manage">
                                                        <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Submit</NavDropdown.Item>
                                                        <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Stop</NavDropdown.Item>
                                                        <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>Restart</NavDropdown.Item>
                                                        <NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete</NavDropdown.Item>
                                                        <NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy</NavDropdown.Item>
                                                        <NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy</NavDropdown.Item>
-                                       </NavDropdown>
-                                       <NavDropdown title="View">
+                                       </StyledNavDropdown>
+                                       <StyledNavDropdown title="View">
                                                        <NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
-                                       </NavDropdown>
-                                       <NavDropdown title="Help">
+                                       </StyledNavDropdown>
+                                       <StyledNavDropdown title="Help">
                                                        <StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
                                                        <StyledNavLink href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavLink>
                                                        <NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item>
-                                       </NavDropdown>
+                                       </StyledNavDropdown>
                                </Navbar.Collapse>
                );
        }

diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index 0f6fb91..a0c338c 100644 (file)
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -24,60 +24,50 @@
 import { createGlobalStyle } from 'styled-components';
 
 export const GlobalClampStyle = createGlobalStyle`
-  body {
-    padding: 0;
-    margin: 0;
-    font-family: ${props => props.theme.fontFamily};
-    font-size: ${props => props.theme.fontSize};
-    font-weight: normal;
-    color: ${props => props.theme.fontNormal};
-    background-color: ${props => props.theme.backgroundColor};
-  }
+       body {
+               padding: 0;
+               margin: 0;
+               font-family: ${props => props.theme.fontFamily};
+               font-size: ${props => props.theme.fontSize};
+               font-weight: normal;
+       }
 
- span {
-       font-family: ${props => props.theme.fontFamily};
-    font-size: ${props => props.theme.fontSize};
-    font-weight: bold;
-    color: ${props => props.theme.fontNormal};
-    background-color: ${props => props.theme.backgroundColor};
-  }
-  
-  a {
-       font-family: ${props => props.theme.fontFamily};
-    font-size: ${props => props.theme.fontSize};
-    font-weight: bold;
-    color: ${props => props.theme.fontNormal};
-    background-color: ${props => props.theme.backgroundColor};
+       span {
+               font-family: ${props => props.theme.fontFamily};
+               font-size: ${props => props.theme.fontSize};
+               font-weight: bold;
+       }
 
-  }
-  
-  div {
-       font-family: ${props => props.theme.fontFamily};
-    font-size: ${props => props.theme.fontSize};
-       border-radius: 4px;
-       color: ${props => props.theme.fontNormal};
-       background-color: ${props => (props.theme.backgroundColor)};
-       margin-top: 1px;
-  }
+       a {
+               font-family: ${props => props.theme.fontFamily};
+               font-size: ${props => props.theme.fontSize};
+               font-weight: bold;
+       }
 
-  svg {
-       overflow: hidden;
-       width: 100%;
-       height: 100%;
-  }
-  
-  button {
-       background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)};
-       border: 1px;
-       color: white;
-       padding: 15px 32px;
-       text-align: center;
-       text-decoration: none;
-       display: inline-block;
-       font-size: ${props => props.theme.fontSize};
-       font-family: ${props => props.theme.fontFamily};
+       div {
+               font-family: ${props => props.theme.fontFamily};
+               font-size: ${props => props.theme.fontSize};
+               border-radius: 4px;
+               margin-top: 1px;
+       }
 
-  }
+       svg {
+               overflow: hidden;
+               width: 100%;
+               height: 100%;
+       }
+
+       label {
+               font-family: ${props => props.theme.fontFamily};
+               font-size: ${props => props.theme.fontSize};
+               font-weight: bold;
+       }
+
+       button {
+               font-family: ${props => props.theme.fontFamily};
+               font-size: ${props => props.theme.fontSize};
+               font-weight: bold;
+       }
 `
 
 export const DefaultClampTheme = {
@@ -90,7 +80,7 @@ export const DefaultClampTheme = {
 
        backgroundColor: '#eeeeee',
        fontFamily: 'Arial, Sans-serif',
-       fontSize: '15px',
+       fontSize: '16px',
 
        loopViewerBackgroundColor: 'white',
        loopViewerFontColor: 'yellow',