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,
ModalCloseButton,
} from '@chakra-ui/react';
import { useColorValue } from '~/context';
import { useColorValue, useBreakpointValue } from '~/context';
import { useLGState, useLGMethods } from '~/hooks';
import { PathButton } from './button';
import { Chart } from './chart';
@@ -22,14 +22,18 @@ export const Path = (props: TPath) => {
const { isOpen, onClose, onOpen } = useDisclosure();
const response = getResponse(device);
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 (
<>
<PathButton onOpen={onOpen} />
<Modal isOpen={isOpen} onClose={onClose} size="full" isCentered>
<Modal isOpen={isOpen} onClose={onClose} size="full" isCentered={centered}>
<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>
<ModalCloseButton />
<ModalBody>