frontend styling

frontend/src/App.css

@@ -5,11 +5,6 @@ body {
 input.instantUpdate {
   background-color: rgba(255, 0, 0, 0.1);
 }
-
-.numberComponentButton {
-  padding: 0.15em 6px !important;
-  font-size: 0.7rem !important;
-}
 .navbarOffset {
   padding-top: 60px !important;
 }
@@ -28,38 +23,30 @@ input.instantUpdate {
 .criticalToast {
   background-color: rgba(216, 41, 18, 0.678) !important;
 }
-.buttonComponent {
+.component {
+  position: relative;
   float: left !important;
-  margin-right: 10px !important;
-}
-.stringComponent {
-  float: left !important;
-  margin-right: 10px !important;
-}
-.numberComponent {
-  float: left !important;
-  margin-right: 10px !important;
-  width: 270px !important;
+  padding: 5px !important;
+  z-index: 1;
 }
 .dataServiceComponent {
-  position: relative;
-  z-index: 1;
+  width: 100%;
 }
 .deviceConnectionComponent {
   position: relative;
+  float: left !important;
+  width: 100%;
   z-index: 1;
 }
 .overlayContent {
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(128, 128, 128, 0.5);
+  inset: 5px; /* (see https://developer.mozilla.org/en-US/docs/Web/CSS/inset) */
+  background: rgba(155, 155, 155, 0.75);
   z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column; /* Stack children vertically */
   border-radius: var(--bs-card-inner-border-radius);
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent)
 }

frontend/src/components/AsyncMethodComponent.tsx

@@ -98,7 +98,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   });
 
   return (
-    <div className="align-items-center asyncMethodComponent" id={id}>
+    <div className="component asyncMethodComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}

frontend/src/components/ButtonComponent.tsx

@@ -43,7 +43,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   };
 
   return (
-    <div className={'buttonComponent'} id={id}>
+    <div className={'component buttonComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}

frontend/src/components/ColouredEnumComponent.tsx

@@ -49,7 +49,7 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
   };
 
   return (
-    <div className={'enumComponent'} id={id}>
+    <div className={'component enumComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}

frontend/src/components/DataServiceComponent.tsx

@@ -40,8 +40,8 @@ export const DataServiceComponent = React.memo(
     }
 
     return (
-      <div className="dataServiceComponent" id={id}>
-        <Card className="mb-3">
+      <div className="component dataServiceComponent" id={id}>
+        <Card>
           <Card.Header
             onClick={() => setOpen(!open)}
             style={{ cursor: 'pointer' }} // Change cursor style on hover

frontend/src/components/DeviceConnection.tsx

@@ -40,10 +40,10 @@ export const DeviceConnectionComponent = React.memo(
     }
 
     return (
-      <div className={`deviceConnectionComponent ${displayName}`} id={id}>
+      <div className="deviceConnectionComponent" id={id}>
         {!availableVal && (
           <div className="overlayContent">
-            <div>This device is currently not available!</div>
+            <div>{displayName} is currently not available!</div>
             <MethodComponent
               name="connect"
               parentPath={fullAccessPath}

frontend/src/components/EnumComponent.tsx

@@ -48,7 +48,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
   };
 
   return (
-    <div className={'enumComponent'} id={id}>
+    <div className={'component enumComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}

frontend/src/components/ImageComponent.tsx

@@ -39,7 +39,7 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
   }, [props.value]);
 
   return (
-    <div className={'imageComponent'} id={id}>
+    <div className="component imageComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}

frontend/src/components/MethodComponent.tsx

@@ -83,7 +83,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
   });
 
   return (
-    <div className="align-items-center methodComponent" id={id}>
+    <div className="component methodComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}

frontend/src/components/NumberComponent.tsx

@@ -309,7 +309,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   };
 
   return (
-    <div className="numberComponent" id={id}>
+    <div className="component numberComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}

frontend/src/components/SliderComponent.tsx

@@ -100,7 +100,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   const [stepSizeMagnitude, stepSizeReadOnly] = deconstructNumberDict(stepSize);
 
   return (
-    <div className="sliderComponent" id={id}>
+    <div className="component sliderComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}

frontend/src/components/StringComponent.tsx

@@ -66,7 +66,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   };
 
   return (
-    <div className={'stringComponent'} id={id}>
+    <div className="component stringComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}