From b560d6219418b455db22c0397e4d284db7e8d614 Mon Sep 17 00:00:00 2001
From: Felicio Mununga <felicio@users.noreply.github.com>
Date: Mon, 25 Sep 2023 12:35:58 +0200
Subject: [PATCH] fix ContextTag style (#478)

* u stories

* f

* ch
---
 .changeset/sharp-planes-grab.md               |  5 ++
 .../src/context-tag/context-tag.stories.tsx   | 62 +++++++++++++++----
 .../src/context-tag/context-tag.tsx           | 38 +++++++-----
 3 files changed, 75 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/sharp-planes-grab.md

diff --git a/.changeset/sharp-planes-grab.md b/.changeset/sharp-planes-grab.md
new file mode 100644
index 000000000..6229c7108
--- /dev/null
+++ b/.changeset/sharp-planes-grab.md
@@ -0,0 +1,5 @@
+---
+'@status-im/components': patch
+---
+
+fix ContextTag style
diff --git a/packages/components/src/context-tag/context-tag.stories.tsx b/packages/components/src/context-tag/context-tag.stories.tsx
index dfa702a0e..51a092231 100644
--- a/packages/components/src/context-tag/context-tag.stories.tsx
+++ b/packages/components/src/context-tag/context-tag.stories.tsx
@@ -1,4 +1,4 @@
-import { MembersIcon, PendingIcon } from '@status-im/icons'
+import { MembersIcon, PlaceholderIcon } from '@status-im/icons'
 import { Stack } from 'tamagui'
 
 import { ContextTag } from './context-tag'
@@ -45,6 +45,9 @@ export const AllVariants: Story = {
     <Stack space flexDirection="row">
       <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={20}>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -112,7 +115,7 @@ export const AllVariants: Story = {
           />
           <ContextTag type="address" address="0x045...1ah" size={20} />
           <ContextTag
-            icon={<PendingIcon size={12} />}
+            icon={<PlaceholderIcon size={12} />}
             type="icon"
             label="Context"
             size={20}
@@ -121,6 +124,9 @@ export const AllVariants: Story = {
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={24} textSize={13}>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -201,7 +207,7 @@ export const AllVariants: Story = {
             textSize={13}
           />
           <ContextTag
-            icon={<PendingIcon size={12} />}
+            icon={<PlaceholderIcon size={12} />}
             type="icon"
             label="Context"
             size={24}
@@ -216,6 +222,9 @@ export const AllVariants: Story = {
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={24} textSize={15}>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -296,7 +305,7 @@ export const AllVariants: Story = {
             textSize={15}
           />
           <ContextTag
-            icon={<PendingIcon size={12} />}
+            icon={<PlaceholderIcon size={12} />}
             type="icon"
             label="Context"
             size={24}
@@ -311,6 +320,9 @@ export const AllVariants: Story = {
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={32}>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -378,7 +390,7 @@ export const AllVariants: Story = {
           />
           <ContextTag type="address" address="0x045...1ah" size={32} />
           <ContextTag
-            icon={<PendingIcon size={16} />}
+            icon={<PlaceholderIcon size={16} />}
             type="icon"
             label="Context"
             size={32}
@@ -389,6 +401,9 @@ export const AllVariants: Story = {
 
       <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={20} outline>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -464,7 +479,7 @@ export const AllVariants: Story = {
           />
           <ContextTag type="address" address="0x045...1ah" size={20} outline />
           <ContextTag
-            icon={<PendingIcon size={12} />}
+            icon={<PlaceholderIcon size={12} />}
             type="icon"
             label="Context"
             size={20}
@@ -474,6 +489,9 @@ export const AllVariants: Story = {
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={24} textSize={13} outline>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -563,7 +581,7 @@ export const AllVariants: Story = {
             outline
           />
           <ContextTag
-            icon={<PendingIcon size={12} />}
+            icon={<PlaceholderIcon size={12} />}
             type="icon"
             label="Context"
             size={24}
@@ -580,6 +598,9 @@ export const AllVariants: Story = {
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={24} textSize={15} outline>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -669,7 +690,7 @@ export const AllVariants: Story = {
             outline
           />
           <ContextTag
-            icon={<PendingIcon size={12} />}
+            icon={<PlaceholderIcon size={12} />}
             type="icon"
             label="Context"
             size={24}
@@ -686,6 +707,9 @@ export const AllVariants: Story = {
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={32} outline>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -761,7 +785,7 @@ export const AllVariants: Story = {
           />
           <ContextTag type="address" address="0x045...1ah" size={32} outline />
           <ContextTag
-            icon={<PendingIcon size={16} />}
+            icon={<PlaceholderIcon size={16} />}
             type="icon"
             label="Context"
             size={32}
@@ -773,6 +797,9 @@ export const AllVariants: Story = {
 
       <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={20} blur>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -848,7 +875,7 @@ export const AllVariants: Story = {
           />
           <ContextTag type="address" address="0x045...1ah" size={20} blur />
           <ContextTag
-            icon={<PendingIcon size={12} />}
+            icon={<PlaceholderIcon size={12} />}
             type="icon"
             label="Context"
             size={20}
@@ -858,6 +885,9 @@ export const AllVariants: Story = {
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={24} textSize={13} blur>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -947,7 +977,7 @@ export const AllVariants: Story = {
             blur
           />
           <ContextTag
-            icon={<PendingIcon size={12} />}
+            icon={<PlaceholderIcon size={12} />}
             type="icon"
             label="Context"
             size={24}
@@ -964,6 +994,9 @@ export const AllVariants: Story = {
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={24} textSize={15} blur>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -1053,7 +1086,7 @@ export const AllVariants: Story = {
             blur
           />
           <ContextTag
-            icon={<PendingIcon size={12} />}
+            icon={<PlaceholderIcon size={12} />}
             type="icon"
             label="Context"
             size={24}
@@ -1070,6 +1103,9 @@ export const AllVariants: Story = {
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag type="label" size={32} blur>
+            Name
+          </ContextTag>
           <ContextTag
             type="user"
             user={{
@@ -1145,7 +1181,7 @@ export const AllVariants: Story = {
           />
           <ContextTag type="address" address="0x045...1ah" size={32} blur />
           <ContextTag
-            icon={<PendingIcon size={16} />}
+            icon={<PlaceholderIcon size={16} />}
             type="icon"
             label="Context"
             size={32}
diff --git a/packages/components/src/context-tag/context-tag.tsx b/packages/components/src/context-tag/context-tag.tsx
index e0ef2ae55..0e4d045c7 100644
--- a/packages/components/src/context-tag/context-tag.tsx
+++ b/packages/components/src/context-tag/context-tag.tsx
@@ -10,6 +10,7 @@ import { Text } from '../text'
 import type { AvatarProps } from '../avatar'
 import type { TextProps } from '../text'
 import type { IconProps } from '@status-im/icons'
+import type { ComponentProps } from 'react'
 
 type Props = { blur?: boolean; outline?: boolean } & (
   | {
@@ -74,6 +75,15 @@ const iconSizes: Record<NonNullable<Props['size']>, IconProps['size']> = {
   '20': 12,
 }
 
+const chevronIconSize: Record<
+  NonNullable<Props['size']>,
+  ComponentProps<typeof ChevronRightIcon>['size']
+> = {
+  '32': 20,
+  '24': 16,
+  '20': 12,
+}
+
 const Label = (props: {
   children: string
   size: 13 | 15
@@ -95,8 +105,10 @@ const ContextTag = (props: Props) => {
   const hasAvatar = type !== 'address' && type !== 'icon' && type !== 'label'
 
   let textSize: Extract<TextProps['size'], 13 | 15>
+  let paddingHorizontal: number | undefined
   if (size === 24) {
     textSize = 'textSize' in props ? props.textSize : 13 // default if props.size not set but fallbacked to 24
+    paddingHorizontal = textSize === 13 ? 8 : 6
   } else {
     textSize = textSizes[size]
   }
@@ -140,7 +152,10 @@ const ContextTag = (props: Props) => {
             />
             <Stack flexDirection="row" gap="$0" alignItems="center">
               <Label size={textSize}>{props.channel.communityName}</Label>
-              <ChevronRightIcon color="$neutral-50" size={20} />
+              <ChevronRightIcon
+                color="$neutral-50"
+                size={chevronIconSize[size]}
+              />
               <Label size={textSize}>{`# ` + props.channel.name}</Label>
             </Stack>
           </>
@@ -256,8 +271,9 @@ const ContextTag = (props: Props) => {
       blur={blur}
       borderRadius={rounded ? '$8' : '$full'}
       size={size}
-      textSize={textSize}
-      {...(hasAvatar && { paddingLeft: 1 })}
+      {...(paddingHorizontal && { paddingHorizontal })}
+      {...(hasAvatar && { paddingLeft: 2 })}
+      {...(hasAvatar && outline && { paddingLeft: 1 })}
     >
       {renderContent()}
     </Base>
@@ -272,17 +288,13 @@ const Base = styled(View, {
   display: 'inline-flex',
   flexDirection: 'row',
   alignItems: 'center',
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  borderColor: 'transparent',
 
   variants: {
     outline: {
       true: {
+        borderWidth: '1px',
         borderColor: '$primary-50',
-      },
-      false: {
-        borderColor: 'transparent',
+        borderStyle: 'solid',
       },
     },
     blur: {
@@ -309,13 +321,5 @@ const Base = styled(View, {
         paddingHorizontal: 12,
       },
     },
-    textSize: {
-      13: {
-        paddingHorizontal: 8,
-      },
-      15: {
-        paddingHorizontal: 6,
-      },
-    },
   } as const,
 })