From 087b2c954aff76b4e865f5a83fc7395c3d749506 Mon Sep 17 00:00:00 2001
From: Alexey Padalko <korhaliv@protonmail.com>
Date: Wed, 16 Oct 2019 19:05:21 +0300
Subject: [PATCH] fix(ui): incorrect open btn placement in OpenDialogInput
 errorneus state

fix #2987
---
 renderer/components/Form/OpenDialogButton.js | 23 +++++++++-----------
 renderer/components/Form/OpenDialogInput.js  |  8 ++++---
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/renderer/components/Form/OpenDialogButton.js b/renderer/components/Form/OpenDialogButton.js
index 2208e875cfd..315012bcdc8 100644
--- a/renderer/components/Form/OpenDialogButton.js
+++ b/renderer/components/Form/OpenDialogButton.js
@@ -1,25 +1,22 @@
 import React from 'react'
 import { Box } from 'rebass/styled-components'
-import styled from 'styled-components'
 import Copy from 'components/Icon/FolderOpen'
 import { Button } from 'components/UI'
 
-const CustomButton = styled(Button)`
-  margin-left: -46px;
-  height: 45px;
-  margin-top: 1px;
-  padding: 0;
-  border-radius: 0 5px 5px 0;
-  overflow: hidden;
-  z-index: 1;
-`
-
 const OpenDialogButton = props => (
-  <CustomButton type="button" variant="secondary" {...props}>
+  <Button
+    height={44}
+    ml={-47}
+    p={0}
+    sx={{ overflow: 'hidden', zIndex: 1, borderRadius: '0 5px 5px 0' }}
+    type="button"
+    variant="secondary"
+    {...props}
+  >
     <Box bg="secondaryColor" p={3}>
       <Copy />
     </Box>
-  </CustomButton>
+  </Button>
 )
 
 export default OpenDialogButton
diff --git a/renderer/components/Form/OpenDialogInput.js b/renderer/components/Form/OpenDialogInput.js
index 77af9a80356..e0b1f562418 100644
--- a/renderer/components/Form/OpenDialogInput.js
+++ b/renderer/components/Form/OpenDialogInput.js
@@ -19,14 +19,15 @@ const InnerInput = styled(BasicInput)`
 `
 
 const OpenDialogInput = props => {
-  const { mode, ...rest } = props
+  const { mode, label, ...rest } = props
   const [spaceProps, otherProps] = extractSpaceProps(rest)
   return (
     <WithOpenDialog
       render={({ openDialog }) => (
-        <Flex alignItems="center" {...spaceProps}>
-          <InnerInput width={1} {...otherProps} />
+        <Flex alignItems="flex" {...spaceProps}>
+          <InnerInput width={1} {...otherProps} label={label} />
           <OpenDialogButton
+            mt={label ? 23 : '1px'}
             onClick={async () => {
               const result = await openDialog(mode)
               // set value only if something was selected to avoid
@@ -47,6 +48,7 @@ OpenDialogInput.propTypes = {
   // electron showOpenDialog feature flags
   // https://electronjs.org/docs/api/dialog
   // options.properties
+  label: PropTypes.node,
   mode: PropTypes.string,
 }