larger pair selector text

DeXter-on-Radix · Oct 16, 2023 · b16d246 · b16d246
1 parent 87992db
commit b16d246
Showing 1 changed file with 13 additions and 8 deletions.
diff --git 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>