From d9210bba54e7425e6cba4798c17b1575dac855cd Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Mon, 25 Sep 2023 22:07:24 -0400
Subject: [PATCH 1/3] styling and positioning

---
 src/app/components/PairSelector.tsx | 36 ++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index fad2bbce..e82ebe4d 100644
--- 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>
         ))}

From ea9ffa92596f9166550de66dc0bbbc5af0cee6fe Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Tue, 26 Sep 2023 11:53:41 -0400
Subject: [PATCH 2/3] remove not-prose, fixed padding for dropdown

---
 src/app/components/PairSelector.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index e82ebe4d..c0d2b4dc 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -8,13 +8,10 @@ export function PairSelector() {
     dispatch(selectPairAddress(pairAddress));
   };
   return (
-    <div
-      className="dropdown dropdown-start w-full not-prose"
-      id="pair-selector"
-    >
+    <div className="dropdown dropdown-start w-full" id="pair-selector">
       <label
         tabIndex={0}
-        className="justify-between btn btn-block m-1 font-bold"
+        className="justify-between btn btn-block font-bold base-100"
       >
         <span>{pairSelector.name || "Loading"}</span>
         <span className="float-right">
@@ -31,7 +28,7 @@ export function PairSelector() {
       </label>
       <ul
         tabIndex={0}
-        className="dropdown-content z-[1] menu shadow bg-neutral rounded-box w-full mt-0 mb-0"
+        className="dropdown-content z-[1] menu shadow bg-neutral rounded-box w-full !my-0"
       >
         <li className="text-xs text-left uppercase text-secondary-content px-4">
           Select a pair of tokens:

From 94ee2298f4671e3ad5685f60d9f1f028d88bc9f2 Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Tue, 26 Sep 2023 12:10:47 -0400
Subject: [PATCH 3/3] polishing up margins

---
 src/app/components/PairSelector.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index c0d2b4dc..5d19ab1d 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -28,13 +28,13 @@ export function PairSelector() {
       </label>
       <ul
         tabIndex={0}
-        className="dropdown-content z-[1] menu shadow bg-neutral rounded-box w-full !my-0"
+        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 px-4">
+        <li className="text-xs text-left uppercase text-secondary-content !pl-4 ">
           Select a pair of tokens:
         </li>
         {pairSelector.pairsList.map((pair, index) => (
-          <li className="font-bold" key={index}>
+          <li className="font-bold !pl-0" key={index}>
             <button
               className="justify-between"
               onClick={() => selectPair(pair.address)}