Widget/search input styling (#1970)

* Revert to tighter border radius * Text sizing, color * Use text-base * Revert popover elements spacing * Update text color * make input full-bleed with minor style adjustments * actual save: make input full-bleed with minor style adjustments * bug fix: use correct --focus color --------- Co-authored-by: Lawson Kight <[email protected]>
synapsecns · Feb 2, 2024 · 3bb7841 · 3bb7841
1 parent 200c261
commit 3bb7841
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 24 deletions.
diff --git a/packages/widget/src/components/ui/ChainPopoverSelect.tsx b/packages/widget/src/components/ui/ChainPopoverSelect.tsx
@@ -47,7 +47,7 @@ export const ChainPopoverSelect = ({
         onClick={() => togglePopover()}
         style={{ background: 'var(--synapse-select-bg)' }}
         className={`
-          flex px-2.5 py-1.5 gap-2 items-center rounded-lg
+          flex px-2.5 py-1.5 gap-2 items-center rounded
           text-[--synapse-select-text] whitespace-nowrap
           border border-solid border-[--synapse-select-border]
           cursor-pointer hover:border-[--synapse-focus]
@@ -60,7 +60,7 @@ export const ChainPopoverSelect = ({
         <div
           style={{ background: 'var(--synapse-select-bg)' }}
           className={`
-            absolute z-50 mt-1 p-1 max-h-60 min-w-48 rounded-lg
+            absolute z-50 mt-1 max-h-60 min-w-48 rounded
             shadow popover text-left list-none overflow-y-auto
             border border-solid border-[--synapse-select-border]
           `}
@@ -72,7 +72,7 @@ export const ChainPopoverSelect = ({
             isActive={isOpen}
           />
           {hasFilteredResults ? (
-            <ul className="p-0 mt-px mb-0 space-y-px">
+            <ul className="p-0 m-0">
               {filteredOptions.map((option, i) => (
                 <ChainOption
                   key={i}
@@ -83,10 +83,9 @@ export const ChainPopoverSelect = ({
               ))}
               {hasFilteredRemaining && (
                 <div
-                  style={{ background: 'var(--synapse-select-bg)' }}
                   className={`
-                    sticky top-0 px-2.5 py-2 mt-2
-                    text-sm text-[--synapse-secondary]
+                    sticky top-0 px-2.5 py-2 mt-2 text-sm
+                    text-[--synapse-secondary] bg-[--synapse-surface]
                   `}
                 >
                   Other chains
@@ -102,7 +101,7 @@ export const ChainPopoverSelect = ({
               ))}
             </ul>
           ) : (
-            <div className="p-2 break-all">
+            <div className="p-2 text-sm break-all">
               No chains found
               <br />
               matching '{filterValue}'.
@@ -126,7 +125,7 @@ const ChainOption = ({
   <li
     key={option.id}
     className={`
-      pl-2.5 pr-8 py-2.5 rounded-lg border border-solid
+      pl-2.5 pr-8 py-2.5 rounded-[.1875rem] border border-solid
       hover:border-[--synapse-focus] active:opacity-40
       cursor-pointer whitespace-nowrap
       ${

diff --git a/packages/widget/src/components/ui/SearchInput.tsx b/packages/widget/src/components/ui/SearchInput.tsx
@@ -24,11 +24,7 @@ export const SearchInput = ({
     setInputValue(event.target.value)
   }
   return (
-    <div
-      data-test-id="search-input"
-      className="p-2 border border-solid rounded-lg border-[--synapse-focus]"
-      style={{ background: 'var(--synapse-select-bg)' }}
-    >
+    <div data-test-id="search-input">
       <input
         type="text"
         ref={inputRef}
@@ -37,9 +33,10 @@ export const SearchInput = ({
         onChange={handleInputChange}
         style={{ background: 'var(--synapse-select-bg)' }}
         className={`
-          text-[--synapse-secondary]
-          w-full border-none shadow-none
-          focus:ring-0 focus:border-none focus:outline-none
+          text-[--synapse-text] placeholder:text-[--synapse-secondary]
+          w-full border border-solid border-[--synapse-focus] shadow-none text-base
+          focus:ring-0 focus:border-[--synapse-focus] focus:outline-none
+          px-2 py-1.5 rounded
         `}
       />
     </div>

diff --git a/packages/widget/src/components/ui/TokenPopoverSelect.tsx b/packages/widget/src/components/ui/TokenPopoverSelect.tsx
@@ -76,7 +76,7 @@ export const TokenPopoverSelect = ({
         onClick={() => togglePopover()}
         style={{ background: 'var(--synapse-select-bg)' }}
         className={`
-          flex px-2.5 py-1.5 gap-2 items-center rounded-lg
+          flex px-2.5 py-1.5 gap-2 items-center rounded
           text-[--synapse-select-text] whitespace-nowrap
           border border-solid border-[--synapse-select-border]
           cursor-pointer hover:border-[--synapse-focus]
@@ -89,7 +89,7 @@ export const TokenPopoverSelect = ({
         <div
           style={{ background: 'var(--synapse-select-bg)' }}
           className={`
-            absolute right-0 z-50 mt-1 p-1 max-h-80 min-w-48 rounded-lg
+            absolute right-0 z-50 mt-1 max-h-80 min-w-48 rounded
             shadow popover text-left list-none overflow-y-auto
             border border-solid border-[--synapse-select-border]
           `}
@@ -101,7 +101,7 @@ export const TokenPopoverSelect = ({
             isActive={isOpen}
           />
           {hasFilteredResults ? (
-            <ul className="p-0 mt-px mb-0 space-y-px">
+            <ul className="p-0 m-0">
               {filteredSortedOptionsWithBalances?.map(
                 (option: TokenBalance, index) => (
                   <TokenOption
@@ -115,10 +115,9 @@ export const TokenPopoverSelect = ({
               )}
               {hasFilteredRemaining && (
                 <div
-                  style={{ background: 'var(--synapse-select-bg)' }}
                   className={`
-                    sticky top-0 px-2.5 py-2 mt-2
-                    text-sm text-[--synapse-secondary]
+                    sticky top-0 px-2.5 py-2 mt-2 text-sm
+                    text-[--synapse-secondary] bg-[--synapse-surface]
                   `}
                 >
                   Other tokens
@@ -137,7 +136,7 @@ export const TokenPopoverSelect = ({
               )}
             </ul>
           ) : (
-            <div className="p-2 break-all">
+            <div className="p-2 text-sm break-all">
               No tokens found
               <br />
               matching '{filterValue}'.
@@ -165,7 +164,7 @@ const TokenOption = ({
       data-test-id="token-option"
       className={`
         flex gap-4 items-center justify-between
-        cursor-pointer rounded-lg border border-solid
+        cursor-pointer rounded border border-solid
         hover:border-[--synapse-focus] active:opacity-40
         ${
           option?.symbol === selected?.symbol