Merge branch 'development' into fixOrderValidation

* development: (25 commits)
  Publish
  Updated CHANGELOGS
  fix(instant): fix bug where we potentially fetch balance for the wrong account
  fix: Lock Ledger hw-transport to 4.24.0
  fix: wrong prop names used
  chore: PR feedback
  fix: broken features because of merge
  fix: remove default props, fix lint problems
  chore: convert payment method to stateless component
  feat: add boxShadow on dropdown hover
  fix: various style issues
  fix: remove all:initial rule from all div based ui compoennts
  fix: token selector scrolling container height
  chore(instant): fix lint errors
  feat(instant): fetch balance at startup
  feat(instant): fetch account address at startup and drive account state changes
  chore: cleanup
  fix: restore button to previous state
  feat: implement copy-to-clipboard
  feat: add MetaMask sign, refactor Circle
  ...

1 files changed, 5 insertions, 4 deletions

diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 2679dad1a..a88fa87dd 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -9,7 +9,6 @@ interface IconInfo {
     path: string;
     fillRule?: svgRule;
     clipRule?: svgRule;
-    stroke?: string;
     strokeOpacity?: number;
     strokeWidth?: number;
     strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
@@ -47,7 +46,6 @@ const ICONS: IconInfoMapping = {
     chevron: {
         viewBox: '0 0 12 7',
         path: 'M11 1L6 6L1 1',
-        stroke: 'white',
         strokeOpacity: 0.5,
         strokeWidth: 1.5,
         strokeLinecap: 'round',
@@ -67,6 +65,7 @@ export interface IconProps {
     width: number;
     height?: number;
     color?: ColorOption;
+    stroke?: ColorOption;
     icon: keyof IconInfoMapping;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     padding?: string;
@@ -75,6 +74,7 @@ export interface IconProps {
 const PlainIcon: React.StatelessComponent<IconProps> = props => {
     const iconInfo = ICONS[props.icon];
     const colorValue = _.isUndefined(props.color) ? undefined : props.theme[props.color];
+    const strokeValue = _.isUndefined(props.stroke) ? undefined : props.theme[props.stroke];
     return (
         <div onClick={props.onClick} className={props.className}>
             <svg
@@ -89,7 +89,7 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
                     fill={colorValue}
                     fillRule={iconInfo.fillRule || 'nonzero'}
                     clipRule={iconInfo.clipRule || 'nonzero'}
-                    stroke={iconInfo.stroke}
+                    stroke={strokeValue}
                     strokeOpacity={iconInfo.strokeOpacity}
                     strokeWidth={iconInfo.strokeWidth}
                     strokeLinecap={iconInfo.strokeLinecap}
@@ -102,7 +102,8 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => {
 
 export const Icon = withTheme(styled(PlainIcon)`
     && {
-        cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')};
+        display: inline-block;
+        ${props => (!_.isUndefined(props.onClick) ? 'cursor: pointer' : '')};
         transition: opacity 0.5s ease;
         padding: ${props => props.padding};
         opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)};