styling and positioning

DeXter-on-Radix · Sep 26, 2023 · d9210bb · d9210bb
1 parent 87f8060
commit d9210bb
Showing 1 changed file with 30 additions and 6 deletions.
diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
@@ -8,18 +8,42 @@ export function PairSelector() {
     dispatch(selectPairAddress(pairAddress));
   };
   return (
-    <div className="dropdown" id="pair-selector">
-      <label tabIndex={0} className="btn m-1">
-        {pairSelector.name}
+    <div
+      className="dropdown dropdown-start w-full not-prose"
+      id="pair-selector"
+    >
+      <label
+        tabIndex={0}
+        className="justify-between btn btn-block m-1 font-bold"
+      >
+        <span>{pairSelector.name || "Loading"}</span>
+        <span className="float-right">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="white"
+            viewBox="0 0 16 16"
+          >
+            <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
+          </svg>
+        </span>
       </label>
       <ul
         tabIndex={0}
-        className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
+        className="dropdown-content z-[1] menu shadow bg-neutral rounded-box w-full mt-0 mb-0"
       >
+        <li className="text-xs text-left uppercase text-secondary-content px-4">
+          Select a pair of tokens:
+        </li>
         {pairSelector.pairsList.map((pair, index) => (
-          <li key={index}>
-            <button onClick={() => selectPair(pair.address)}>
+          <li className="font-bold" key={index}>
+            <button
+              className="justify-between"
+              onClick={() => selectPair(pair.address)}
+            >
               {pair.name}
+              <span>+</span>
             </button>
           </li>
         ))}