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,11 +31,24 @@ const BriefNetworkInterface: FC<
       networkInterface: NetworkInterfaceOverviewMetadata;
     }
 > = ({
+  isFloating,
   networkInterface: { networkInterfaceName, networkInterfaceState },
   onClose,
   sx: rootSx,
   ...restRootProps
-}) => (
+}) => {
+  const draggingSx: MUIBoxProps['sx'] = isFloating
+    ? {
+        borderColor: GREY,
+        borderRadius: BORDER_RADIUS,
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        backgroundColor: BLACK,
+        padding: '.6em 1.2em',
+      }
+    : {};
+
+  return (
     <MUIBox
       {...{
         sx: {
@@ -45,6 +60,7 @@ const BriefNetworkInterface: FC<
             marginLeft: '.5em',
           },
 
+          ...draggingSx,
           ...rootSx,
         },
 
@@ -62,7 +78,8 @@ const BriefNetworkInterface: FC<
         </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)`,
-          zIndex: 10,
+          top: `calc(${dragMousePosition.y}px - 1.6em)`,
+          zIndex: 20,
         }}
       />
     );
@@ -382,7 +386,7 @@ const NetworkInitForm: FC = () => {
       onMouseLeave={handleDragAreaMouseLeave}
       onMouseMove={handleDragAreaMouseMove}
       onMouseUp={handleDragAreaMouseUp}
-      sx={{ position: 'relative' }}
+      sx={{ position: 'relative', ...dragAreaDraggingSx }}
     >
       {floatingNetworkInterface}
       <MUIBox