refactor conditional styling

Opentrons · Jul 11, 2022 · 0f39146 · 0f39146
1 parent 6dacfb6
commit 0f39146
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/protocol-designer/src/components/ColorPicker/ColorPicker.css b/protocol-designer/src/components/ColorPicker/ColorPicker.css
@@ -3,7 +3,8 @@
   cursor: pointer;
 }
 
-.swatch:hover {
+.swatch:hover,
+.swatch_enabled {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.41);
 }
 

diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import cx from 'classnames'
 import { ColorResult, TwitterPicker } from 'react-color'
 import { COLORS } from '@opentrons/components'
 
@@ -15,10 +16,9 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element {
   return (
     <div>
       <div
-        className={styles.swatch}
-        style={
-          showColorPicker ? { boxShadow: '0 2px 4px rgba(0, 0, 0, 0.41)' } : {}
-        }
+        className={cx(styles.swatch, {
+          [styles.swatch_enabled]: showColorPicker,
+        })}
         onClick={() => setShowColorPicker(showColorPicker => !showColorPicker)}
       >
         <div