Skip to content

Commit 332d8ad

Browse files
andrewlee348andrewlee348
committed
updated styling for all views to new designs
1 parent 4c290f3 commit 332d8ad

File tree

18 files changed

+237
-126
lines changed

18 files changed

+237
-126
lines changed

‎packages/connect/src/styles.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export const styles = String.raw`
77
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
88
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
99
"Courier New", monospace;
10+
--color-violet-600: oklch(0.541 0.281 293.009);
1011
--color-black: #000;
1112
--color-white: #fff;
1213
--spacing: 0.25rem;
@@ -777,6 +778,9 @@ export const styles = String.raw`
777778
.border-transparent {
778779
border-color: transparent;
779780
}
781+
.border-violet-600 {
782+
border-color: var(--color-violet-600);
783+
}
780784
.border-t-primary {
781785
border-top-color: var(--seq-color-primary);
782786
}

‎packages/wallet-widget/src/components/IconWrappers/MediaIconWrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const MediaIconWrapper = ({
2323
const firstThreeIcons = iconList.slice(0, 3)
2424

2525
let partialWidth = 0
26-
let shapeClass = 'rounded-lg'
26+
let shapeClass = 'rounded-lg;'
2727

2828
switch (size) {
2929
case '4xs':

‎packages/wallet-widget/src/components/ListCard/ListCardNav.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,12 @@ export const ListCardNav = ({
2626
>
2727
<div className="flex flex-row gap-2 items-center w-full">{children}</div>
2828

29-
{rightChildren ||
30-
(type === 'chevron' && (
31-
<div className="flex flex-row gap-1 items-center">
32-
{rightChildren}
33-
{type === 'chevron' && <ChevronRightIcon color="white" />}
34-
</div>
35-
))}
29+
{(rightChildren || type === 'chevron') && (
30+
<div className="flex flex-row gap-1 items-center">
31+
{rightChildren}
32+
{type === 'chevron' && <ChevronRightIcon color="white" size="md" />}
33+
</div>
34+
)}
3635
</div>
3736
)
3837
}

‎packages/wallet-widget/src/components/ListCard/ListCardSelect.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,17 @@ export const ListCardSelect = ({
2424
return (
2525
<div
2626
className={cn(
27-
'flex flex-row justify-between items-center p-4 bg-background-secondary w-full',
27+
'flex flex-row justify-between items-center gap-2 p-4 bg-background-secondary w-full',
2828
!disabled && 'cursor-pointer hover:opacity-80',
29-
shape === 'rounded' ? 'rounded-lg' : 'rounded-none'
29+
shape === 'rounded' ? 'rounded-lg' : 'rounded-none',
30+
isSelected && 'border-2 border-violet-600'
3031
)}
3132
style={{ height: '68px', ...style }}
3233
onClick={disabled ? undefined : onClick}
3334
>
3435
<div className="flex flex-row items-center gap-2">{children}</div>
3536

36-
<div className="flex flex-row gap-1 items-center">
37+
<div className="flex flex-row gap-3 items-center">
3738
{rightChildren}
3839
{type === 'radio' && <RadioSelector isSelected={isSelected} />}
3940
</div>

‎packages/wallet-widget/src/components/ListCard/RadioSelector.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ interface RadioSelectorProps {
99
export const RadioSelector = (props: RadioSelectorProps) => {
1010
const { isSelected, className } = props
1111
return (
12-
<div className={`${className} border-2 border-border-normal bg-background-muted rounded-full ml-4 relative shrink-0 w-8 h-8`}>
12+
<div className={`${className} border-2 border-border-normal bg-background-muted rounded-full relative shrink-0 w-9 h-9`}>
1313
<motion.div
14-
className="flex bg-background-inverse absolute items-center justify-center rounded-full text-inverse w-8 h-8"
14+
// TODO: change color to violet-600
15+
className="flex bg-background-inverse absolute items-center justify-center rounded-full text-inverse w-9 h-9"
1516
initial={{ opacity: isSelected ? 1 : 0, scale: isSelected ? 1 : 0.5 }}
1617
animate={{ opacity: isSelected ? 1 : 0, scale: isSelected ? 1 : 0.5 }}
1718
transition={{ ease: 'backOut' }}

‎packages/wallet-widget/src/components/ListCard/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export { ListCardNav } from './ListCardNav'
2-
// export { ListCardSelect } from './ListCardSelect'
2+
export { ListCardSelect } from './ListCardSelect'

‎packages/wallet-widget/src/components/NavigationHeader/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const NavigationHeader = ({ secondaryText, primaryText }: NavigationHeade
4343
{secondaryText}
4444
</Text>
4545
<ModalPrimitive.Title asChild>
46-
<Text fontWeight="medium" variant="small" color="primary">
46+
<Text fontWeight="bold" variant="medium" color="primary">
4747
{primaryText}
4848
</Text>
4949
</ModalPrimitive.Title>

‎packages/wallet-widget/src/components/SearchLists/CollectiblesList.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ export const CollectiblesList = ({
1313
tokenBalancesData,
1414
isPendingTokenBalances,
1515
onTokenClick,
16-
enableFilters = true
16+
enableFilters = true,
17+
gridColumns = 2
1718
}: {
1819
tokenBalancesData: TokenBalance[]
1920
isPendingTokenBalances: boolean
2021
onTokenClick: (token: TokenBalanceWithPrice) => void
2122
enableFilters?: boolean
23+
gridColumns?: number
2224
}) => {
2325
const pageSize = 8
2426

@@ -122,6 +124,7 @@ export const CollectiblesList = ({
122124
isFetchingMoreCollectibleBalances={search ? isFetchingMoreSearchBalances : isFetchingMoreBalances}
123125
isFetchingInitialBalances={isPending}
124126
onTokenClick={onTokenClick}
127+
gridColumns={gridColumns}
125128
/>
126129
</div>
127130

‎packages/wallet-widget/src/components/SearchLists/CollectiblesList/CollectiblesTab.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ interface CollectiblesTabProps {
1313
isFetchingMoreCollectibleBalances: boolean
1414
isFetchingInitialBalances: boolean
1515
onTokenClick: (token: TokenBalanceWithPrice) => void
16+
gridColumns?: number
1617
}
1718

1819
export const CollectiblesTab: React.FC<CollectiblesTabProps> = ({
@@ -21,11 +22,12 @@ export const CollectiblesTab: React.FC<CollectiblesTabProps> = ({
2122
hasMoreCollectibleBalances,
2223
isFetchingMoreCollectibleBalances,
2324
isFetchingInitialBalances,
24-
onTokenClick
25+
onTokenClick,
26+
gridColumns
2527
}) => {
2628
return (
2729
<div>
28-
<div className="grid gap-2" style={{ gridTemplateColumns: `calc(50% - 4px) calc(50% - 4px)`, width: '100%' }}>
30+
<div className="grid gap-2" style={{ gridTemplateColumns: `repeat(${gridColumns}, 1fr)`, width: '100%' }}>
2931
{isFetchingInitialBalances ? (
3032
<>
3133
{Array(6)
@@ -36,10 +38,7 @@ export const CollectiblesTab: React.FC<CollectiblesTabProps> = ({
3638
</>
3739
) : (
3840
<>
39-
{(!displayedCollectibleBalances || displayedCollectibleBalances.length === 0) &&
40-
!isFetchingMoreCollectibleBalances ? (
41-
<Text color="primary">No Collectibles Found</Text>
42-
) : (
41+
{displayedCollectibleBalances && displayedCollectibleBalances.length > 0 && (
4342
<InfiniteScroll onLoad={() => fetchMoreCollectibleBalances()} hasMore={hasMoreCollectibleBalances}>
4443
{displayedCollectibleBalances?.map((balance, index) => {
4544
return <CollectibleTile key={index} balance={balance} onTokenClick={onTokenClick} />
@@ -49,6 +48,9 @@ export const CollectiblesTab: React.FC<CollectiblesTabProps> = ({
4948
</>
5049
)}
5150
</div>
51+
{(!displayedCollectibleBalances || displayedCollectibleBalances.length === 0) && !isFetchingMoreCollectibleBalances && (
52+
<Text color="primary">No Collectibles Found</Text>
53+
)}
5254
{isFetchingMoreCollectibleBalances && <Spinner className="flex justify-self-center mt-3" />}
5355
</div>
5456
)

‎packages/wallet-widget/src/components/SelectWalletRow.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { formatAddress, ConnectedWallet } from '@0xsequence/connect'
2-
import { ChevronRightIcon, Text } from '@0xsequence/design-system'
3-
import { cn, cardVariants } from '@0xsequence/design-system'
2+
import { Text } from '@0xsequence/design-system'
43

4+
import { useSettings } from '../hooks'
55
import { getConnectorLogo } from '../utils/wallets'
66

7+
import { ListCardSelect } from './ListCard'
78
import { WalletAccountGradient } from './WalletAccountGradient'
89

910
export const SelectWalletRow = ({
@@ -15,33 +16,32 @@ export const SelectWalletRow = ({
1516
setActiveWallet: (address: string) => void
1617
onClose: () => void
1718
}) => {
19+
const { fiatCurrency, walletsWithFiatValue } = useSettings()
20+
1821
const onSelectWallet = () => {
1922
setActiveWallet(wallet.address)
2023
onClose()
2124
}
2225

26+
const fiatValue = walletsWithFiatValue.find(w => w.accountAddress === wallet.address)?.fiatValue
27+
2328
return (
24-
<div
25-
key={wallet.address}
26-
className={cn(
27-
cardVariants({ clickable: true }),
28-
'flex flex-row justify-between items-center p-3',
29-
wallet.isActive ? 'bg-background-secondary' : 'bg-background-muted'
30-
)}
29+
<ListCardSelect
30+
rightChildren={
31+
<Text color="muted" fontWeight="medium" variant="normal">
32+
{fiatCurrency.sign}
33+
{fiatValue}
34+
</Text>
35+
}
3136
onClick={onSelectWallet}
37+
isSelected={wallet.isActive}
3238
>
33-
<div className="flex flex-row gap-2 items-center">
34-
<WalletAccountGradient accountAddress={wallet.address} loginIcon={getConnectorLogo(wallet.signInMethod)} size={'small'} />
35-
<div className="flex flex-col">
36-
<Text color="primary" fontWeight="medium" variant="normal">
37-
{formatAddress(wallet.address)}
38-
</Text>
39-
<Text color="primary" fontWeight="medium" variant="small">
40-
{wallet.id}
41-
</Text>
42-
</div>
39+
<WalletAccountGradient accountAddress={wallet.address} loginIcon={getConnectorLogo(wallet.signInMethod)} size={'small'} />
40+
<div className="flex flex-col">
41+
<Text color="primary" fontWeight="medium" variant="normal">
42+
{formatAddress(wallet.address)}
43+
</Text>
4344
</div>
44-
<ChevronRightIcon color="white" />
45-
</div>
45+
</ListCardSelect>
4646
)
4747
}

0 commit comments

Comments
 (0)