Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widget/search input styling #1970

Merged
merged 8 commits into from
Feb 2, 2024
Merged

Widget/search input styling #1970

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d53f0f6
Revert to tighter border radius
bigboydiamonds Feb 2, 2024
dd36f2b
Text sizing, color
bigboydiamonds Feb 2, 2024
12eca41
Use text-base
bigboydiamonds Feb 2, 2024
dd38e55
Revert popover elements spacing
bigboydiamonds Feb 2, 2024
c585491
Update text color
bigboydiamonds Feb 2, 2024
4b8393a
make input full-bleed with minor style adjustments
lawsonkight Feb 2, 2024
223ab06
actual save: make input full-bleed with minor style adjustments
lawsonkight Feb 2, 2024
f6d82fe
bug fix: use correct --focus color
lawsonkight Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions packages/widget/src/components/ui/ChainPopoverSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
text-[--synapse-select-text] whitespace-nowrap
border border-solid border-[--synapse-select-border]
cursor-pointer hover:border-[--synapse-focus]
Expand All @@ -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 p-1 max-h-60 min-w-48 rounded
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
shadow popover text-left list-none overflow-y-auto
border border-solid border-[--synapse-select-border]
`}
Expand All @@ -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}
Expand All @@ -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
Expand All @@ -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}'.
Expand All @@ -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
${
Expand Down
6 changes: 3 additions & 3 deletions packages/widget/src/components/ui/SearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const SearchInput = ({
return (
<div
data-test-id="search-input"
className="p-2 border border-solid rounded-lg border-[--synapse-focus]"
className="p-2 border border-solid rounded border-[--synapse-focus]"
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
style={{ background: 'var(--synapse-select-bg)' }}
>
<input
Expand All @@ -37,8 +37,8 @@ export const SearchInput = ({
onChange={handleInputChange}
style={{ background: 'var(--synapse-select-bg)' }}
className={`
text-[--synapse-secondary]
w-full border-none shadow-none
text-[--primary] placeholder:text-[--synapse-secondary]
w-full border-none shadow-none text-base
focus:ring-0 focus:border-none focus:outline-none
`}
/>
Expand Down
15 changes: 7 additions & 8 deletions packages/widget/src/components/ui/TokenPopoverSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
text-[--synapse-select-text] whitespace-nowrap
border border-solid border-[--synapse-select-border]
cursor-pointer hover:border-[--synapse-focus]
Expand All @@ -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 p-1 max-h-80 min-w-48 rounded
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
shadow popover text-left list-none overflow-y-auto
border border-solid border-[--synapse-select-border]
`}
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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}'.
Expand Down Expand Up @@ -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
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
hover:border-[--synapse-focus] active:opacity-40
${
option?.symbol === selected?.symbol
Expand Down
Loading