Merge pull request #224 from CalebZoe/enhance

enhance: relocate playground-btn
meshery · Oct 24, 2024 · 1ddee9a · 1ddee9a
2 parents ed03811 + f8ac73d
commit 1ddee9a
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 80 deletions.
diff --git a/site/src/App.js b/site/src/App.js
@@ -8,6 +8,10 @@ import ReactPlayer from 'react-player/youtube'
 import Navigation from "./components/Navigation";
 import DiscussCallout from './components/Discuss-Callout';
 import { useState } from "react";
+import ArrowIcon from './ArrowIcon.js';
+import Modal from "react-modal";
+import Faq from './components/Faq/index.js';
+import Button from './reusecore/Button/index.js';
 
 const App = () => {
 
@@ -16,6 +20,15 @@ const App = () => {
   const themeMode = theme === 'light' ? lightTheme : darkTheme;
   const [showSignUpButton] = useState(true);
 
+  const [modalIsOpen, setIsOpen] = useState(false);
+
+  const openModal = () => {
+    setIsOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsOpen(false);
+  };
   return (
     <>
       <ThemeProvider theme={themeMode}>
@@ -39,12 +52,53 @@ const App = () => {
               className="embedVideo"
             />
           </section>
+          <section className="playground-btn">
+
+              <div>
+              <Button className="continue-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}
+              >
+                &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>
+            </div>
+          </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>
-              <a href="https://slack.meshery.io/" >Join Our Open Source Community</a>
+              <Button href="https://slack.meshery.io/" >Join Our Open Source Community</Button>
             </div>
           </section>
           <section>

diff --git a/site/src/App.style.js b/site/src/App.style.js
@@ -158,6 +158,27 @@ export const Header = styled.header`
 `;
 
 export const Main = styled.main`
+  .signup-btn,
+  .login-btn {
+    font-size: calc(16px + 6 * ((50vw - 320px) / 680));
+    margin: auto 0.5rem;
+  }
+  .signup-btn {
+    padding: 1rem 1.5rem;
+    text-align: center;
+    color: #1e2117;
+    background: rgba(235, 192, 23, 1);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid rgba(235, 192, 23, 0.3);
+    white-space: nowrap;
+  }
+  .signup-btn:hover {
+    background-color: rgba(255, 208, 25, 0.8);
+    color: #fff;
+  }
   max-width: 75%;
   margin: 5rem auto;
 
@@ -239,7 +260,6 @@ export const Main = styled.main`
   }
 
   .join-community {
-  margin-top: 4rem;
     text-align: center;
     a {
       display: block;
@@ -257,6 +277,15 @@ export const Main = styled.main`
       }
     }
   }
+section.playground-btn {
+  margin-top: 4rem;
+  div {
+    display: flex;
+    justify-content: center;
+  }
+
+}
+
 .community-discuss-wrapper {
   display: flex;
   justify-content: center;
@@ -265,13 +294,16 @@ export const Main = styled.main`
   margin-top: 2rem;
   gap: 4rem;
   p {
-  margin-top: 2rem;
-  margin-bottom: 3rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  }
+  h1 {
+    margin-bottom: 0;
+    font-size: 2.5rem;
   }
   @media screen and (max-width: 768px) {
-  gap: 2rem;
+  gap: .2rem;
   flex-wrap: wrap;
-  margin-top: 0;
   }
 }
   .faq {

diff --git a/site/src/components/Navigation/Navigation.styles.js b/site/src/components/Navigation/Navigation.styles.js
@@ -156,27 +156,7 @@ export const Header = styled.header`
     align-items: center;
     justify-content: space-between;
   }
-  .signup-btn,
-  .login-btn {
-    font-size: calc(16px + 6 * ((50vw - 320px) / 680));
-    margin: auto 0.5rem;
-  }
-  .signup-btn {
-    padding: 1rem 1.5rem;
-    text-align: center;
-    color: #1e2117;
-    background: rgba(235, 192, 23, 1);
-    border-radius: 16px;
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(5px);
-    -webkit-backdrop-filter: blur(5px);
-    border: 1px solid rgba(235, 192, 23, 0.3);
-    white-space: nowrap;
-  }
-  .signup-btn:hover {
-    background-color: rgba(255, 208, 25, 0.8);
-    color: #fff;
-  }
+
 
   .login-btn {
     margin: 0 0 0 1rem;

diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js
@@ -8,10 +8,6 @@ import DefaultAvatar from "./DefaultAvatar";
 import CloudIcon from "./CloudIcon";
 import KanvasIcon from "./KanvasIcon";
 import LogoutIcon from "./LogoutIcon";
-import ArrowIcon from "../../ArrowIcon";
-import Modal from "react-modal";
-import Faq from "../Faq";
-import Button from "../../reusecore/Button";
 
 function Navigation({ theme, toggleTheme, showSignUpButton }) {
   const [userData, setUserData] = useState(null);
@@ -68,15 +64,7 @@ setScroll((window.scrollY || window.pageYOffset) > 50)
   const handleNavOpen = () => {
     setOpenNav(!openNav);
   };
-  const [modalIsOpen, setIsOpen] = useState(false);
 
-  const openModal = () => {
-    setIsOpen(true);
-  };
-
-  const closeModal = () => {
-    setIsOpen(false);
-  };
   return (
     <Header>
       <nav className={scroll ? "scrolled" : ""}>
@@ -173,46 +161,6 @@ setScroll((window.scrollY || window.pageYOffset) > 50)
           )}
           <div className="btn-container">
             <Toggle theme={theme} toggleTheme={toggleTheme} />
-            {showSignUpButton && !userData && (
-              <div>
-              <a href="#open-playground" className="signup-btn" role="button"  onClick={openModal}>
-                Try it now
-              </a>
-              <Modal
-              isOpen={modalIsOpen}
-              onRequestClose={closeModal}
-              className="Modal"
-              overlayClassName="Overlay"
-              ariaHideApp={false}
-              contentLabel="Content Form"
-            >
-              <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>
-            </div>
-            )}
           </div>
         </div>
       </nav>

diff --git a/site/src/reusecore/Button/btn.style.js b/site/src/reusecore/Button/btn.style.js
@@ -17,7 +17,7 @@ const ButtonStyle = styled.button`
     position: relative;
     color: ${props => props.theme.white };
     background-color: #00B39F;
-    z-index: 999;
+    // z-index: 999;
     &:hover,
     &:focus {
         color: white;