From 5ccd4e251748f78fdace6d5f0afdee9eefc6d23e Mon Sep 17 00:00:00 2001
From: japhethLG <japhethlouie@gmail.com>
Date: Fri, 19 Apr 2024 19:02:00 +0800
Subject: [PATCH] fix: Standardize Font Style Across All Integration
 Announcement Pages

---
 .../marketplace/AppInstallerComp.js           |  6 +-
 .../marketplace/ExtensionsIntaller.js         | 10 ++--
 .../marketplace/ResourceLinkComp.js           |  2 +-
 src/views/marketplace/Extension.js            | 56 ++++++++++++++++++-
 4 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/src/components/marketplace/AppInstallerComp.js b/src/components/marketplace/AppInstallerComp.js
index 63507f9b6..9c0c6857d 100644
--- a/src/components/marketplace/AppInstallerComp.js
+++ b/src/components/marketplace/AppInstallerComp.js
@@ -122,12 +122,12 @@ export const AppInstallerComp = ({ data }) => {
         loading={loading || (isInstalled && selectInstance)}
       >
         {!appSID
-          ? 'Please Login to continue'
+          ? 'Get Started'
           : !instanceZUID
-          ? 'Select an Instance to continue'
+          ? 'Get Started'
           : isInstalled && !selectInstance
           ? `App Installed in ${instanceName}`
-          : `Install  ${data?.name} in ${instanceName}`}
+          : `Get Started`}
       </LoadingButton>
       {isInstalled && (
         <LoadingButton
diff --git a/src/components/marketplace/ExtensionsIntaller.js b/src/components/marketplace/ExtensionsIntaller.js
index bf44f7b27..a2e0af73d 100644
--- a/src/components/marketplace/ExtensionsIntaller.js
+++ b/src/components/marketplace/ExtensionsIntaller.js
@@ -15,9 +15,7 @@ const ExtensionsIntaller = ({ extensionName, githubUrl, data }) => {
   const { setworkingInstance } = useZestyStore((state) => state);
   const [instances, setinstances] = React.useState([]);
   const instanceZUID = getCookie('ZESTY_WORKING_INSTANCE');
-  const instanceName = instances?.data?.find(
-    (e) => e.ZUID === instanceZUID,
-  )?.name;
+
   let ZestyAPI = useZestyStore((state) => state.ZestyAPI);
 
   // TEMPLATE URL can be access in env files
@@ -171,14 +169,14 @@ const ExtensionsIntaller = ({ extensionName, githubUrl, data }) => {
       loading={loading}
     >
       {!appSID
-        ? 'Please Login To Continue'
+        ? 'Get Started'
         : !instanceZUID
-        ? `Select Instance to continue`
+        ? `Get Started`
         : loading && !finishInstall
         ? `Installing ${extensionName}`
         : !loading && finishInstall
         ? `${extensionName} has been Installed`
-        : `Install ${extensionName} to ${instanceName}`}
+        : `Get Started`}
     </LoadingButton>
   );
 };
diff --git a/src/components/marketplace/ResourceLinkComp.js b/src/components/marketplace/ResourceLinkComp.js
index 8fe2aae8f..9ede385f7 100644
--- a/src/components/marketplace/ResourceLinkComp.js
+++ b/src/components/marketplace/ResourceLinkComp.js
@@ -14,7 +14,7 @@ export const ResourceLinkComp = ({ data }) => {
       sx={{ mt: 2 }}
       fullWidth
     >
-      {data?.name}
+      Get Started
     </Button>
   );
 };
diff --git a/src/views/marketplace/Extension.js b/src/views/marketplace/Extension.js
index f61914c65..3162a9bda 100644
--- a/src/views/marketplace/Extension.js
+++ b/src/views/marketplace/Extension.js
@@ -39,7 +39,7 @@ const InstallButton = ({ data, theme }) => {
         color="secondary"
         fullWidth
       >
-        Install {data.name}
+        Get Started
       </Button>
     );
   } else if (data.github_url && !data.app_zuid && !data.resource_link) {
@@ -162,8 +162,11 @@ const Extension = (props) => {
               <Typography
                 variant="h5"
                 component="p"
-                color="text.secondary"
                 mb={1}
+                sx={{
+                  color: theme.palette.zesty.zestyZambezi,
+                  fontWeight: 'bold',
+                }}
               >
                 {props.subtitle}
               </Typography>
@@ -192,11 +195,58 @@ const Extension = (props) => {
                         props: {
                           sx: {
                             color: theme.palette.zesty.zestyZambezi,
+                            marginTop: 2,
                           },
-                          variant: 'h5',
+                          variant: 'h6',
                           component: 'p',
                         },
                       },
+                      h4: {
+                        component: Typography,
+                        props: {
+                          sx: {
+                            color: theme.palette.zesty.zestyZambezi,
+                            marginTop: 4,
+                            fontWeight: 'bold',
+                          },
+                          variant: 'h6',
+                          component: 'p',
+                        },
+                      },
+                      h3: {
+                        component: Typography,
+                        props: {
+                          sx: {
+                            color: theme.palette.zesty.zestyZambezi,
+                            marginTop: 4,
+                            fontWeight: 'bold',
+                          },
+                          variant: 'h6',
+                          component: 'p',
+                        },
+                      },
+                      h2: {
+                        component: Typography,
+                        props: {
+                          sx: {
+                            color: theme.palette.zesty.zestyZambezi,
+                            marginTop: 4,
+                            fontWeight: 'bold',
+                          },
+                          variant: 'h6',
+                          component: 'p',
+                        },
+                      },
+                      li: {
+                        component: Typography,
+                        props: {
+                          sx: {
+                            color: theme.palette.zesty.zestyZambezi,
+                          },
+                          variant: 'h6',
+                          component: 'li',
+                        },
+                      },
                       img: {
                         component: Box,
                         props: {