Merge pull request #4453 from Shivam-AfA/popup

Updated Playground popup image
layer5io · Jun 30, 2023 · 921c644 · 921c644
2 parents 7029d48 + 8e66328
commit 921c644
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 22 deletions.
diff --git a/src/components/Corner-popup/index.js b/src/components/Corner-popup/index.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Button from "../../reusecore/Button";
 import closeIcon from "./closeIcon.svg";
-import popupImage from "./power-of-meshery.svg";
 import popupImageSmall from "./power-of-meshery-small.svg";
 import CornerPopupWrapper from "./popup.style";
 
@@ -25,8 +24,7 @@ const CornerPopup = () => {
           <div className="popup-inner">
             <img className="close-btn" src={closeIcon} onClick={() => setShowPopup(false)} />
             <a href="https://play.meshery.io/">
-              <img className="popup-image" src={popupImage} />
-              <img className="popup-image-small" src={popupImageSmall} />
+              <img className="popup-image" src={popupImageSmall} />
             </a>
             <Button primary className="explore-playground-button" title="Explore Meshery Playground" url="https://play.meshery.io/" />
           </div>

diff --git a/src/components/Corner-popup/popup.style.js b/src/components/Corner-popup/popup.style.js
@@ -41,16 +41,16 @@ const CornerPopupWrapper = styled.div`
 }
 .popup-image{
     box-shadow: 0 0 30px rgba(0,211,169, 0.6);
-    @media only screen and (max-width: 767px) {
+    /* @media only screen and (max-width: 767px) {
         display: none;
-    }
+    } */
 }
-.popup-image-small{
+/* .popup-image-small{
     box-shadow: 0 0 30px rgba(0,211,169, 0.6);
     @media only screen and (min-width: 767px) {
         display: none;
     }
-}
+} */
 
 .explore-playground-button {
     min-width: 140px;

diff --git a/src/sections/Community/Handbook/BookComponent/BookComponent.js b/src/sections/Community/Handbook/BookComponent/BookComponent.js
@@ -1,28 +1,28 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 import BookComponentWrapper from "./BookComponent.style";
 import handbookdark from "../images/handbook-dark.webp";
-import { Link } from 'gatsby';
+import { Link } from "gatsby";
 
 const BookComponent = () => {
   useEffect(() => {
-    const bookElement = document.querySelector('.book');
-    bookElement.classList.add('rot-on-rel');
+    const bookElement = document.querySelector(".book");
+    bookElement.classList.add("rot-on-rel");
   }, []);
   return (
     <BookComponentWrapper>
-    <Link
+      <Link
         className="book-container"
         to="/community/handbook"
         target="_blank"
         rel="noreferrer noopener"
       >
-      <div className="book">
-        <img
-          alt="Community HandBook"
-          src={handbookdark}
-        />
-      </div>
-    </Link>
+        <div className="book">
+          <img
+            alt="Community HandBook"
+            src={handbookdark}
+          />
+        </div>
+      </Link>
     </BookComponentWrapper>
   );
 };

diff --git a/src/sections/Community/Meshmates/index.js b/src/sections/Community/Meshmates/index.js
@@ -82,9 +82,9 @@ const Meshmates = () => {
           <h5> What to Expect </h5>
           <h2> Engaging with a MeshMate</h2>
           <div className="bookcomponent"><BookComponent/></div>
-          <p> The program pairs experienced Layer5 community members with community newcomers to ensure a smooth onboarding experience. There is a lot going in the Layer5 community. Projects and working groups move fast. MeshMates are committed to helping their mentees in identifying an area of the projects to engage within, working groups to join, growing their Cloud Native knowledge, and network of relationships. By connecting one-on-one, MeshMates will share tips on how to have the best community experience possible. </p>       
-          <p> Meshtees are encouraged to reach out to any MeshMate directly in order to pair up. Introduce yourself either on in the <a href="https://discuss.layer5.io/c/community/12">Layer5 discussion forum</a>. Help your MeshMate understand your current skills, ideal topics of learning, and areas of passion. Doing so will help them to point out various aspects of projects that you might find your first foothold. </p>          
-        </div>       
+          <p> The program pairs experienced Layer5 community members with community newcomers to ensure a smooth onboarding experience. There is a lot going in the Layer5 community. Projects and working groups move fast. MeshMates are committed to helping their mentees in identifying an area of the projects to engage within, working groups to join, growing their Cloud Native knowledge, and network of relationships. By connecting one-on-one, MeshMates will share tips on how to have the best community experience possible. </p>
+          <p> Meshtees are encouraged to reach out to any MeshMate directly in order to pair up. Introduce yourself either on in the <a href="https://discuss.layer5.io/c/community/12">Layer5 discussion forum</a>. Help your MeshMate understand your current skills, ideal topics of learning, and areas of passion. Doing so will help them to point out various aspects of projects that you might find your first foothold. </p>
+        </div>
         <div className="meshmate-meet">
           <Row Vcenter>
             <Col sm={12} lg={6}>