From de8766512fa6e97480e1a81418bd74570ccdad08 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Jun 2023 19:10:37 +0800
Subject: [PATCH] Use a special chip style for the edit labels modal

---
 .../web/components/elements/EditLabelChip.tsx | 62 +++++++++++++++++++
 .../web/components/elements/LabelsPicker.tsx  |  4 +-
 2 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 packages/web/components/elements/EditLabelChip.tsx

diff --git a/packages/web/components/elements/EditLabelChip.tsx b/packages/web/components/elements/EditLabelChip.tsx
new file mode 100644
index 000000000..bf6fefcfc
--- /dev/null
+++ b/packages/web/components/elements/EditLabelChip.tsx
@@ -0,0 +1,62 @@
+import { Button } from './Button'
+import { SpanBox, HStack } from './LayoutPrimitives'
+import { Circle, X } from 'phosphor-react'
+import { isDarkTheme } from '../../lib/themeUpdater'
+import { theme } from '../tokens/stitches.config'
+
+type EditLabelChipProps = {
+  text: string
+  color: string
+  isSelected?: boolean
+  xAction: () => void
+}
+
+export function EditLabelLabelChip(props: EditLabelChipProps): JSX.Element {
+  const isDark = isDarkTheme()
+
+  const selectedBorder = '#FFEA9F'
+  const unSelectedBorder = 'transparent'
+  return (
+    <SpanBox
+      css={{
+        display: 'inline-table',
+        margin: '2px',
+        fontSize: '11px',
+        fontWeight: '500',
+        fontFamily: '$inter',
+        padding: '1px 7px',
+        whiteSpace: 'nowrap',
+        cursor: 'pointer',
+        backgroundClip: 'padding-box',
+        borderRadius: '5px',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        color: isDark ? '#EBEBEB' : '#2A2A2A',
+        borderColor: props.isSelected ? selectedBorder : unSelectedBorder,
+        backgroundColor: isDark ? '#2A2A2A' : '#F5F5F5',
+      }}
+    >
+      <HStack alignment="center" css={{ gap: '7px' }}>
+        <Circle size={14} color={props.color} weight="fill" />
+        <SpanBox css={{ pt: '1px' }}>{props.text}</SpanBox>
+        <Button
+          style="ghost"
+          css={{ display: 'flex', pt: '1px' }}
+          onClick={(event) => {
+            props.xAction()
+            event.preventDefault()
+          }}
+        >
+          <X
+            size={14}
+            color={
+              props.isSelected
+                ? '#FFEA9F'
+                : theme.colors.thBorderSubtle.toString()
+            }
+          />
+        </Button>
+      </HStack>
+    </SpanBox>
+  )
+}
diff --git a/packages/web/components/elements/LabelsPicker.tsx b/packages/web/components/elements/LabelsPicker.tsx
index 3acd2e47d..c76924e1c 100644
--- a/packages/web/components/elements/LabelsPicker.tsx
+++ b/packages/web/components/elements/LabelsPicker.tsx
@@ -5,6 +5,7 @@ import { Label } from '../../lib/networking/fragments/labelFragment'
 import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery'
 import { LabelChip } from './LabelChip'
 import { isTouchScreenDevice } from '../../lib/deviceType'
+import { EditLabelLabelChip } from './EditLabelChip'
 
 type LabelsPickerProps = {
   selectedLabels: Label[]
@@ -126,7 +127,7 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
       }}
     >
       {props.selectedLabels.map((label, idx) => (
-        <LabelChip
+        <EditLabelLabelChip
           key={label.id}
           text={label.name}
           color={label.color}
@@ -141,7 +142,6 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
               props.setSelectedLabels([..._selectedLabels])
             }
           }}
-          useAppAppearance={true}
         />
       ))}
       <SpanBox