Revert changes made by commits ed7feac and 156d5f0

meshery · Dec 21, 2024 · ad2a098 · ad2a098
1 parent ed7feac
commit ad2a098
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 70 deletions.
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git 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
@@ -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
@@ -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;