Add dropdown icon to asset dropdown in send ada page

vacuumlabs · Feb 25, 2021 · 9b6f83d · 9b6f83d
1 parent f3bfd1f
commit 9b6f83d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git 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
@@ -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);