Finance + Token Manager: context menu icons position + color (#855)

aragon · May 16, 2019 · f8230bf · f8230bf
1 parent eaea640
commit f8230bf
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 15 deletions.
diff --git a/apps/finance/app/src/components/TransferRow.js b/apps/finance/app/src/components/TransferRow.js
@@ -114,11 +114,15 @@ const TransferRow = React.memo(
             {txUrl && (
               <ContextMenu>
                 <ContextMenuItem onClick={handleViewTransaction}>
-                  <IconTokens />
+                  <IconWrapper>
+                    <IconTokens />
+                  </IconWrapper>
                   <div css="margin-left: 15px">View Transaction</div>
                 </ContextMenuItem>
                 <ContextMenuItem onClick={handleEditLabel}>
-                  <IconLabel />
+                  <IconWrapper>
+                    <IconLabel />
+                  </IconWrapper>
                   <div css="margin-left: 15px">
                     {label ? 'Edit' : 'Add'} custom label
                   </div>
@@ -176,6 +180,15 @@ const TextOverflow = styled.div`
   text-overflow: ellipsis;
 `
 
+const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  color: ${theme.textSecondary};
+`
+
 export default props => {
   const network = useNetwork()
   return <TransferRow network={network} {...props} />

diff --git a/apps/finance/app/src/components/icons/IconLabel.js b/apps/finance/app/src/components/icons/IconLabel.js
@@ -1,14 +1,14 @@
 import React from 'react'
 
-const Label = props => (
+const IconLabel = props => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
     <path
       d="M11.5404 19.0354L11.5758 19.0707L11.6111 19.0354C14.0854 16.5604 16.5604 14.0854 19.0354 11.6111L19.0708 11.5757L19.0353 11.5403L8.42655 0.96459L8.41191 0.95H8.39125H1H0.95V1V8.42125V8.44196L0.96464 8.4566L11.5404 19.0354ZM6.84037 4.11766L6.84036 4.11764C6.08883 3.36612 4.86917 3.36612 4.11764 4.11764C3.36612 4.86917 3.36612 6.08883 4.11764 6.84036L4.11766 6.84037C4.86918 7.59113 6.08882 7.59113 6.84034 6.84037L6.84037 6.84034C7.59113 6.08882 7.59113 4.86918 6.84037 4.11766ZM6.23868 6.23861L6.23861 6.23868C5.81941 6.65859 5.1386 6.65864 4.71861 6.23864C4.29941 5.81945 4.29935 5.13861 4.71861 4.71861C5.13861 4.29935 5.81945 4.29941 6.23864 4.71861C6.65864 5.1386 6.65859 5.81941 6.23868 6.23861ZM8.06084 1.8C11.3299 5.05861 14.5989 8.31721 17.868 11.5766L11.5758 17.8688L1.8 8.09004V1.8H8.06084Z"
-      fill="#000"
-      stroke="#8B9396"
+      fill="currentColor"
+      stroke="currentColor"
       strokeWidth="0.1"
     />
   </svg>
 )
 
-export default Label
+export default IconLabel
diff --git a/apps/token-manager/app/src/components/HolderRow.js b/apps/token-manager/app/src/components/HolderRow.js
@@ -64,14 +64,14 @@ const HolderRow = React.memo(
           <ContextMenu>
             {canAssign && (
               <ContextMenuItem onClick={handleAssignTokens}>
-                <IconWrapper>
+                <IconWrapper css="top: -2px">
                   <IconAdd />
                 </IconWrapper>
                 <ActionLabel>Add tokens</ActionLabel>
               </ContextMenuItem>
             )}
             <ContextMenuItem onClick={handleRemoveTokens}>
-              <IconWrapper>
+              <IconWrapper css="top: -2px">
                 <IconRemove />
               </IconWrapper>
               <ActionLabel>
@@ -80,7 +80,7 @@ const HolderRow = React.memo(
               </ActionLabel>
             </ContextMenuItem>
             <ContextMenuItem onClick={handleEditLabel}>
-              <IconWrapper>
+              <IconWrapper css="left: 1px">
                 <IconLabel />
               </IconWrapper>
               <ActionLabel>{label ? 'Edit' : 'Add'} custom label</ActionLabel>
@@ -120,9 +120,12 @@ const Owner = styled.div`
 `
 
 const IconWrapper = styled.span`
+  position: relative;
   display: flex;
-  align-content: center;
-  margin-top: -3px;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
   color: ${theme.textSecondary};
 `
 

diff --git a/apps/token-manager/app/src/components/IconLabel.js b/apps/token-manager/app/src/components/IconLabel.js
@@ -1,14 +1,14 @@
 import React from 'react'
 
-const Label = props => (
+const IconLabel = props => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
     <path
       d="M11.5404 19.0354L11.5758 19.0707L11.6111 19.0354C14.0854 16.5604 16.5604 14.0854 19.0354 11.6111L19.0708 11.5757L19.0353 11.5403L8.42655 0.96459L8.41191 0.95H8.39125H1H0.95V1V8.42125V8.44196L0.96464 8.4566L11.5404 19.0354ZM6.84037 4.11766L6.84036 4.11764C6.08883 3.36612 4.86917 3.36612 4.11764 4.11764C3.36612 4.86917 3.36612 6.08883 4.11764 6.84036L4.11766 6.84037C4.86918 7.59113 6.08882 7.59113 6.84034 6.84037L6.84037 6.84034C7.59113 6.08882 7.59113 4.86918 6.84037 4.11766ZM6.23868 6.23861L6.23861 6.23868C5.81941 6.65859 5.1386 6.65864 4.71861 6.23864C4.29941 5.81945 4.29935 5.13861 4.71861 4.71861C5.13861 4.29935 5.81945 4.29941 6.23864 4.71861C6.65864 5.1386 6.65859 5.81941 6.23868 6.23861ZM8.06084 1.8C11.3299 5.05861 14.5989 8.31721 17.868 11.5766L11.5758 17.8688L1.8 8.09004V1.8H8.06084Z"
-      fill="#99A0A2"
-      stroke="#8B9396"
+      fill="currentColor"
+      stroke="currentColor"
       strokeWidth="0.1"
     />
   </svg>
 )
 
-export default Label
+export default IconLabel