From 946edc9736d147cc339777be1de5f8e967ad593f Mon Sep 17 00:00:00 2001 From: afonso Date: Mon, 12 Dec 2022 17:38:39 +0000 Subject: [PATCH] #442 feat: Remove unusual material UI theme references --- geppetto-showcase/src/App.js | 2 -- .../src/components/showcase/Code.jsx | 2 +- .../src/camera-controls/CameraControls.js | 11 ++++---- .../src/capture-controls/CaptureControls.js | 20 ++++++++------- .../geppetto-ui/src/common/CustomToolbar.js | 25 +++++++++++-------- .../subcomponents/ConnectivityDeck.js | 8 +++--- .../subcomponents/MenuButton.js | 2 +- 7 files changed, 37 insertions(+), 33 deletions(-) diff --git a/geppetto-showcase/src/App.js b/geppetto-showcase/src/App.js index 1dec4f9d5..b6ed810e2 100644 --- a/geppetto-showcase/src/App.js +++ b/geppetto-showcase/src/App.js @@ -22,8 +22,6 @@ export default class App extends Component { type: 'dark', primary: { main: orange[500] }, secondary: { main: blue[500] }, - button: { main: '#fc6320' }, - toolbarBackground: { main: 'rgb(0,0,0,0.5)' }, }, }); theme = responsiveFontSizes(theme); diff --git a/geppetto-showcase/src/components/showcase/Code.jsx b/geppetto-showcase/src/components/showcase/Code.jsx index 5abe963a4..d9a68f1bd 100644 --- a/geppetto-showcase/src/components/showcase/Code.jsx +++ b/geppetto-showcase/src/components/showcase/Code.jsx @@ -15,7 +15,7 @@ const styles = theme => ({ button: { padding: theme.spacing(1), top: theme.spacing(0), - color: theme.palette.button.main, + color: '#fc6320', }, code: { paddingTop: theme.spacing(0), diff --git a/geppetto.js/geppetto-ui/src/camera-controls/CameraControls.js b/geppetto.js/geppetto-ui/src/camera-controls/CameraControls.js index e7645036e..89c068f91 100644 --- a/geppetto.js/geppetto-ui/src/camera-controls/CameraControls.js +++ b/geppetto.js/geppetto-ui/src/camera-controls/CameraControls.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import IconButtonWithTooltip from '../common/IconButtonWithTooltip'; -import { withStyles } from '@material-ui/core'; import { faChevronLeft, faChevronUp, @@ -35,7 +34,6 @@ export const cameraControlsActions = { WIREFRAME: 'wireframe', }; -const styles = theme => ({ button: { color: theme.palette.button.main, }, }); class CameraControls extends Component { constructor (props) { @@ -44,7 +42,6 @@ class CameraControls extends Component { render () { const { - classes, cameraControlsHandler, wireframeButtonEnabled, } = this.props; @@ -143,6 +140,9 @@ class CameraControls extends Component { icon: null, }); } + + const buttonStyles = { color: '#fc6320', } + return (
{buttons.map((value, index) => ( @@ -150,7 +150,8 @@ class CameraControls extends Component { key={index} disabled={false} onClick={() => cameraControlsHandler(value.action)} - className={`${classes.button} ${value.className} squareB`} + className={`${value.className} squareB`} + style={buttonStyles} tooltip={value.tooltip} icon={value.icon} /> @@ -174,4 +175,4 @@ CameraControls.propTypes = { wireframeButtonEnabled: PropTypes.bool, }; -export default withStyles(styles)(CameraControls); \ No newline at end of file +export default CameraControls; \ No newline at end of file diff --git a/geppetto.js/geppetto-ui/src/capture-controls/CaptureControls.js b/geppetto.js/geppetto-ui/src/capture-controls/CaptureControls.js index 0148e8dc8..dcd96501c 100644 --- a/geppetto.js/geppetto-ui/src/capture-controls/CaptureControls.js +++ b/geppetto.js/geppetto-ui/src/capture-controls/CaptureControls.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import IconButtonWithTooltip from '../common/IconButtonWithTooltip'; -import { withStyles } from '@material-ui/core'; import { faCamera, faDotCircle, faDownload, faStop } from '@fortawesome/free-solid-svg-icons'; import './CaptureControls.less'; @@ -29,8 +28,6 @@ export const captureControlsActionsDownloadScreenshot = (filename => ({ })); -const styles = theme => ({ button: { color: theme.palette.button.main, }, }); - class CaptureControls extends Component { constructor (props) { super(props); @@ -49,14 +46,16 @@ class CaptureControls extends Component { } render () { - const { classes, captureControlsHandler } = this.props; + const { captureControlsHandler } = this.props; const { isRecording, hasRecorded } = this.state; + const buttonStyles = { color: '#fc6320', } const recordButton = !isRecording ? ( @@ -65,7 +64,8 @@ class CaptureControls extends Component { @@ -78,14 +78,16 @@ class CaptureControls extends Component { && captureControlsHandler(captureControlsActionsDownloadVideo())} - className={`${classes.button} download squareB`} + className={`download squareB`} + style={buttonStyles} tooltip={"Download"} icon={faDownload}/> } captureControlsHandler(captureControlsActionsDownloadScreenshot())} - className={`${classes.button} screenshot squareB`} + className={`screenshot squareB`} + style={buttonStyles} tooltip={"Screenshot"} icon={faCamera}/>
@@ -103,4 +105,4 @@ CaptureControls.propTypes = { }; -export default withStyles(styles)(CaptureControls); \ No newline at end of file +export default CaptureControls; \ No newline at end of file diff --git a/geppetto.js/geppetto-ui/src/common/CustomToolbar.js b/geppetto.js/geppetto-ui/src/common/CustomToolbar.js index d781eaa72..e08a0e698 100644 --- a/geppetto.js/geppetto-ui/src/common/CustomToolbar.js +++ b/geppetto.js/geppetto-ui/src/common/CustomToolbar.js @@ -7,13 +7,7 @@ const styles = theme => ({ toolbar: { padding: theme.spacing(0), marginLeft: theme.spacing(1) - }, - button: { - padding: theme.spacing(1), - top: theme.spacing(0), - color: theme.palette.button.main - }, - toolbarBox: { backgroundColor: theme.palette.toolbarBackground.main }, + } }); @@ -23,19 +17,28 @@ class CustomToolbar extends Component { } render () { - const { classes, buttons, elements } = this.props; + const { classes, theme, buttons, elements, containerStyles, toolBarClassName, innerDivStyles, buttonStyles } = this.props; const customButtons = buttons ? buttons : []; const customElements = elements ? elements : []; + const cStyles = containerStyles != null ? containerStyles : {} + const tbClassName = toolBarClassName != null ? toolBarClassName : classes.toolbar + const dStyles = innerDivStyles != null ? innerDivStyles : { backgroundColor: 'rgb(0,0,0,0.5)' } + const bStyles = buttonStyles != null ? buttonStyles : { + padding: theme.spacing(1), + top: theme.spacing(0), + color: '#fc6320' + } return ( -
- -
+
+ +
{customButtons.map(customButton => customButton.action()} className={classes.button} + style={bStyles} tooltip={customButton.tooltip} icon={customButton.icon} /> diff --git a/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityDeck.js b/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityDeck.js index 15cfa0858..44bafc68f 100644 --- a/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityDeck.js +++ b/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/ConnectivityDeck.js @@ -27,7 +27,7 @@ const styles = theme => ({ fontSize:"40px", fontWeight: "300", marginTop: theme.spacing(10), - color: theme.palette.button.main, + color: '#fc6320', textAlign: "center" }, cardDeck:{ @@ -49,7 +49,7 @@ const styles = theme => ({ verticalAlign: "top", "&:hover":{ border:"1px solid", - borderColor:theme.palette.button.main + borderColor:'#fc6320' } }, img: { @@ -58,7 +58,7 @@ const styles = theme => ({ width: '100px', }, cardText: { textAlign: 'center', color: "white" }, - cardTitle: { marginTop: theme.spacing(1), color: theme.palette.button.main, marginBottom:"0.5em" }, + cardTitle: { marginTop: theme.spacing(1), color: '#fc6320', marginBottom:"0.5em" }, cardAction: { height: "100%" }, cardImgTopCenterBlock:{ display: "block", @@ -70,7 +70,7 @@ const styles = theme => ({ button: { padding: theme.spacing(1), top: theme.spacing(0), - color: theme.palette.button.main + color: '#fc6320' }, }); diff --git a/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/MenuButton.js b/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/MenuButton.js index 7e0bd1b10..4604d7c2c 100644 --- a/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/MenuButton.js +++ b/geppetto.js/geppetto-ui/src/connectivity-viewer/subcomponents/MenuButton.js @@ -8,7 +8,7 @@ const styles = theme => ({ button: { padding: theme.spacing(1), top: theme.spacing(0), - color: theme.palette.button.main + color: '#fc6320' }, });