Improved aesthethics of chain

Now it looks better as they share a grid space
paritytech · Nov 23, 2023 · c204577 · c204577
1 parent bec4d18
commit c204577
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/client/src/lib/components/Form.svelte b/client/src/lib/components/Form.svelte
@@ -37,8 +37,10 @@
 </script>
 
 <form on:submit|preventDefault={onSubmit} class="w-full">
-  <NetworkDropdown currentNetwork={networkData} />
-  <NetworkInput bind:network />
+  <div class="grid md:grid-cols-2 md:gap-x-4">
+    <NetworkInput bind:network />
+    <NetworkDropdown currentNetwork={networkData} />
+  </div>
 
   <div class="inputs-container">
     <label class="label" for="address">

diff --git a/client/src/lib/components/NetworkDropdown.svelte b/client/src/lib/components/NetworkDropdown.svelte
@@ -6,16 +6,16 @@
   export let currentNetwork: NetworkData;
 </script>
 
-<div class="dropdown dropdown-top w-full inputs-container">
+<div class="dropdown w-full mb-14">
   <label class="label" for="address">
     <span class="form-label">Chain</span>
   </label>
   <div tabindex="-1" class="chain-dropdown w-full" data-testid="network-select">
     <div class="w-full flex justify-between bg-transparent">
-        <div>
+      <div>
         {currentNetwork.networkName}
-        </div>
-        <Chevron />
+      </div>
+      <Chevron />
     </div>
   </div>
   <ul tabindex="-1" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full text-white">
@@ -40,7 +40,7 @@
     font-size: 16px;
   }
 
-  .inputs-container {
-    margin-bottom: 1.5rem;
+  .selected {
+    @apply bg-primary;
   }
 </style>
diff --git a/client/src/lib/components/NetworkInput.svelte b/client/src/lib/components/NetworkInput.svelte
@@ -50,7 +50,7 @@
     class:hidden={!customValue}
   />
   {#if !customValue}
-    <div class="dropdown w-full">
+    <div class="dropdown dropdown-top md:dropdown-bottom w-full">
       <div tabindex="0" class="chain-dropdown" data-testid="dropdown">
         <div class="w-full flex justify-between">
           <div>