Apps: align LocalIdentityBadge implementations

aragon · Jun 9, 2020 · 1fb2106 · 1fb2106
1 parent 1b0bc12
commit 1fb2106
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 43 deletions.
diff --git a/apps/agent/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/agent/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -1,60 +1,35 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import { useNetwork } from '@aragon/api-react'
-import { Badge, IdentityBadge, font } from '@aragon/ui'
+import { IdentityBadge } from '@aragon/ui'
 import { useIdentity } from '../IdentityManager/IdentityManager'
+import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
+import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
 
-const LocalIdentityBadge = ({ entity, ...props }) => {
+const LocalIdentityBadge = ({ defaultLabel, entity, ...props }) => {
   const network = useNetwork()
   const [label, showLocalIdentityModal] = useIdentity(entity)
   const handleClick = () => showLocalIdentityModal(entity)
   return (
     <IdentityBadge
-      {...props}
-      networkType={network && network.type}
-      customLabel={label || ''}
+      label={label || defaultLabel}
       entity={entity}
+      networkType={network && network.type}
       popoverAction={{
-        label: `${label ? 'Edit' : 'Add'} custom label`,
+        label: <LocalLabelPopoverActionLabel hasLabel={Boolean(label)} />,
         onClick: handleClick,
       }}
       popoverTitle={
-        label ? (
-          <Wrap>
-            <Label>{label}</Label>
-            <StyledBadge>Custom label</StyledBadge>
-          </Wrap>
-        ) : (
-          'Address'
-        )
+        label ? <LocalLabelPopoverTitle label={label} /> : undefined
       }
+      {...props}
     />
   )
 }
 
 LocalIdentityBadge.propTypes = {
-  entity: PropTypes.string.isRequired,
+  defaultLabel: PropTypes.string,
+  ...IdentityBadge.propTypes,
 }
 
-const Wrap = styled.div`
-  display: grid;
-  align-items: center;
-  grid-template-columns: auto 1fr;
-  padding-right: 24px;
-`
-
-const Label = styled.span`
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const StyledBadge = styled(Badge)`
-  margin-left: 16px;
-  text-transform: uppercase;
-  ${font({ size: 'xxsmall' })};
-`
-
 export default LocalIdentityBadge
diff --git a/apps/agent/app/src/components/LocalIdentityBadge/LocalLabelPopoverActionLabel.js b/apps/agent/app/src/components/LocalIdentityBadge/LocalLabelPopoverActionLabel.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { IconLabel, GU } from '@aragon/ui'
+
+function LocalLabelPopoverActionLabel({ hasLabel }) {
+  return (
+    <div
+      css={`
+        display: flex;
+        align-items: center;
+      `}
+    >
+      <IconLabel
+        css={`
+          margin-right: ${1 * GU}px;
+        `}
+      />
+      {hasLabel ? 'Edit' : 'Add'} custom label
+    </div>
+  )
+}
+LocalLabelPopoverActionLabel.propTypes = {
+  hasLabel: PropTypes.bool,
+}
+
+export default LocalLabelPopoverActionLabel
diff --git a/apps/agent/app/src/components/LocalIdentityBadge/LocalLabelPopoverTitle.js b/apps/agent/app/src/components/LocalIdentityBadge/LocalLabelPopoverTitle.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Tag, GU } from '@aragon/ui'
+
+function LocalLabelPopoverTitle({ label }) {
+  return (
+    <div
+      css={`
+        display: grid;
+        align-items: center;
+        grid-template-columns: auto 1fr;
+      `}
+    >
+      <span
+        css={`
+          display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        `}
+      >
+        {label}
+      </span>
+      <Tag
+        mode="identifier"
+        css={`
+          margin-left: ${2 * GU}px;
+        `}
+      >
+        Custom label
+      </Tag>
+    </div>
+  )
+}
+LocalLabelPopoverTitle.propTypes = {
+  label: PropTypes.string.isRequired,
+}
+
+export default LocalLabelPopoverTitle
diff --git a/apps/finance/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/finance/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -1,17 +1,18 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { useNetwork } from '@aragon/api-react'
 import { IdentityBadge } from '@aragon/ui'
 import { useIdentity } from '../IdentityManager/IdentityManager'
 import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
 import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
 
-const LocalIdentityBadge = ({ entity, ...props }) => {
+const LocalIdentityBadge = ({ defaultLabel, entity, ...props }) => {
   const network = useNetwork()
   const [label, showLocalIdentityModal] = useIdentity(entity)
   const handleClick = () => showLocalIdentityModal(entity)
   return (
     <IdentityBadge
-      label={label || ''}
+      label={label || defaultLabel}
       entity={entity}
       networkType={network && network.type}
       popoverAction={{
@@ -27,6 +28,7 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
 }
 
 LocalIdentityBadge.propTypes = {
+  defaultLabel: PropTypes.string,
   ...IdentityBadge.propTypes,
 }
 

diff --git a/apps/token-manager/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/token-manager/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -1,17 +1,18 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { useNetwork } from '@aragon/api-react'
 import { IdentityBadge } from '@aragon/ui'
 import { useIdentity } from '../IdentityManager/IdentityManager'
 import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
 import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
 
-const LocalIdentityBadge = ({ entity, ...props }) => {
+const LocalIdentityBadge = ({ defaultLabel, entity, ...props }) => {
   const network = useNetwork()
   const [label, showLocalIdentityModal] = useIdentity(entity)
   const handleClick = () => showLocalIdentityModal(entity)
   return (
     <IdentityBadge
-      label={label || props.defaultLabel }
+      label={label || defaultLabel}
       entity={entity}
       networkType={network && network.type}
       popoverAction={{
@@ -27,6 +28,7 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
 }
 
 LocalIdentityBadge.propTypes = {
+  defaultLabel: PropTypes.string,
   ...IdentityBadge.propTypes,
 }
 

diff --git a/apps/voting/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/apps/voting/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -1,17 +1,18 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { useNetwork } from '@aragon/api-react'
 import { IdentityBadge } from '@aragon/ui'
-import { useIdentity } from '../../identity-manager'
+import { useIdentity } from '../IdentityManager/IdentityManager'
 import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
 import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
 
-const LocalIdentityBadge = ({ entity, ...props }) => {
+const LocalIdentityBadge = ({ defaultLabel, entity, ...props }) => {
   const network = useNetwork()
   const [label, showLocalIdentityModal] = useIdentity(entity)
   const handleClick = () => showLocalIdentityModal(entity)
   return (
     <IdentityBadge
-      label={label || ''}
+      label={label || defaultLabel}
       entity={entity}
       networkType={network && network.type}
       popoverAction={{
@@ -27,6 +28,7 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
 }
 
 LocalIdentityBadge.propTypes = {
+  defaultLabel: PropTypes.string,
   ...IdentityBadge.propTypes,
 }