fix(protocol-designer): widen well visual images to fix modal (#18850)

closes RQA-4340

Author: jerader

protocol-designer/src/components/organisms/TipPositionModal/TipPositionSideView.tsx

@@ -14,8 +14,8 @@ import BOTTOM_LAYER from '../../../assets/images/tip_side_bottom_layer.svg'
 import MID_LAYER from '../../../assets/images/tip_side_mid_layer.svg'
 import TOP_LAYER from '../../../assets/images/tip_side_top_layer.svg'
 
-const WELL_HEIGHT_PIXELS = 71
-const WELL_WIDTH_PIXELS = 70
+const WELL_HEIGHT_PIXELS = 78
+const WELL_WIDTH_PIXELS = 80
 const PIXEL_DECIMALS = 2
 
 interface TipPositionAllVizProps {
@@ -44,8 +44,8 @@ export function TipPositionSideView(
   return (
     <Box
       position={POSITION_RELATIVE}
-      width="15.8125rem"
-      height="18rem"
+      width="20.75rem"
+      height="22.75rem"
       overflow={OVERFLOW_HIDDEN}
     >
       <img
@@ -58,7 +58,7 @@ export function TipPositionSideView(
         style={{
           position: POSITION_ABSOLUTE,
           transform: `translate(${roundedXPositionPixels}px)`,
-          bottom: `calc(${bottomPx}px + 33px)`,
+          bottom: `calc(${bottomPx}px + 10px)`,
         }}
         alt="mid layer"
       />
@@ -68,15 +68,15 @@ export function TipPositionSideView(
         alt="top layer"
       />
       {wellDepthMm !== null && (
-        <Box position={POSITION_ABSOLUTE} bottom="7.3rem" right="2rem">
+        <Box position={POSITION_ABSOLUTE} top="12.5rem" right="3.5rem">
           <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
             {round(wellDepthMm, 0)}
             {t('units.millimeter')}
           </StyledText>
         </Box>
       )}
       {xWidthMm !== null && (
-        <Box position={POSITION_ABSOLUTE} bottom="2rem" right="7rem">
+        <Box position={POSITION_ABSOLUTE} bottom="2rem" right="9.6rem">
           <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
             {xWidthMm}
             {t('units.millimeter')}

protocol-designer/src/components/organisms/TipPositionModal/TipPositionTopView.tsx

@@ -14,7 +14,7 @@ import BOTTOM_LAYER from '../../../assets/images/tip_top_bottom_layer.svg'
 import MID_LAYER from '../../../assets/images/tip_top_mid_layer.svg'
 import TOP_LAYER from '../../../assets/images/tip_top_top_layer.svg'
 
-const WELL_WIDTH_PIXELS = 70
+const WELL_WIDTH_PIXELS = 110
 const PIXEL_DECIMALS = 2
 
 interface TipPositionAllVizProps {
@@ -37,8 +37,8 @@ export function TipPositionTopView(props: TipPositionAllVizProps): JSX.Element {
   return (
     <Box
       position={POSITION_RELATIVE}
-      width="15.8125rem"
-      height="18rem"
+      width="20.75rem"
+      height="22.75rem"
       overflow={OVERFLOW_HIDDEN}
     >
       <img
@@ -60,7 +60,7 @@ export function TipPositionTopView(props: TipPositionAllVizProps): JSX.Element {
         alt="top layer"
       />
       {xWidthMm !== null && (
-        <Box position={POSITION_ABSOLUTE} bottom="2rem" right="7rem">
+        <Box position={POSITION_ABSOLUTE} bottom="3.5rem" right="9.2rem">
           <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
             {xWidthMm}
             {t('units.millimeter')}

protocol-designer/src/components/organisms/TipPositionModal/index.tsx

@@ -6,6 +6,7 @@ import {
   ALIGN_CENTER,
   Banner,
   Btn,
+  COLORS,
   DIRECTION_COLUMN,
   Flex,
   InputField,
@@ -408,6 +409,7 @@ export function TipPositionModal(
                 {t(`modal:tip_position.view.${view}`)}
               </StyledText>
               <Btn
+                color={COLORS.grey60}
                 fontWeight={TYPOGRAPHY.fontWeightSemiBold}
                 css={LINK_BUTTON_STYLE}
                 onClick={() => {