From 47711fb075433a5bd64ac03515213bce22c8ff26 Mon Sep 17 00:00:00 2001
From: thatmattlove <matt@hyperglass.dev>
Date: Sat, 18 Dec 2021 21:52:05 -0700
Subject: [PATCH] improve directive info styling

---
 .../modal.tsx => directive-info-modal.tsx}    | 19 ++++++++++++------
 hyperglass/ui/components/help/index.ts        |  1 -
 hyperglass/ui/components/help/types.ts        |  8 --------
 hyperglass/ui/components/index.ts             |  2 +-
 hyperglass/ui/components/lookingGlass.tsx     | 20 ++++++++++---------
 5 files changed, 25 insertions(+), 25 deletions(-)
 rename hyperglass/ui/components/{help/modal.tsx => directive-info-modal.tsx} (70%)
 delete mode 100644 hyperglass/ui/components/help/index.ts
 delete mode 100644 hyperglass/ui/components/help/types.ts

diff --git a/hyperglass/ui/components/help/modal.tsx b/hyperglass/ui/components/directive-info-modal.tsx
similarity index 70%
rename from hyperglass/ui/components/help/modal.tsx
rename to hyperglass/ui/components/directive-info-modal.tsx
index 99dc468..3271696 100644
--- a/hyperglass/ui/components/help/modal.tsx
+++ b/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`}
-          icon={<DynamicIcon icon={{ fi: 'FiInfo' }} />}
+          aria-label={`${title} Details`}
+          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>
diff --git a/hyperglass/ui/components/help/index.ts b/hyperglass/ui/components/help/index.ts
deleted file mode 100644
index 133aa74..0000000
--- a/hyperglass/ui/components/help/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './modal';
diff --git a/hyperglass/ui/components/help/types.ts b/hyperglass/ui/components/help/types.ts
deleted file mode 100644
index 23572d6..0000000
--- a/hyperglass/ui/components/help/types.ts
+++ /dev/null
@@ -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;
-}
diff --git a/hyperglass/ui/components/index.ts b/hyperglass/ui/components/index.ts
index 924556d..9ad59a7 100644
--- a/hyperglass/ui/components/index.ts
+++ b/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';
diff --git a/hyperglass/ui/components/lookingGlass.tsx b/hyperglass/ui/components/lookingGlass.tsx
index 0f45b40..9003197 100644
--- a/hyperglass/ui/components/lookingGlass.tsx
+++ b/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(
-    useCallback(({ form, filtered }) => ({ form, filtered }), []),
+  const { form, filtered, selections } = useFormState(
+    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
-                  name="queryType"
-                  title={directive?.name ?? null}
-                  item={directive?.info ?? null}
-                  visible={directive?.info !== null}
-                />
+                directive !== null && (
+                  <DirectiveInfoModal
+                    name="queryType"
+                    title={directive.name ?? null}
+                    item={directive.info ?? null}
+                    visible={selections.queryType !== null && directive.info !== null}
+                  />
+                )
               }
             >
               <QueryType onChange={handleChange} label={web.text.queryType} />