Merge pull request #4184 from Shivam-AfA/playgroundPage

Adding the Playground page to layer5.io

src/pages/cloud-native-management/playground.js

@@ -0,0 +1,15 @@
+import React from "react";
+import SEO from "../../components/seo";
+import Playground from "../../sections/Playground";
+
+const PlaygroundPage = () => {
+  return (
+    <>
+      <Playground/>
+    </>
+  );
+};
+export default PlaygroundPage;
+export const Head = () => {
+  return <SEO title="Cloud Native Playground" description="Meshery CNCF Playground - The cloud native playground for Kubernetes and all CNCF projects" />;
+};

src/sections/General/Navigation/utility/menu-items.js

@@ -103,7 +103,7 @@ const Data = {
         },
         {
           name: "Playground",
-          path: "https://play.meshery.io",
+          path: "/cloud-native-management/playground",
         },
         {
           name: "Nighthawk",

src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-team.js

@@ -67,15 +67,15 @@ const CollaborationFeatureWrapper = styled.div`
       transition: opacity ease-out 0.5s;
       .collab4-colorMode_svg__colorMode1
        {
-        fill: ${props => props.theme.whiteToBlack}
+        fill: ${props => props.theme.whiteToBlack};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
       .collab4-colorMode_svg__colorMode2{
-        fill: ${props => props.theme.greyB4B4B4ToGrey505050}
+        fill: ${props => props.theme.greyB4B4B4ToGrey505050};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .collab4-colorMode_svg__colorMode3{
-        fill: ${props => props.theme.blackToWhite}
+        fill: ${props => props.theme.blackToWhite};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        @media only screen and (max-width: 767px) {
@@ -112,7 +112,7 @@ const CollaborationFeatureTeam = () => {
         </div>
         <div className="hero-text">
           <h2><span>Collaborate with your Team</span></h2>
-          <p>Build an iterative design flow with live collaboration that keeps you in the loop whether you’re working in the office or remotely.</p>
+          <p>Build an iterative design flow with live collaboration that keeps you in the loop whether you are working in the office or remotely.</p>
         </div>
       </div>
     </CollaborationFeatureWrapper>

src/sections/Meshmap/Meshmap-collaborate/meshmap-collaborate-banner.js

@@ -176,7 +176,7 @@ const CollaborationBannerWrapper = styled.div`
     .service-interface {
         scale: 1;
     }
-
+}
 `;
 
 const MeshmapCollaborateBanner = () => {