use consistent styling in the composer

src/view/com/Tag.tsx

@@ -89,16 +89,16 @@ export function EditableTag({
       onPointerEnter={hoverIn}
       onPointerLeave={hoverOut}
       style={state => [
-        pal.border,
+        pal.viewLight,
         styles.tag,
         {
-          opacity: hovered || state.pressed || state.focused ? 0.8 : 1,
+          opacity: state.pressed || state.focused ? 0.8 : 1,
           outline: 0,
           paddingRight: 6,
         },
       ]}>
       <Text
-        type="xs-medium"
+        type="sm-medium"
         style={[pal.textLight, {lineHeight: 13, paddingBottom: 2}]}>
         #{value}
       </Text>
@@ -106,10 +106,12 @@ export function EditableTag({
         icon="x"
         style={
           {
-            color: hovered ? pal.textLight.color : pal.border.borderColor,
+            opacity: hovered ? 1 : 0.5,
+            color: pal.textLight.color,
+            marginTop: -1,
           } as FontAwesomeIconStyle
         }
-        size={8}
+        size={11}
       />
     </Pressable>
   )
@@ -119,12 +121,11 @@ const styles = StyleSheet.create({
   tag: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 4,
+    gap: 6,
-    paddingTop: 1,
+    paddingTop: 4,
-    paddingBottom: 2,
+    paddingBottom: 3,
-    paddingHorizontal: 6,
+    paddingHorizontal: 8,
-    borderRadius: 20,
+    borderRadius: 4,
     overflow: 'hidden',
-    borderWidth: 1,
   },
 })

src/view/com/composer/TagInput.tsx

@@ -140,13 +140,9 @@ const styles = StyleSheet.create({
   input: {
     flexGrow: 1,
     minWidth: 100,
-    fontSize: 13,
+    fontSize: 14,
-    paddingVertical: 4,
+    lineHeight: 14,
-  },
+    paddingTop: 4,
-  tag: {
+    paddingBottom: 6,
-    paddingVertical: 4,
-    paddingHorizontal: 8,
-    borderRadius: 4,
-    overflow: 'hidden',
   },
 })

web/index.html

@@ -155,7 +155,7 @@
       .ProseMirror .mention {
         border-radius: 4px;
         background-color: var(--backgroundLight);
-        padding: 0 2px 1px;
+        padding: 0 3px 2px;
 
         /* This approach works, but we can't do rounded corners
         background-color: var(--backgroundLight);