fix renaming position, enter and error background (#634)

packages/extension-ui/src/Popup/Accounts/Account.tsx

@@ -3,12 +3,13 @@
 
 import type { AccountJson } from '@polkadot/extension-base/background/types';
 
-import React, { useCallback, useContext, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { canDerive } from '@polkadot/extension-base/utils';
+import { ThemeProps } from '@polkadot/extension-ui/types';
 
-import { ActionContext, Address, Dropdown, Link, MenuDivider } from '../../components';
+import { Address, Dropdown, Link, MenuDivider } from '../../components';
 import useGenesisHashOptions from '../../hooks/useGenesisHashOptions';
 import useTranslation from '../../hooks/useTranslation';
 import { editAccount, tieAccount } from '../../messaging';
@@ -24,11 +25,10 @@ interface EditState {
   toggleActions: number;
 }
 
-function Account ({ address, className, genesisHash, isExternal, isHardware, isHidden, parentName, suri, type }: Props): React.ReactElement<Props> {
+function Account ({ address, className, genesisHash, isExternal, isHardware, isHidden, name, parentName, suri, type }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const onAction = useContext(ActionContext);
   const [{ isEditing, toggleActions }, setEditing] = useState<EditState>({ isEditing: false, toggleActions: 0 });
-  const [editedName, setName] = useState<string | null>(null);
+  const [editedName, setName] = useState<string | undefined | null>(name);
   const genesisOptions = useGenesisHashOptions();
 
   const _onChangeGenesis = useCallback(
@@ -48,12 +48,11 @@ function Account ({ address, className, genesisHash, isExternal, isHardware, isH
     (): void => {
       editedName &&
         editAccount(address, editedName)
-          .then(() => onAction())
           .catch(console.error);
 
       _toggleEdit();
     },
-    [editedName, address, _toggleEdit, onAction]
+    [editedName, address, _toggleEdit]
   );
 
   const _actions = useMemo(() => (
@@ -123,7 +122,7 @@ function Account ({ address, className, genesisHash, isExternal, isHardware, isH
         {isEditing && (
           <Name
             address={address}
-            className='editName'
+            className={`editName ${parentName ? 'withParent' : ''}`}
             isFocused
             label={' '}
             onBlur={_saveChanges}
@@ -135,7 +134,7 @@ function Account ({ address, className, genesisHash, isExternal, isHardware, isH
   );
 }
 
-export default styled(Account)`
+export default styled(Account)(({ theme }: ThemeProps) => `
   .address {
     margin-bottom: 8px;
   }
@@ -143,9 +142,24 @@ export default styled(Account)`
   .editName {
     position: absolute;
     flex: 1;
-    left: 80px;
-    top: 6px;
-    width: 315px;
+    left: 70px;
+    top: 10px;
+    width: 350px;
+
+    .danger {
+      background-color: ${theme.bodyColor};
+      margin-top: -13px;
+      width: 330px;
+    }
+
+    input {
+      height : 30px;
+      width: 350px;
+    }
+
+    &.withParent {
+      top: 16px
+    }
   }
 
   .menuItem {
@@ -161,4 +175,4 @@ export default styled(Account)`
       margin: 0;
     }
   }
-`;
+`);

packages/extension-ui/src/components/ValidatedInput.tsx

@@ -9,16 +9,16 @@ import Warning from './Warning';
 
 interface BasicProps {
   isError?: boolean;
-  value?: string;
+  value?: string | null;
   onChange?: (value: string) => void;
 }
 
 type Props<T extends BasicProps> = T & {
   className?: string;
-  validator: Validator<string>;
   component: React.ComponentType<T>;
-  onValidatedChange: (value: string | null) => void;
   defaultValue?: string;
+  onValidatedChange: (value: string | null) => void;
+  validator: Validator<string>;
 }
 
 function ValidatedInput<T extends Record<string, unknown>> ({ className, component: Input, defaultValue, onValidatedChange, validator, ...props }: Props<T>): React.ReactElement<Props<T>> {

packages/extension-ui/src/partials/Name.tsx

@@ -14,7 +14,7 @@ interface Props {
   label?: string;
   onBlur?: () => void;
   onChange: (name: string | null) => void;
-  value?: string;
+  value?: string | null;
 }
 
 export default function Name ({ address, className, isFocused, label, onBlur, onChange, value }: Props): React.ReactElement<Props> {
@@ -34,6 +34,7 @@ export default function Name ({ address, className, isFocused, label, onBlur, on
       isFocused={isFocused}
       label={label || t<string>('A descriptive name for your account')}
       onBlur={onBlur}
+      onEnter={onBlur}
       onValidatedChange={onChange}
       type='text'
       validator={isNameValid}