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

fix(environment): node switcher on mobile (#5455)

Browse Source
This commit is contained in:
Art 2023-12-06 14:31:08 +01:00 committed by GitHub
parent 1379366caa
commit f56d34fe6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 75 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
libs/environment/src/components/node-switcher/layout-cell.tsx
View File

@ -19,16 +19,27 @@ export const LayoutCell = ({
}: LayoutCellProps) => { }: LayoutCellProps) => {
const t = useT(); const t = useT();
const classes = [ const classes = [
'lg:text-right flex justify-between lg:block', 'lg:text-right flex lg:block justify-stretch gap-2',
'my-2 lg:my-0', 'my-2 lg:my-0',
]; ];
return ( return (
<div className={classnames(classes)}> <div className={classnames(classes)}>
{label && <span className="lg:hidden">{label}</span>} {label && (
<>
<span className="lg:hidden text-xs text-vega-clight-200 dark:text-vega-cdark-200 whitespace-nowrap">
{label}
</span>
<span
/* separator */
aria-hidden
className="border-b border-dashed border-b-vega-clight-400 dark:border-b-vega-cdark-400 w-full h-[9px]"
></span>
</>
)}
<span <span
data-testid={dataTestId} data-testid={dataTestId}
className={classnames('font-mono', { className={classnames('font-mono text-xs lg:text-sm', {
'text-danger': !isLoading && hasError, 'text-danger': !isLoading && hasError,
'text-muted': isLoading, 'text-muted': isLoading,
})} })}

48
libs/environment/src/components/node-switcher/node-switcher.tsx
View File

@ -89,30 +89,30 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
<span className="text-right">{t('Block')}</span> <span className="text-right">{t('Block')}</span>
<span className="text-right">{t('Subscription')}</span> <span className="text-right">{t('Subscription')}</span>
</LayoutRow> </LayoutRow>
<div> </div>
{nodes.map((node, index) => { <div>
return ( {nodes.map((node, index) => {
<LayoutRow key={node} dataTestId="node-row"> return (
<ApolloWrapper url={node}> <LayoutRow key={node} dataTestId="node-row">
<RowData <ApolloWrapper url={node}>
id={index.toString()} <RowData
url={node} id={index.toString()}
highestBlock={highestBlock} url={node}
onBlockHeight={handleHighestBlock} highestBlock={highestBlock}
/> onBlockHeight={handleHighestBlock}
</ApolloWrapper> />
</LayoutRow> </ApolloWrapper>
); </LayoutRow>
})} );
<CustomRowWrapper })}
inputText={customUrlText} <CustomRowWrapper
setInputText={setCustomUrlText} inputText={customUrlText}
nodes={nodes} setInputText={setCustomUrlText}
highestBlock={highestBlock} nodes={nodes}
onBlockHeight={handleHighestBlock} highestBlock={highestBlock}
nodeRadio={nodeRadio} onBlockHeight={handleHighestBlock}
/> nodeRadio={nodeRadio}
</div> />
</div> </div>
</TradingRadioGroup> </TradingRadioGroup>
<div className="mt-4"> <div className="mt-4">

49
libs/ui-toolkit/src/components/dialog/dialog.tsx
View File

@ -37,8 +37,6 @@ export function Dialog({
'w-full h-full' 'w-full h-full'
); );
const wrapperClasses = classNames( const wrapperClasses = classNames(
// Positions the modal in the center of screen
'z-20 relative rounded top-[10vh]',
// Dimensions // Dimensions
'max-w-[90vw] p-4 md:p-8', 'max-w-[90vw] p-4 md:p-8',
// Need to apply background and text colors again as content is rendered in a portal // Need to apply background and text colors again as content is rendered in a portal
@ -72,27 +70,34 @@ export function Dialog({
onInteractOutside={onInteractOutside} onInteractOutside={onInteractOutside}
data-testid={dataTestId} data-testid={dataTestId}
> >
<div className={wrapperClasses}> <div
{onChange && ( className={classNames(
<DialogPrimitives.Close // Positions the modal in the center of screen
className="absolute p-2 top-0 right-0 md:top-2 md:right-2" 'z-20 relative rounded top-[5vw] pb-[5vw] lg:top-[10vh] lg:pb-[10vh]'
data-testid="dialog-close"
>
<VegaIcon name={VegaIconNames.CROSS} size={24} />
</DialogPrimitives.Close>
)} )}
<div className="flex gap-4 max-w-full"> >
{icon && <div className="fill-current">{icon}</div>} <div className={wrapperClasses}>
<div data-testid="dialog-content" className="flex-1 max-w-full"> {onChange && (
{title && ( <DialogPrimitives.Close
<h1 className="absolute p-2 top-0 right-0 md:top-2 md:right-2"
className="text-xl uppercase mb-4 pr-2" data-testid="dialog-close"
data-testid="dialog-title" >
> <VegaIcon name={VegaIconNames.CROSS} size={24} />
{title} </DialogPrimitives.Close>
</h1> )}
)} <div className="flex gap-4 max-w-full">
<div>{children}</div> {icon && <div className="fill-current">{icon}</div>}
<div data-testid="dialog-content" className="flex-1 max-w-full">
{title && (
<h1
className="text-xl uppercase mb-4 pr-2"
data-testid="dialog-title"
>
{title}
</h1>
)}
<div>{children}</div>
</div>
</div> </div>
</div> </div>
</div> </div>

12
libs/ui-toolkit/src/components/trading-radio-group/radio-group.tsx
View File

@ -57,12 +57,20 @@ interface RadioProps {
value: string; value: string;
label: string; label: string;
disabled?: boolean; disabled?: boolean;
className?: string;
} }
export const TradingRadio = ({ id, value, label, disabled }: RadioProps) => { export const TradingRadio = ({
id,
value,
label,
disabled,
className,
}: RadioProps) => {
const wrapperClasses = classNames( const wrapperClasses = classNames(
'flex items-center gap-1.5 text-xs', 'flex items-center gap-1.5 text-xs',
labelClasses labelClasses,
className
); );
const itemClasses = classNames( const itemClasses = classNames(
'flex justify-center items-center', 'flex justify-center items-center',