Add pretty headers to modals with description

frontend/src/components/Modal/Modal/Modal.tsx

@@ -9,7 +9,7 @@ export const Modal: React.FC<ModalProps> = ({
   onSave,
   saveButtonTitle = 'Save Changes',
   children,
-  title = '',
+  title,
   useCancelButton = false,
   cancelButtonTitle = 'Cancel',
   isLoading = false,
@@ -69,7 +69,7 @@ export const Modal: React.FC<ModalProps> = ({
 
               {!useCancelButton && (
                 <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
-                  <div>{title}</div>
+                  {title}
                   <button
                     type="button"
                     className="w-full inline-flex justify-center rounded-md border border-gray-200 p-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"

frontend/src/components/Modal/Modal/types.ts

@@ -3,7 +3,7 @@ import React from 'react';
 export type ModalProps = {
   open: boolean;
   onClose: () => void;
-  title?: string;
+  title?: any;
   onSave?: () => void;
   saveButtonTitle?: string;
   useCancelButton?: boolean;

frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx

@@ -66,14 +66,17 @@ export const DashboardCard = ({ app, version }: DashboardCardProps) => {
         </div>
       </div>
 
-      <Modal open={readMoreVisible} onClose={onReadMoreToggleClick} title={app.name}>
-        <ReactMarkdown
-          className="prose prose-slate"
-          remarkPlugins={[remarkGfm]}
-          components={{
-            img: ({ node, ...props }) => <img alt="" width={250} {...props} />,
-          }}
-        >
+      <Modal
+        open={readMoreVisible}
+        onClose={onReadMoreToggleClick}
+        title={
+          <div className="flex items-center">
+            <img className="rounded-md" width={32} src={app.assetSrc} alt={app.name} />
+            <span className="ml-2 uppercase font-bold">{app.name}</span>
+          </div>
+        }
+      >
+        <ReactMarkdown className="prose prose-slate" remarkPlugins={[remarkGfm]}>
           {appDescription.content}
         </ReactMarkdown>
       </Modal>