Merge pull request #5976 from sudhanshutech/fix/issue2

add more missing props and alignment issues

Author: sudhanshutech

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>

src/components/FeatureUseCard/index.js

@@ -4,7 +4,7 @@ import { Col } from "../../reusecore/Layout";
 
 const FeatureUseCard = (props) => {
   return (
-    <Col sm={props.sm} md={props.md} lg={props.lg} className={"display-container"}>
+    <Col $sm={props.sm} $md={props.md} $lg={props.lg} className={"display-container"}>
       <FeatureUseCardWrapper >
         <div className={"image-container"}>
           <img src={props.data.image} alt={""}/>

src/sections/ArchitectureDiagram/whiteboard.style.js

@@ -13,11 +13,13 @@ const WhiteboardWrapper = styled.div`
   .collaboration_display {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     width: 100%;
     margin: 0 10px;
     align-items: flex-start;
     justify-content: center;
+    @media (max-width: 600px){
+      flex-direction: column;
+    } 
   }
   
   

src/sections/CloudNativeDeployments/deploy.style.js

@@ -16,6 +16,9 @@ const CloudDeploy = styled.div`
     margin: 0 10px;
     align-items: flex-start;
     justify-content: center;
+    @media (max-width: 600px){
+      flex-direction: column;
+    } 
   }
   
   

src/sections/Comments/comments.style.js

@@ -14,11 +14,13 @@ const CommentsWrapper = styled.div`
   .collaboration_display {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     width: 100%;
     margin: 0 10px;
     align-items: flex-start;
     justify-content: center;
+    @media (max-width: 600px){
+      flex-direction: column;
+    } 
   }
   
   

src/sections/Company/Contact/index.js

@@ -22,7 +22,9 @@ const ContactPage = () => {
           title={"Get In Touch"}
           subtitle={"Let us know how we can help you."}
         />
-        <Row className="cards-container">
+        <Row style={{
+          flexWrap: "wrap"
+        }} className="cards-container">
           <CardOutline
             link="/careers"
             img={Jobs_Icon}
@@ -45,7 +47,9 @@ const ContactPage = () => {
             content="I would like to establish a partnership with Layer5"
           />
         </Row>
-        <Row className="contact-form-row">
+        <Row style={{
+          flexWrap: "wrap"
+        }} className="contact-form-row">
           <Row
             onClick={function () {
               toggleForm();

src/sections/Developer-Infrastructure/deploy.style.js

@@ -16,6 +16,9 @@ const CloudDeploy = styled.div`
     margin: 0 10px;
     align-items: flex-start;
     justify-content: center;
+    @media (max-width: 600px){
+      flex-direction: column;
+    } 
   }
   
   

src/sections/OrchestrationManagement/orchestration.style.js

@@ -13,11 +13,13 @@ const OrchestrationWrapper = styled.div`
   .collaboration_display {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     width: 100%;
     margin: 0 10px;
     align-items: flex-start;
     justify-content: center;
+    @media (max-width: 600px){
+      flex-direction: column;
+    } 
   }
   
   

src/sections/kubernetes-multi-cluster/kube.style.js

@@ -18,6 +18,9 @@ const CommentsWrapper = styled.div`
     margin: 0 10px;
     align-items: flex-start;
     justify-content: center;
+    @media (max-width: 600px){
+      flex-direction: column;
+    } 
   }