styling to css files

mxcube · Jun 20, 2024 · b09e93a · b09e93a
1 parent 971a432
commit b09e93a
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 31 deletions.
diff --git a/ui/src/components/DeviceState/DeviceState.jsx b/ui/src/components/DeviceState/DeviceState.jsx
@@ -13,18 +13,10 @@ export default class DeviceState extends React.Component {
 
     return (
       <div className={styles.deviceState}>
-        <Badge
-          className={styles.labelStyle}
-          bg="secondary"
-          style={{ display: 'block', marginBottom: '3px' }}
-        >
+        <Badge className={styles.labelStyle} bg="secondary">
           {this.props.labelText}
         </Badge>
-        <Badge
-          bg={msgBgStyle}
-          className={styles.msgLabelStyle}
-          style={{ marginBottom: '3px' }}
-        >
+        <Badge className={styles.msgLabelStyle} bg={msgBgStyle}>
           {this.props.data}
         </Badge>
       </div>

diff --git a/ui/src/components/DeviceState/deviceState.module.css b/ui/src/components/DeviceState/deviceState.module.css
@@ -5,16 +5,16 @@
 .labelStyle {
   overflow: hidden;
   text-overflow: ellipsis;
-
   border-radius: 0;
   display: block;
+  margin-bottom: 3px;
 }
 
 .msgLabelStyle {
   display: block;
   font-size: 100%;
   border-radius: 0;
   color: black;
-
   width: 7em;
+  margin-bottom: 3px;
 }
diff --git a/ui/src/components/InOutSwitch/InOutSwitch.jsx b/ui/src/components/InOutSwitch/InOutSwitch.jsx
@@ -50,7 +50,7 @@ export default function InOutSwitch(props) {
           overlay={optionsOverlay}
         >
           <div>
-            <Badge bg="secondary" className={styles.inOutLabel}>
+            <Badge className={styles.inOutLabel} bg="secondary">
               {labelText}
               <i className="fas fa-cog ms-2" />
             </Badge>
@@ -144,22 +144,14 @@ export default function InOutSwitch(props) {
       >
         {!isBtnLabel ? (
           <div title={value}>
-            <Badge
-              bg={msgBgStyle}
-              className={styles.msgLabelStyle}
-              style={{ marginBottom: '3px' }}
-            >
+            <Badge className={styles.msgLabelStyle} bg={msgBgStyle}>
               {value}
             </Badge>
           </div>
         ) : (
           <Button variant="outline-secondary" className={styles.switchBtn}>
             {labelText}{' '}
-            <Badge
-              className={styles.switchBdg}
-              bg={msgBgStyle}
-              style={{ marginBottom: '3px' }}
-            >
+            <Badge className={styles.switchBdg} bg={msgBgStyle}>
               {state}
             </Badge>
           </Button>

diff --git a/ui/src/components/InOutSwitch/inOutStyle.module.css b/ui/src/components/InOutSwitch/inOutStyle.module.css
@@ -15,6 +15,7 @@
 .switchBdg {
   max-width: 12em;
   vertical-align: bottom;
+  margin-bottom: 3px;
 }
 
 .switchBtn,
@@ -31,6 +32,6 @@
   font-size: 100%;
   border-radius: 0;
   color: white;
-
   width: 7em;
+  margin-bottom: 3px;
 }
diff --git a/ui/src/components/MachInfo/MachInfo.jsx b/ui/src/components/MachInfo/MachInfo.jsx
@@ -54,14 +54,10 @@ function MachInfo(props) {
   return (
     <OverlayTrigger placement="bottom" overlay={machineInfoPop}>
       <div className={styles.machineInfo}>
-        <Badge bg="secondary" className={styles.machineLabel}>
+        <Badge className={styles.machineLabel} bg="secondary">
           Ring Current
         </Badge>
-        <Badge
-          bg={variant}
-          className={styles.msgLabelStyle}
-          style={{ marginBottom: '3px' }}
-        >
+        <Badge className={styles.msgLabelStyle} bg={variant}>
           {info.current}
         </Badge>
       </div>

diff --git a/ui/src/components/MachInfo/machineInfoStyle.module.css b/ui/src/components/MachInfo/machineInfoStyle.module.css
@@ -34,9 +34,9 @@
 .msgLabelStyle {
   overflow: hidden;
   text-overflow: ellipsis;
-
   border-radius: 0%;
   display: block;
   font-size: 100%;
   color: black;
+  margin-bottom: 3px;
 }