From a44e1b7d08ab32f43825a6dbfc8774e96dc27200 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 29 Dec 2020 16:40:27 +0100
Subject: [PATCH] Fix dark theme multi address background (#4293)

---
 packages/react-components/src/AccountIndex.tsx            | 2 +-
 packages/react-components/src/AccountName.tsx             | 2 +-
 packages/react-components/src/InputAddress/KeyPair.tsx    | 2 +-
 packages/react-components/src/InputAddressMulti/index.tsx | 8 +++++---
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/src/AccountIndex.tsx b/packages/react-components/src/AccountIndex.tsx
index f560fca5a2..880dd11d23 100644
--- a/packages/react-components/src/AccountIndex.tsx
+++ b/packages/react-components/src/AccountIndex.tsx
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { DeriveAccountInfo } from '@polkadot/api-derive/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { AccountId, Address } from '@polkadot/types/interfaces';
+import type { ThemeProps } from './types';
 
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index a9b36b8c52..56eb56c954 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -3,8 +3,8 @@
 
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import type { DeriveAccountInfo, DeriveAccountRegistration } from '@polkadot/api-derive/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
+import type { ThemeProps } from './types';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx
index 0c01e1acd6..a8ec51114b 100644
--- a/packages/react-components/src/InputAddress/KeyPair.tsx
+++ b/packages/react-components/src/InputAddress/KeyPair.tsx
@@ -1,7 +1,7 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
+import type { ThemeProps } from '../types';
 
 import React from 'react';
 import styled from 'styled-components';
diff --git a/packages/react-components/src/InputAddressMulti/index.tsx b/packages/react-components/src/InputAddressMulti/index.tsx
index 4e7be3f5b4..51b38450a9 100644
--- a/packages/react-components/src/InputAddressMulti/index.tsx
+++ b/packages/react-components/src/InputAddressMulti/index.tsx
@@ -1,6 +1,8 @@
 // Copyright 2017-2020 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ThemeProps } from '../types';
+
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
@@ -108,7 +110,7 @@ function InputAddressMulti ({ available, availableLabel, className = '', default
   );
 }
 
-export default React.memo(styled(InputAddressMulti)`
+export default React.memo(styled(InputAddressMulti)(({ theme }: ThemeProps) => `
   border-top-width: 0px;
   margin-left: 2rem;
   width: calc(100% - 2rem);
@@ -136,7 +138,7 @@ export default React.memo(styled(InputAddressMulti)`
 
       .ui--InputAddressMulti-items {
         padding: 0.5rem 0;
-        background: white;
+        background: ${theme.bgInput};
         border: 1px solid rgba(34,36,38,0.15);
         border-radius: 0.286rem 0.286rem;
         flex: 1;
@@ -162,4 +164,4 @@ export default React.memo(styled(InputAddressMulti)`
       }
     }
   }
-`);
+`));