From 4adc277eb319e52cae790628462cb2cd800560b1 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Mon, 28 Dec 2020 14:27:34 +0100
Subject: [PATCH] WIP: change button color scheme #276

---
 src/common/dialogs/dialog.js            | 10 ++++--
 src/dashboard/dashboard-button-group.js |  6 ++--
 src/dashboard/dashboard.js              |  2 +-
 src/ic/ic-action.js                     |  2 +-
 src/ic/ics.js                           |  4 ++-
 src/scenario/scenario.js                | 15 +++++++--
 src/scenario/scenarios.js               |  4 ++-
 src/user/login-form.js                  |  2 +-
 src/user/user.js                        | 45 +++++++++++++------------
 src/user/users.js                       |  2 +-
 src/widget/toolbox-item.js              |  2 +-
 src/widget/widget-toolbox.js            | 32 +++++++++++++-----
 12 files changed, 82 insertions(+), 44 deletions(-)

diff --git a/src/common/dialogs/dialog.js b/src/common/dialogs/dialog.js
index 4cc15af..741ecaf 100644
--- a/src/common/dialogs/dialog.js
+++ b/src/common/dialogs/dialog.js
@@ -45,6 +45,12 @@ class Dialog extends React.Component {
   }
 
   render() {
+    const buttonStyle = {
+      backgroundColor: '#527984', 
+      borderColor: '#527984'
+    };
+
+
     return (
       <Modal size={this.props.size || 'sm'} keyboard show={this.props.show} onEnter={this.props.onReset} onHide={this.cancelModal} onKeyPress={this.onKeyPress}>
         <Modal.Header>
@@ -56,8 +62,8 @@ class Dialog extends React.Component {
         </Modal.Body>
 
         <Modal.Footer>
-         {this.props.blendOutCancel? <div></div>:  <Button onClick={this.cancelModal}>Cancel</Button>}
-          <Button onClick={this.closeModal} disabled={!this.props.valid}>{this.props.buttonTitle}</Button>
+         {this.props.blendOutCancel? <div></div>:  <Button style={buttonStyle} onClick={this.cancelModal}>Cancel</Button>}
+          <Button style={buttonStyle} onClick={this.closeModal} disabled={!this.props.valid}>{this.props.buttonTitle}</Button>
         </Modal.Footer>
       </Modal>
     );
diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js
index 7f49292..9f3e1a0 100644
--- a/src/dashboard/dashboard-button-group.js
+++ b/src/dashboard/dashboard-button-group.js
@@ -25,11 +25,13 @@ class DashboardButtonGroup extends React.Component {
     const buttonStyle = {
       marginLeft: '12px',
       height: '44px', 
-      width : '35px'
+      width : '35px',
+      borderColor: '#ffffff',
+      backgroundColor: '#ffffff'
     };
 
     const iconStyle = {
-      color: '#007bff',
+      color: '#527984',
       height: '25px', 
       width : '25px'
     }
diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index 19bfd36..9f94192 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -478,7 +478,7 @@ class Dashboard extends Component {
     return <div className={boxClasses} >
       <div className='section-header box-header'>
         <div className="section-title">
-          <span>{this.state.dashboard.name}</span>
+          <h2>{this.state.dashboard.name}</h2>
         </div>
 
         <DashboardButtonGroup
diff --git a/src/ic/ic-action.js b/src/ic/ic-action.js
index 9eaabe0..82dea64 100644
--- a/src/ic/ic-action.js
+++ b/src/ic/ic-action.js
@@ -80,7 +80,7 @@ class ICAction extends React.Component {
               {actionList}
             </DropdownButton>
 
-            <Button style={{ marginLeft: '5px' }} disabled={sendCommandDisabled} onClick={() => this.props.runAction(this.state.selectedAction, this.state.selectedDelay)}>Send command</Button>
+            <Button style={{ marginLeft: '5px', backgroundColor: '#527984', borderColor: '#527984' }} disabled={sendCommandDisabled} onClick={() => this.props.runAction(this.state.selectedAction, this.state.selectedDelay)}>Send command</Button>
 
           </ButtonToolbar>
         </div>;
diff --git a/src/ic/ics.js b/src/ic/ics.js
index 0d43077..2bf666f 100644
--- a/src/ic/ics.js
+++ b/src/ic/ics.js
@@ -328,7 +328,9 @@ class InfrastructureComponents extends Component {
 
   render() {
     const buttonStyle = {
-      marginLeft: '10px'
+      marginLeft: '10px',
+      backgroundColor: '#527984',
+      borderColor: '#527984'
     };
 
     return (
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index c19cfaa..3e6bf83 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -596,15 +596,23 @@ class Scenario extends React.Component {
     }
 
     const buttonStyle = {
-      marginLeft: '10px'
+      marginLeft: '10px',
+      backgroundColor: '#527984', 
+      borderColor: '#527984'
     };
 
+    const altButtonStyle = {
+      marginLeft: '10px',
+      backgroundColor: '#ffffff',
+      borderColor: 'ffffff'
+    }
+
     const tableHeadingStyle = {
       paddingTop: '30px'
     }
 
     const iconStyle = {
-      color: '#007bff',
+      color: '#527984',
       height: '25px',
       width: '25px'
     }
@@ -616,7 +624,7 @@ class Scenario extends React.Component {
     return <div className='section'>
       <div className='section-buttons-group-right'>
         <OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete files of scenario </Tooltip>} >
-          <Button key={0} variant='light' size="lg" onClick={this.onEditFiles.bind(this)} style={buttonStyle}>
+          <Button key={0} variant='light' size="lg" onClick={this.onEditFiles.bind(this)} style={altButtonStyle}>
             <Icon icon="file" style={iconStyle} />
           </Button>
         </OverlayTrigger>
@@ -785,6 +793,7 @@ class Scenario extends React.Component {
           <InputGroup.Append>
             <Button
               type="submit"
+              style={buttonStyle}
               onClick={() => this.addUser()}>
               Add User
             </Button>
diff --git a/src/scenario/scenarios.js b/src/scenario/scenarios.js
index d176d0f..64ad762 100644
--- a/src/scenario/scenarios.js
+++ b/src/scenario/scenarios.js
@@ -236,7 +236,9 @@ class Scenarios extends Component {
 
   render() {
     const buttonStyle = {
-      marginLeft: '10px'
+      marginLeft: '10px',
+      backgroundColor: '#527984', 
+      borderColor: '#527984'
     };
 
     return (
diff --git a/src/user/login-form.js b/src/user/login-form.js
index 1c2fc5e..a270977 100644
--- a/src/user/login-form.js
+++ b/src/user/login-form.js
@@ -91,7 +91,7 @@ class LoginForm extends Component {
 
         <FormGroup style={{paddingTop: 15, paddingBottom: 5}}>
           <Col>
-            <Button style={{width: 90}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
+            <Button style={{width: 90, backgroundColor: '#527984', borderColor: '#527984'}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
             <Button variant="link" size="sm" style={{marginLeft: 85}} onClick={() => this.openRecoverPassword()}>Forgot your password?</Button>
           </Col>
         </FormGroup>
diff --git a/src/user/user.js b/src/user/user.js
index 850b663..974f7f2 100644
--- a/src/user/user.js
+++ b/src/user/user.js
@@ -17,7 +17,7 @@
 
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
-import {Button, Col, Row} from 'react-bootstrap';
+import {Button, Col, Row, FormGroup, FormLabel} from 'react-bootstrap';
 
 import AppDispatcher from '../common/app-dispatcher';
 import UsersStore from './users-store';
@@ -121,6 +121,16 @@ class User extends Component {
 
 
   render() {
+    const iconStyle = {
+      color: '#527984',
+    }
+
+    const buttonStyle = {
+      margin: '10px',  
+      borderColor: '#ffffff',
+      backgroundColor: '#ffffff'
+    }
+
     return (
       <div>
         <h1>Your User Account</h1>
@@ -128,27 +138,23 @@ class User extends Component {
         {this.state.currentUser !== undefined && this.state.currentUser !== null ?
 
           <form>
+
             <Row>
-              <Col xs={3}>Username: </Col>
-              <Col xs={3}> {this.state.currentUser.username} </Col>
+              <FormGroup as={Col} sm={2} controlId="username">
+                <div style={{ alignItems: 'right' }}>Username:</div>
+                <div style={{ alignItems: 'right' }}>E-mail:</div>
+                <div style={{ alignItems: 'right' }}>Role:</div>
+              </FormGroup>
+              <FormGroup as={Col} sm={3} constrolId="whatever" >
+                <div> {this.state.currentUser.username}</div>
+                <div>{this.state.currentUser.mail}</div>
+                <div>{this.state.currentUser.role}</div>
+                <Button size='lg' style={buttonStyle} onClick={() => this.setState({ editModal: true })}><Icon size='lg' style={iconStyle} icon='edit' /> </Button>
+              </FormGroup>
             </Row>
 
-
-            <Row as={Col}>
-              <Col xs={3}>E-mail: </Col>
-              <Col xs={3}> {this.state.currentUser.mail} </Col>
-            </Row>
-
-            <Row as={Col}>
-              <Col xs={3}>Role: </Col>
-              <Col xs={3}> {this.state.currentUser.role} </Col>
-            </Row>
-
-
-            <Button onClick={() => this.setState({editModal: true})}><Icon icon='edit'/> Edit</Button>
-
             <EditOwnUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)}
-                               user={this.state.currentUser}/>
+              user={this.state.currentUser} />
 
           </form> : "Loading user data..."
         }
@@ -157,8 +163,5 @@ class User extends Component {
   }
 }
 
-
-
-
 let fluxContainerConverter = require('../common/FluxContainerConverter');
 export default Container.create(fluxContainerConverter.convert(User));
diff --git a/src/user/users.js b/src/user/users.js
index f6f03df..acde3bf 100644
--- a/src/user/users.js
+++ b/src/user/users.js
@@ -146,7 +146,7 @@ class Users extends Component {
           <TableColumn width='200' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.users[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.users[index] })} />
         </Table>
 
-        <Button onClick={() => this.setState({ newModal: true })}><Icon icon='plus' /> User</Button>
+        <Button style={{backgroundColor: '#527984', borderColor: '#527984'}} onClick={() => this.setState({ newModal: true })}><Icon icon='plus' /> User</Button>
 
         <NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
         <EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
diff --git a/src/widget/toolbox-item.js b/src/widget/toolbox-item.js
index f1ebb93..e2aa402 100644
--- a/src/widget/toolbox-item.js
+++ b/src/widget/toolbox-item.js
@@ -51,7 +51,7 @@ class ToolboxItem extends React.Component {
     if (this.props.disabled === false) {
       return this.props.connectDragSource(
         <div className={itemClass}>
-          <span className="btn " style={{marginTop: '5px', color: '#6ea2b0', borderColor: '#6ea2b0'}}>
+          <span className="btn " style={{marginTop: '5px', color: '#527984', borderColor: '#527984'}}>
             {this.props.icon && <Icon style={{marginRight: '5px'}} icon={this.props.icon} /> }
             {this.props.name}
           </span>
diff --git a/src/widget/widget-toolbox.js b/src/widget/widget-toolbox.js
index 9b057ec..a2d231a 100644
--- a/src/widget/widget-toolbox.js
+++ b/src/widget/widget-toolbox.js
@@ -96,11 +96,25 @@ class WidgetToolbox extends React.Component {
     const disableDecrease = this.disableDecrease();
     // Only one topology widget at the time is supported
     const iconStyle = {
-      color: '#007bff',
+      color: '#527984',
       height: '25px',
       width : '25px'
     }
 
+    const buttonStyle = {
+      marginRight: '3px', 
+      height: '40px', 
+      borderColor: '#527984',
+      backgroundColor: '#527984'
+    }
+
+    const altButtonStyle = {
+      marginRight: '3px',
+      height: '40px',
+      borderColor: '#ffffff',
+      backgroundColor: '#ffffff'
+    }
+
     const thereIsTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;
     const topologyItemMsg = thereIsTopologyWidget? 'Currently only one is supported' : '';
 
@@ -110,16 +124,16 @@ class WidgetToolbox extends React.Component {
 <div className='section-buttons-group-left'>
         <div>
         <OverlayTrigger key={2} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"cosmetic"}`}> Show/ hide available Cosmetic Widgets </Tooltip>} >
-        <Button variant="light" key={2} style={{ marginRight: '3px', height: '40px' }} onClick={() => this.showWidgets('cosmetic')}  >
-          <Icon icon={cosmeticIcon} style={{color: '#007bff'}}/> Cosmetic Widgets</Button>
+        <Button key={2} style={buttonStyle} onClick={() => this.showWidgets('cosmetic')}  >
+          <Icon icon={cosmeticIcon}/> Cosmetic Widgets</Button>
       </OverlayTrigger>
       <OverlayTrigger key={3} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"displaying"}`}> Show/ hide available Displaying Widgets </Tooltip>} >
-        <Button variant="light" key={3} style={{ marginRight: '3px', height: '40px' }} onClick={() => this.showWidgets('displaying')}  >
-          <Icon icon={displayingIcon} style={{color: '#007bff'}} /> Displaying Widgets</Button>
+        <Button key={3} style={buttonStyle} onClick={() => this.showWidgets('displaying')}  >
+          <Icon icon={displayingIcon}/> Displaying Widgets</Button>
       </OverlayTrigger>
       <OverlayTrigger key={4} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"manipulation"}`}> Show/ hide available Manipulation Widgets </Tooltip>} >
-        <Button variant="light" key={2} style={{ marginRight: '3px', height: '40px' }} onClick={() => this.showWidgets('manipulation')}  >
-          <Icon icon={manipulationIcon} style={{color: '#007bff'}} /> Manipulation Widgets</Button>
+        <Button key={2} style={buttonStyle} onClick={() => this.showWidgets('manipulation')}  >
+          <Icon icon={manipulationIcon}/> Manipulation Widgets</Button>
       </OverlayTrigger>
         </div>
       </div>
@@ -128,12 +142,12 @@ class WidgetToolbox extends React.Component {
           <span>Grid: { this.props.grid > 1 ? this.props.grid : 'Disabled' }</span>
           <Slider value={this.props.grid} style={{ width: '80px' }} step={5} onChange={this.onGridChange} />
           <OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"increase"}`}> Increase dashboard height </Tooltip>} >
-          <Button variant="light" key={0} style={{marginRight: '3px', height: '40px'}} onClick={() => this.props.onDashboardSizeChange(1)}  >
+          <Button variant="light" key={0} style={altButtonStyle} onClick={() => this.props.onDashboardSizeChange(1)}  >
           <Icon icon="plus" style={iconStyle}/>
           </Button>
           </OverlayTrigger>
           <OverlayTrigger key={1} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"decrease"}`}> Decrease dashboard height </Tooltip>} >
-          <Button variant="light" key={1} disabled={disableDecrease} style={{marginRight: '3px', height: '40px'}} onClick={() => this.props.onDashboardSizeChange(-1)} >
+          <Button variant="light" key={1} disabled={disableDecrease} style={altButtonStyle} onClick={() => this.props.onDashboardSizeChange(-1)} >
           <Icon icon="minus" style={iconStyle}/>
           </Button>
           </OverlayTrigger>