Refactor styling in data-card.js, header.js, and index.js

Signed-off-by: Aviral Asthana <[email protected]>
layer5io · Sep 20, 2024 · 178be1c · 178be1c
1 parent 68f6279
commit 178be1c
Show file tree

Hide file tree

Showing 36 changed files with 66 additions and 66 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"