fix(striker-ui): make floating NIC more visible

striker-ui/components/BriefNetworkInterface.tsx

@@ -7,12 +7,13 @@ import {
 } from '@mui/material';
 import { Close as MUICloseIcon } from '@mui/icons-material';
 
-import { GREY } from '../lib/consts/DEFAULT_THEME';
+import { BLACK, BORDER_RADIUS, GREY } from '../lib/consts/DEFAULT_THEME';
 
 import Decorator from './Decorator';
 import { BodyText } from './Text';
 
 type BriefNetworkInterfaceOptionalProps = {
+  isFloating?: boolean;
   onClose?: MUIIconButtonProps['onClick'];
 };
 
@@ -20,6 +21,7 @@ const BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS: Required<
   Omit<BriefNetworkInterfaceOptionalProps, 'onClose'>
 > &
   Pick<BriefNetworkInterfaceOptionalProps, 'onClose'> = {
+  isFloating: false,
   onClose: undefined,
 };
 
@@ -29,40 +31,55 @@ const BriefNetworkInterface: FC<
       networkInterface: NetworkInterfaceOverviewMetadata;
     }
 > = ({
+  isFloating,
   networkInterface: { networkInterfaceName, networkInterfaceState },
   onClose,
   sx: rootSx,
   ...restRootProps
-}) => (
+}) => {
-  <MUIBox
+  const draggingSx: MUIBoxProps['sx'] = isFloating
-    {...{
+    ? {
-      sx: {
+        borderColor: GREY,
-        display: 'flex',
+        borderRadius: BORDER_RADIUS,
-        flexDirection: 'row',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        backgroundColor: BLACK,
+        padding: '.6em 1.2em',
+      }
+    : {};
 
-        '& > :not(:first-child)': {
+  return (
-          alignSelf: 'center',
+    <MUIBox
-          marginLeft: '.5em',
+      {...{
+        sx: {
+          display: 'flex',
+          flexDirection: 'row',
+
+          '& > :not(:first-child)': {
+            alignSelf: 'center',
+            marginLeft: '.5em',
+          },
+
+          ...draggingSx,
+          ...rootSx,
         },
 
-        ...rootSx,
+        ...restRootProps,
-      },
+      }}
-
+    >
-      ...restRootProps,
+      <Decorator
-    }}
+        colour={networkInterfaceState === 'up' ? 'ok' : 'off'}
-  >
+        sx={{ height: 'auto' }}
-    <Decorator
+      />
-      colour={networkInterfaceState === 'up' ? 'ok' : 'off'}
+      <BodyText text={networkInterfaceName} />
-      sx={{ height: 'auto' }}
+      {onClose && (
-    />
+        <MUIIconButton onClick={onClose} size="small" sx={{ color: GREY }}>
-    <BodyText text={networkInterfaceName} />
+          <MUICloseIcon />
-    {onClose && (
+        </MUIIconButton>
-      <MUIIconButton onClick={onClose} size="small" sx={{ color: GREY }}>
+      )}
-        <MUICloseIcon />
+    </MUIBox>
-      </MUIIconButton>
+  );
-    )}
+};
-  </MUIBox>
-);
 
 BriefNetworkInterface.defaultProps = BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS;
 

striker-ui/components/NetworkInitForm.tsx

@@ -287,6 +287,7 @@ const NetworkInitForm: FC = () => {
     interfaces: (NetworkInterfaceOverviewMetadata | undefined)[],
     interfaceIndex: number,
   ) => MUIBoxProps['onMouseUp'];
+  let dragAreaDraggingSx: MUIBoxProps['sx'] = {};
   let floatingNetworkInterface: JSX.Element = <></>;
   let handleDragAreaMouseLeave: MUIBoxProps['onMouseLeave'];
   let handleDragAreaMouseMove: MUIBoxProps['onMouseMove'];
@@ -316,14 +317,17 @@ const NetworkInitForm: FC = () => {
         networkInterfaceInputMap[networkInterfaceUUID].isApplied = true;
       };
 
+    dragAreaDraggingSx = { cursor: 'grabbing' };
+
     floatingNetworkInterface = (
       <BriefNetworkInterface
+        isFloating
         networkInterface={networkInterfaceHeld}
         sx={{
           left: `calc(${dragMousePosition.x}px + .4em)`,
           position: 'absolute',
-          top: `calc(${dragMousePosition.y}px - 1em)`,
+          top: `calc(${dragMousePosition.y}px - 1.6em)`,
-          zIndex: 10,
+          zIndex: 20,
         }}
       />
     );
@@ -382,7 +386,7 @@ const NetworkInitForm: FC = () => {
       onMouseLeave={handleDragAreaMouseLeave}
       onMouseMove={handleDragAreaMouseMove}
       onMouseUp={handleDragAreaMouseUp}
-      sx={{ position: 'relative' }}
+      sx={{ position: 'relative', ...dragAreaDraggingSx }}
     >
       {floatingNetworkInterface}
       <MUIBox