improve directive info styling

hyperglass/ui/components/directive-info-modal.tsx

@@ -12,12 +12,19 @@ import {
 import { DynamicIcon, Markdown } from '~/components';
 import { useColorValue } from '~/context';
 
-import type { THelpModal } from './types';
+import type { ModalContentProps } from '@chakra-ui/react';
 
-export const HelpModal = (props: THelpModal): JSX.Element => {
+interface DirectiveInfoModalProps extends Omit<ModalContentProps, 'title'> {
+  title: string | null;
+  item: string | null;
+  name: string;
+  visible: boolean;
+}
+
+export const DirectiveInfoModal = (props: DirectiveInfoModalProps): JSX.Element => {
   const { visible, item, name, title, ...rest } = props;
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const bg = useColorValue('whiteSolid.50', 'blackSolid.800');
+  const bg = useColorValue('whiteSolid.50', 'blackSolid.700');
   const color = useColorValue('black', 'white');
   if (item === null) {
     return <></>;
@@ -34,11 +41,11 @@ export const HelpModal = (props: THelpModal): JSX.Element => {
           variant="link"
           onClick={onOpen}
           colorScheme="blue"
-          aria-label={`${name}_help`}
+          aria-label={`${title} Details`}
-          icon={<DynamicIcon icon={{ fi: 'FiInfo' }} />}
+          icon={<DynamicIcon icon={{ fa: 'InfoCircle' }} />}
         />
       </ScaleFade>
-      <Modal isOpen={isOpen} onClose={onClose} size="xl" motionPreset="slideInRight">
+      <Modal isOpen={isOpen} onClose={onClose} size="xl" motionPreset="scale">
         <ModalOverlay />
         <ModalContent bg={bg} color={color} py={4} borderRadius="md" {...rest}>
           <ModalHeader>{title}</ModalHeader>

hyperglass/ui/components/help/index.ts

@@ -1 +0,0 @@
-export * from './modal';

hyperglass/ui/components/help/types.ts

@@ -1,8 +0,0 @@
-import type { ModalContentProps } from '@chakra-ui/react';
-
-export interface THelpModal extends Omit<ModalContentProps, 'title'> {
-  title: string | null;
-  item: string | null;
-  name: string;
-  visible: boolean;
-}

hyperglass/ui/components/index.ts

@@ -4,13 +4,13 @@ export * from './codeBlock';
 export * from './countdown';
 export * from './custom';
 export * from './debugger';
+export * from './directive-info-modal';
 export * from './dynamic-icon';
 export * from './favicon';
 export * from './footer';
 export * from './form';
 export * from './greeting';
 export * from './header';
-export * from './help';
 export * from './label';
 export * from './layout';
 export * from './loadError';

hyperglass/ui/components/lookingGlass.tsx

@@ -7,7 +7,7 @@ import vest, { test, enforce } from 'vest';
 import {
   FormRow,
   FormField,
-  HelpModal,
+  DirectiveInfoModal,
   QueryType,
   QueryTarget,
   SubmitButton,
@@ -43,8 +43,8 @@ export const LookingGlass = (): JSX.Element => {
   const locationChange = useFormState(s => s.locationChange);
   const setTarget = useFormState(s => s.setTarget);
   const setFormValue = useFormState(s => s.setFormValue);
-  const { form, filtered } = useFormState(
+  const { form, filtered, selections } = useFormState(
-    useCallback(({ form, filtered }) => ({ form, filtered }), []),
+    useCallback(({ form, filtered, selections }) => ({ form, filtered, selections }), []),
     isEqual,
   );
 
@@ -188,12 +188,14 @@ export const LookingGlass = (): JSX.Element => {
               name="queryType"
               label={web.text.queryType}
               labelAddOn={
-                <HelpModal
+                directive !== null && (
-                  name="queryType"
+                  <DirectiveInfoModal
-                  title={directive?.name ?? null}
+                    name="queryType"
-                  item={directive?.info ?? null}
+                    title={directive.name ?? null}
-                  visible={directive?.info !== null}
+                    item={directive.info ?? null}
-                />
+                    visible={selections.queryType !== null && directive.info !== null}
+                  />
+                )
               }
             >
               <QueryType onChange={handleChange} label={web.text.queryType} />