feat(icons): update search and download icons

blockchain · Jan 30, 2020 · 8dc91ff · 8dc91ff
1 parent dd21ad5
commit 8dc91ff
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 242 deletions.
diff --git a/packages/blockchain-info-components/src/Fonts/Icomoon/fonts/icomoon.eot b/packages/blockchain-info-components/src/Fonts/Icomoon/fonts/icomoon.eot
diff --git a/packages/blockchain-info-components/src/Fonts/Icomoon/fonts/icomoon.svg b/packages/blockchain-info-components/src/Fonts/Icomoon/fonts/icomoon.svg
diff --git a/packages/blockchain-info-components/src/Fonts/Icomoon/fonts/icomoon.ttf b/packages/blockchain-info-components/src/Fonts/Icomoon/fonts/icomoon.ttf
diff --git a/packages/blockchain-info-components/src/Fonts/Icomoon/fonts/icomoon.woff b/packages/blockchain-info-components/src/Fonts/Icomoon/fonts/icomoon.woff
diff --git a/packages/blockchain-info-components/src/Fonts/Icomoon/selection.json b/packages/blockchain-info-components/src/Fonts/Icomoon/selection.json
diff --git a/packages/blockchain-info-components/src/Form/TextInput.js b/packages/blockchain-info-components/src/Form/TextInput.js
@@ -49,6 +49,7 @@ const InputIcon = styled(Icon)`
   position: absolute;
   top: 12px;
   left: 12px;
+  color: ${props => props.theme['grey400']};
 `
 const selectBorderColor = state => {
   switch (state) {

diff --git a/packages/blockchain-info-components/src/Icons/Icomoon.js b/packages/blockchain-info-components/src/Icons/Icomoon.js
@@ -45,6 +45,7 @@ export default {
   'credit-card': '\\e941',
   'credit-card-filled': '\\e90e',
   dollars: '\\e942',
+  download: '\\e911',
   email: '\\e934',
   eth: '\\e97b',
   'eth-circle': '\\e989',
@@ -59,6 +60,7 @@ export default {
   'lightning-bolt': '\\e921',
   'line-graph-up': '\\e933',
   lock: '\\e949',
+  magnifier: '\\e943',
   mobile: '\\e967',
   'nav-buy': '\\e988',
   'open-in-new-tab': '\\e979',
@@ -74,7 +76,6 @@ export default {
   'question-in-circle-filled': '\\e909',
   refresh: '\\e90a',
   request: '\\e912',
-  search: '\\e950',
   send: '\\e925',
   shield: '\\e908',
   spade: '\\e92f',

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/Faq/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/Faq/template.js
@@ -66,7 +66,7 @@ const Faq = props => (
     </ContentHeader>
     <Search>
       <Field name='search' component={TextBox} />
-      <Icon name='search' size='20px' weight={400} color='gray-3' />
+      <Icon name='magnifier' size='20px' weight={400} color='gray-3' />
     </Search>
     <Content>
       {props.filteredContent.length > 0 &&

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Menu/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Menu/index.js
@@ -69,7 +69,7 @@ const MenuTop = () => (
       </TabMenu>
       <Search data-e2e='walletSettingsSearch'>
         <Field name='search' height='40px' component={TextBox} />
-        <SearchIcon name='search' size='20px' />
+        <SearchIcon name='magnifier' size='20px' />
       </Search>
     </Container>
   </HorizontalMenu>

diff --git a/...ages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionFilters/template.js b/...ages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionFilters/template.js
@@ -43,6 +43,12 @@ const ReportingIcon = styled(Icon)`
   width: 40px;
   margin-right: 10px;
 `
+const SearchField = styled(Field)`
+  > div > span {
+    top: 14px;
+    font-size: 18px;
+  }
+`
 const PRIVATE_KEY_EXPORT_COINS = ['ETH', 'XLM']
 const TX_EXPORT_COINS = ['BTC', 'BCH']
 
@@ -114,19 +120,19 @@ const TransactionFilters = ({
       )}
       {includes(coin, TX_EXPORT_COINS) && (
         <ReportingIcon
-          name='request'
-          size='24px'
+          color='grey400'
           cursor
-          color='gray-2'
-          onClick={handleClickReporting}
           data-e2e='generateTxReport'
+          name='download'
+          onClick={handleClickReporting}
+          size='20px'
         />
       )}
-      <Field
+      <SearchField
         component={TextBox}
         data-e2e='transactionsMenuSearchBox'
-        height='40px'
-        icon='search'
+        height='45px'
+        icon='magnifier'
         name='search'
         placeholder='Search'
       />