diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx index 6d99ed80b3c..8023668b5bf 100644 --- a/packages/extension-ui/src/Popup/Accounts/Account.tsx +++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx @@ -10,7 +10,6 @@ import styled from 'styled-components'; import { ActionContext, Address, Link } from '../../components'; import { editAccount } from '../../messaging'; import { Name } from '../../partials'; -import { AccountInfoRow } from '../../components/Address'; interface Props extends AccountJson { address: string; @@ -81,9 +80,8 @@ const MenuItem = styled(Link)` MenuItem.displayName = 'MenuItem'; export default styled(Account)` - ${AccountInfoRow} { - border: 1px solid ${({ theme }): string => theme.boxBorderColor}; - box-sizing: border-box; + ${Address} { + margin-bottom: 8px; } .edit-name { diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx index 19f340db56a..948ba9c2043 100644 --- a/packages/extension-ui/src/components/Address.tsx +++ b/packages/extension-ui/src/components/Address.tsx @@ -102,14 +102,16 @@ function Address ({ address, className, children, genesisHash, name, actions }: ); } -export const AccountInfoRow = styled.div` +const AccountInfoRow = styled.div` display: flex; flex-direction: row; justify-content: flex-start; align-items: center; height: 72px; - margin-bottom: 8px; border-radius: 4px; + &:not(:last-child) { + margin-bottom: 8px; + } `; const Info = styled.div` @@ -181,6 +183,8 @@ export default styled(Address)` & > div { background: ${({ theme }): string => theme.accountBackground}; + border: 1px solid ${({ theme }): string => theme.boxBorderColor}; + box-sizing: border-box; border-radius: 4px; } diff --git a/packages/extension-ui/src/components/TextInputs.ts b/packages/extension-ui/src/components/TextInputs.ts index be07071c6cb..4723ec5d96a 100644 --- a/packages/extension-ui/src/components/TextInputs.ts +++ b/packages/extension-ui/src/components/TextInputs.ts @@ -24,7 +24,6 @@ const TextInput = css` border-radius: ${({ theme }): string => theme.borderRadius}; border: ${({ theme }): string => `1px solid ${theme.inputBorderColor}`}; outline: none; - box-shadow: 0 0 40px ${({ theme }): string => theme.boxShadow}; box-sizing: border-box; display: block; font-family: ${({ theme }): string => theme.fontFamily}; diff --git a/packages/extension-ui/src/components/themes.ts b/packages/extension-ui/src/components/themes.ts index c370a2e7706..38b364fb4bf 100644 --- a/packages/extension-ui/src/components/themes.ts +++ b/packages/extension-ui/src/components/themes.ts @@ -4,7 +4,7 @@ const darkTheme = { id: 'dark', - background: '#14151A', + background: '#181A23', highlightedAreaBackground: '#0B0C10', popupBackground: '#0B0C10', accountBackground: '#0B0C10',