From 178be1cde78f5a698c6cb64ee9ae34a1eec8adf5 Mon Sep 17 00:00:00 2001
From: Aviral Asthana <aviral.asthana0704@gmail.com>
Date: Fri, 20 Sep 2024 19:00:20 +0530
Subject: [PATCH] Refactor styling in data-card.js, header.js, and index.js

Signed-off-by: Aviral Asthana <aviral.asthana0704@gmail.com>
---
 src/components/Call-To-Actions/CTA_Bottom/index.js |  2 +-
 src/components/PlanCard/index.js                   |  6 +++---
 src/components/SistentNavigation/pagination.js     |  2 +-
 src/components/specs/data-card.js                  |  2 +-
 src/components/specs/index.js                      |  6 +++---
 src/sections/AWS-Diagram/header.js                 |  4 ++--
 src/sections/Cloud-Native-Catalog/header.js        |  4 ++--
 src/sections/Community/Members-grid/index.js       |  4 ++--
 .../Brand/Brand-components/social-backgrounds.js   |  2 +-
 src/sections/FeatureHero/index.js                  |  2 +-
 src/sections/GCP-Diagram/header.js                 |  2 +-
 src/sections/Home/Banner-4/index.js                |  2 +-
 src/sections/Home/CloudNativeManagement/index.js   |  2 +-
 src/sections/Home/Playground-home/index.js         |  4 ++--
 .../Individual-Integrations/CatalogGrid.js         |  2 +-
 .../Individual-Integrations/cta-performance.js     |  2 +-
 src/sections/Meshery/index.js                      |  2 +-
 src/sections/Playground/playground-features.js     |  4 ++--
 src/sections/Products/index.js                     |  2 +-
 .../Projects/Sistent/components/button/guidance.js | 10 +++++-----
 .../Projects/Sistent/components/button/index.js    | 12 ++++++------
 .../Projects/Sistent/components/modal/index.js     |  2 +-
 .../Sistent/components/text-input/guidance.js      |  4 ++--
 .../Sistent/components/text-input/index.js         |  6 +++---
 .../Projects/Sistent/identity/color/code.js        | 14 +++++++-------
 .../Sistent/identity/typography/guidance.js        |  4 ++--
 .../Projects/Sistent/identity/typography/index.js  |  4 ++--
 src/sections/SolutionHero/index.js                 |  4 ++--
 src/sections/z_other/About-hosting/index.js        |  2 +-
 src/sections/z_other/Banner-classic/index.js       |  2 +-
 src/sections/z_other/Banner-hosting/index.js       |  2 +-
 src/sections/z_other/Banner-modern/index.js        |  2 +-
 src/sections/z_other/Faq-Classic/index.js          |  2 +-
 src/sections/z_other/Faq-hosting/index.js          |  2 +-
 src/sections/z_other/Getapp/index.js               |  2 +-
 src/sections/z_other/Integrations/index.js         |  2 +-
 36 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/src/components/Call-To-Actions/CTA_Bottom/index.js b/src/components/Call-To-Actions/CTA_Bottom/index.js
index a3b3e29d4470..3770df74fd08 100644
--- a/src/components/Call-To-Actions/CTA_Bottom/index.js
+++ b/src/components/Call-To-Actions/CTA_Bottom/index.js
@@ -86,7 +86,7 @@ const CTA_Bottom = ({ alt, button_text, category, content, external_link, image,
             <p>{content ? content : defaultContent}</p>
           </>
         )}
-        <Button primary title={category ? Categories[category]["Button_Text"] : (button_text ? button_text : "Join Us")} url={category ? Categories[category]["Link"] : (url ? url : defaultURL)} external={category ? Categories[category]["Link_external"] : (external_link ? true : false)} />
+        <Button $primary title={category ? Categories[category]["Button_Text"] : (button_text ? button_text : "Join Us")} url={category ? Categories[category]["Link"] : (url ? url : defaultURL)} external={category ? Categories[category]["Link_external"] : (external_link ? true : false)} />
       </div>
 
     </CTA_BottomWrapper>
diff --git a/src/components/PlanCard/index.js b/src/components/PlanCard/index.js
index 875c7264ec1a..29726d2edd78 100644
--- a/src/components/PlanCard/index.js
+++ b/src/components/PlanCard/index.js
@@ -9,7 +9,7 @@ const PlanCard = (props) => {
 
     <PlanCardWrapper>
       <Container>
-        <Row Hcenter={true}>
+        <Row $Hcenter={true}>
           {props.planData.map((x) => (
             <Col lg={4} md={6} key={x.tier}>
               <div
@@ -36,13 +36,13 @@ const PlanCard = (props) => {
                   ))}
                 </div>
                 <Button
-                  primary
+                  $primary
                   className={
                     x.button[0] === "Coming Soon"
                       ? "price-button-disabled"
                       : "price-button-link"
                   }
-                  url={x.button[1]}
+                  $url={x.button[1]}
                 >
                   {x.button[0]}
                 </Button>
diff --git a/src/components/SistentNavigation/pagination.js b/src/components/SistentNavigation/pagination.js
index 3814d1618a7d..00099891402e 100644
--- a/src/components/SistentNavigation/pagination.js
+++ b/src/components/SistentNavigation/pagination.js
@@ -16,7 +16,7 @@ const SistentPagination = () => {
   return (
     <PaginationWrapper>
       {currentPage > 0 ? (
-        <Button secondary url={content[currentPage - 1]?.link}>
+        <Button $secondary $url={content[currentPage - 1]?.link}>
           &larr; Previous
         </Button>
       ) : null}
diff --git a/src/components/specs/data-card.js b/src/components/specs/data-card.js
index 1c7c350f7a7e..0e26b58adae7 100644
--- a/src/components/specs/data-card.js
+++ b/src/components/specs/data-card.js
@@ -45,7 +45,7 @@ const DataCard = () => {
 
   return (
     <DataCardWrapper>
-      <Row Vcenter>
+      <Row $Vcenter>
         <Col className="col-1" sm={6} lg={6}>
           <ul>
             <li>
diff --git a/src/components/specs/index.js b/src/components/specs/index.js
index 15ed6c504996..fb1487be0065 100644
--- a/src/components/specs/index.js
+++ b/src/components/specs/index.js
@@ -11,14 +11,14 @@ const HowMesheryWorksSpecs = ({ title, desc, btnUrl }) => {
     <SpecsWrapper>
       <div className="management-plane">
         <Container>
-          <Row Vcenter>
+          <Row $Vcenter>
             <Col className="text" xs={12} lg={6}>
               <h2>{title}</h2>
               <p>{desc}</p>
               <VintageBox left={true} vintageTwo={true}>
                 <Button
-                  primary
-                  url={btnUrl}
+                  $primary
+                  $url={btnUrl}
                   title="Learn More"
                 />
               </VintageBox>
diff --git a/src/sections/AWS-Diagram/header.js b/src/sections/AWS-Diagram/header.js
index 1b1da83e3b88..3f3695808e48 100644
--- a/src/sections/AWS-Diagram/header.js
+++ b/src/sections/AWS-Diagram/header.js
@@ -122,10 +122,10 @@ const Header = () => {
               </p>
               <div className="header__button_section">
                 <Button
-                  primary
+                  $primary
                   title="Try Kanvas Now!"
                   $external={true}
-                  url="/kanvas"
+                  $url="/kanvas"
                 />
               </div>
             </Col>
diff --git a/src/sections/Cloud-Native-Catalog/header.js b/src/sections/Cloud-Native-Catalog/header.js
index e7c26bd03795..6802dd807f3f 100644
--- a/src/sections/Cloud-Native-Catalog/header.js
+++ b/src/sections/Cloud-Native-Catalog/header.js
@@ -84,10 +84,10 @@ const Header = () => {
               </p>
               <div className="header__button_section">
                 <Button
-                  primary
+                  $primary
                   title="Browse Catalog"
                   $external={true}
-                  url="https://meshery.io/catalog"
+                  $url="https://meshery.io/catalog"
                 />
               </div>
             </Col>
diff --git a/src/sections/Community/Members-grid/index.js b/src/sections/Community/Members-grid/index.js
index bf1143a59893..6a7f5efb5da3 100644
--- a/src/sections/Community/Members-grid/index.js
+++ b/src/sections/Community/Members-grid/index.js
@@ -162,7 +162,7 @@ const MembersGrid = (props) => {
                     primary
                     className="banner-btn memberProfileBtn"
                     title="Collect Badges"
-                    url="https://badges.layer5.io/"
+                    $url="https://badges.layer5.io/"
                     $external={true}
                   >
                     <FaCertificate size={21} className="icon-left" />
@@ -172,7 +172,7 @@ const MembersGrid = (props) => {
                     secondary
                     className="banner-btn two memberProfileBtn"
                     title="Join the Community"
-                    url="https://slack.layer5.io"
+                    $url="https://slack.layer5.io"
                   >
                     <FaUsers size={21} className="icon-left" />
                   </Button>
diff --git a/src/sections/Company/Brand/Brand-components/social-backgrounds.js b/src/sections/Company/Brand/Brand-components/social-backgrounds.js
index 337df577d487..20cf2fa00530 100644
--- a/src/sections/Company/Brand/Brand-components/social-backgrounds.js
+++ b/src/sections/Company/Brand/Brand-components/social-backgrounds.js
@@ -28,7 +28,7 @@ const SocialBackgrounds = () => {
       </Row>
 
       <Row>
-        <Row Vcenter className="ImgDiv">
+        <Row $Vcenter className="ImgDiv">
           <Col xs={12} className="social-backgrounds">
             <img src={SocialBackgroundImg} alt="Layer5 Social backgrounds" />
           </Col>
diff --git a/src/sections/FeatureHero/index.js b/src/sections/FeatureHero/index.js
index 047a1931b0ac..2bb9328dea16 100644
--- a/src/sections/FeatureHero/index.js
+++ b/src/sections/FeatureHero/index.js
@@ -34,7 +34,7 @@ const FeatureHero = (props) => {
           <h1 className={"whiteboard-heading"}>{props.data.heading}</h1>
           <p className={"whiteboard-text"}>{props.data.sub_heading}</p>
           <Button
-            primary
+            $primary
             title="Try Now!"
             url="https://meshery.layer5.io"
             $external={true}
diff --git a/src/sections/GCP-Diagram/header.js b/src/sections/GCP-Diagram/header.js
index 7bd25a973f17..3cc1a56384ec 100644
--- a/src/sections/GCP-Diagram/header.js
+++ b/src/sections/GCP-Diagram/header.js
@@ -85,7 +85,7 @@ const Header = () => {
               </p>
               <div className="header__button_section">
                 <Button
-                  primary
+                  $primary
                   title="Try Kanvasow!"
                   $external={true}
                   url="/kanvas"
diff --git a/src/sections/Home/Banner-4/index.js b/src/sections/Home/Banner-4/index.js
index c6cc4cac8cfa..619463f22b1e 100644
--- a/src/sections/Home/Banner-4/index.js
+++ b/src/sections/Home/Banner-4/index.js
@@ -81,7 +81,7 @@ const Banner1 = (props) => {
           {hasMounted && window.innerWidth > 760 && (
             <Col $sm={4} $lg={6} className="section-title-wrapper video-col">
               <ReactPlayer
-                url="https://youtu.be/034nVaQUyME?si=Yya8m6i7JUoSdZm4"
+                $url="https://youtu.be/034nVaQUyME?si=Yya8m6i7JUoSdZm4"
                 playing
                 controls
                 light={videoThumbnail}
diff --git a/src/sections/Home/CloudNativeManagement/index.js b/src/sections/Home/CloudNativeManagement/index.js
index 5d26813d25dd..e9e5fc25431d 100644
--- a/src/sections/Home/CloudNativeManagement/index.js
+++ b/src/sections/Home/CloudNativeManagement/index.js
@@ -69,7 +69,7 @@ const BannerDefault = () => {
           </Col>
           <Col $sm={12} $md={6} $lg={6} className="right-col">
             <ReactPlayer
-              url="https://youtu.be/qaoYRP3oLok"
+              $url="https://youtu.be/qaoYRP3oLok"
               playing
               controls
               light={
diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js
index 08b3f76ac799..08347396418c 100644
--- a/src/sections/Home/Playground-home/index.js
+++ b/src/sections/Home/Playground-home/index.js
@@ -279,10 +279,10 @@ const KanvasVisualizerViews = () => {
             integrations.
           </p>
           <Button
-            primary
+            $primary
             title="Open in Demo System &rarr;"
             $external={true}
-            url="https://playground.meshery.io/"
+            $url="https://playground.meshery.io/"
           />
         </div>
       </div>
diff --git a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js
index b22c46478aa1..27a1f1ad114a 100644
--- a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js
+++ b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/CatalogGrid.js
@@ -65,7 +65,7 @@ const CatalogGrid = ({ frontmatter }) => {
       </section>
       {designSize <= designs?.total_count && (
         <Button
-          primary
+          $primary
           className="loadmore"
           title="Load More"
           onClick={() => {
diff --git a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/cta-performance.js b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/cta-performance.js
index 3b08c8ed3abf..d55952b918bb 100644
--- a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/cta-performance.js
+++ b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/cta-performance.js
@@ -82,7 +82,7 @@ const PerformanceCTA = ({ category }) => {
           <div className="text">
             <h2><span>Cloud Native Performance</span></h2>
             <h3 className="subtext">Standardizing Service Mesh Value Measurement</h3>
-            <Button primary url="/projects/cloud-native-performance" className="button" external={false}>
+            <Button $primary $url="/projects/cloud-native-performance" className="button" $external={false}>
                             Learn More
             </Button>
           </div>
diff --git a/src/sections/Meshery/index.js b/src/sections/Meshery/index.js
index 0e389f8d55b2..b201032c92b7 100644
--- a/src/sections/Meshery/index.js
+++ b/src/sections/Meshery/index.js
@@ -45,7 +45,7 @@ const MesheryPage = () => {
               </video>
               {/* <img className="meshery-sup-img" src={mesheryFullStack} alt="Meshery the multi-mesh manager" /> */}
               <Button $primary className="banner-btn align-btn"
-                title="Star the Repository" url="https://github.com/meshery/meshery" $external={ true }>
+                title="Star the Repository" $url="https://github.com/meshery/meshery" $external={ true }>
                 <FaGithub size={21} className="button-icon" />
               </Button>
             </Col>
diff --git a/src/sections/Playground/playground-features.js b/src/sections/Playground/playground-features.js
index 8f06acb55024..9c6273c7f523 100644
--- a/src/sections/Playground/playground-features.js
+++ b/src/sections/Playground/playground-features.js
@@ -87,7 +87,7 @@ const PlaygroundFeatures = () => {
         <div className="feature-text">
           <h2>Design architecture diagrams </h2>
           <h5>The Whiteboarding and Freestyle Drawing feature introduces versatile drawing capabilities within Playground.</h5>
-          <Button url="/solutions/architecture-diagram" style={{ marginTop: "1.5rem" }}>
+          <Button $url="/solutions/architecture-diagram" style={{ marginTop: "1.5rem" }}>
             Learn more
           </Button>
         </div>
@@ -100,7 +100,7 @@ const PlaygroundFeatures = () => {
         <div className="feature-text">
           <h2>Brainstorm with Comments </h2>
           <h5>Playground’s Designer Mode offers a powerful collaboration feature through comments.</h5>
-          <Button url="/cloud-native-management/kanvas/collaborate/peer-reviews" style={{ marginTop: "1.5rem" }}>
+          <Button $url="/cloud-native-management/kanvas/collaborate/peer-reviews" style={{ marginTop: "1.5rem" }}>
             Learn more
           </Button>
         </div>
diff --git a/src/sections/Products/index.js b/src/sections/Products/index.js
index b7380a623f8e..6ee94c625329 100644
--- a/src/sections/Products/index.js
+++ b/src/sections/Products/index.js
@@ -280,7 +280,7 @@ const index = () => {
 
           <PlanCard planData={options}/>
 
-          <Row Vcenter Hcenter className={"comparison-button"}>
+          <Row $Vcenter $Hcenter className={"comparison-button"}>
             <Button $primary title="Feature Comparison" alt="Feature Comparison" $url={"/pricing/#feature-comparison"}/>
           </Row>
 
diff --git a/src/sections/Projects/Sistent/components/button/guidance.js b/src/sections/Projects/Sistent/components/button/guidance.js
index 47bf0b367e03..7c82855fb74d 100644
--- a/src/sections/Projects/Sistent/components/button/guidance.js
+++ b/src/sections/Projects/Sistent/components/button/guidance.js
@@ -79,7 +79,7 @@ export const ButtonGuidance = () => {
             page, or complete an action. The filled button serves as the primary
             button.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button
                 variant="contained"
@@ -100,7 +100,7 @@ export const ButtonGuidance = () => {
             option which the primary button highlights. The outlined button
             serves as the secondary button
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button
                 variant="outlined"
@@ -119,7 +119,7 @@ export const ButtonGuidance = () => {
             to be taken by the user. The text button serves as the tertiary
             button.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="text" label="Tertiary" size="medium" />
             </SistentThemeProvider>
@@ -134,7 +134,7 @@ export const ButtonGuidance = () => {
             categories so for easy identification and additional styling can be
             added to them to achieve this necessary distinction.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button color="warning" label="Call to Action" size="medium" />
             </SistentThemeProvider>
@@ -146,7 +146,7 @@ export const ButtonGuidance = () => {
             irreversible action is about to take place and as such confirmation
             is required in order to proceed.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button color="error" label="Danger" size="medium" />
             </SistentThemeProvider>
diff --git a/src/sections/Projects/Sistent/components/button/index.js b/src/sections/Projects/Sistent/components/button/index.js
index 525ea276897d..680c7d553541 100644
--- a/src/sections/Projects/Sistent/components/button/index.js
+++ b/src/sections/Projects/Sistent/components/button/index.js
@@ -80,7 +80,7 @@ const SistentButton = () => {
             fill can range from a primary brand color to any other applicable
             color in a brand’s color palette.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="contained" label="Filled" size="medium" />
             </SistentThemeProvider>
@@ -93,7 +93,7 @@ const SistentButton = () => {
             be used to style these buttons in order to fit into the theme align
             with brand guidelines.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="outlined" label="Outlined" size="medium" />
             </SistentThemeProvider>
@@ -105,7 +105,7 @@ const SistentButton = () => {
             just have a specific text styling and color to denote different
             states for easier identification.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="text" label="Text" size="medium" />
             </SistentThemeProvider>
@@ -130,7 +130,7 @@ const SistentButton = () => {
             and desktop resolutions, but it serves in different capacities
             across these different resolutions.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="contained" label="56px / 3.5rem" size="large" />
             </SistentThemeProvider>
@@ -141,7 +141,7 @@ const SistentButton = () => {
             available from mobile to desktop resolutions, even though it serves
             in different capacities across these screen sizes.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="contained" label="48px / 3rem" size="medium" />
             </SistentThemeProvider>
@@ -153,7 +153,7 @@ const SistentButton = () => {
             devices - the fingers, are a lot larger than the cursor on a desktop
             or larger screen.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <Col sm={12}>
               <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
                 <Button variant="contained" label="Full width" fullWidth />
diff --git a/src/sections/Projects/Sistent/components/modal/index.js b/src/sections/Projects/Sistent/components/modal/index.js
index b62eccfcc11b..f89f2e129bc7 100644
--- a/src/sections/Projects/Sistent/components/modal/index.js
+++ b/src/sections/Projects/Sistent/components/modal/index.js
@@ -86,7 +86,7 @@ export const SistentModal = () => {
             confirm and cancel actions or make progress while carrying out a
             particular task.
           </p>
-          <Row className="image-container" Hcenter>
+          <Row className="image-container" $Hcenter>
             <Col md={8} lg={8} sm={12}>
               <img
                 width="100%"
diff --git a/src/sections/Projects/Sistent/components/text-input/guidance.js b/src/sections/Projects/Sistent/components/text-input/guidance.js
index 7694fb5bb814..09c455fe260d 100644
--- a/src/sections/Projects/Sistent/components/text-input/guidance.js
+++ b/src/sections/Projects/Sistent/components/text-input/guidance.js
@@ -78,7 +78,7 @@ export const TextInputGuidance = () => {
             input is mostly utilized. Icons are not seldom required in this text
             input, however, they can included when extremely necessary.
           </p>
-          <Row Hcenter>
+          <Row $Hcenter>
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Input placeholder="PlaceHolder" />
             </SistentThemeProvider>
@@ -89,7 +89,7 @@ export const TextInputGuidance = () => {
             line of text. This text input adjusts vertically based on the amount
             of lines of text entered into the text field.
           </p>
-          <Row Hcenter>
+          <Row $Hcenter>
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Input placeholder="Placeholder" multiline />
             </SistentThemeProvider>
diff --git a/src/sections/Projects/Sistent/components/text-input/index.js b/src/sections/Projects/Sistent/components/text-input/index.js
index e3d099626f6d..1a6242b6ac23 100644
--- a/src/sections/Projects/Sistent/components/text-input/index.js
+++ b/src/sections/Projects/Sistent/components/text-input/index.js
@@ -79,7 +79,7 @@ const SistentTextInput = () => {
             they generally perform is to ensure that users are able to send in
             data and receive corresponding information.
           </p>
-          <Row Hcenter>
+          <Row $Hcenter>
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Input placeholder="Placeholder goes here" type="text" />
             </SistentThemeProvider>
@@ -102,7 +102,7 @@ const SistentTextInput = () => {
             desktop resolutions, but it serves in different capacities across
             these different resolutions.
           </p>
-          <Row Hcenter>
+          <Row $Hcenter>
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Input
                 placeholder="Placeholder goes here"
@@ -117,7 +117,7 @@ const SistentTextInput = () => {
             available from mobile to desktop resolutions, even though it serves
             in different capacities across these screen sizes.
           </p>
-          <Row Hcenter>
+          <Row $Hcenter>
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Input
                 placeholder="Placeholder goes here"
diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js
index 070d0eab6e2a..ab3809d9f7b9 100644
--- a/src/sections/Projects/Sistent/identity/color/code.js
+++ b/src/sections/Projects/Sistent/identity/color/code.js
@@ -89,7 +89,7 @@ const ColorCode = () => {
             not have any role descriptions.
           </p>
           <h3>Brand Colors</h3>
-          <Row className="image-container" Hcenter>
+          <Row className="image-container" $Hcenter>
             <Col md={8} lg={8} sm={12}>
               <img
                 width="100%"
@@ -99,7 +99,7 @@ const ColorCode = () => {
             </Col>
           </Row>
           <h3>Greyscale Colors</h3>
-          <Row className="image-container" Hcenter>
+          <Row className="image-container" $Hcenter>
             <Col md={8} lg={8} sm={12}>
               <img
                 width="100%"
@@ -109,7 +109,7 @@ const ColorCode = () => {
             </Col>
           </Row>
           <h3>Function Colors</h3>
-          <Row className="image-container" Hcenter>
+          <Row className="image-container" $Hcenter>
             <Col md={8} lg={8} sm={12}>
               <img
                 width="100%"
@@ -127,7 +127,7 @@ const ColorCode = () => {
             categories exists as the need arises.
           </p>
           <h3>Background Colors</h3>
-          <Row className="image-container" Hcenter>
+          <Row className="image-container" $Hcenter>
             <Col md={8} lg={8} sm={12}>
               <img
                 width="100%"
@@ -137,7 +137,7 @@ const ColorCode = () => {
             </Col>
           </Row>
           <h3>Text Colors</h3>
-          <Row className="image-container" Hcenter>
+          <Row className="image-container" $Hcenter>
             <Col md={8} lg={8} sm={12}>
               <img
                 width="100%"
@@ -147,7 +147,7 @@ const ColorCode = () => {
             </Col>
           </Row>
           <h3>Border Colors</h3>
-          <Row className="image-container" Hcenter>
+          <Row className="image-container" $Hcenter>
             <Col md={8} lg={8} sm={12}>
               <img
                 width="100%"
@@ -161,7 +161,7 @@ const ColorCode = () => {
             Tokens here are component specific and must be used only for the
             component that they are referencing.
           </p>
-          <Row className="image-container" Hcenter>
+          <Row className="image-container" $Hcenter>
             <Col md={8} lg={8} sm={12}>
               <img
                 width="100%"
diff --git a/src/sections/Projects/Sistent/identity/typography/guidance.js b/src/sections/Projects/Sistent/identity/typography/guidance.js
index 931e8b392f3c..f9e09a4b32d6 100644
--- a/src/sections/Projects/Sistent/identity/typography/guidance.js
+++ b/src/sections/Projects/Sistent/identity/typography/guidance.js
@@ -86,7 +86,7 @@ const TypographyGuidance = () => {
             For Layer5, we utilized the major third ratio to generate a type
             scale that we could work with.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <Col md={8} lg={8} sm={12}>
               <img
                 src={isDark ? TypeScale2Dark : TypeScale2}
@@ -100,7 +100,7 @@ const TypographyGuidance = () => {
             modified with suitable font specifications that will provide
             accurate guidance for usage across implementations.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <Col md={8} lg={8} sm={12}>
               <img
                 src={isDark ? TypeScale3Dark : TypeScale3}
diff --git a/src/sections/Projects/Sistent/identity/typography/index.js b/src/sections/Projects/Sistent/identity/typography/index.js
index fe8fcec67acd..5d96a6790480 100644
--- a/src/sections/Projects/Sistent/identity/typography/index.js
+++ b/src/sections/Projects/Sistent/identity/typography/index.js
@@ -127,7 +127,7 @@ const SistentTypography = () => {
             like the golden ratio, the major third, the perfect fifth, and so
             on.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <Col md={8} lg={8} sm={12}>
               <img
                 src={isDark ? TypeScale1Dark : TypeScale1}
@@ -158,7 +158,7 @@ const SistentTypography = () => {
             Qanelas Soft for all heading and subheading text and Open Sans for
             all body, paragraph, and content text needs.
           </p>
-          <Row Hcenter className="image-container">
+          <Row $Hcenter className="image-container">
             <Col md={8} lg={8} sm={12}>
               <img src={isDark ? FontPairDark : FontPair} alt="Font Pair" />
             </Col>
diff --git a/src/sections/SolutionHero/index.js b/src/sections/SolutionHero/index.js
index 2c3baa3b9a75..be24b22d9b48 100644
--- a/src/sections/SolutionHero/index.js
+++ b/src/sections/SolutionHero/index.js
@@ -35,10 +35,10 @@ const FeatureHero = (props) => {
           <h1 className={"whiteboard-heading"}>{props.data.heading}</h1>
           <p className={"whiteboard-text"}>{props.data.sub_heading}</p>
           <Button
-            primary
+            $primary
             className="banner-btn two"
             title="See Meshery"
-            url="/cloud-native-management/meshery"
+            $url="/cloud-native-management/meshery"
           >
             <FiDownloadCloud size={21} className="icon-left" />
           </Button>
diff --git a/src/sections/z_other/About-hosting/index.js b/src/sections/z_other/About-hosting/index.js
index e524ba6548f7..97660ff92d5c 100644
--- a/src/sections/z_other/About-hosting/index.js
+++ b/src/sections/z_other/About-hosting/index.js
@@ -16,7 +16,7 @@ const About = () => {
       <img className="section__particle one" src={particle1} alt="img" />
       <img className="section__particle two" src={particle2} alt="img" />
       <Container fullWidthSM>
-        <Row Vcenter={true}>
+        <Row $Vcenter={true}>
           <Col xs={12} sm={6}>
             <img
               className="about-thumb"
diff --git a/src/sections/z_other/Banner-classic/index.js b/src/sections/z_other/Banner-classic/index.js
index fddbe97bafe1..b54b5ac38b63 100644
--- a/src/sections/z_other/Banner-classic/index.js
+++ b/src/sections/z_other/Banner-classic/index.js
@@ -18,7 +18,7 @@ const BannerClassic = () => {
   return (
     <BannerSectionWrapper>
       <Container>
-        <Row Vcenter={true}>
+        <Row $Vcenter={true}>
           <Col sm={12} sm={7}>
             <SectionTitle
               className="section-title"
diff --git a/src/sections/z_other/Banner-hosting/index.js b/src/sections/z_other/Banner-hosting/index.js
index 2c0b9a6a234f..b4cc2c092cc5 100644
--- a/src/sections/z_other/Banner-hosting/index.js
+++ b/src/sections/z_other/Banner-hosting/index.js
@@ -16,7 +16,7 @@ const BannerHosting = () => {
       <img src={imgHero1} alt="img" className="section-particle one"/>
       <ParticleComponent />
       <Container fullWidthSM>
-        <Row Vcenter={true}>
+        <Row $Vcenter={true}>
           <Col lg={6}>
             <SectionTitle
               className="section-title"
diff --git a/src/sections/z_other/Banner-modern/index.js b/src/sections/z_other/Banner-modern/index.js
index ec0609477e15..f7ca49841c45 100644
--- a/src/sections/z_other/Banner-modern/index.js
+++ b/src/sections/z_other/Banner-modern/index.js
@@ -15,7 +15,7 @@ const BannerModern = () => {
     <BannerSectionWrapper>
       <ParticleComponent />
       <Container fullWidthSM>
-        <Row Vcenter={true}>
+        <Row $Vcenter={true}>
           <Col sm={7} md={6}>
             <SectionTitle
               className="section-title"
diff --git a/src/sections/z_other/Faq-Classic/index.js b/src/sections/z_other/Faq-Classic/index.js
index dd0fae98ca83..95045923c264 100644
--- a/src/sections/z_other/Faq-Classic/index.js
+++ b/src/sections/z_other/Faq-Classic/index.js
@@ -32,7 +32,7 @@ const FaqClassic = () => {
             <span>Easy and perfect solution </span> for this app
           </h2>
         </SectionTitle>
-        <Row Vcenter={true}>
+        <Row $Vcenter={true}>
           <Col className="faq-content-block" md={8} sm={12} offsetMd={2}>
             <Accordion allowZeroExpanded={true} allowMultipleExpanded={false}>
               {data.faqs.map((faq, index) => (
diff --git a/src/sections/z_other/Faq-hosting/index.js b/src/sections/z_other/Faq-hosting/index.js
index 88eef14d8e9e..6ed695664058 100644
--- a/src/sections/z_other/Faq-hosting/index.js
+++ b/src/sections/z_other/Faq-hosting/index.js
@@ -30,7 +30,7 @@ const Faq = () => {
       <img className="section__particle one" src={particle1} alt="img" />
       <img className="section__particle two" src={particle2} alt="img" />
       <Container fullWidthSM>
-        <Row Vcenter={true}>
+        <Row $Vcenter={true}>
           <Col className="faq-thumb-block" xs={12} sm={6}>
             <div className="faq-thumb">
               <img src={FaqImage} alt="appion faq" />
diff --git a/src/sections/z_other/Getapp/index.js b/src/sections/z_other/Getapp/index.js
index 88d8206522ec..f85647173159 100644
--- a/src/sections/z_other/Getapp/index.js
+++ b/src/sections/z_other/Getapp/index.js
@@ -21,7 +21,7 @@ const GetApp = () => {
       <img className="section__particle three" src={particle3} alt="img" />
       <img className="section__particle four" src={particle4} alt="img" />
       <Container>
-        <Row Vcenter={true}>
+        <Row $Vcenter={true}>
           <Col xs={12} sm={6}>
             <div className="getapp-block">
               <h3>Get the app now!</h3>
diff --git a/src/sections/z_other/Integrations/index.js b/src/sections/z_other/Integrations/index.js
index 5ed81a290d6c..286887a3fa87 100644
--- a/src/sections/z_other/Integrations/index.js
+++ b/src/sections/z_other/Integrations/index.js
@@ -18,7 +18,7 @@ const Integrations = () => {
   return (
     <IntegrationItemWrapper>
       <Container>
-        <Row Vcenter={true}>
+        <Row $Vcenter={true}>
           <Col xs={12} sm={6}>
             <div className="integration__block__wrap">
               <div className="integration__block">