Merge pull request layer5io#3827 from Shivam-AfA/meshMapBugs

Fixed meshmap logo responsiveness

Author: Shivam-AfA

Diff for: src/sections/Meshmap/FeaturesSection/Collaborate/CollaboratorFeatures_diagram.js

@@ -14,7 +14,6 @@ import Avatar3 from "./images/avatar3.png";
 import { useInView } from "react-intersection-observer";
 
 const CollaboratorFeaturesDiagram = ({ activeExampleIndex, theme }) => {
-  console.log(theme);
   const [ref, inView] = useInView({ threshold: 0.4 });
   return (
     <DiagramStyles>

Diff for: src/sections/Meshmap/index.js

@@ -162,8 +162,7 @@ const Meshmap = ({ theme }) => {
           {/* <MesheryAction /> */}
 
           <div className="banner-background">
-
-            <Container style={{ marginBottom: "4rem" }}>
+            <Container style={{ marginBottom: "4rem", padding: "0" }}>
               <Row className="description">
                 <Col lg={7} md={6} sm={12} className="desc-text">
                   <h1 className="heading-1">Signup for</h1>
@@ -179,7 +178,7 @@ const Meshmap = ({ theme }) => {
                   </div>
                 </Col>
 
-                <Col lg={5} md={6} sm={12}>
+                <Col lg={5} md={6} sm={12} style={{ padding: "0" }}>
                   <CommonForm
                     title="Join the Beta Program"
                     form="meshmap"

Diff for: src/sections/Meshmap/meshmap-catalog.js

@@ -421,7 +421,7 @@ const Catalog = () => {
           <section className="services svg-cont">
             <div>
               <img src={Patterns} />
-              <p>Service Patterns</p>
+              <p>Cloud Native Patterns</p>
             </div>
             <div>
               <img src={Ebpf} />

Diff for: src/sections/Meshmap/meshmap.style.js

@@ -21,7 +21,7 @@ const MeshmapWrapper = styled.div`
     margin-top: 3rem;
 
       .desc-text {
-        padding: 1.56rem;
+        padding: 0 1rem 0 1rem;
         h1{
             font-weight: 600;
         }

Diff for: src/sections/Meshmap/meshmap_banner.js

@@ -21,9 +21,9 @@ const BannerSectionWrapper = styled.div`
         font-weight: 500;
         font-size: 60px;
         color: ${props => props.theme.white};
-
         line-height: 4.3rem;
         margin-bottom: 1rem;
+        min-width: 18rem;
         span {
             font-size: 70px;
             width: fit-content;
@@ -39,6 +39,10 @@ const BannerSectionWrapper = styled.div`
                 font-size: 48px;
             }
         }
+        @media screen and (max-width: 418px) {
+            line-height: 3rem;
+            margin: 1.5rem 0;
+        }
     }
     h2 {
         margin-bottom: 1rem;
@@ -67,6 +71,7 @@ const BannerSectionWrapper = styled.div`
         margin-bottom: .5rem;
         font-weight: 400;
         font-style: italic;
+        min-width: 18rem;
         font-family: "Qanelas Soft";
         span {
             color: ${props => props.theme.saffronColor};
@@ -92,6 +97,7 @@ const BannerSectionWrapper = styled.div`
         margin-top: -7rem;
         position: relative;
         left: 30%;
+        z-index: 0;
 
     }
     div.accent-bubble {
@@ -131,42 +137,47 @@ const BannerSectionWrapper = styled.div`
     @media screen and (max-width: 992px) {
         .meshmap-logo {
             width: 8rem;
-            /* right: 3rem; */
             margin-top: -2rem;
+            left: 15%;
         }
         border-radius: 0% 85% 0% 0% / 0% 60% 0% 0% ;
     }
 
     @media screen and (max-width: 768px) {
         padding: 8rem 2rem 3rem;
         .meshmap-logo {
-            margin-top: 10%;
-            left: 5%;
-            width: 5rem;
+            margin-top: -5rem;
+            margin-right: 2rem;
+            left: 7%;
+            min-width: 5rem;
             }
         border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
         }
-
-    @media screen and (max-width: 448px) {
+    @media screen and (max-width: 500px) {
         .meshmap-logo {
-            margin-top: 4rem;
-            left: 5%;
+            margin-top: -5rem;
+            margin-right: 2rem;
+            left: 0%;
+            min-width: 3rem;
+            }
+        border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
         }
-    }
-    @media screen and (max-width: 370px) {
+    @media screen and (max-width: 400px) {
         .meshmap-logo {
-            margin-top: 7rem;
-            left: 5%;
-            width: 5rem;
+            margin-top: -5rem;
+            margin-right: 0;
+            left: -20%;
+            min-width: 3rem;
+            }
+        border-radius: 0% 85% 0% 0% / 0% 40% 0% 0% ;
         }
-    }
 
 `;
 
 const BannerSection = () => {
   return (
     <BannerSectionWrapper>
-      <div>
+      <div className="banner-text">
         {/* <PageHeader title="MeshMap" subtitle="take the blinders off" superscript="BETA" /> */}
         <h2>Step aside, YAML</h2>
         <h1><span>MeshMap</span> is here</h1>