fix: Isolate changes to just hook and rename for general use

app/scripts/components/common/page-header/nav/nav-item-cta.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import GoogleForm from '../../google-form';
 import { ActionNavItem } from '../types';
-import { useFeedbackModal } from '$utils/use-feedback-modal';
+import { useDisplay } from '$utils/use-display';
 
 interface NavItemCTAProps {
   item: ActionNavItem;
   customClasses?: string;
 }
 
 export const NavItemCTA = ({ item, customClasses }: NavItemCTAProps) => {
-  const { isRevealed, show, hide } = useFeedbackModal();
+  const { isRevealed, show, hide } = useDisplay();
+
   return (
     <React.Fragment key={item.id}>
       {item.actionId === 'open-google-form' && (

app/scripts/context/veda-ui-provider.tsx

@@ -1,7 +1,6 @@
-import React, { createContext, ReactNode, useContext, useState } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
 import { DATASETS_PATH, STORIES_PATH } from '$utils/routes';
 import { isExternalLink } from '$utils/url';
-import { SetState } from '$types/aliases';
 
 interface EnvironmentConfig {
   envMapboxToken: string;
@@ -32,8 +31,6 @@ interface VedaUIConfig extends EnvironmentConfig {
   navigation: NavigationConfig;
   routes: RoutesConfig;
   Link: React.FC<LinkProps>;
-  feedbackModalRevealed: boolean;
-  setFeedbackModalRevealed: SetState<boolean>;
 }
 
 interface VedaUIProviderProps {
@@ -84,9 +81,6 @@ export function useVedaUI(): VedaUIConfig {
 }
 
 export function VedaUIProvider({ config, children }: VedaUIProviderProps) {
-  const [feedbackModalRevealed, setFeedbackModalRevealed] =
-    useState<boolean>(false);
-
   const navigation = {
     ...defaultNavigation,
     ...config.navigation
@@ -121,9 +115,7 @@ export function VedaUIProvider({ config, children }: VedaUIProviderProps) {
     ...config,
     navigation,
     routes,
-    Link,
-    feedbackModalRevealed,
-    setFeedbackModalRevealed
+    Link
   };
 
   validateConfig(fullConfig);

app/scripts/utils/use-display.tsx

@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react';
+
+export function useDisplay() {
+  const [display, setDisplay] = useState<boolean>(false);
+
+  return {
+    isRevealed: display,
+    show: useCallback(() => setDisplay(true), [setDisplay]),
+    hide: useCallback(() => setDisplay(false), [setDisplay])
+  };
+}