fix(protocol-designer): fix liquids button in deck setup (#16380)

* fix(protocol-designer): fix liquids button in deck setup
Opentrons · Oct 1, 2024 · 3300cb1 · 3300cb1
1 parent d9655d6
commit 3300cb1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/components/src/icons/icon-data.ts b/components/src/icons/icon-data.ts
@@ -761,6 +761,11 @@ export const ICON_DATA_BY_NAME = {
       'M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z',
     viewBox: '0 0 24 24',
   },
+  'water-drop': {
+    path:
+      'M12 22C9.72 22 7.81 21.22 6.29 19.65C4.76 18.08 4 16.13 4 13.8C4 12.13 4.66 10.32 5.99 8.36C7.32 6.4 9.32 4.28 12 2C14.68 4.28 16.69 6.4 18.01 8.36C19.33 10.32 20 12.13 20 13.8C20 16.13 19.24 18.08 17.71 19.65C16.18 21.22 14.28 22 12 22ZM12 20C13.73 20 15.17 19.41 16.3 18.24C17.43 17.07 18 15.59 18 13.8C18 12.58 17.5 11.21 16.49 9.67C15.48 8.14 13.99 6.46 12 4.64C10.02 6.46 8.52 8.13 7.51 9.67C6.5 11.2 6 12.58 6 13.8C6 15.58 6.57 17.06 7.7 18.24C8.83 19.42 10.27 20 12 20Z M8.55 11.42C7.95 12.38 7.63 13.29 7.63 14.12C7.63 15.4 8.05 16.46 8.88 17.32C9.71 18.18 10.75 18.6 12 18.6C13.25 18.6 14.29 18.17 15.12 17.32C15.95 16.46 16.37 15.4 16.37 14.12C16.37 13.29 16.05 12.39 15.45 11.42H8.55Z',
+    viewBox: '0 0 24 24',
+  },
   wifi: {
     path:
       'M3.16848 9.22683C4.91915 7.43693 7.33915 6.33359 9.99973 6.33359C12.6604 6.33359 15.0804 7.43697 16.8311 9.22693L17.9996 8.03818C15.9522 5.95529 13.1239 4.66699 9.99973 4.66699C6.87563 4.66699 4.0473 5.95525 2 8.03809L3.16848 9.22683ZM6.1685 12.2783C7.15141 11.2696 8.51069 10.6495 9.99953 10.6495C11.4886 10.6495 12.848 11.2698 13.8309 12.2787L14.9994 11.0899C13.7199 9.78811 11.9521 8.98291 9.99953 8.98291C8.04712 8.98291 6.27954 9.78795 5 11.0895L6.1685 12.2783ZM10.0002 14.9654C9.6831 14.9654 9.38403 15.1024 9.16876 15.3306L8.00012 14.1417C8.51196 13.6209 9.2191 13.2988 10.0002 13.2988C10.7811 13.2988 11.4881 13.6208 11.9999 14.1414L10.8313 15.3303C10.6161 15.1023 10.3171 14.9654 10.0002 14.9654Z',

diff --git a/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx b/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx
@@ -77,14 +77,14 @@ describe('Designer', () => {
     screen.getByText('Edit protocol')
     screen.getByText('Protocol steps')
     screen.getByText('Protocol starting deck')
-    screen.getByText('Liquids')
+    screen.getByTestId('water-drop')
     fireEvent.click(screen.getByRole('button', { name: 'Done' }))
     expect(mockNavigate).toHaveBeenCalledWith('/overview')
   })
 
   it('renders the liquids button overflow menu', () => {
     render()
-    fireEvent.click(screen.getByText('Liquids'))
+    fireEvent.click(screen.getByTestId('water-drop'))
     screen.getByText('mock LiquidsOverflowMenu')
   })
 

diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx
@@ -5,16 +5,15 @@ import { useNavigate } from 'react-router-dom'
 import {
   ALIGN_CENTER,
   ALIGN_END,
+  Btn,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
   INFO_TOAST,
   Icon,
   JUSTIFY_SPACE_BETWEEN,
-  PrimaryButton,
   SPACING,
   SecondaryButton,
-  StyledText,
   Tabs,
   ToggleGroup,
   useOnClickOutside,
@@ -169,18 +168,15 @@ export function Designer(): JSX.Element {
           <ProtocolMetadataNav />
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
             <SettingsIcon />
-            <PrimaryButton
+
+            <Btn
+              alignItems={ALIGN_CENTER}
               onClick={() => {
                 showLiquidOverflowMenu(true)
               }}
             >
-              <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
-                <Icon size="1rem" name="liquid" />
-                <StyledText desktopStyle="bodyDefaultRegular">
-                  {t('liquids')}
-                </StyledText>
-              </Flex>
-            </PrimaryButton>
+              <Icon size="1.5rem" name="water-drop" data-testid="water-drop" />
+            </Btn>
             <SecondaryButton
               onClick={() => {
                 if (hasTrashEntity) {