refactor(GPU): refactor to colocate and simplify UI work [EE-5127] (#8593)

* refactor to colocate and simplify

* fix(insights): text size to match portainer views

---------

Co-authored-by: testa113 <testa113>

app/react/components/InsightsBox/InsightsBox.tsx

@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 import { Lightbulb, X } from 'lucide-react';
-import { ReactNode, useMemo } from 'react';
-import sanitize from 'sanitize-html';
+import { ReactNode } from 'react';
 import { useStore } from 'zustand';
 
 import { Button } from '@@/buttons';
@@ -15,25 +14,11 @@ export type Props = {
   insightCloseId?: string; // set if you want to be able to close the box and not show it again
 };
 
-export function InsightsBox({
-  header,
-  content,
-  setHtmlContent,
-  insightCloseId,
-}: Props) {
+export function InsightsBox({ header, content, insightCloseId }: Props) {
   // allow to close the box and not show it again in local storage with zustand
   const { addInsightIDClosed, isClosed } = useStore(insightStore);
   const isInsightClosed = isClosed(insightCloseId);
 
-  // allow angular views to set html messages for the insights box
-  const htmlContent = useMemo(() => {
-    if (setHtmlContent && typeof content === 'string') {
-      // eslint-disable-next-line react/no-danger
-      return <div dangerouslySetInnerHTML={{ __html: sanitize(content) }} />;
-    }
-    return null;
-  }, [setHtmlContent, content]);
-
   if (isInsightClosed) {
     return null;
   }
@@ -44,10 +29,16 @@ export function InsightsBox({
         <Lightbulb className="h-4 text-warning-7 th-highcontrast:text-warning-6 th-dark:text-warning-6" />
       </div>
       <div>
-        <p className={clsx('mb-2 font-bold', insightCloseId && 'pr-4')}>
+        <p
+          className={clsx(
+            // text-[0.9em] matches .form-horizontal .control-label font-size used in many labels in portainer
+            'mb-2 text-[0.9em] font-medium',
+            insightCloseId && 'pr-4'
+          )}
+        >
           {header}
         </p>
-        <div>{htmlContent || content}</div>
+        <div className="small">{content}</div>
       </div>
       {insightCloseId && (
         <Button