From 9b6f83d6fa766e20023092a726b489e7a9a7ec8d Mon Sep 17 00:00:00 2001
From: David Tran Duc <david.tran.duc@vacuumlabs.com>
Date: Thu, 25 Feb 2021 20:16:53 +0100
Subject: [PATCH] Add dropdown icon to asset dropdown in send ada page

---
 app/frontend/components/pages/sendAda/sendAdaPage.tsx | 2 +-
 app/public/css/styles.css                             | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/frontend/components/pages/sendAda/sendAdaPage.tsx b/app/frontend/components/pages/sendAda/sendAdaPage.tsx
index 43b7b5a302..e393dcc608 100644
--- a/app/frontend/components/pages/sendAda/sendAdaPage.tsx
+++ b/app/frontend/components/pages/sendAda/sendAdaPage.tsx
@@ -248,7 +248,7 @@ const SendAdaPage = ({
         displaySelectedItem={(tokenBalanceWithAda: DropdownAssetItem) =>
           `${tokenBalanceWithAda.assetName}`
         }
-        displaySelectedItemClassName="input"
+        displaySelectedItemClassName="input dropdown"
         items={dropdownAssetItems}
         displayItem={showDropdownAssetItem}
         onSelect={onSelect}
diff --git a/app/public/css/styles.css b/app/public/css/styles.css
index 280e839185..707170e216 100644
--- a/app/public/css/styles.css
+++ b/app/public/css/styles.css
@@ -240,6 +240,13 @@ p.hey {
   box-shadow: none;
 }
 
+.input.dropdown {
+  background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);
+  background-size: 0.7em;
+  background-position: calc(100% - 1.3em) center;
+  background-repeat: no-repeat;
+}
+
 .input-wrapper {
   border-radius: 4px;
   border: 1px solid var(--color-border);