Align with extension, copy seed button (#3581)

* Align with extension, copy seed button

* Move location (allows hover)

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;
+  }
 `);

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>
     );
 }

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 {

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;