[core] : Enhancement - Dropdown select icon opens options (#952)

* Add passing of icons into network select to allow for clickable icon to open select options
* Add the Max and Min views to commit
* Prettier-ify
* Add padding when network is switching

Author: Adamj1232

packages/core/src/icons/caret-light.ts

@@ -1,5 +1 @@
-export default `
-  <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z" fill="currentColor"/>
-  </svg>
-`
+export default `<svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z" fill="currentColor"/></svg>`

packages/core/src/icons/caret.ts

@@ -1,5 +1 @@
-export default `
-  <svg width="100%" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
-  </svg>
-`
+export default `<svg width="100%" height="24" viewBox="0 5 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10H7Z" fill="currentColor"/></svg>`

packages/core/src/views/account-center/Maximized.svelte

@@ -319,10 +319,8 @@
               chains={appChains}
               color="#33394B"
               bold={true}
+              selectIcon={caretLightIcon}
             />
-            <div class="caret flex items-center justify-center">
-              {@html caretLightIcon}
-            </div>
           </div>
         </div>
       </div>

packages/core/src/views/account-center/Minimized.svelte

@@ -40,8 +40,7 @@
       ? firstAccount.balance[firstAddressAsset]
       : null
 
-  $: primaryChain =
-    primaryWallet && primaryWallet.chains[0]
+  $: primaryChain = primaryWallet && primaryWallet.chains[0]
 
   $: validAppChain = chains.find(({ id, namespace }) =>
     primaryChain
@@ -203,11 +202,7 @@
               : warningIcon}
           </div>
 
-          <NetworkSelector {chains} color="#33394B" />
-        </div>
-
-        <div class="caret flex items-center">
-          {@html caretIcon}
+          <NetworkSelector {chains} color="#33394B" selectIcon={caretIcon} />
         </div>
       </div>
     </div>

packages/core/src/views/shared/NetworkSelector.svelte

@@ -5,7 +5,9 @@
   import setChain from '../../chain'
   import { wallets$ } from '../../streams'
   import { distinctUntilChanged, debounceTime, skip } from 'rxjs/operators'
+  import caretIcon from '../../icons/caret'
 
+  export let selectIcon: string = caretIcon
   export let color = '#33394B'
   export let chains: Chain[]
   export let bold = false
@@ -72,8 +74,13 @@
     font-size: var(--onboard-font-size-7, var(--font-size-7));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
     max-width: 90px;
-    width: 54px;
+    min-width: 72px;
     transition: width 250ms ease-in-out;
+    background-repeat: no-repeat, repeat;
+    background-position: right 0px top 0px, 0 0;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    padding: 0 16px 0 0;
   }
 
   select:focus {
@@ -88,14 +95,16 @@
 
 {#if wallet}
   {#if $switching$}
-    <span style={`color: ${color};`}>switching...</span>
+    <span style={`color: ${color}; padding: 0 12px 0 8px;`}>switching...</span>
   {:else}
     <select
       class="flex justify-center items-center pointer"
       bind:this={selectElement}
       value={wallet.chains[0].id}
       on:change={handleSelect}
-      style={`color: ${color}; ${bold ? 'font-weight: 700;' : ''}`}
+      style={`color: ${color}; background-image: url('data:image/svg+xml;utf8,${selectIcon}'); ${
+        bold ? 'font-weight: 700;' : ''
+      }`}
     >
       {#if !connectedToValidAppChain(wallet.chains[0], chains)}
         <option value={wallet.chains[0].id}