From 2011892f72211965e63e82c40c105cd2d3a56eb9 Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Sat, 2 Jan 2021 12:54:41 -0700
Subject: [PATCH] improve as path component styling

---
 hyperglass/ui/components/path/path.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/hyperglass/ui/components/path/path.tsx b/hyperglass/ui/components/path/path.tsx
index 2b94267..be830b5 100644
--- a/hyperglass/ui/components/path/path.tsx
+++ b/hyperglass/ui/components/path/path.tsx
@@ -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>