Skip to content

Commit 1ddee9a

Browse files
author
Vivek Vishal
authored
Merge pull request #224 from CalebZoe/enhance
enhance: relocate playground-btn
2 parents ed03811 + f8ac73d commit 1ddee9a

File tree

5 files changed

+94
-80
lines changed

5 files changed

+94
-80
lines changed

‎site/src/App.js‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ import ReactPlayer from 'react-player/youtube'
88
import Navigation from "./components/Navigation";
99
import DiscussCallout from './components/Discuss-Callout';
1010
import { useState } from "react";
11+
import ArrowIcon from './ArrowIcon.js';
12+
import Modal from "react-modal";
13+
import Faq from './components/Faq/index.js';
14+
import Button from './reusecore/Button/index.js';
1115

1216
const App = () => {
1317

@@ -16,6 +20,15 @@ const App = () => {
1620
const themeMode = theme === 'light' ? lightTheme : darkTheme;
1721
const [showSignUpButton] = useState(true);
1822

23+
const [modalIsOpen, setIsOpen] = useState(false);
24+
25+
const openModal = () => {
26+
setIsOpen(true);
27+
};
28+
29+
const closeModal = () => {
30+
setIsOpen(false);
31+
};
1932
return (
2033
<>
2134
<ThemeProvider theme={themeMode}>
@@ -39,12 +52,53 @@ const App = () => {
3952
className="embedVideo"
4053
/>
4154
</section>
55+
<section className="playground-btn">
56+
57+
<div>
58+
<Button className="continue-btn" style={{ background: "rgb(235, 192, 23)" }} role="button" onClick={openModal}>
59+
Open Playground
60+
</Button>
61+
<Modal
62+
isOpen={modalIsOpen}
63+
onRequestClose={closeModal}
64+
className="Modal"
65+
overlayClassName="Overlay"
66+
ariaHideApp={false}
67+
contentLabel="Content Form"
68+
>
69+
<Button
70+
className="close-modal-btn"
71+
onClick={closeModal}
72+
>
73+
&times;
74+
</Button>
75+
<div class="content">
76+
<Faq category={["Meshery Playground"]}/>
77+
<div className="continue-btn-container"
78+
>
79+
<a href="https://playground.meshery.io">
80+
<Button className="continue-btn" style={{ background: "rgb(235, 192, 23)" }}>
81+
<ArrowIcon />
82+
Continue
83+
</Button>
84+
</a>
85+
</div>
86+
<p style={{
87+
textAlign: "center",
88+
fontSize: "1rem",
89+
color: `${props => props.theme.text}`,
90+
marginTop: "0.5rem"
91+
}}>
92+
On clicking the continue button you will be redirected to Meshery Playground</p></div>
93+
</Modal>
94+
</div>
95+
</section>
4296
<div className="community-discuss-wrapper">
4397
<section className="join-community">
4498
<div>
4599
<h1>Join the community!</h1>
46100
<p>Engage in the Meshery community by joining us on Slack</p>
47-
<a href="https://slack.meshery.io/" >Join Our Open Source Community</a>
101+
<Button href="https://slack.meshery.io/" >Join Our Open Source Community</Button>
48102
</div>
49103
</section>
50104
<section>

‎site/src/App.style.js‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,27 @@ export const Header = styled.header`
158158
`;
159159

160160
export const Main = styled.main`
161+
.signup-btn,
162+
.login-btn {
163+
font-size: calc(16px + 6 * ((50vw - 320px) / 680));
164+
margin: auto 0.5rem;
165+
}
166+
.signup-btn {
167+
padding: 1rem 1.5rem;
168+
text-align: center;
169+
color: #1e2117;
170+
background: rgba(235, 192, 23, 1);
171+
border-radius: 16px;
172+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
173+
backdrop-filter: blur(5px);
174+
-webkit-backdrop-filter: blur(5px);
175+
border: 1px solid rgba(235, 192, 23, 0.3);
176+
white-space: nowrap;
177+
}
178+
.signup-btn:hover {
179+
background-color: rgba(255, 208, 25, 0.8);
180+
color: #fff;
181+
}
161182
max-width: 75%;
162183
margin: 5rem auto;
163184
@@ -239,7 +260,6 @@ export const Main = styled.main`
239260
}
240261
241262
.join-community {
242-
margin-top: 4rem;
243263
text-align: center;
244264
a {
245265
display: block;
@@ -257,6 +277,15 @@ export const Main = styled.main`
257277
}
258278
}
259279
}
280+
section.playground-btn {
281+
margin-top: 4rem;
282+
div {
283+
display: flex;
284+
justify-content: center;
285+
}
286+
287+
}
288+
260289
.community-discuss-wrapper {
261290
display: flex;
262291
justify-content: center;
@@ -265,13 +294,16 @@ export const Main = styled.main`
265294
margin-top: 2rem;
266295
gap: 4rem;
267296
p {
268-
margin-top: 2rem;
269-
margin-bottom: 3rem;
297+
margin-top: 1rem;
298+
margin-bottom: 1rem;
299+
}
300+
h1 {
301+
margin-bottom: 0;
302+
font-size: 2.5rem;
270303
}
271304
@media screen and (max-width: 768px) {
272-
gap: 2rem;
305+
gap: .2rem;
273306
flex-wrap: wrap;
274-
margin-top: 0;
275307
}
276308
}
277309
.faq {

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

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -156,27 +156,7 @@ export const Header = styled.header`
156156
align-items: center;
157157
justify-content: space-between;
158158
}
159-
.signup-btn,
160-
.login-btn {
161-
font-size: calc(16px + 6 * ((50vw - 320px) / 680));
162-
margin: auto 0.5rem;
163-
}
164-
.signup-btn {
165-
padding: 1rem 1.5rem;
166-
text-align: center;
167-
color: #1e2117;
168-
background: rgba(235, 192, 23, 1);
169-
border-radius: 16px;
170-
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
171-
backdrop-filter: blur(5px);
172-
-webkit-backdrop-filter: blur(5px);
173-
border: 1px solid rgba(235, 192, 23, 0.3);
174-
white-space: nowrap;
175-
}
176-
.signup-btn:hover {
177-
background-color: rgba(255, 208, 25, 0.8);
178-
color: #fff;
179-
}
159+
180160
181161
.login-btn {
182162
margin: 0 0 0 1rem;

‎site/src/components/Navigation/index.js‎

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@ import DefaultAvatar from "./DefaultAvatar";
88
import CloudIcon from "./CloudIcon";
99
import KanvasIcon from "./KanvasIcon";
1010
import LogoutIcon from "./LogoutIcon";
11-
import ArrowIcon from "../../ArrowIcon";
12-
import Modal from "react-modal";
13-
import Faq from "../Faq";
14-
import Button from "../../reusecore/Button";
1511

1612
function Navigation({ theme, toggleTheme, showSignUpButton }) {
1713
const [userData, setUserData] = useState(null);
@@ -68,15 +64,7 @@ setScroll((window.scrollY || window.pageYOffset) > 50)
6864
const handleNavOpen = () => {
6965
setOpenNav(!openNav);
7066
};
71-
const [modalIsOpen, setIsOpen] = useState(false);
7267

73-
const openModal = () => {
74-
setIsOpen(true);
75-
};
76-
77-
const closeModal = () => {
78-
setIsOpen(false);
79-
};
8068
return (
8169
<Header>
8270
<nav className={scroll ? "scrolled" : ""}>
@@ -173,46 +161,6 @@ setScroll((window.scrollY || window.pageYOffset) > 50)
173161
)}
174162
<div className="btn-container">
175163
<Toggle theme={theme} toggleTheme={toggleTheme} />
176-
{showSignUpButton && !userData && (
177-
<div>
178-
<a href="#open-playground" className="signup-btn" role="button" onClick={openModal}>
179-
Try it now
180-
</a>
181-
<Modal
182-
isOpen={modalIsOpen}
183-
onRequestClose={closeModal}
184-
className="Modal"
185-
overlayClassName="Overlay"
186-
ariaHideApp={false}
187-
contentLabel="Content Form"
188-
>
189-
<Button
190-
className="close-modal-btn"
191-
onClick={closeModal}
192-
>
193-
&times;
194-
</Button>
195-
<div class="content">
196-
<Faq category={["Meshery Playground"]}/>
197-
<div className="continue-btn-container"
198-
>
199-
<a href="https://playground.meshery.io">
200-
<Button className="continue-btn" style={{ background: "rgb(235, 192, 23)" }}>
201-
<ArrowIcon />
202-
Continue
203-
</Button>
204-
</a>
205-
</div>
206-
<p style={{
207-
textAlign: "center",
208-
fontSize: "1rem",
209-
color: `${props => props.theme.text}`,
210-
marginTop: "0.5rem"
211-
}}>
212-
On clicking the continue button you will be redirected to Meshery Playground</p></div>
213-
</Modal>
214-
</div>
215-
)}
216164
</div>
217165
</div>
218166
</nav>

‎site/src/reusecore/Button/btn.style.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const ButtonStyle = styled.button`
1717
position: relative;
1818
color: ${props => props.theme.white };
1919
background-color: #00B39F;
20-
z-index: 999;
20+
// z-index: 999;
2121
&:hover,
2222
&:focus {
2323
color: white;

0 commit comments

Comments
 (0)