From 156d5f08fd71ca90897dee0ef3aec323af916f6a Mon Sep 17 00:00:00 2001
From: sonalgaud12 <sonalgaud12@gmail.com>
Date: Fri, 20 Dec 2024 09:32:36 +0530
Subject: [PATCH 1/3] Fix: Added padding to image container to prevent logo
 cut-off

Signed-off-by: sonalgaud12 <sonalgaud12@gmail.com>
---
 site/package-lock.json | 25 +++++++++++-
 site/package.json      |  5 ++-
 site/src/App.js        | 86 +++++++++++++++++++++---------------------
 site/src/App.style.js  |  3 ++
 4 files changed, 74 insertions(+), 45 deletions(-)

diff --git a/site/package-lock.json b/site/package-lock.json
index a40509e..b649b93 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -28,6 +28,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "async": ">=2.6.4",
         "nth-check": ">=2.0.1"
       }
@@ -647,8 +648,18 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1825,6 +1836,18 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "license": "ISC",
diff --git a/site/package.json b/site/package.json
index 68705dd..9615114 100644
--- a/site/package.json
+++ b/site/package.json
@@ -16,14 +16,15 @@
     "react-dom": "^18.0.0",
     "react-icons": "^4.7.1",
     "react-markdown": "^9.0.1",
+    "react-modal": "^3.16.1",
     "react-player": "^2.11.0",
     "react-scripts": "5.0.1",
     "remark-gfm": "^4.0.0",
     "styled-components": "^5.3.5",
-    "web-vitals": "^2.1.4",
-    "react-modal": "^3.16.1"
+    "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "async": ">=2.6.4",
     "nth-check": ">=2.0.1"
   },
diff --git a/site/src/App.js b/site/src/App.js
index 1d561f9..7717864 100644
--- a/site/src/App.js
+++ b/site/src/App.js
@@ -45,69 +45,71 @@ const App = () => {
           </section>
           <section className="playground-btn">
             <div>
-              <Button className="continue-btn open-playground-btn" style={{ background: "rgb(235, 192, 23)" }} role="button"  onClick={openModal}>
+              <Button className="continue-btn open-playground-btn" style={{ background: "rgb(235, 192, 23)" }} role="button" onClick={openModal}>
                 Open Playground
               </Button>
               <Modal
-              isOpen={modalIsOpen}
-              onRequestClose={closeModal}
-              className="Modal"
-              overlayClassName="Overlay"
-              ariaHideApp={false}
-              contentLabel="Content Form"
-            >
-              <Button
-                className="close-modal-btn"
-                onClick={closeModal}
+                isOpen={modalIsOpen}
+                onRequestClose={closeModal}
+                className="Modal"
+                overlayClassName="Overlay"
+                ariaHideApp={false}
+                contentLabel="Content Form"
               >
-                &times;
-              </Button>
-              <div class="content">
-              <Faq category={["Meshery Playground"]}/>
-              <div className="continue-btn-container"
-              >
-              <a href="https://playground.meshery.io">
-              <Button className="continue-btn" style={{ background: "rgb(235, 192, 23)" }}>
-                <ArrowIcon />
-                Continue
-              </Button>
-                </a>
-                </div>
-                <p style={{
+                <Button
+                  className="close-modal-btn"
+                  onClick={closeModal}
+                >
+                  &times;
+                </Button>
+                <div class="content">
+                  <Faq category={["Meshery Playground"]} />
+                  <div className="continue-btn-container"
+                  >
+                    <a href="https://playground.meshery.io">
+                      <Button className="continue-btn" style={{ background: "rgb(235, 192, 23)" }}>
+                        <ArrowIcon />
+                        Continue
+                      </Button>
+                    </a>
+                  </div>
+                  <p style={{
                     textAlign: "center",
                     fontSize: "1rem",
                     color: `${props => props.theme.text}`,
                     marginTop: "0.5rem"
-                }}>
-                  On clicking the continue button you will be redirected to Meshery Playground.</p></div>
-            </Modal>
+                  }}>
+                    On clicking the continue button you will be redirected to Meshery Playground.</p></div>
+              </Modal>
             </div>
           </section>
-          <section className="video">
+          <section className="video" style={{ paddingTop: '50px' }}>
             <ReactPlayer
               url="https://youtu.be/Do7htKrRzDA"
               playing
               controls
               light={mesheryPlayground}
               width="177.778%"
+
               style={{ margin: "auto" }}
               className="embedVideo"
             />
           </section>
-          
+
+
           <div className="community-discuss-wrapper">
-          <section className="join-community">
-            <div>
-              <h1>Join the community!</h1>
-              <p>Engage in the Meshery community by joining us on Slack</p>
-              <Button url="https://slack.meshery.io/" >Join Our Open Source Community</Button>
-            </div>
-          </section>
-          <section>
-          <div className='desc-callout'>
-            <DiscussCallout />
-          </div>
-          </section>
+            <section className="join-community">
+              <div>
+                <h1>Join the community!</h1>
+                <p>Engage in the Meshery community by joining us on Slack</p>
+                <Button url="https://slack.meshery.io/" >Join Our Open Source Community</Button>
+              </div>
+            </section>
+            <section>
+              <div className='desc-callout'>
+                <DiscussCallout />
+              </div>
+            </section>
           </div>
         </Main>
         <Footer />
diff --git a/site/src/App.style.js b/site/src/App.style.js
index 0fb51a4..ef8590d 100644
--- a/site/src/App.style.js
+++ b/site/src/App.style.js
@@ -213,7 +213,9 @@ export const Main = styled.main`
   section.video {
     margin: 4rem auto;
     display: flex;
+    -webkit-box-pack: center;
     justify-content: center;
+    padding: 50px;
   }
   .embedVideo {
     height: 44vw !important;
@@ -223,6 +225,7 @@ export const Main = styled.main`
 
     .react-player__preview {
       border-radius: 1.5%;
+       
     }
 
     .react-player__play-icon {

From ed7feac142a589902163ee1dc7ae1450021ece67 Mon Sep 17 00:00:00 2001
From: sonalgaud12 <sonalgaud12@gmail.com>
Date: Fri, 20 Dec 2024 10:10:22 +0530
Subject: [PATCH 2/3] fixed

Signed-off-by: sonalgaud12 <sonalgaud12@gmail.com>
---
 site/src/App.js       | 3 ---
 site/src/App.style.js | 1 -
 2 files changed, 4 deletions(-)

diff --git a/site/src/App.js b/site/src/App.js
index 7717864..ca78a93 100644
--- a/site/src/App.js
+++ b/site/src/App.js
@@ -90,13 +90,10 @@ const App = () => {
               controls
               light={mesheryPlayground}
               width="177.778%"
-
               style={{ margin: "auto" }}
               className="embedVideo"
             />
           </section>
-
-
           <div className="community-discuss-wrapper">
             <section className="join-community">
               <div>
diff --git a/site/src/App.style.js b/site/src/App.style.js
index ef8590d..22e2839 100644
--- a/site/src/App.style.js
+++ b/site/src/App.style.js
@@ -225,7 +225,6 @@ export const Main = styled.main`
 
     .react-player__preview {
       border-radius: 1.5%;
-       
     }
 
     .react-player__play-icon {

From ad2a098a3e6b806836136143fdc2a691001796fc Mon Sep 17 00:00:00 2001
From: sonalgaud12 <sonalgaud12@gmail.com>
Date: Sat, 21 Dec 2024 11:38:17 +0530
Subject: [PATCH 3/3] Revert changes made by commits ed7feac142a and 156d5f08fd

---
 site/package-lock.json | 25 +------------
 site/package.json      |  5 +--
 site/src/App.js        | 83 +++++++++++++++++++++---------------------
 site/src/App.style.js  |  2 -
 4 files changed, 45 insertions(+), 70 deletions(-)

diff --git a/site/package-lock.json b/site/package-lock.json
index b649b93..a40509e 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -28,7 +28,6 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "async": ">=2.6.4",
         "nth-check": ">=2.0.1"
       }
@@ -648,18 +647,8 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
-      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
-      "dev": true,
+      "version": "7.21.0-placeholder-for-preset-env.2",
       "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-create-class-features-plugin": "^7.21.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
-      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1836,18 +1825,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "license": "ISC",
diff --git a/site/package.json b/site/package.json
index 9615114..68705dd 100644
--- a/site/package.json
+++ b/site/package.json
@@ -16,15 +16,14 @@
     "react-dom": "^18.0.0",
     "react-icons": "^4.7.1",
     "react-markdown": "^9.0.1",
-    "react-modal": "^3.16.1",
     "react-player": "^2.11.0",
     "react-scripts": "5.0.1",
     "remark-gfm": "^4.0.0",
     "styled-components": "^5.3.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "react-modal": "^3.16.1"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "async": ">=2.6.4",
     "nth-check": ">=2.0.1"
   },
diff --git a/site/src/App.js b/site/src/App.js
index ca78a93..1d561f9 100644
--- a/site/src/App.js
+++ b/site/src/App.js
@@ -45,45 +45,45 @@ const App = () => {
           </section>
           <section className="playground-btn">
             <div>
-              <Button className="continue-btn open-playground-btn" style={{ background: "rgb(235, 192, 23)" }} role="button" onClick={openModal}>
+              <Button className="continue-btn open-playground-btn" style={{ background: "rgb(235, 192, 23)" }} role="button"  onClick={openModal}>
                 Open Playground
               </Button>
               <Modal
-                isOpen={modalIsOpen}
-                onRequestClose={closeModal}
-                className="Modal"
-                overlayClassName="Overlay"
-                ariaHideApp={false}
-                contentLabel="Content Form"
+              isOpen={modalIsOpen}
+              onRequestClose={closeModal}
+              className="Modal"
+              overlayClassName="Overlay"
+              ariaHideApp={false}
+              contentLabel="Content Form"
+            >
+              <Button
+                className="close-modal-btn"
+                onClick={closeModal}
               >
-                <Button
-                  className="close-modal-btn"
-                  onClick={closeModal}
-                >
-                  &times;
-                </Button>
-                <div class="content">
-                  <Faq category={["Meshery Playground"]} />
-                  <div className="continue-btn-container"
-                  >
-                    <a href="https://playground.meshery.io">
-                      <Button className="continue-btn" style={{ background: "rgb(235, 192, 23)" }}>
-                        <ArrowIcon />
-                        Continue
-                      </Button>
-                    </a>
-                  </div>
-                  <p style={{
+                &times;
+              </Button>
+              <div class="content">
+              <Faq category={["Meshery Playground"]}/>
+              <div className="continue-btn-container"
+              >
+              <a href="https://playground.meshery.io">
+              <Button className="continue-btn" style={{ background: "rgb(235, 192, 23)" }}>
+                <ArrowIcon />
+                Continue
+              </Button>
+                </a>
+                </div>
+                <p style={{
                     textAlign: "center",
                     fontSize: "1rem",
                     color: `${props => props.theme.text}`,
                     marginTop: "0.5rem"
-                  }}>
-                    On clicking the continue button you will be redirected to Meshery Playground.</p></div>
-              </Modal>
+                }}>
+                  On clicking the continue button you will be redirected to Meshery Playground.</p></div>
+            </Modal>
             </div>
           </section>
-          <section className="video" style={{ paddingTop: '50px' }}>
+          <section className="video">
             <ReactPlayer
               url="https://youtu.be/Do7htKrRzDA"
               playing
@@ -94,19 +94,20 @@ const App = () => {
               className="embedVideo"
             />
           </section>
+          
           <div className="community-discuss-wrapper">
-            <section className="join-community">
-              <div>
-                <h1>Join the community!</h1>
-                <p>Engage in the Meshery community by joining us on Slack</p>
-                <Button url="https://slack.meshery.io/" >Join Our Open Source Community</Button>
-              </div>
-            </section>
-            <section>
-              <div className='desc-callout'>
-                <DiscussCallout />
-              </div>
-            </section>
+          <section className="join-community">
+            <div>
+              <h1>Join the community!</h1>
+              <p>Engage in the Meshery community by joining us on Slack</p>
+              <Button url="https://slack.meshery.io/" >Join Our Open Source Community</Button>
+            </div>
+          </section>
+          <section>
+          <div className='desc-callout'>
+            <DiscussCallout />
+          </div>
+          </section>
           </div>
         </Main>
         <Footer />
diff --git a/site/src/App.style.js b/site/src/App.style.js
index 22e2839..0fb51a4 100644
--- a/site/src/App.style.js
+++ b/site/src/App.style.js
@@ -213,9 +213,7 @@ export const Main = styled.main`
   section.video {
     margin: 4rem auto;
     display: flex;
-    -webkit-box-pack: center;
     justify-content: center;
-    padding: 50px;
   }
   .embedVideo {
     height: 44vw !important;