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')
.first()
.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);
});
});

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"
>
<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="block absolute top-[-2px] left-[8px] right-[8px]">
<span className="bg-vega-clight-700 dark:bg-vega-cdark-700 absolute left-2 right-2 top-0 bottom-0"></span>
<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 &&
new Array(Math.floor(props.max / step) + 1)
.fill(null)
@ -34,25 +37,24 @@ export const LeverageSlider = (
>
<span
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':
!higherThanValue,
'border-vega-clight-500 dark:border-vega-cdark-500 bg-vega-clight-500 dark:bg-vega-cdark-500':
'bg-vega-clight-500 dark:bg-vega-cdark-500':
higherThanValue,
'bg-vega-clight-50 dark:bg-vega-cdark-50':
!higherThanValue,
}
)}
></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>
<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.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>
);
};

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

@ -40,7 +40,8 @@ export const SliderTrack = ({
className,
...props
}: 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 (
<SliderPrimitive.Track
className={classNames(defaultStyles, className)}
@ -52,7 +53,8 @@ export const SliderTrack = ({
};
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 (
<SliderPrimitive.Range
className={classNames(defaultStyles, className)}
@ -63,7 +65,7 @@ export const SliderRange = ({ className, ...props }: SliderRangeProps) => {
export const SliderThumb = ({ className, ...props }: SliderThumbProps) => {
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 (
<SliderPrimitive.Thumb
className={classNames(defaultStyles, className)}