#442 feat: Remove unusual material UI theme references

MetaCell · Dec 12, 2022 · 946edc9 · 946edc9
1 parent 37277c1
commit 946edc9
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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,14 +140,18 @@ class CameraControls extends Component {
         icon: null,
       });
     }
+
+    const buttonStyles = { color: '#fc6320', }
+
     return (
       <div className="position-toolbar">
         {buttons.map((value, index) => (
           <IconButtonWithTooltip
             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);
+export default CameraControls;
diff --git 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 ? (
       <IconButtonWithTooltip
         disabled={false}
         onClick={this.handleClickRecord}
-        className={`${classes.button} start squareB`}
+        className={`start squareB`}
+        style={buttonStyles}
         tooltip={"Start Recording"}
         icon={faDotCircle}
       />
@@ -65,7 +64,8 @@ class CaptureControls extends Component {
         <IconButtonWithTooltip
           disabled={false}
           onClick={this.handleClickRecord}
-          className={`${classes.button} stop squareB`}
+          className={`stop squareB`}
+          style={buttonStyles}
           tooltip={"Stop recording"}
           icon={faStop}
         />
@@ -78,14 +78,16 @@ class CaptureControls extends Component {
         && <IconButtonWithTooltip
           disabled={false}
           onClick={() => captureControlsHandler(captureControlsActionsDownloadVideo())}
-          className={`${classes.button} download squareB`}
+          className={`download squareB`}
+          style={buttonStyles}
           tooltip={"Download"}
           icon={faDownload}/>
         }
         <IconButtonWithTooltip
           disabled={false}
           onClick={() => captureControlsHandler(captureControlsActionsDownloadScreenshot())}
-          className={`${classes.button} screenshot squareB`}
+          className={`screenshot squareB`}
+          style={buttonStyles}
           tooltip={"Screenshot"}
           icon={faCamera}/>
       </div>
@@ -103,4 +105,4 @@ CaptureControls.propTypes = {
 
 };
 
-export default withStyles(styles)(CaptureControls);
+export default CaptureControls;
diff --git 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 (
-      <div>
-        <Toolbar className={classes.toolbar}>
-          <div className={classes.toolbarBox}>
+      <div style={cStyles}>
+        <Toolbar className={tbClassName}>
+          <div style={dStyles}>
             {customButtons.map(customButton =>
               <IconButtonWithTooltip
                 key={customButton.id}
                 disabled={false}
                 onClick={() => 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
@@ -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
@@ -8,7 +8,7 @@ const styles = theme => ({
   button: {
     padding: theme.spacing(1),
     top: theme.spacing(0),
-    color: theme.palette.button.main
+    color: '#fc6320'
   },
 });