Improves style panel, simplifies color component

components/shared.tsx

@@ -222,11 +222,6 @@ export const Item = styled('button', {
 
   '&:hover:not(:disabled)': {
     backgroundColor: '$hover',
-    '& svg': {
-      stroke: '$text',
-      fill: '$text',
-      strokeWidth: '0',
-    },
   },
 
   '&:disabled': {

components/style-panel/color-content.tsx

@@ -1,39 +0,0 @@
-import { IconButton } from 'components/shared'
-import { strokes } from 'state/shape-styles'
-import { ColorStyle } from 'types'
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
-import { Square } from 'react-feather'
-import { DropdownContent } from '../shared'
-import { memo } from 'react'
-import state from 'state'
-import useTheme from 'hooks/useTheme'
-
-function handleColorChange(color: ColorStyle): void {
-  state.send('CHANGED_STYLE', { color })
-}
-
-function ColorContent({ color }: { color: ColorStyle }): JSX.Element {
-  const { theme } = useTheme()
-
-  return (
-    <DropdownMenu.DropdownMenuRadioGroup
-      value={color}
-      as={DropdownContent}
-      onValueChange={handleColorChange}
-      sideOffset={8}
-    >
-      {Object.keys(strokes[theme]).map((colorStyle: ColorStyle) => (
-        <DropdownMenu.DropdownMenuRadioItem
-          as={IconButton}
-          key={colorStyle}
-          title={colorStyle}
-          value={colorStyle}
-        >
-          <Square fill={strokes[theme][colorStyle]} stroke="none" size="22" />
-        </DropdownMenu.DropdownMenuRadioItem>
-      ))}
-    </DropdownMenu.DropdownMenuRadioGroup>
-  )
-}
-
-export default memo(ColorContent)

components/style-panel/quick-color-select.tsx

@@ -2,10 +2,14 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { breakpoints, IconButton } from 'components/shared'
 import Tooltip from 'components/tooltip'
 import { strokes } from 'state/shape-styles'
-import { useSelector } from 'state'
-import ColorContent from './color-content'
-import { BoxIcon } from '../shared'
+import state, { useSelector } from 'state'
+import { BoxIcon, Item, DropdownContent } from '../shared'
 import useTheme from 'hooks/useTheme'
+import { ColorStyle } from 'types'
+
+function handleColorChange(color: ColorStyle): void {
+  state.send('CHANGED_STYLE', { color })
+}
 
 export default function QuickColorSelect(): JSX.Element {
   const color = useSelector((s) => s.values.selectedStyle.color)
@@ -21,7 +25,27 @@ export default function QuickColorSelect(): JSX.Element {
           />
         </Tooltip>
       </DropdownMenu.Trigger>
-      <ColorContent color={color} />
+
+      <DropdownMenu.DropdownMenuRadioGroup
+        value={color}
+        as={DropdownContent}
+        onValueChange={handleColorChange}
+        sideOffset={8}
+      >
+        {Object.keys(strokes[theme]).map((colorStyle: ColorStyle) => (
+          <DropdownMenu.DropdownMenuRadioItem
+            as={Item}
+            key={colorStyle}
+            title={colorStyle}
+            value={colorStyle}
+          >
+            <BoxIcon
+              fill={strokes[theme][colorStyle]}
+              stroke={strokes[theme][colorStyle]}
+            />
+          </DropdownMenu.DropdownMenuRadioItem>
+        ))}
+      </DropdownMenu.DropdownMenuRadioGroup>
     </DropdownMenu.Root>
   )
 }

components/style-panel/quick-size-select.tsx

@@ -27,7 +27,6 @@ function QuickSizeSelect(): JSX.Element {
           <Circle size={sizes[size]} stroke="none" fill="currentColor" />
         </Tooltip>
       </DropdownMenu.Trigger>
-
       <DropdownMenu.DropdownMenuRadioGroup
         as={DropdownContent}
         sideOffset={8}

styles/stitches.config.ts

@@ -108,7 +108,7 @@ const dark = theme({
     border: '#202529',
     canvas: '#343d45',
     panel: '#49555f',
-    inactive: '#cccccf',
+    inactive: '#aaaaad',
     hover: '#343d45',
     text: '#f8f9fa',
     muted: '#e0e2e6',