Tokens: update logic for showing 'YOU' in InfoBox

aragon · Jun 9, 2020 · 9e7cd31 · 9e7cd31
1 parent cf91af0
commit 9e7cd31
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/apps/token-manager/app/src/components/InfoBoxes.js b/apps/token-manager/app/src/components/InfoBoxes.js
@@ -113,18 +113,26 @@ function InfoBoxes({
             const isCurrentUser = addressesEqual(account, connectedAccount)
             const [label] = useIdentity(account)
 
-            const identityBadgeProps = {
-              defaultLabel: !Boolean(label) && isCurrentUser ? 'YOU' : '',
-              labelStyle: isCurrentUser ? '' + (Boolean(label) ? 'max-width: 83px;' : `color: ${theme.tagIndicatorContent};` ) : 'max-width: 117px;'
-            }
             return (
-              <div>
+              <div
+                css={`
+                  display: flex;
+                  align-items: center;
+                `}
+              >
                 <LocalIdentityBadge
                   entity={account}
                   connectedAccount={isCurrentUser}
-                  {...identityBadgeProps}
+                  defaultLabel="YOU"
+                  labelStyle={
+                    isCurrentUser && !label
+                      ? `color: ${theme.tagIndicatorContent};`
+                      : ''
+                  }
                 />
-                {isCurrentUser && Boolean(label) && <You />}
+                {isCurrentUser && Boolean(label) && (
+                  <You css="flex-shrink: 0;" />
+                )}
               </div>
             )
           }}

diff --git a/apps/token-manager/app/src/components/You.js b/apps/token-manager/app/src/components/You.js
@@ -1,12 +1,13 @@
 import React from 'react'
 import { Tag, GU } from '@aragon/ui'
 
-const You = () => (
+const You = props => (
   <Tag
     css={`
       margin-left: ${0.5 * GU}px;
     `}
     size="small"
+    {...props}
   >
     you
   </Tag>

diff --git a/apps/token-manager/app/src/screens/Holders.js b/apps/token-manager/app/src/screens/Holders.js
@@ -64,7 +64,7 @@ function Holders({
                   entity={address}
                   connectedAccount={isCurrentUser}
                 />
-                {isCurrentUser && <You />}
+                {isCurrentUser && <You css="flex-shrink: 0" />}
               </div>,
             ]