mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

improve as path component styling

Browse Source
This commit is contained in:
checktheroads
2021-01-02 12:54:41 -07:00
parent 777b117531
commit 2011892f72
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
hyperglass/ui/components/path/path.tsx
View File

@@ -8,7 +8,7 @@ import {
Skeleton, Skeleton,
ModalCloseButton, ModalCloseButton,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useColorValue } from '~/context'; import { useColorValue, useBreakpointValue } from '~/context';
import { useLGState, useLGMethods } from '~/hooks'; import { useLGState, useLGMethods } from '~/hooks';
import { PathButton } from './button'; import { PathButton } from './button';
import { Chart } from './chart'; import { Chart } from './chart';
@@ -22,14 +22,18 @@ export const Path = (props: TPath) => {
const { isOpen, onClose, onOpen } = useDisclosure(); const { isOpen, onClose, onOpen } = useDisclosure();
const response = getResponse(device); const response = getResponse(device);
const output = response?.output as TStructuredResponse; const output = response?.output as TStructuredResponse;
const bg = useColorValue('whiteSolid.50', 'blackSolid.900'); const bg = useColorValue('light.50', 'dark.900');
const centered = useBreakpointValue({ base: false, lg: true }) ?? true;
return ( return (
<> <>
<PathButton onOpen={onOpen} /> <PathButton onOpen={onOpen} />
<Modal isOpen={isOpen} onClose={onClose} size="full" isCentered> <Modal isOpen={isOpen} onClose={onClose} size="full" isCentered={centered}>
<ModalOverlay /> <ModalOverlay />
<ModalContent bg={bg} maxW={{ base: '100%', lg: '80%' }} maxH={{ base: '80%', lg: '60%' }}> <ModalContent
bg={bg}
mt={{ base: 4, lg: '' }}
maxH={{ base: '80%', lg: '60%' }}
maxW={{ base: '100%', lg: '80%' }}>
<ModalHeader>{`Path to ${displayTarget.value}`}</ModalHeader> <ModalHeader>{`Path to ${displayTarget.value}`}</ModalHeader>
<ModalCloseButton /> <ModalCloseButton />
<ModalBody> <ModalBody>