LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(ui-toolkit): update slider design (#5645)

Browse Source 
Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>
This commit is contained in:
Bartłomiej Głownia 2024-01-22 08:30:57 +01:00 committed by GitHub
parent 00d840b7b3
commit a2170d27d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/governance-e2e/src/integration/view/pubkey-view.cy.ts
View File

@ -55,7 +55,10 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
cy.getByTestId('dialog-content') cy.getByTestId('dialog-content')
.first() .first()
.within(() => { .within(() => {
cy.get('h1').should('have.text', 'Transaction failed'); cy.getByTestId('dialog-title').should(
'have.text',
'Transaction failed'
);
cy.getByTestId('Error').should('have.text', expectedErrorTxt); cy.getByTestId('Error').should('have.text', expectedErrorTxt);
}); });
}); });

24
libs/ui-toolkit/src/components/slider/leverage-slider.tsx
View File

@ -15,8 +15,11 @@ export const LeverageSlider = (
className="relative flex items-center select-none touch-none h-10 pb-5 w-full" className="relative flex items-center select-none touch-none h-10 pb-5 w-full"
> >
<SliderPrimitive.Track className=" relative grow h-[4px]"> <SliderPrimitive.Track className=" relative grow h-[4px]">
<span className="bg-vega-clight-500 dark:bg-vega-cdark-500 absolute left-2 right-2 top-0 bottom-0"></span> <span className="bg-vega-clight-700 dark:bg-vega-cdark-700 absolute left-2 right-2 top-0 bottom-0"></span>
<span className="block absolute top-[-2px] left-[8px] right-[8px]"> <SliderPrimitive.Range className="absolute h-full">
<span className="absolute left-2 right-0 h-full bg-vega-clight-100 dark:bg-vega-cdark-100"></span>
</SliderPrimitive.Range>
<span className="block absolute top-[-3px] left-[8px] right-[8px]">
{step && {step &&
new Array(Math.floor(props.max / step) + 1) new Array(Math.floor(props.max / step) + 1)
.fill(null) .fill(null)
@ -34,25 +37,24 @@ export const LeverageSlider = (
> >
<span <span
className={classNames( className={classNames(
'block w-[8px] h-[8px] border-[4px] rotate-45', 'block w-[10px] h-[10px] rounded-full',
{ {
'border-black dark:border-white bg-white dark:bg-white': 'bg-vega-clight-500 dark:bg-vega-cdark-500':
!higherThanValue,
'border-vega-clight-500 dark:border-vega-cdark-500 bg-vega-clight-500 dark:bg-vega-cdark-500':
higherThanValue, higherThanValue,
'bg-vega-clight-50 dark:bg-vega-cdark-50':
!higherThanValue,
} }
)} )}
></span> ></span>
<span className="text-sm mt-1">{labelValue}x</span> <span className="text-xs font-alpha mt-1 text-vega-clight-100 dark:text-vega-cdark-100 ">
{labelValue}x
</span>
</span> </span>
); );
})} })}
</span> </span>
<SliderPrimitive.Range className="absolute h-full">
<span className="absolute left-2 right-0 h-full bg-black dark:bg-white"></span>
</SliderPrimitive.Range>
</SliderPrimitive.Track> </SliderPrimitive.Track>
<SliderPrimitive.Thumb className="block w-[16px] h-[16px] border-[3px] border-black dark:border-white bg-white dark:bg-black rotate-45 focus-visible:outline-0" /> <SliderPrimitive.Thumb className="block w-[18px] h-[18px] border-[2px] rounded-full border-white dark:border-vega-cdark-900 bg-vega-clight-50 dark:bg-vega-cdark-50 focus-visible:outline-0" />
</SliderPrimitive.Root> </SliderPrimitive.Root>
); );
}; };

8
libs/ui-toolkit/src/components/slider/slider.tsx
View File

@ -40,7 +40,8 @@ export const SliderTrack = ({
className, className,
...props ...props
}: SliderTrackProps) => { }: SliderTrackProps) => {
const defaultStyles = 'bg-black dark:bg-white relative grow h-[3px]'; const defaultStyles =
'bg-vega-clight-700 dark:bg-vega-cdark-700 relative grow h-[4px]';
return ( return (
<SliderPrimitive.Track <SliderPrimitive.Track
className={classNames(defaultStyles, className)} className={classNames(defaultStyles, className)}
@ -52,7 +53,8 @@ export const SliderTrack = ({
}; };
export const SliderRange = ({ className, ...props }: SliderRangeProps) => { export const SliderRange = ({ className, ...props }: SliderRangeProps) => {
const defaultStyles = 'absolute bg-blue h-full'; const defaultStyles =
'absolute bg-vega-clight-100 dark:bg-vega-cdark-100 h-full';
return ( return (
<SliderPrimitive.Range <SliderPrimitive.Range
className={classNames(defaultStyles, className)} className={classNames(defaultStyles, className)}
@ -63,7 +65,7 @@ export const SliderRange = ({ className, ...props }: SliderRangeProps) => {
export const SliderThumb = ({ className, ...props }: SliderThumbProps) => { export const SliderThumb = ({ className, ...props }: SliderThumbProps) => {
const defaultStyles = const defaultStyles =
'block w-[20px] h-[20px] border-2 border-black dark:border-white bg-white dark:bg-black rounded-full'; 'block w-[18px] h-[18px] border-[2px] rounded-full border-white dark:border-vega-cdark-900 bg-vega-clight-50 dark:bg-vega-cdark-50 focus-visible:outline-0';
return ( return (
<SliderPrimitive.Thumb <SliderPrimitive.Thumb
className={classNames(defaultStyles, className)} className={classNames(defaultStyles, className)}