From 7635e010906ddb73f9ee23d7588f9a344927530b Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 31 Aug 2020 22:55:05 +0200
Subject: [PATCH] Align with extension, copy seed button (#3581)

* Align with extension, copy seed button

* Move location (allows hover)
---
 packages/page-accounts/src/modals/Create.tsx       | 12 +++++++++++-
 packages/react-components/src/Dropdown.tsx         |  6 ++++--
 packages/react-components/src/styles/components.ts | 10 ----------
 packages/react-components/src/styles/semantic.ts   |  4 ++++
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/page-accounts/src/modals/Create.tsx b/packages/page-accounts/src/modals/Create.tsx
index 7595013832..eeb01f703c 100644
--- a/packages/page-accounts/src/modals/Create.tsx
+++ b/packages/page-accounts/src/modals/Create.tsx
@@ -11,7 +11,7 @@ import FileSaver from 'file-saver';
 import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
-import { AddressRow, Button, Dropdown, Expander, Input, InputAddress, Modal } from '@polkadot/react-components';
+import { AddressRow, Button, CopyButton, Dropdown, Expander, Input, InputAddress, Modal } from '@polkadot/react-components';
 import { useApi, useToggle } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
@@ -307,6 +307,10 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
                 onChange={_selectSeedType}
                 options={seedOpt}
               />
+              <CopyButton
+                className='copyMoved'
+                value={seed}
+              />
             </Input>
           </Modal.Column>
           <Modal.Column>
@@ -391,4 +395,10 @@ export default React.memo(styled(Create)`
     margin-top: 1rem;
     overflow: visible;
   }
+
+  .copyMoved {
+    position: absolute;
+    right: 8rem;
+    top: 0.75rem;
+  }
 `);
diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx
index ab82d4e80d..ff4a4c27c3 100644
--- a/packages/react-components/src/Dropdown.tsx
+++ b/packages/react-components/src/Dropdown.tsx
@@ -13,6 +13,7 @@ import Labelled from './Labelled';
 
 interface Props<Option> {
   allowAdd?: boolean;
+  children?: React.ReactNode;
   className?: string;
   defaultValue?: any;
   dropdownClassName?: string;
@@ -44,7 +45,7 @@ export type IDropdown<Option> = React.ComponentType<Props<Option>> & {
   Header: React.ComponentType<{ content: React.ReactNode }>;
 }
 
-function BaseDropdown<Option> ({ allowAdd = false, className = '', defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isFull, isMultiple, label, labelExtra, onAdd, onBlur, onChange, onClose, onSearch, options, placeholder, renderLabel, searchInput, tabIndex, transform, value, withEllipsis, withLabel }: Props<Option>): React.ReactElement<Props<Option>> {
+function BaseDropdown<Option> ({ allowAdd = false, children, className = '', defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isFull, isMultiple, label, labelExtra, onAdd, onBlur, onChange, onClose, onSearch, options, placeholder, renderLabel, searchInput, tabIndex, transform, value, withEllipsis, withLabel }: Props<Option>): React.ReactElement<Props<Option>> {
   const lastUpdate = useRef<string>('');
   const [stored, setStored] = useState<string | undefined>();
 
@@ -109,7 +110,7 @@ function BaseDropdown<Option> ({ allowAdd = false, className = '', defaultValue,
   );
 
   return isButton
-    ? <SUIButton.Group>{dropdown}</SUIButton.Group>
+    ? <SUIButton.Group>{dropdown}{children}</SUIButton.Group>
     : (
       <Labelled
         className={classes('ui--Dropdown', className)}
@@ -121,6 +122,7 @@ function BaseDropdown<Option> ({ allowAdd = false, className = '', defaultValue,
         withLabel={withLabel}
       >
         {dropdown}
+        {children}
       </Labelled>
     );
 }
diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts
index e093ad5e1e..5bb2692f48 100644
--- a/packages/react-components/src/styles/components.ts
+++ b/packages/react-components/src/styles/components.ts
@@ -104,16 +104,6 @@ export default css`
       width: 6rem;
       text-align: center;
     }
-
-    .ui--MaxButton {
-      position: absolute;
-      right: 6.5rem;
-      top: 20%;
-      height: 60%;
-      text-transform: uppercase;
-      padding: 0 0.5rem !important;
-      border-radius: 0.3rem !important;
-    }
   }
 
   .ui--Static {
diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts
index e47aee15bf..ade4c7e1c2 100644
--- a/packages/react-components/src/styles/semantic.ts
+++ b/packages/react-components/src/styles/semantic.ts
@@ -25,6 +25,10 @@ export default css`
     color: inherit;
   }
 
+  .ui.action.input > .buttons {
+    position: relative;
+  }
+
   .ui.dropdown {
     &.disabled {
       background: transparent;