Merge pull request #130 from nguvictor/pair-selector-style-shortcut

pair selector and style
DeXter-on-Radix · Sep 27, 2023 · a49f31f · a49f31f
2 parents 97450c0 + c76ae79
commit a49f31f
Showing 1 changed file with 27 additions and 6 deletions.
diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
@@ -8,18 +8,39 @@ 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" id="pair-selector">
+      <label
+        tabIndex={0}
+        className="justify-between btn btn-block font-bold base-100"
+      >
+        <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 !my-0 !px-0"
       >
+        <li className="text-xs text-left uppercase text-secondary-content !pl-4 ">
+          Select a pair of tokens:
+        </li>
         {pairSelector.pairsList.map((pair, index) => (
-          <li key={index}>
-            <button onClick={() => selectPair(pair.address)}>
+          <li className="font-bold !pl-0" key={index}>
+            <button
+              className="justify-between"
+              onClick={() => selectPair(pair.address)}
+            >
               {pair.name}
+              <span>+</span>
             </button>
           </li>
         ))}