interlay · danielsimao · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024
diff --git a/.changeset/cold-bats-battle.md b/.changeset/cold-bats-battle.md
@@ -0,0 +1,6 @@
+---
+"@interlay/ui": patch
+"@interlay/theme": patch
+---
+
+fix: progress-bar and token-input styles
diff --git a/packages/components/src/ProgressBar/ProgressBar.style.tsx b/packages/components/src/ProgressBar/ProgressBar.style.tsx
@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { theme } from '@interlay/theme';
 import { Color, ProgressBarSize } from '@interlay/theme';
 
 type StyledTrackProps = {
@@ -15,7 +14,7 @@ const StyledTrack = styled.div<StyledTrackProps>`
   overflow: hidden;
   z-index: 1;
   width: 100%;
-  min-width: ${theme.spacing.spacing6};
+  min-width: ${({ theme }) => theme.spacing('2xl')};
 
   ${({ theme, $size }) => css`
     min-width: ${theme.spacing('2xl')};
@@ -26,7 +25,7 @@ const StyledTrack = styled.div<StyledTrackProps>`
 
 const StyledFill = styled.div<StyledFillProps>`
   border: none;
-  transition: width ${theme.transition.duration.duration100}ms;
+  transition: width 100ms;
   will-change: width;
 
   ${({ theme, $size, $color }) => {

diff --git a/packages/components/src/TokenInput/TokenInput.style.tsx b/packages/components/src/TokenInput/TokenInput.style.tsx
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { TokenInputSize } from '@interlay/theme';
 
-import { UnstyledButton } from '../UnstyledButton';
+import { Button } from '../Button';
 import { Flex } from '../Flex';
 import { StyledTrigger } from '../Select/Select.style';
 import { Span } from '../Text';
@@ -67,10 +67,18 @@ const StyledListTokenWrapper = styled(Flex)`
   overflow: hidden;
 `;
 
-const StyledBalanceButton = styled(UnstyledButton)`
+const StyledBalance = styled(Flex)`
+  max-height: 1.625rem;
   ${({ theme }) => theme.tokenInput.balance}
 `;
 
+const StyledMaxButton = styled(Button)`
+  height: ${({ theme }) => theme.spacing('2xl')};
+  padding: 0 ${({ theme }) => theme.spacing('s')};
+  ${({ theme }) => ({ ...theme.typography('xs') })}
+  font-weight: ${({ theme }) => theme.fontWeight('medium')};
+`;
+
 const StyledBalanceLabel = styled(Span)`
   font-size: inherit;
   font-weight: inherit;
@@ -82,9 +90,10 @@ export {
   StyledListItemLabel,
   StyledListTokenWrapper,
   StyledTicker,
-  StyledBalanceButton,
+  StyledBalance,
   StyledTokenAdornment,
   StyledTokenSelect,
   StyledTokenImg,
-  StyledListItemUsd
+  StyledListItemUsd,
+  StyledMaxButton
 };
diff --git a/packages/components/src/TokenInput/TokenInputBalance.tsx b/packages/components/src/TokenInput/TokenInputBalance.tsx
@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
 
-import { StyledBalanceButton, StyledBalanceLabel } from './TokenInput.style';
+import { Dd, Dl, DlGroup, Dt } from '../Text';
+
+import { StyledBalance, StyledMaxButton } from './TokenInput.style';
 
 type TokenInputBalanceProps = {
   inputId?: string;
@@ -28,14 +30,29 @@ const TokenInputBalance = ({
   const handleClickBalance = () => onClickBalance?.(balanceProp);
 
   return (
-    <StyledBalanceButton
-      aria-controls={inputId}
-      aria-label={ariaLabel}
-      disabled={isDisabled}
-      onPress={handleClickBalance}
-    >
-      <StyledBalanceLabel>{label}:</StyledBalanceLabel> {balance}
-    </StyledBalanceButton>
+    <StyledBalance alignItems='center' gap='xs'>
+      <Dl>
+        <DlGroup alignItems='center' gap='xs'>
+          <Dt color='light' size='xs'>
+            Balance:
+          </Dt>
+          <Dd color='primary-500' size='xs'>
+            {balance}
+          </Dd>
+        </DlGroup>
+      </Dl>
+      <StyledMaxButton
+        aria-controls={inputId}
+        aria-label={ariaLabel}
+        color='primary'
+        disabled={isDisabled}
+        size='s'
+        variant='ghost'
+        onPress={handleClickBalance}
+      >
+        MAX
+      </StyledMaxButton>
+    </StyledBalance>
   );
 };
 

diff --git a/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx b/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx
@@ -73,13 +73,13 @@ describe('TokenInput', () => {
     it('should render', () => {
       render(<TokenInput balance={10} label='label' logoUrl='' ticker='BTC' />);
 
-      expect(screen.getByRole('button')).toHaveTextContent('10');
+      expect(screen.getByRole('definition')).toHaveTextContent('10');
     });
 
     it('should render human value', () => {
       render(<TokenInput balance={10} humanBalance={11} label='label' logoUrl='' ticker='BTC' />);
 
-      expect(screen.getByRole('button')).toHaveTextContent('11');
+      expect(screen.getByRole('definition')).toHaveTextContent('11');
     });
 
     it('should update input when applying max', async () => {
@@ -98,7 +98,7 @@ describe('TokenInput', () => {
         />
       );
 
-      userEvent.click(screen.getByRole('button', { name: /apply max balance/i }));
+      userEvent.click(screen.getByRole('button', { name: /max/i }));
 
       await waitFor(() => {
         expect(screen.getByRole('textbox', { name: /label/i })).toHaveValue('10');
@@ -131,7 +131,7 @@ describe('TokenInput', () => {
         expect(screen.getByRole('textbox', { name: /label/i })).toHaveValue('1');
       });
 
-      userEvent.click(screen.getByRole('button', { name: /apply max balance/i }));
+      userEvent.click(screen.getByRole('button', { name: /max/i }));
 
       await waitFor(() => {
         expect(screen.getByRole('textbox', { name: /label/i })).toHaveValue('10');
@@ -158,7 +158,7 @@ describe('TokenInput', () => {
         />
       );
 
-      expect(screen.getByRole('button', { name: /apply max balance/i })).toBeDisabled();
+      expect(screen.getByRole('button', { name: /max/i })).toBeDisabled();
     });
 
     it('should have max btn disabled when input is disabled', async () => {
@@ -168,7 +168,7 @@ describe('TokenInput', () => {
         <TokenInput isDisabled balance={10} label='label' logoUrl='' ticker='BTC' onClickBalance={handleClickBalance} />
       );
 
-      expect(screen.getByRole('button', { name: /apply max balance/i })).toBeDisabled();
+      expect(screen.getByRole('button', { name: /max/i })).toBeDisabled();
     });
   });
 

diff --git a/packages/components/src/utils/responsive.ts b/packages/components/src/utils/responsive.ts
@@ -26,6 +26,6 @@ const getResponsiveCSS = (
     ${prop.lg && theme.breakpoints.media.lg`${attribute}: ${condition ? condition(prop.lg) : prop.lg};`}
     ${prop.xl && theme.breakpoints.media.xl`${attribute}: ${condition ? condition(prop.xl) : prop.xl};`}
       `
-    : prop && `${attribute}:${prop};`;
+    : prop && `${attribute}:${typeof prop === 'boolean' ? 'wrap' : prop};`;
 
 export { getResponsiveCSS, getSpacingResponsiveCSS };
diff --git a/packages/core/theme/src/index.ts b/packages/core/theme/src/index.ts
@@ -45,3 +45,4 @@ export type {
 export { bobTheme } from './themes';
 export type { Theme } from './define';
 export * from './temp';
+export * from './utils';
diff --git a/packages/core/theme/src/themes/bob/progress-bar.ts b/packages/core/theme/src/themes/bob/progress-bar.ts
@@ -5,7 +5,7 @@ import { color } from './colors';
 
 const progressBar: ProgressBarTheme = {
   track: {
-    background: color('grey-500')
+    background: color('grey-800')
   },
   fill: {
     background: `linear-gradient(90deg, #FF6301 0%, #FFF500 100%)`

diff --git a/packages/core/theme/src/themes/bob/token-input.ts b/packages/core/theme/src/themes/bob/token-input.ts
@@ -6,7 +6,7 @@ import { color } from './colors';
 // TODO: handle different sizes
 const tokenInput: TokenInputTheme = {
   balance: {
-    padding: `${spacing('xxs')} 0`,
+    padding: `${spacing('s')} 0`,
     color: color('primary-500'),
     fontWeight: fontWeight('medium'),
     ...typography('xs')