From b16d246cb88d99d515b95f692b300011d30bfa3a Mon Sep 17 00:00:00 2001
From: Evgeniia Vakarina <27793901+EvgeniiaVak@users.noreply.github.com>
Date: Mon, 16 Oct 2023 18:09:28 +0400
Subject: [PATCH 1/2] larger pair selector text

---
 src/app/components/PairSelector.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index 30100c4e..041e70f2 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -1,16 +1,24 @@
 import { useAppSelector, useAppDispatch } from "../hooks";
 import { selectPairAddress } from "../redux/pairSelectorSlice";
 
+function displayName(name?: string) {
+  return name?.replace("/", " - ");
+}
+
 export function PairSelector() {
   const pairSelector = useAppSelector((state) => state.pairSelector);
   const dispatch = useAppDispatch();
   const selectPair = (pairAddress: string) => {
     dispatch(selectPairAddress(pairAddress));
   };
+
   return (
-    <div className="dropdown dropdown-start w-full" id="pair-selector">
-      <label tabIndex={0} className="justify-between btn btn-block font-bold">
-        <span>{pairSelector.name || "Loading"}</span>
+    <div className="dropdown w-full" id="pair-selector">
+      <label
+        tabIndex={0}
+        className="justify-between btn btn-block px-8 text-xl font-bold"
+      >
+        <span>{displayName(pairSelector.name) || "Loading"}</span>
         <span className="float-right">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -25,18 +33,15 @@ export function PairSelector() {
       </label>
       <ul
         tabIndex={0}
-        className="dropdown-content z-[1] menu bg-base-200 shadow rounded-box w-full !my-0 !px-0"
+        className="dropdown-content z-[1] menu bg-base-200 shadow rounded-box w-full !my-0 !p-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 className="font-bold !pl-0" key={index}>
             <button
               className="justify-between"
               onClick={() => selectPair(pair.address)}
             >
-              {pair.name}
+              {displayName(pair.name)}
               <span>+</span>
             </button>
           </li>

From fb286ddf765430c96ce51768b3b06951e8319128 Mon Sep 17 00:00:00 2001
From: Evgeniia Vakarina <27793901+EvgeniiaVak@users.noreply.github.com>
Date: Mon, 16 Oct 2023 20:47:52 +0400
Subject: [PATCH 2/2] fixes pair selector test

---
 e2e/index.spec.ts                   | 2 +-
 src/app/components/PairSelector.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/e2e/index.spec.ts b/e2e/index.spec.ts
index 9ebbbedb..c9ea2dd4 100644
--- a/e2e/index.spec.ts
+++ b/e2e/index.spec.ts
@@ -36,7 +36,7 @@ test("connects to AlphaDEX", async ({ page }) => {
   );
 
   // A pair should appear in the pair selector
-  await expect(page.locator("#pair-selector")).toHaveText(/.*\/.*/);
+  await expect(page.locator("#pair-selector-text")).toHaveText(/^.* - .*$/);
 });
 
 // TODO: after MVP
diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index 041e70f2..1a81fe14 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -13,12 +13,14 @@ export function PairSelector() {
   };
 
   return (
-    <div className="dropdown w-full" id="pair-selector">
+    <div className="dropdown w-full">
       <label
         tabIndex={0}
         className="justify-between btn btn-block px-8 text-xl font-bold"
       >
-        <span>{displayName(pairSelector.name) || "Loading"}</span>
+        <span id="pair-selector-text">
+          {displayName(pairSelector.name) || "Loading"}
+        </span>
         <span className="float-right">
           <svg
             xmlns="http://www.w3.org/2000/svg"