move Tag, update styling

src/view/com/Tag.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import {StyleSheet, Pressable} from 'react-native'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+
+import {usePalette} from 'lib/hooks/usePalette'
+import {Text} from 'view/com/util/text/Text'
+
+export function Tag({value}: {value: string}) {
+  const pal = usePalette('default')
+
+  return (
+    <Text type="xs-medium" style={[styles.tag, pal.viewLight, pal.textLight]}>
+      #{value}
+    </Text>
+  )
+}
+
+export function EditableTag({
+  value,
+  onRemove,
+}: {
+  value: string
+  onRemove: (tag: string) => void
+}) {
+  const pal = usePalette('default')
+  const [hovered, setHovered] = React.useState(false)
+
+  const hoverIn = React.useCallback(() => {
+    setHovered(true)
+  }, [setHovered])
+
+  const hoverOut = React.useCallback(() => {
+    setHovered(false)
+  }, [setHovered])
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={() => onRemove(value)}
+      onPointerEnter={hoverIn}
+      onPointerLeave={hoverOut}
+      style={state => [
+        pal.border,
+        styles.tag,
+        {
+          opacity: hovered || state.pressed || state.focused ? 0.8 : 1,
+          outline: 0,
+          paddingRight: 6,
+        },
+      ]}>
+      <Text
+        type="xs-medium"
+        style={[pal.textLight, {lineHeight: 13, paddingBottom: 2}]}>
+        #{value}
+      </Text>
+      <FontAwesomeIcon
+        icon="x"
+        style={
+          {
+            color: hovered ? pal.textLight.color : pal.border.borderColor,
+          } as FontAwesomeIconStyle
+        }
+        size={8}
+      />
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  tag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    borderRadius: 20,
+    overflow: 'hidden',
+    borderWidth: 1,
+  },
+})

src/view/com/composer/TagInput.tsx

@@ -5,7 +5,6 @@ import {
   StyleSheet,
   NativeSyntheticEvent,
   TextInputKeyPressEventData,
-  Pressable,
 } from 'react-native'
 import {
   FontAwesomeIcon,
@@ -13,8 +12,8 @@ import {
 } from '@fortawesome/react-native-fontawesome'
 
 import {isWeb} from 'platform/detection'
-import {Text} from 'view/com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
+import {EditableTag} from 'view/com/Tag'
 
 function uniq(tags: string[]) {
   return Array.from(new Set(tags))
@@ -34,29 +33,6 @@ function sanitize(tagString: string) {
   return tagString.trim().replace(/^#/, '')
 }
 
-function Tag({
-  tag,
-  removeTag,
-}: {
-  tag: string
-  removeTag: (tag: string) => void
-}) {
-  const pal = usePalette('default')
-  return (
-    <Pressable
-      accessibilityRole="button"
-      onPress={() => removeTag(tag)}
-      style={state => ({
-        opacity: state.hovered || state.pressed || state.focused ? 0.8 : 1,
-        outline: 0,
-      })}>
-      <Text type="xs-medium" style={[styles.tag, pal.viewLight, pal.textLight]}>
-        #{tag}
-      </Text>
-    </Pressable>
-  )
-}
-
 export function TagInput({
   max = 8,
   onChangeTags,
@@ -130,7 +106,7 @@ export function TagInput({
         />
       )}
       {tags.map(tag => (
-        <Tag key={tag} tag={tag} removeTag={removeTag} />
+        <EditableTag key={tag} value={tag} onRemove={removeTag} />
       ))}
       {tags.length >= max ? null : (
         <TextInput

web/index.html

@@ -48,6 +48,7 @@
         --text: black;
         --background: white;
         --backgroundLight: #F3F3F8;
+        --border: #f0e9e9;
         --blue: #0085ff;
         --teal: #9AD5CA;
         --yellow: #FED766;
@@ -56,12 +57,14 @@
         --text: white;
         --background: black;
         --backgroundLight: #26272D;
+        --border: #26272D;
       }
       @media (prefers-color-scheme: light) {
         html.colorMode--system {
           --text: black;
           --background: white;
           --backgroundLight: #F3F3F8;
+          --border: #f0e9e9;
         }
       }
       @media (prefers-color-scheme: dark) {
@@ -69,6 +72,7 @@
           --text: white;
           --background: black;
           --backgroundLight: #26272D;
+          --border: #26272D;
         }
       }
 
@@ -145,25 +149,28 @@
       .ProseMirror .inline-tag,
       .ProseMirror .mention {
         position: relative;
-        margin: 0 3px;
+        margin: 0 6px;
       }
       .ProseMirror .inline-tag::after,
       .ProseMirror .mention::after {
         content: '';
         position: absolute;
         top: -1px;
-        bottom: -2px;
-        left: -3px;
-        right: -3px;
+        bottom: -3px;
+        left: -8px;
+        right: -8px;
         z-index: -1;
         opacity: 0.3;
-        border-radius: 4px;
+        border-radius: 30px;
+        border-width: 1px;
+        border-style: solid;
       }
       .ProseMirror .inline-tag {
-        color: var(--teal);
+        color: var(--text);
       }
       .ProseMirror .inline-tag::after {
-        background-color: var(--teal);
+        background-color: var(--background);
+        border-color: var(--border):
       }
       .ProseMirror .mention {
         color: var(--yellow);