playground popup updated

src/components/Corner-popup/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Button from "../../reusecore/Button";
 import { ReactComponent as CloseIcon } from "./closeIcon.svg";
-import popupImageSmall from "./power-of-meshery-small.svg";
+import popupImageSmall from "./power-of-meshery-small.png";
 import CornerPopupWrapper from "./popup.style";
 
 const CornerPopup = () => {
@@ -28,7 +28,7 @@ const CornerPopup = () => {
             <a href="https://play.meshery.io/">
               <img className="popup-image" src={popupImageSmall} />
             </a>
-            <Button primary className="explore-playground-button" title="Explore Meshery Playground" url="https://play.meshery.io/" />
+            <Button primary className="explore-playground-button" title="Access Playground" url="https://play.meshery.io/" />
           </div>
         </div>
       </div>

src/components/Corner-popup/popup.style.js

@@ -6,41 +6,45 @@ const CornerPopupWrapper = styled.div`
     bottom: 0;
     right: 0;
     margin: 0 2rem 3rem 0;
-    max-width: 30%;
-    max-height: 40%;
+    width: 100%;
+    width: 26rem;
     /* background-color: ${props => props.theme.blackToWhite}; */
     background-color: transparent;
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: center;
     /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px; */
-
     @media only screen and (max-width: 1000px) {
-        max-width: 40%;
-        max-height: 40%;
+        max-width: 22rem;
+    }
+    @media only screen and (max-width: 640px) {
+        width: 20rem;
+        max-width: 55%;
     }
 }
 .popup-inner {
     position: relative;
     width: 100%;
-    max-width: 30rem;
     background-color: ${props => props.theme.blackToWhite};
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 1rem;
+    gap: 0.75rem;
     align-items: center;
-    padding: 7%;
+    padding: 1rem;
     border: 1px solid #00d3a9;
     border-radius: 5%;
     box-shadow: 0 0 30px rgba(0,211,169, 0.6);
+    @media only screen and (max-width: 640px) {
+        padding: 0.5rem;
+        gap: 0.375rem;
+    }
 }
 .close-btn {
     position: absolute;
-    top: 0;
-    right: 0;
-    /* width: 8%; */
+    top: 0rem;
+    right: 0rem;
     cursor: pointer;
 }
 .popup-image{
@@ -57,15 +61,15 @@ const CornerPopupWrapper = styled.div`
 .explore-playground-button {
     min-width: 140px;
     @media only screen and (max-width: 422px) {
-        font-size: 0.9rem;
+        font-size: 0.75rem;
         min-width: 100px;
     }
 
 }
 
 svg {
     .closeIcon_svg__cls-1{
-        stop-color: ${props => props.theme.whiteToBlack};
+        fill: ${props => props.theme.whiteToBlack};
     }
 }
 `;