Skip to content

Commit 289d652

Browse files
pedromcunhapedromcunha
authored
Merge pull request #376 from reservoirprotocol/feature/eclipse-theme-requests
Theme updates
2 parents a288f7c + 68ad52a commit 289d652

File tree

14 files changed

+103
-48
lines changed

14 files changed

+103
-48
lines changed

‎.changeset/clever-parrots-sip.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@reservoir0x/relay-kit-ui': patch
3+
---
4+
5+
Add new theme tokens and section ids

‎packages/ui/panda.config.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,8 @@ export default defineConfig({
136136
3: { value: '12px' },
137137
4: { value: '16px' },
138138
5: { value: '32px' },
139-
6: { value: '64px' }
139+
6: { value: '64px' },
140+
'widget-card-section-gutter': { value: '6px' }
140141
},
141142
fonts: {
142143
body: { value: 'var(--font-inter), sans-serif' }
@@ -157,6 +158,7 @@ export default defineConfig({
157158
// Text
158159
'text-default': { value: { base: '{colors.gray.12}' } },
159160
'text-subtle': { value: { base: '{colors.gray.11}' } },
161+
'text-subtle-secondary': { value: { base: '{colors.gray.11}' } },
160162
'text-error': { value: { base: '{colors.red.12}' } },
161163
'text-success': { value: { base: '{colors.green.11}' } },
162164

@@ -237,11 +239,18 @@ export default defineConfig({
237239
'widget-card-border-radius': { value: '12px' },
238240
'modal-border-radius': { value: { base: '16px' } },
239241
'input-border-radius': { value: { base: '8px' } },
240-
'dropdown-border-radius': { value: { base: '8px' } }
242+
'dropdown-border-radius': { value: { base: '8px' } },
243+
'widget-swap-currency-button-border-radius': { value: { base: '8px' } }
241244
},
242245
borders: {
243246
'widget-border': { value: { base: '0x solid white' } },
244-
'modal-border': { value: { base: '0x solid white' } }
247+
'modal-border': { value: { base: '0x solid white' } },
248+
'widget-swap-currency-button-border-width': {
249+
value: { base: '4px' }
250+
},
251+
'widget-card-border': {
252+
value: { base: '0 solid transparent' }
253+
}
245254
},
246255
shadows: {
247256
'widget-box-shadow': {

‎packages/ui/src/components/common/BalanceDisplay.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const BalanceDisplay: FC<BalanceDisplayProps> = ({
4747
) : (
4848
<Text
4949
style="subtitle3"
50-
color={hasInsufficientBalance ? 'red' : 'subtle'}
50+
color={hasInsufficientBalance ? 'red' : 'subtleSecondary'}
5151
>
5252
Balance:{' '}
5353
{balance !== undefined

‎packages/ui/src/components/primitives/Box.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ const BoxCss = cva({})
99

1010
type BoxCssProps = Parameters<typeof BoxCss>['0']
1111

12-
const Box: FC<{ css?: Styles } & BoxCssProps & PropsWithChildren> = ({
13-
css,
14-
children,
15-
...props
16-
}) => {
12+
const Box: FC<
13+
{ css?: Styles; id?: string } & BoxCssProps & PropsWithChildren
14+
> = ({ css, children, id, ...props }) => {
1715
return (
18-
<div className={designCss(BoxCss.raw(props), designCss.raw(css))}>
16+
<div className={designCss(BoxCss.raw(props), designCss.raw(css))} id={id}>
1917
{children}
2018
</div>
2119
)

‎packages/ui/src/components/primitives/Flex.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,14 @@ export const FlexCss = cva({
7575
type FlexCssProps = Parameters<typeof FlexCss>['0']
7676

7777
const Flex: FC<
78-
{ css?: Styles; style?: CSSProperties } & FlexCssProps & PropsWithChildren
79-
> = ({ css, style, children, ...props }) => {
78+
{ css?: Styles; style?: CSSProperties; id?: string } & FlexCssProps &
79+
PropsWithChildren
80+
> = ({ css, style, children, id, ...props }) => {
8081
return (
8182
<div
8283
className={designCss(FlexCss.raw(props), designCss.raw(css))}
8384
style={style}
85+
id={id}
8486
>
8587
{children}
8688
</div>

‎packages/ui/src/components/primitives/Text.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@ const TextCss = cva({
6666
subtle: {
6767
color: 'text-subtle'
6868
},
69+
subtleSecondary: {
70+
color: 'text-subtle-secondary'
71+
},
6972
error: {
7073
color: 'text-error'
7174
},

‎packages/ui/src/components/widgets/FeeBreakdown.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,13 @@ const FeeBreakdown: FC<Props> = ({
5454
if (isFetchingPrice) {
5555
return (
5656
<Box
57+
id={'fee-breakdown-section'}
5758
css={{
5859
borderRadius: 'widget-card-border-radius',
5960
backgroundColor: 'widget-background',
61+
border: 'widget-card-border',
6062
overflow: 'hidden',
61-
mb: '6px'
63+
mb: 'widget-card-section-gutter'
6264
}}
6365
>
6466
<FetchingQuoteLoader
@@ -84,9 +86,11 @@ const FeeBreakdown: FC<Props> = ({
8486
css={{
8587
borderRadius: 'widget-card-border-radius',
8688
backgroundColor: 'widget-background',
89+
border: 'widget-card-border',
8790
overflow: 'hidden',
88-
mb: '6px'
91+
mb: 'widget-card-section-gutter'
8992
}}
93+
id={'fee-breakdown-section'}
9094
>
9195
{!isSingleChainLocked ? (
9296
<>
@@ -108,8 +112,7 @@ const FeeBreakdown: FC<Props> = ({
108112
flexDirection: 'row',
109113
gap: '2',
110114
width: '100%',
111-
px: '4',
112-
py: '3'
115+
p: '3'
113116
}}
114117
>
115118
<button
@@ -146,7 +149,7 @@ const FeeBreakdown: FC<Props> = ({
146149
<>
147150
<FontAwesomeIcon icon={faClock} width={16} />
148151
<Text style="subtitle2">~ {timeEstimate?.formattedTime}</Text>
149-
<Box css={{ width: 1, background: 'gray6', height: 20 }} />
152+
<Box css={{ color: 'gray6' }}>&#8226;</Box>
150153
</>
151154
) : null}
152155
<FontAwesomeIcon

‎packages/ui/src/components/widgets/SwapRouteSelector.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,8 @@ const SwapRouteSelector: FC<Props> = ({
5151
flexDirection: 'row',
5252
alignItems: 'center',
5353
gap: '3',
54-
px: '4',
55-
py: '3',
54+
p: '12',
5655
borderRadius: 'widget-card-border-radius',
57-
border: 'widget-card-border',
5856

5957
'&:disabled': {
6058
cursor: 'default',

‎packages/ui/src/components/widgets/SwapWidget/index.tsx‎

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
297297
>
298298
<TokenSelectorContainer
299299
css={{ backgroundColor: 'widget-background' }}
300+
id={'from-token-section'}
300301
>
301302
<Flex
302303
align="center"
@@ -351,14 +352,18 @@ const SwapWidget: FC<SwapWidgetProps> = ({
351352
}}
352353
/>
353354
)}
354-
<Flex align="center" justify="between" css={{ gap: '4' }}>
355+
<Flex
356+
align="center"
357+
justify="between"
358+
css={{ gap: '4', width: '100%' }}
359+
>
355360
<AmountInput
356361
value={
357362
tradeType === 'EXACT_INPUT'
358363
? amountInputValue
359364
: amountInputValue
360-
? formatFixedLength(amountInputValue, 8)
361-
: amountInputValue
365+
? formatFixedLength(amountInputValue, 8)
366+
: amountInputValue
362367
}
363368
setValue={(e) => {
364369
setAmountInputValue(e)
@@ -417,9 +422,9 @@ const SwapWidget: FC<SwapWidgetProps> = ({
417422
isSingleChainLocked
418423
? [lockChainId]
419424
: fromToken?.chainId !== undefined &&
420-
fromToken?.chainId === lockChainId
421-
? [fromToken?.chainId]
422-
: undefined
425+
fromToken?.chainId === lockChainId
426+
? [fromToken?.chainId]
427+
: undefined
423428
}
424429
restrictedTokensList={tokens?.filter(
425430
(token) => token.chainId === fromToken?.chainId
@@ -457,7 +462,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
457462
>
458463
{price?.details?.currencyIn?.amountUsd &&
459464
Number(price.details.currencyIn.amountUsd) > 0 ? (
460-
<Text style="subtitle3" color="subtle">
465+
<Text style="subtitle3" color="subtleSecondary">
461466
{formatDollar(
462467
Number(price.details.currencyIn.amountUsd)
463468
)}
@@ -552,10 +557,14 @@ const SwapWidget: FC<SwapWidgetProps> = ({
552557
justifyContent: 'center',
553558
width: '100%',
554559
height: '100%',
560+
'--borderWidth':
561+
'borders.widget-swap-currency-button-border-width',
555562
'--borderColor':
556563
'colors.widget-swap-currency-button-border-color',
557-
border: '4px solid var(--borderColor)',
558-
zIndex: 10
564+
border: `var(--borderWidth) solid var(--borderColor)`,
565+
zIndex: 10,
566+
borderRadius:
567+
'widget-swap-currency-button-border-radius'
559568
}}
560569
onClick={() => {
561570
if (fromToken || toToken) {
@@ -585,7 +594,11 @@ const SwapWidget: FC<SwapWidgetProps> = ({
585594
)}
586595
</Box>
587596
<TokenSelectorContainer
588-
css={{ backgroundColor: 'widget-background', mb: '6px' }}
597+
css={{
598+
backgroundColor: 'widget-background',
599+
mb: 'widget-card-section-gutter'
600+
}}
601+
id={'to-token-section'}
589602
>
590603
<Flex
591604
css={{ width: '100%' }}
@@ -672,14 +685,18 @@ const SwapWidget: FC<SwapWidgetProps> = ({
672685
}}
673686
/>
674687
)}
675-
<Flex align="center" justify="between" css={{ gap: '4' }}>
688+
<Flex
689+
align="center"
690+
justify="between"
691+
css={{ gap: '4', width: '100%' }}
692+
>
676693
<AmountInput
677694
value={
678695
tradeType === 'EXPECTED_OUTPUT'
679696
? amountOutputValue
680697
: amountOutputValue
681-
? formatFixedLength(amountOutputValue, 8)
682-
: amountOutputValue
698+
? formatFixedLength(amountOutputValue, 8)
699+
: amountOutputValue
683700
}
684701
setValue={(e) => {
685702
setAmountOutputValue(e)
@@ -765,9 +782,9 @@ const SwapWidget: FC<SwapWidgetProps> = ({
765782
isSingleChainLocked
766783
? [lockChainId]
767784
: toToken?.chainId !== undefined &&
768-
toToken?.chainId === lockChainId
769-
? [toToken?.chainId]
770-
: undefined
785+
toToken?.chainId === lockChainId
786+
? [toToken?.chainId]
787+
: undefined
771788
}
772789
restrictedTokensList={tokens?.filter(
773790
(token) => token.chainId === toToken?.chainId
@@ -782,7 +799,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
782799
{price?.details?.currencyOut?.amountUsd &&
783800
Number(price.details.currencyOut.amountUsd) > 0 ? (
784801
<Flex align="center" css={{ gap: '1' }}>
785-
<Text style="subtitle3" color="subtle">
802+
<Text style="subtitle3" color="subtleSecondary">
786803
{formatDollar(
787804
Number(price.details.currencyOut.amountUsd)
788805
)}
@@ -849,9 +866,11 @@ const SwapWidget: FC<SwapWidgetProps> = ({
849866
css={{
850867
borderRadius: 'widget-card-border-radius',
851868
backgroundColor: 'widget-background',
869+
border: 'widget-card-border',
852870
overflow: 'hidden',
853-
mb: '6px'
871+
mb: 'widget-card-section-gutter'
854872
}}
873+
id={'swap-route-selection-section'}
855874
>
856875
<SwapRouteSelector
857876
chain={toChain}
@@ -897,7 +916,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
897916
relayerFeeProportion={relayerFeeProportion}
898917
supportsExternalLiquidity={supportsExternalLiquidity}
899918
containerCss={{
900-
mb: '6px'
919+
mb: 'widget-card-section-gutter'
901920
}}
902921
/>
903922
{promptSwitchRoute ? (

‎packages/ui/src/components/widgets/TokenSelectorContainer.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@ import { type FC, type PropsWithChildren } from 'react'
22
import { Flex } from '../primitives/index.js'
33
import { type Styles } from '@reservoir0x/relay-design-system/css'
44

5-
const TokenSelectorContainer: FC<PropsWithChildren & { css?: Styles }> = ({
6-
children,
7-
css
8-
}) => {
5+
const TokenSelectorContainer: FC<
6+
PropsWithChildren & { css?: Styles; id?: string }
7+
> = ({ children, css, id }) => {
98
return (
109
<Flex
1110
align="center"
1211
justify="between"
12+
id={id}
1313
css={{
1414
width: '100%',
1515
display: 'flex',
1616
flexDirection: 'column',
1717
alignItems: 'start',
1818
backgroundColor: 'widget-card-background',
19+
border: 'widget-card-border',
1920
gap: '3',
2021
p: '12px 12px',
2122
borderRadius: 'widget-card-border-radius',
22-
border: 'widget-card-border',
2323
...css
2424
}}
2525
>

0 commit comments

Comments
 (0)