From 4b7a9f05b4563393477dd56cf236ab506d4daf84 Mon Sep 17 00:00:00 2001 From: CalebZoe <179137388+CalebZoe@users.noreply.github.com> Date: Thu, 24 Oct 2024 21:28:08 +0000 Subject: [PATCH 1/5] remove try it now button from nav Signed-off-by: CalebZoe <179137388+CalebZoe@users.noreply.github.com> --- .../Navigation/Navigation.styles.js | 22 +------- site/src/components/Navigation/index.js | 52 ------------------- 2 files changed, 1 insertion(+), 73 deletions(-) diff --git a/site/src/components/Navigation/Navigation.styles.js b/site/src/components/Navigation/Navigation.styles.js index 1e5f2b3..d7a3ae6 100644 --- 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 index 5f4b34a..4cbeabe 100644 --- 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 (
From 238de81fc0d44e889bf94ef2325b8cf0167d28a2 Mon Sep 17 00:00:00 2001 From: CalebZoe <179137388+CalebZoe@users.noreply.github.com> Date: Thu, 24 Oct 2024 21:29:26 +0000 Subject: [PATCH 2/5] remove higher z-index form btns Signed-off-by: CalebZoe <179137388+CalebZoe@users.noreply.github.com> --- site/src/reusecore/Button/btn.style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/reusecore/Button/btn.style.js b/site/src/reusecore/Button/btn.style.js index 27f4b05..60382d7 100644 --- 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; From fc9f898467893f9230ea391727a3c4509813ae5b Mon Sep 17 00:00:00 2001 From: CalebZoe <179137388+CalebZoe@users.noreply.github.com> Date: Thu, 24 Oct 2024 21:31:14 +0000 Subject: [PATCH 3/5] add playground button after video Signed-off-by: CalebZoe <179137388+CalebZoe@users.noreply.github.com> --- site/src/App.js | 56 ++++++++++++++++++++++++++++++++++++++++++- site/src/App.style.js | 40 +++++++++++++++++++++++++++---- 2 files changed, 91 insertions(+), 5 deletions(-) diff --git a/site/src/App.js b/site/src/App.js index ee65148..9e00b9b 100644 --- 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 ( <> @@ -39,12 +52,53 @@ const App = () => { className="embedVideo" /> +
+ +
+ + + +
+ + +

props.theme.text}`, + marginTop: "0.5rem" + }}> + On clicking the continue button you will be redirected to Meshery Playground

+ +
+

Join the community!

Engage in the Meshery community by joining us on Slack

- Join Our Open Source Community +
diff --git a/site/src/App.style.js b/site/src/App.style.js index 565ad3b..29d30f2 100644 --- 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; flex-wrap: wrap; - margin-top: 0; } } .faq { From 989905a2ea8374eb6c7de19e8b6cf2dde0d8ea41 Mon Sep 17 00:00:00 2001 From: CalebZoe <179137388+CalebZoe@users.noreply.github.com> Date: Thu, 24 Oct 2024 21:32:50 +0000 Subject: [PATCH 4/5] rephrase Signed-off-by: CalebZoe <179137388+CalebZoe@users.noreply.github.com> --- site/src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/App.js b/site/src/App.js index 9e00b9b..d7e416e 100644 --- a/site/src/App.js +++ b/site/src/App.js @@ -56,7 +56,7 @@ const App = () => {
Date: Thu, 24 Oct 2024 22:08:31 +0000 Subject: [PATCH 5/5] reduce gap in smaller screens Signed-off-by: CalebZoe <179137388+CalebZoe@users.noreply.github.com> --- site/src/App.style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/App.style.js b/site/src/App.style.js index 29d30f2..d4f3c7c 100644 --- a/site/src/App.style.js +++ b/site/src/App.style.js @@ -302,7 +302,7 @@ section.playground-btn { font-size: 2.5rem; } @media screen and (max-width: 768px) { - gap: 2rem; + gap: .2rem; flex-wrap: wrap; } }