replace signup form with modal

site/package.json

@@ -20,7 +20,8 @@
     "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": {
     "async": ">=2.6.4",

site/src/App.js

@@ -1,4 +1,3 @@
-import SignupForm from "./components/SignupForm";
 import { Main } from './App.style.js';
 import mesheryPlayground from "./assets/images/meshery-playground-kanvas.png";
 import Footer from "./components/Footer";
@@ -7,18 +6,15 @@ import { darkTheme, GlobalStyle, lightTheme } from './index.style.js';
 import { useDarkMode } from "./components/useDarkMode";
 import ReactPlayer from 'react-player/youtube'
 import Navigation from "./components/Navigation";
-import Faq from "./components/Faq";
+import DiscussCallout from './components/Discuss-Callout';
 import { useState } from "react";
 
 const App = () => {
 
+
   const [theme, toggleTheme] = useDarkMode();
   const themeMode = theme === 'light' ? lightTheme : darkTheme;
-  const [showSignUpButton, setShowSignUpButton] = useState(true);
-
-  const handleSignUpFormSubmit = () => {
-    setShowSignUpButton(false);
-  };
+  const [showSignUpButton] = useState(true);
 
   return (
     <>
@@ -27,7 +23,6 @@ const App = () => {
         <Navigation theme={theme} toggleTheme={toggleTheme} showSignUpButton={showSignUpButton} />
         <Main>
           <section className="hero">
-            <h3 className="try-now-txt">Try it now!</h3>
             <h1>
               The Cloud Native Playground
             </h1>
@@ -43,27 +38,26 @@ const App = () => {
               style={{ margin: "auto" }}
               className="embedVideo"
             />
-
-          </section>
-          <section className="form" id="signup-form">
-             <SignupForm onSubmit={handleSignUpFormSubmit}  />
-          </section>
-          <section className="faq">
-            <h1>Frequently Asked Questions</h1>
-            <Faq category={["Meshery Playground"]}/>
           </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>
             </div>
           </section>
+          <section>
+          <div className='desc-callout'>
+            <DiscussCallout />
+          </div>
+          </section>
+          </div>
         </Main>
         <Footer />
       </ThemeProvider>
     </>
   );
 }
 
-export default App;
+export default App;

site/src/App.style.js

@@ -239,6 +239,7 @@ export const Main = styled.main`
   }
 
   .join-community {
+  margin-top: 4rem;
     text-align: center;
     a {
       display: block;
@@ -256,7 +257,23 @@ export const Main = styled.main`
       }
     }
   }
+.community-discuss-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
+  margin-top: 2rem;
+  gap: 4rem;
+  p {
+  margin-top: 2rem;
+  margin-bottom: 3rem;
+  }
+  @media screen and (max-width: 768px) {
+  gap: 2rem;
+  flex-wrap: wrap;
+  margin-top: 0;
+  }
+}
   .faq {
     text-align: center;
     margin: 4rem auto 0rem auto;

site/src/ArrowIcon.js

@@ -0,0 +1,8 @@
+import React from "react"
+const ArrowIcon = () => {
+
+return (
+    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="icon-left" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.5 4a.5.5 0 01.5-.5h5a.5.5 0 01.5.5v5a.5.5 0 01-1 0V4.5H7a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 010 .708l-9 9a.5.5 0 01-.708-.708l9-9a.5.5 0 01.708 0z" clip-rule="evenodd"></path></svg>
+)
+}
+export default ArrowIcon;

site/src/assets/data/faq/index.js

@@ -42,14 +42,14 @@ const data = {
 - In other words, only Kanvas Visualizer is reset. All of your work in Meshery UI and Kanvas Designer will remain in your user account.
       `,
     },
-    {
-      question: "Is Meshery open source?",
-      category: "Meshery Playground",
-      answer: `
-- Yes, Meshery is a Cloud Native Computing Foundation (CNCF) project and is licensed under Apache v2.
-- As the extensible cloud native manager, Meshery is a pluggable platform, offering multiple extension points within which users and partners (ISVs) can customize and extend Meshery's functionality under the same or different license(s), offering commercial and non-commericial extensions.
-      `,
-    },
+//     {
+//       question: "Is Meshery open source?",
+//       category: "Meshery Playground",
+//       answer: `
+// - Yes, Meshery is a Cloud Native Computing Foundation (CNCF) project and is licensed under Apache v2.
+// - As the extensible cloud native manager, Meshery is a pluggable platform, offering multiple extension points within which users and partners (ISVs) can customize and extend Meshery's functionality under the same or different license(s), offering commercial and non-commericial extensions.
+//       `,
+//     },
     // {
     //     question: "What is the difference between the Cloud Native Playground and Kanvas?",
     //     category: "Meshery Playground",
@@ -66,16 +66,16 @@ const data = {
 - Yes, all of the designs that you have created in the Meshery Playground are saved to your user account and will be available to you each time that you return to the Playground. The designs will also be available in your other Meshery deployments.
       `,
     },
-    {
-      question: "Can I deploy the Meshery on-premises?",
-      category: "Meshery Playground",
-      answer: `
-- Yes, Meshery can be deployed on-premises with a single command to download, install, and run your own instance of Meshery in your environment.
-- See all supported platforms to deploy your own Meshery instance at https://meshery.io
-      `,
-      link: "https://meshery.io",
-      linktext: "Get Started with Meshery",
-    },
+//     {
+//       question: "Can I deploy the Meshery on-premises?",
+//       category: "Meshery Playground",
+//       answer: `
+// - Yes, Meshery can be deployed on-premises with a single command to download, install, and run your own instance of Meshery in your environment.
+// - See all supported platforms to deploy your own Meshery instance at https://meshery.io
+//       `,
+//       link: "https://meshery.io",
+//       linktext: "Get Started with Meshery",
+//     },
     {
       question:
         "When I add my Kubernetes cluster to the Meshery Playground will it be available to all other users? Can other people access my cluster?",

site/src/components/Discuss-Callout/discuss.style.js

@@ -114,7 +114,7 @@ const DiscussWrapper = styled.div`
                             line-height: 32px;
                         }
                         p {
-                            font-size: 1rem;
+                            font-size: 1.29rem;
                             line-height: 23px;
                         }
                     }

site/src/components/Faq/faqSection.style.js

@@ -1,20 +1,27 @@
 import styled from 'styled-components';
 
 const FaqSectionWrapper = styled.section`
-  margin: 2.5rem auto;
+  margin: 0.5rem auto;
   position: relative;
-  overflow: hidden;
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   .category_name {
-    margin: 2rem 0 0.5rem;
+    margin: 0.5rem 0 0.5rem;
     font-style: italic;
-    text-transform: capitalize;
+    // text-transform: capitalize;
   }
   .accordion__item + .accordion__item {
     border-color: transparent;
   }
   .reusecore__accordion {
     margin-bottom: 5rem;
+    overflow: scroll;
+    &::-webkit-scrollbar {
+        display: none;
+    }
   }
   .accordion__item {
     .accordion__header {

site/src/components/Faq/index.js

@@ -50,9 +50,9 @@ const Faq = (props) => {
           <>
             <h2
               className="category_name"
-              style={{ paddingBottom: 25, textAlign: "center" }}
+              style={{ paddingBottom: 25, textAlign: "center", fontSize: "1.5rem" }}
             >
-              {key}
+              You are about to access Meshery Playground
             </h2>
             {faqs[key].map((faq, index) => (
               <AccordionItem key={index}>

site/src/components/Navigation/Navigation.styles.js

@@ -101,6 +101,28 @@ export const Header = styled.header`
       color: #00b39f;
     }
   }
+  .continue-btn {
+        z-index: 0;
+        display: flex;
+				font-family: inherit;
+				margin: -0.5rem auto 0rem auto;
+				padding: 1rem 1.5rem;
+				font-size: 1.35rem;
+				border: 0;
+				border-radius: 0.5rem;
+				background: rgb(235, 192, 23);
+				color: #FFF;
+				transition: 0.2s ease-in-out;
+				&:hover {
+					cursor: pointer;
+					background-color: rgb(255, 208, 25);
+					color: #FFF;
+					box-shadow: rgb(235, 192, 23) 0px 0px 12px;
+				}
+				&:active {
+					box-shadow: none;
+				}
+	}
 
   .dropdown_menu_opened {
     background: ${({ theme }) => theme.body};
@@ -142,7 +164,7 @@ export const Header = styled.header`
   .signup-btn {
     padding: 1rem 1.5rem;
     text-align: center;
-    color: #fff;
+    color: #1e2117;
     background: rgba(235, 192, 23, 1);
     border-radius: 16px;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

site/src/components/Navigation/index.js

@@ -8,6 +8,11 @@ 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);
   const [openNav, setOpenNav] = useState(false);
@@ -40,7 +45,7 @@ setScroll((window.scrollY || window.pageYOffset) > 50)
       "https://meshery.layer5.io/api/identity/users/profile";
     const fetchData = async () => {
       try {
-        const token = getCookieValue("token");
+        const token = getCookieValue("provider_token");
         const response = await axios.get(CLOUD_USER_API, {
           headers: {
             Authorization: `Bearer ${token}`,
@@ -63,7 +68,15 @@ 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" : ""}>
@@ -161,9 +174,44 @@ setScroll((window.scrollY || window.pageYOffset) > 50)
           <div className="btn-container">
             <Toggle theme={theme} toggleTheme={toggleTheme} />
             {showSignUpButton && !userData && (
-              <a href="#signup-form" className="signup-btn" role="button">
-                Sign Up
+              <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>