refactor: adjust styling of conversion field in reaction scheme

ComPlat · Nov 6, 2024 · a11b53b · a11b53b
1 parent e8622cc
commit a11b53b
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 28 deletions.
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -513,24 +513,6 @@ export default class ReactionDetails extends Component {
   render() {
     const { reaction, visible, activeTab } = this.state;
     this.updateReactionVesselSize(reaction);
-    const schemeTitle = reaction && activeTab === 'scheme' ? (
-      <div style={{ display: 'flex' }}>
-        <div style={{ paddingRight: '2px' }}>
-          <ToggleButton
-            isToggledInitial={reaction.gaseous}
-            onToggle={this.handleGaseousChange}
-            onLabel="Gas Scheme"
-            offLabel="Default Scheme"
-            onColor="#afcfee"
-            offColor="#d3d3d3"
-            tooltipOn="Click to enable Default mode"
-            tooltipOff="Click to enable Gas mode"
-            fontSize="14px"
-            fontWeight="normal"
-          />
-        </div>
-      </div>
-    ) : 'Scheme';
     const tabContentsMap = {
       scheme: (
         <Tab eventKey="scheme" title="Scheme" key={`scheme_${reaction.id}`}>

diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
@@ -273,6 +273,7 @@ class Material extends Component {
           unit="%"
           disabled={!permitOn(reaction)}
           onChange={(e) => this.handleConversionRateChange(e)}
+          size="sm"
         />
       </div>
     );
@@ -287,7 +288,7 @@ class Material extends Component {
             name="yield"
             type="text"
             bsClass="bs-form--compact form-control"
-            bsSize="small"
+            size="sm"
             value={this.calculateYield(material, reaction) || 'n.d.'}
             disabled
           />

diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
@@ -179,8 +179,8 @@ function GeneralMaterialGroup({
           offColor="transparent"
           tooltipOn={conversionText}
           tooltipOff={yieldText}
-          fontSize="14px"
-          fontWeight="bold"
+          fontType="fw-bold"
+          fontColor="text-dark"
         />
       </div>
     );

diff --git a/app/packs/src/components/common/ToggleButton.js b/app/packs/src/components/common/ToggleButton.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 export default function ToggleButton({
   isToggledInitial, onToggle, onChange, onLabel, offLabel,
-  onColor, offColor, tooltipOn, tooltipOff, fontSize, fontWeight
+  onColor, offColor, tooltipOn, tooltipOff, fontType, fontColor
 }) {
   const [isToggled, setIsToggled] = useState(isToggledInitial);
 
@@ -28,9 +28,9 @@ export default function ToggleButton({
         className={`toggle-button ${isToggled ? 'on' : 'off'}`}
         size="xs"
         onClick={handleChange}
-        style={{ backgroundColor: buttonColor, minWidth: '50px', border: 'none' }}
+        style={{ backgroundColor: buttonColor, border: 'none', padding: '0px 0px 0px 0px' }}
       >
-        <span className="fs-6">
+        <span className={`fs-6 ${fontType} ${fontColor}`}>
           {isToggled ? onLabel : offLabel}
         </span>
       </Button>
@@ -48,8 +48,8 @@ ToggleButton.propTypes = {
   offColor: PropTypes.string,
   tooltipOn: PropTypes.string,
   tooltipOff: PropTypes.string,
-  fontWeight: PropTypes.string,
-  fontSize: PropTypes.string,
+  fontType: PropTypes.string,
+  fontColor: PropTypes.string,
 };
 
 ToggleButton.defaultProps = {
@@ -61,6 +61,6 @@ ToggleButton.defaultProps = {
   offColor: '#d3d3d3',
   tooltipOn: 'Click to switch off',
   tooltipOff: 'Click to switch on',
-  fontWeight: 'normal',
-  fontSize: '1em',
+  fontType: 'normal',
+  fontColor: '1em',
 };