diff --git a/site/.prettierignore b/site/.prettierignore new file mode 100644 index 0000000..81cf0dd --- /dev/null +++ b/site/.prettierignore @@ -0,0 +1,9 @@ +*.svg +*.ico +*.css +*.otf + +package.json +package-lock.json +public +node_modules \ No newline at end of file diff --git a/site/.prettierrc b/site/.prettierrc new file mode 100644 index 0000000..92c4427 --- /dev/null +++ b/site/.prettierrc @@ -0,0 +1,15 @@ +{ + "arrowParens": "always", + "bracketSameLine": false, + "bracketSpacing": true, + "jsxSingleQuote": false, + "proseWrap": "preserve", + "quoteProps": "as-needed", + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "all", + "printWidth": 100, + "useTabs": false, + "endOfLine": "lf" +} diff --git a/site/package-lock.json b/site/package-lock.json index 79e7425..5d3c5ff 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -28,7 +28,8 @@ }, "devDependencies": { "async": ">=2.6.4", - "nth-check": ">=2.0.1" + "nth-check": ">=2.0.1", + "prettier": "^3.2.5" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -14284,6 +14285,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "license": "MIT", diff --git a/site/package.json b/site/package.json index 0da50bf..8955d20 100644 --- a/site/package.json +++ b/site/package.json @@ -24,13 +24,15 @@ }, "devDependencies": { "async": ">=2.6.4", - "nth-check": ">=2.0.1" + "nth-check": ">=2.0.1", + "prettier": "^3.2.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "format": "npx prettier --write \"**/*.{ts,tsx,js,jsx,md,json}\"" }, "eslintConfig": { "extends": [ diff --git a/site/src/App.js b/site/src/App.js index 331da26..51c1bbc 100644 --- a/site/src/App.js +++ b/site/src/App.js @@ -1,17 +1,16 @@ -import SignupForm from "./components/SignupForm"; +import SignupForm from './components/SignupForm'; import { Main } from './App.style.js'; -import mesheryPlayground from "./assets/images/meshery-playground-meshmap.png"; -import Footer from "./components/Footer"; -import { ThemeProvider } from "styled-components"; +import mesheryPlayground from './assets/images/meshery-playground-meshmap.png'; +import Footer from './components/Footer'; +import { ThemeProvider } from 'styled-components'; 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 { useState } from "react"; +import { useDarkMode } from './components/useDarkMode'; +import ReactPlayer from 'react-player/youtube'; +import Navigation from './components/Navigation'; +import Faq from './components/Faq'; +import { useState } from 'react'; const App = () => { - const [theme, toggleTheme] = useDarkMode(); const themeMode = theme === 'light' ? lightTheme : darkTheme; const [showSignUpButton, setShowSignUpButton] = useState(true); @@ -28,11 +27,12 @@ const App = () => {

Try it now!

-

- The Cloud Native Playground -

+

The Cloud Native Playground

- Explore the Cloud Native Computing Foundation's graduated, incubation, and sandbox projects as well as many other popular open source projects. Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure. + Explore the Cloud Native Computing Foundation's graduated, incubation, and sandbox + projects as well as many other popular open source projects. Use Meshery Playground to + explore a new way of DevOps - visual and collaborative configuration management for + your infrastructure.

{ controls light={mesheryPlayground} width="90%" - style={{ margin: "auto" }} + style={{ margin: 'auto' }} className="embedVideo" />
- +

Frequently Asked Questions

- +

Join the community!

Engage in the Meshery community by joining us on Slack

- Join Our Open Source Community + Join Our Open Source Community
@@ -64,6 +64,6 @@ const App = () => { ); -} +}; export default App; diff --git a/site/src/App.style.js b/site/src/App.style.js index dae7262..89f204c 100644 --- a/site/src/App.style.js +++ b/site/src/App.style.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; export const Header = styled.header` position: sticky; diff --git a/site/src/assets/data/faq/index.js b/site/src/assets/data/faq/index.js index 69c7c22..f1eb705 100644 --- a/site/src/assets/data/faq/index.js +++ b/site/src/assets/data/faq/index.js @@ -15,9 +15,8 @@ const data = { */ { - question: - "Why do I need to sign-up/register to use the Cloud Native Playground?", - category: "Meshery Playground", + question: 'Why do I need to sign-up/register to use the Cloud Native Playground?', + category: 'Meshery Playground', answer: ` - The Playground is connected to live Kubernetes clusters, and while these clusters are refreshed on a daily basis, the clusters do need to be protected from nefarious actors, who might use these clusters for cryptomining, for example. - Sign-up to receive a user account, entitled with perpetually free and full access the Playground environment. @@ -25,26 +24,24 @@ const data = { `, }, { - question: - "Will I lose my Meshery designs in the Cloud Native Playground?", - category: "Meshery Playground", + question: 'Will I lose my Meshery designs in the Cloud Native Playground?', + category: 'Meshery Playground', answer: ` - No, 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 sign into your account. Your designs will be available in the Meshery Playground and any your other Meshery deployments, too. - In other words, all work done in MeshMap Designer is persisted to your user account. `, }, { - question: - "Will I lose my Meshery deployments in the Cloud Native Playground?", - category: "Meshery Playground", + question: 'Will I lose my Meshery deployments in the Cloud Native Playground?', + category: 'Meshery Playground', answer: ` - Yes, the Meshery Playground clusters are reset on a daily basis. However, only deployments (not designs) that you may have created will be lost. - In other words, only MeshMap Visualizer is reset. All of your work in Meshery UI and MeshMap Designer will remain in your user account. `, }, { - question: "Is Meshery open source?", - category: "Meshery Playground", + 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. @@ -60,26 +57,26 @@ const data = { // }, { question: - "Are designs that I create in the Meshery Playground saved or will I lose any work that I do in the playground?", - category: "Meshery Playground", + 'Are designs that I create in the Meshery Playground saved or will I lose any work that I do in the playground?', + category: 'Meshery Playground', answer: ` - 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", + 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", + 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?", - category: "Meshery Playground", + 'When I add my Kubernetes cluster to the Meshery Playground will it be available to all other users? Can other people access my cluster?', + category: 'Meshery Playground', answer: ` No, they can't, unless you explicitly allow them to do so. It's important to understand the following controls and system behavior: - **Ownership**: Every connection to a Kubernetes cluster is created by and owned by the individual that provided the Kubernetes context. That individual may elect to share the connection with others on their team (if you have invited anyone to your team(s)). @@ -89,8 +86,8 @@ No, they can't, unless you explicitly allow them to do so. It's important to und - The other user signs into your Meshery Server instance, which has network access to your Kubernetes cluster. In order for the other user to sign into your Meshery Server, you would have to expose it to the Internet or VPN or… one of the many other ways to grant them access to your Meshery Server. So, in short, you can share access to your Kubernetes cluster with other users, but you have to explicitly grant them access to do so. For more information please visit Remote Provider Permissions - https://docs.meshery.io/extensibility/authorization. `, - link: "https://meshery.io", - linktext: "Get Started with Meshery", + link: 'https://meshery.io', + linktext: 'Get Started with Meshery', }, ], }; diff --git a/site/src/components/Discuss-Callout/discuss.style.js b/site/src/components/Discuss-Callout/discuss.style.js index d62b084..5a88b93 100644 --- a/site/src/components/Discuss-Callout/discuss.style.js +++ b/site/src/components/Discuss-Callout/discuss.style.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const DiscussWrapper = styled.div` background-color:none; diff --git a/site/src/components/Discuss-Callout/index.js b/site/src/components/Discuss-Callout/index.js index 9a0d0d6..7f700e3 100644 --- a/site/src/components/Discuss-Callout/index.js +++ b/site/src/components/Discuss-Callout/index.js @@ -1,7 +1,7 @@ -import React from "react"; -import DiscussWrapper from "./discuss.style"; +import React from 'react'; +import DiscussWrapper from './discuss.style'; -import Discuss from "../../assets/images/meshery-learn-logo-white.png"; +import Discuss from '../../assets/images/meshery-learn-logo-white.png'; const DiscussCallout = () => { return ( @@ -14,7 +14,9 @@ const DiscussCallout = () => {

Join the Conversation

Ask questions, find answers and share knowledge on our Discussion Forum

- +
diff --git a/site/src/components/Faq/faqSection.style.js b/site/src/components/Faq/faqSection.style.js index 213c2ce..c788951 100644 --- a/site/src/components/Faq/faqSection.style.js +++ b/site/src/components/Faq/faqSection.style.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const FaqSectionWrapper = styled.section` margin: 2.5rem auto; @@ -72,8 +72,8 @@ const FaqSectionWrapper = styled.section` font-size: 20px; width: 80%; padding: 1rem; - border: 1px solid #FFFFFF; - background-color: #F0F0F0; + border: 1px solid #ffffff; + background-color: #f0f0f0; border-radius: 1.25rem; } } diff --git a/site/src/components/Faq/index.js b/site/src/components/Faq/index.js index 5b9b071..fab9d29 100644 --- a/site/src/components/Faq/index.js +++ b/site/src/components/Faq/index.js @@ -1,8 +1,8 @@ -import React from "react"; -import data from "../../assets/data/faq"; -import FaqSectionWrapper from "./faqSection.style"; -import Button from "../../reusecore/Button"; -import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io"; +import React from 'react'; +import data from '../../assets/data/faq'; +import FaqSectionWrapper from './faqSection.style'; +import Button from '../../reusecore/Button'; +import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io'; import { Accordion, AccordionItem, @@ -11,30 +11,29 @@ import { IconWrapper, OpenIcon, CloseIcon, -} from "../../reusecore/Accordion"; +} from '../../reusecore/Accordion'; -import Markdown from "react-markdown"; -import remarkGfm from "remark-gfm"; +import Markdown from 'react-markdown'; +import remarkGfm from 'remark-gfm'; const Faq = (props) => { let faq_keys = []; - let faqs_data = []; - if (props.category === undefined) { + let faqs_data = []; + if (props.category === undefined) { + faqs_data = data.faqs; + } else { + props.category.forEach((item) => { + if (item === 'all') { faqs_data = data.faqs; - } else { - props.category.forEach(item => { - if (item === "all") { - faqs_data = data.faqs; - } - else { - data.faqs.forEach(faq => { - if (faq.category.toString() === item) { - faqs_data.push(faq); - } - }) - } - }); - } + } else { + data.faqs.forEach((faq) => { + if (faq.category.toString() === item) { + faqs_data.push(faq); + } + }); + } + }); + } let faqs = faqs_data.reduce((faq, ind) => { faq[ind.category] = [...(faq[ind.category] || []), ind]; @@ -45,17 +44,14 @@ const Faq = (props) => { return ( - - {faq_keys.map((key) => ( - <> -

+ + {faq_keys.map((key, index) => ( + +

{key}

- {faqs[key].map((faq, index) => ( - + {faqs[key].map((faq, faqIndex) => ( +
{faq.question}
@@ -70,7 +66,7 @@ const Faq = (props) => { {faq.answer} @@ -89,11 +85,11 @@ const Faq = (props) => { ))} - + ))} - ) -} + ); +}; export default Faq; diff --git a/site/src/components/Footer/Footer.styles.js b/site/src/components/Footer/Footer.styles.js index a5da23d..c06625a 100644 --- a/site/src/components/Footer/Footer.styles.js +++ b/site/src/components/Footer/Footer.styles.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const FooterWrapper = styled.section` padding: 3.1rem 0 3.1rem 0; diff --git a/site/src/components/Footer/index.js b/site/src/components/Footer/index.js index f72ed9e..5f9f9b5 100644 --- a/site/src/components/Footer/index.js +++ b/site/src/components/Footer/index.js @@ -1,13 +1,13 @@ -import React from "react"; -import SlackIcon from "../../assets/images/social-icons/slack.svg"; -import DockerIcon from "../../assets/images/social-icons/docker.svg"; -import YoutubeIcon from "../../assets/images/social-icons/youtube.svg"; +import React from 'react'; +import SlackIcon from '../../assets/images/social-icons/slack.svg'; +import DockerIcon from '../../assets/images/social-icons/docker.svg'; +import YoutubeIcon from '../../assets/images/social-icons/youtube.svg'; // import TwitterIcon from "../../assets/images/social-icons/twitter.svg"; -import GithubIcon from "../../assets/images/social-icons/github.svg"; -import CalendarIcon from "../../assets/images/social-icons/calendar.png"; -import LinkedinIcon from "../../assets/images/social-icons/linkedin.png"; -import { ReactComponent as TwitterLogo } from "../../assets/images/social-icons/twitter.svg"; -import FooterWrapper from "./Footer.styles"; +import GithubIcon from '../../assets/images/social-icons/github.svg'; +import CalendarIcon from '../../assets/images/social-icons/calendar.png'; +import LinkedinIcon from '../../assets/images/social-icons/linkedin.png'; +import { ReactComponent as TwitterLogo } from '../../assets/images/social-icons/twitter.svg'; +import FooterWrapper from './Footer.styles'; const Footer = () => { return ( @@ -28,10 +28,7 @@ const Footer = () => {
  • - + Docker Icon Docker Hub @@ -43,10 +40,7 @@ const Footer = () => {
  • - + GitHub Icon Github @@ -55,10 +49,7 @@ const Footer = () => {

    - + Getting Started

    @@ -74,18 +65,12 @@ const Footer = () => {
  • - + Integrations
  • - + Run Meshery
    • @@ -161,10 +146,7 @@ const Footer = () => {
  • - + Twitter @@ -179,10 +161,7 @@ const Footer = () => {
  • - + Linkedin Icon Linkedin @@ -191,9 +170,7 @@ const Footer = () => {
    -
    - © {new Date().getFullYear()}- The Meshery Authors -
    +
    © {new Date().getFullYear()}- The Meshery Authors
    Proudly representing every CNCF project
    diff --git a/site/src/components/Navigation/CloudIcon.js b/site/src/components/Navigation/CloudIcon.js index 888cdd1..10c4250 100644 --- a/site/src/components/Navigation/CloudIcon.js +++ b/site/src/components/Navigation/CloudIcon.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; function CloudIcon() { return ( @@ -9,53 +9,29 @@ function CloudIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - - + + - - - + + + - - + + - + - + ); } diff --git a/site/src/components/Navigation/DefaultAvatar.js b/site/src/components/Navigation/DefaultAvatar.js index dec7d79..db9e066 100644 --- a/site/src/components/Navigation/DefaultAvatar.js +++ b/site/src/components/Navigation/DefaultAvatar.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; export default function DefaultAvatar(props) { return ( diff --git a/site/src/components/Navigation/LogoutIcon.js b/site/src/components/Navigation/LogoutIcon.js index fc889d7..acb5acc 100644 --- a/site/src/components/Navigation/LogoutIcon.js +++ b/site/src/components/Navigation/LogoutIcon.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; function LogoutIcon() { return ( @@ -9,10 +9,7 @@ function LogoutIcon() { width="24px" fill="#51636B" > - + ); diff --git a/site/src/components/Navigation/MeshMapIcon.js b/site/src/components/Navigation/MeshMapIcon.js index 44d02d5..0484157 100644 --- a/site/src/components/Navigation/MeshMapIcon.js +++ b/site/src/components/Navigation/MeshMapIcon.js @@ -1,47 +1,24 @@ -import React from "react"; +import React from 'react'; function MeshMapIcon() { return ( - + - + - - - - + + + + - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + { - window.addEventListener("scroll", () => - window.pageYOffset > 50 ? setScroll(true) : setScroll(false) + window.addEventListener('scroll', () => + window.pageYOffset > 50 ? setScroll(true) : setScroll(false), ); }, []); useEffect(() => { - const CLOUD_USER_API = - "https://meshery.layer5.io/api/identity/users/profile"; + const CLOUD_USER_API = 'https://meshery.layer5.io/api/identity/users/profile'; const fetchData = async () => { try { - const token = getCookieValue("token"); + const token = getCookieValue('token'); const response = await axios.get(CLOUD_USER_API, { headers: { Authorization: `Bearer ${token}`, @@ -48,13 +46,17 @@ function Navigation({ theme, toggleTheme, showSignUpButton }) { }); if (response.status !== 200) { - throw new Error("Network response was not ok"); + throw new Error('Network response was not ok'); } const data = response.data; setUserData(data); } catch (error) { - console.error("There was a problem with your fetch operation: ", error?.toString?.(), error ); + console.error( + 'There was a problem with your fetch operation: ', + error?.toString?.(), + error, + ); } }; @@ -66,9 +68,9 @@ function Navigation({ theme, toggleTheme, showSignUpButton }) { return (
    -
    Meshery Logo -
    +
    {userData && ( -
    +
    diff --git a/site/src/components/SignupForm/index.js b/site/src/components/SignupForm/index.js index d7d2598..98ed6a0 100644 --- a/site/src/components/SignupForm/index.js +++ b/site/src/components/SignupForm/index.js @@ -52,14 +52,14 @@ const SignupForm = ({ onSubmit }) => { if (formSubmitted) { onSubmit(); - axios.post("https://hook.us1.make.com/7c1op88rysnmeitovt35fxzcv2spspp0", { - memberFormOne + axios.post('https://hook.us1.make.com/7c1op88rysnmeitovt35fxzcv2spspp0', { + memberFormOne, }); window.scrollTo({ top: 800, left: 0, - behavior: 'smooth' + behavior: 'smooth', }); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -67,9 +67,14 @@ const SignupForm = ({ onSubmit }) => { const PlayFormComponent = () => { return ( -
    -
    -

    Get early access

    +
    +
    +

    + Get early access +

    { // twitter: twitter, // linkedin: linkedin, role: role, - form: 'playground' + form: 'playground', }} onSubmit={(values) => { if (!validateEmail(values.email)) { @@ -90,7 +95,7 @@ const SignupForm = ({ onSubmit }) => { setErrorMessage( `Use of ${values.email} is not allowed. Please use a non-anonymous email address / domain. -The Meshery Playground is connected to live Kubernetes cluster(s) and allows users full-control over those clusters. Requiring users to register a non-anonymous user account keeps the Playground safe and healthy for all to enjoy. Without requiring users to sign-in, the Meshery Playground would allow anonymous access for anyone and everyone to potentially perform nefarious acts. Sign-up to receive a user account, entitled with perpetually free and full access the Playground environment.` +The Meshery Playground is connected to live Kubernetes cluster(s) and allows users full-control over those clusters. Requiring users to register a non-anonymous user account keeps the Playground safe and healthy for all to enjoy. Without requiring users to sign-in, the Meshery Playground would allow anonymous access for anyone and everyone to potentially perform nefarious acts. Sign-up to receive a user account, entitled with perpetually free and full access the Playground environment.`, ); } else if (!values.role) { setFormValidations(true); @@ -115,97 +120,102 @@ The Meshery Playground is connected to live Kubernetes cluster(s) and allows use // setGithubAccount(values.github); // setLinkedinAccount(values.linkedin); setRole(values.role); - }}> -
    -
    -
    -
    -
    -
    -
    -
    - +
    + - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
    @@ -216,29 +226,32 @@ The Meshery Playground is connected to live Kubernetes cluster(s) and allows use color: 'red', fontSize: '14px', whiteSpace: 'pre-wrap', - justifyContent: 'left' - }}> + justifyContent: 'left', + }} + > {errorMessage}

    )} - -
    - -
    -

    Sign-up to receive a user account, entitled with perpetually free and full access to the Playground environment.

    -

    - Meshery maintainers will verify and process your request for access as quickly as possible. Due to the large influx of program participation requests, it may take some time before system access is granted. To help you familiarize with Meshery in the meantime, you will receive confirmation of your position in the queue. +

    +

    + Sign-up to receive a user account, entitled with perpetually free and full access to the + Playground environment. +

    +

    + Meshery maintainers will verify and process your request for access as quickly as + possible. Due to the large influx of program participation requests, it may take some + time before system access is granted. To help you familiarize with Meshery in the + meantime, you will receive confirmation of your position in the queue.

    -
    +
    @@ -264,7 +283,7 @@ The Meshery Playground is connected to live Kubernetes cluster(s) and allows use const ThankYou = () => { return ( <> -
    + diff --git a/site/src/components/SignupForm/signupform.style.js b/site/src/components/SignupForm/signupform.style.js index 992331b..4cda246 100644 --- a/site/src/components/SignupForm/signupform.style.js +++ b/site/src/components/SignupForm/signupform.style.js @@ -1,64 +1,63 @@ -import styled from "styled-components"; +import styled from 'styled-components'; const SignupFormWrapper = styled.section` + * { + box-sizing: border-box; + } + + .form-page { + display: flex; + justify-content: center; + margin-top: 2rem; + @media only screen and (max-width: 1024px) { + display: flex; + flex-wrap: wrap; + } + } + + .required-sign { + color: #b30000; + } + + .signup-text { + margin: 1rem; + width: 50%; + + p { + font-size: 1.35rem; + margin-bottom: 3rem; + margin-top: 2rem; + text-align: justify; + color: #8b8b8f; + text-align: left; + } + + @media screen and (max-width: 1024px) { + div { + display: block; + } + margin: 1rem 1rem 2rem 1rem; + width: 100%; + text-align: start; + } + } + + .desc-callout { + @media screen and (max-width: 1024px) { + position: relative; + width: fit-content; + margin: auto; + } + } -* { - box-sizing: border-box; -} - - .form-page{ - display:flex; - justify-content: center; - margin-top: 2rem; - @media only screen and (max-width: 1024px){ - display:flex; - flex-wrap: wrap; - } - } - - .required-sign { - color: #b30000; - } - - .signup-text { - margin: 1rem; - width: 50%; - - p { - font-size: 1.35rem; - margin-bottom: 3rem; - margin-top: 2rem; - text-align: justify; - color: #8b8b8f; - text-align: left; - } - - @media screen and (max-width: 1024px) { - div { - display: block; - } - margin: 1rem 1rem 2rem 1rem; - width: 100%; - text-align: start; - } - } - - .desc-callout{ - @media screen and (max-width: 1024px){ - position: relative; - width: fit-content; - margin: auto; - } - } - - .accounts{ - margin-top: 1rem; + .accounts { + margin-top: 1rem; p { - font-size: 0.8rem; - line-height: 0.9rem; - color: #aaa; + font-size: 0.8rem; + line-height: 0.9rem; + color: #aaa; } - .accounts_group{ + .accounts_group { margin: 0 1rem 0 1rem; } } @@ -69,181 +68,181 @@ const SignupFormWrapper = styled.section` /* for Chrome */ -webkit-appearance: none; } - + /* For IE10 */ select::-ms-expand { display: none; } - .form-container{ - margin: 1rem; - height: 100%; - width: 50%; - box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.75); - @media only screen and (max-width: 1024px){ - margin: 2rem 0 ; - width: 90%; - - } - - .form-title { - padding: 1rem; - text-align: center; - background-color: #00b39f; - color: white; - } - - .form1 { - font-size: .8725rem; - padding: 2rem; - display: flex; - min-width: 20rem; - flex-flow: column wrap; - align-content: fcenter; - justify-content: center; - background-color: #1E2117; - color: #ccc; - - @media only screen and (max-width: 568px){ - min-width: 8rem - } - - label { - display: block; - } - - .form-name { - font-weight: 600; - margin: 20px 0px 5px 3px; - display: block; - } - - .text-field { - width: 100%; - border: 1px solid black; - border-radius: 10px; - padding: 1rem .5rem; - font-size: .85rem; - margin-top: 0.5rem; - font-family: inherit; - - &:focus { - border: 2px solid #00B39F; - } - } - - .form-field{ - margin-top: 1rem; - font-size: 0.9rem; - } - - .form-field-privacy{ - margin-top: 1rem; - text-align: center; - opacity: 0.5; - - & a { - color:inherit; - :hover { - text-decoration: underline; - } - } - } - - select { - padding: 1rem 0.5rem; - margin: 0.5rem 0; - background: none repeat scroll 0 0 #FFFFFF; - border: 1px solid black; - border-radius: 10px; - height: 50px; - width: 100%; - font-size: .85rem; - font-family: inherit; - } - - .custom-arrow { - background-color: white; - width: 2rem; - height: 2.65rem; - position: absolute; - right: 2.75rem; - bottom: 12.35rem; - pointer-events: none; - - .down-arrow { - position: relative; - top: 0.5rem; - left: 0.5rem; - border: solid black; - border-width: 0 3px 3px 0; - display: inline-block; - padding: 5px; - transform: rotate(45deg); - pointer-events: none; - } - - @media screen and (max-width: 1024px) { - bottom: 11.35rem; - right: 1.75rem; - } - } - - .submit-btn { - font-family: inherit; - margin: 1.5rem auto 0rem auto; - padding: 1rem 1.5rem; - font-size: 1.35rem; - display: block; - border: 0; - border-radius: 0.5rem; - background: #00B39F; - color: #FFF; - transition: 0.2s ease-in-out; - &:hover { - cursor: pointer; - background-color: #00D3A9; - color: #FFF; - box-shadow: 0.5px 0.5px 10px #00B39F; - } - &:active { - box-shadow: none; - } - } - - @media only screen and (max-width: 300px) { - margin-left: 0; - margin-right: 0; - } - } - } - - .thankyou-box { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - padding: 2rem; - margin: 3rem auto; - background-color: #1E2117; - border-radius: 2rem; - box-shadow: rgba(255, 243, 197, 0.75) 0px 5px 15px; - - h2, h3 { - color: #FFF; - } - h2{ - margin-top: 1rem; - margin-bottom: 2rem; - } - p { - margin-top: .25rem; - color: #FFF; - } - img { - width: 10rem; - } - } + .form-container { + margin: 1rem; + height: 100%; + width: 50%; + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.75); + @media only screen and (max-width: 1024px) { + margin: 2rem 0; + width: 90%; + } + + .form-title { + padding: 1rem; + text-align: center; + background-color: #00b39f; + color: white; + } + + .form1 { + font-size: 0.8725rem; + padding: 2rem; + display: flex; + min-width: 20rem; + flex-flow: column wrap; + align-content: fcenter; + justify-content: center; + background-color: #1e2117; + color: #ccc; + + @media only screen and (max-width: 568px) { + min-width: 8rem; + } + + label { + display: block; + } + + .form-name { + font-weight: 600; + margin: 20px 0px 5px 3px; + display: block; + } + + .text-field { + width: 100%; + border: 1px solid black; + border-radius: 10px; + padding: 1rem 0.5rem; + font-size: 0.85rem; + margin-top: 0.5rem; + font-family: inherit; + + &:focus { + border: 2px solid #00b39f; + } + } + + .form-field { + margin-top: 1rem; + font-size: 0.9rem; + } + + .form-field-privacy { + margin-top: 1rem; + text-align: center; + opacity: 0.5; + + & a { + color: inherit; + :hover { + text-decoration: underline; + } + } + } + + select { + padding: 1rem 0.5rem; + margin: 0.5rem 0; + background: none repeat scroll 0 0 #ffffff; + border: 1px solid black; + border-radius: 10px; + height: 50px; + width: 100%; + font-size: 0.85rem; + font-family: inherit; + } + + .custom-arrow { + background-color: white; + width: 2rem; + height: 2.65rem; + position: absolute; + right: 2.75rem; + bottom: 12.35rem; + pointer-events: none; + + .down-arrow { + position: relative; + top: 0.5rem; + left: 0.5rem; + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 5px; + transform: rotate(45deg); + pointer-events: none; + } + + @media screen and (max-width: 1024px) { + bottom: 11.35rem; + right: 1.75rem; + } + } + + .submit-btn { + font-family: inherit; + margin: 1.5rem auto 0rem auto; + padding: 1rem 1.5rem; + font-size: 1.35rem; + display: block; + border: 0; + border-radius: 0.5rem; + background: #00b39f; + color: #fff; + transition: 0.2s ease-in-out; + &:hover { + cursor: pointer; + background-color: #00d3a9; + color: #fff; + box-shadow: 0.5px 0.5px 10px #00b39f; + } + &:active { + box-shadow: none; + } + } + + @media only screen and (max-width: 300px) { + margin-left: 0; + margin-right: 0; + } + } + } + + .thankyou-box { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 2rem; + margin: 3rem auto; + background-color: #1e2117; + border-radius: 2rem; + box-shadow: rgba(255, 243, 197, 0.75) 0px 5px 15px; + + h2, + h3 { + color: #fff; + } + h2 { + margin-top: 1rem; + margin-bottom: 2rem; + } + p { + margin-top: 0.25rem; + color: #fff; + } + img { + width: 10rem; + } + } `; export default SignupFormWrapper; diff --git a/site/src/components/Toggle.js b/site/src/components/Toggle.js index dee82fa..a2d17e9 100644 --- a/site/src/components/Toggle.js +++ b/site/src/components/Toggle.js @@ -1,13 +1,12 @@ - const toggleStyle = { - transition: "all .5s ease 0s", - cursor: "pointer", + transition: 'all .5s ease 0s', + cursor: 'pointer', }; export const Toggle = ({ theme, toggleTheme, height, width }) => { return (
    - {theme === "dark" ? ( + {theme === 'dark' ? ( { - const [ theme, setTheme ] = useState('dark'); + const [theme, setTheme] = useState('dark'); - const setMode = mode => { + const setMode = (mode) => { window.localStorage.setItem('theme', mode); setTheme(mode); - } + }; const toggleTheme = () => { theme === 'dark' ? setMode('light') : setMode('dark'); - } + }; useEffect(() => { const localTheme = window.localStorage.getItem('theme'); localTheme ? setTheme(localTheme) : setMode('dark'); }, []); - - return [ theme, toggleTheme ]; -} \ No newline at end of file + + return [theme, toggleTheme]; +}; diff --git a/site/src/index.js b/site/src/index.js index 70caa41..c7f77be 100644 --- a/site/src/index.js +++ b/site/src/index.js @@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - + + + , ); // If you want to start measuring performance in your app, pass a function diff --git a/site/src/index.style.js b/site/src/index.style.js index ebe5b9c..1e9e4e1 100644 --- a/site/src/index.style.js +++ b/site/src/index.style.js @@ -1,4 +1,4 @@ -import { createGlobalStyle } from "styled-components"; +import { createGlobalStyle } from 'styled-components'; export const GlobalStyle = createGlobalStyle` @@ -98,18 +98,17 @@ export const GlobalStyle = createGlobalStyle` } `; - export const lightTheme = { body: '#FFF', text: '#363537', toggleBorder: '#FFF', background: '#363537', btn: '#FFF', -} +}; export const darkTheme = { body: 'rgb(18, 18, 18)', text: '#FAFAFA', toggleBorder: '#6B8096', background: '#999', btn: '#1E2117', -} +}; diff --git a/site/src/reportWebVitals.js b/site/src/reportWebVitals.js index 5253d3a..532f29b 100644 --- a/site/src/reportWebVitals.js +++ b/site/src/reportWebVitals.js @@ -1,4 +1,4 @@ -const reportWebVitals = onPerfEntry => { +const reportWebVitals = (onPerfEntry) => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); diff --git a/site/src/reusecore/Accordion/accordion.style.js b/site/src/reusecore/Accordion/accordion.style.js index a1fa53e..ae2f9f3 100644 --- a/site/src/reusecore/Accordion/accordion.style.js +++ b/site/src/reusecore/Accordion/accordion.style.js @@ -1,4 +1,4 @@ -import styled, { keyframes } from "styled-components"; +import styled, { keyframes } from 'styled-components'; import { AccordionItemHeading, @@ -6,7 +6,7 @@ import { Accordion, AccordionItem, AccordionItemPanel, -} from "react-accessible-accordion"; +} from 'react-accessible-accordion'; const fadeIn = keyframes` 0% { @@ -41,7 +41,7 @@ export const AccordionTitleWrapper = styled(AccordionItemHeading)` } } &[aria-expanded='true'] { - background: ${props => props.theme.DarkTheme ? "rgb(140, 140, 140)" : "#1e2117"}; + background: ${(props) => (props.theme.DarkTheme ? 'rgb(140, 140, 140)' : '#1e2117')}; } } @@ -54,7 +54,7 @@ export const AccordionTitleWrapper = styled(AccordionItemHeading)` `; export const AccordionItemButtonWrapper = styled(AccordionItemButton)` padding: 0.625rem 1.5rem 0.625rem 1.5rem; - `; +`; export const AccordionBodyWrapper = styled(AccordionItemPanel)` animation: 0.35s ${fadeIn} ease-in; &.accordion__body--hidden { @@ -65,7 +65,7 @@ export const AccordionBodyWrapper = styled(AccordionItemPanel)` export const IconWrapper = styled.div` position: relative; ${OpenIcon}, - ${CloseIcon}{ + ${CloseIcon} { position: absolute; top: 60%; right: 0; diff --git a/site/src/reusecore/Accordion/index.js b/site/src/reusecore/Accordion/index.js index ef00430..27fbec6 100644 --- a/site/src/reusecore/Accordion/index.js +++ b/site/src/reusecore/Accordion/index.js @@ -1,5 +1,5 @@ -import React from "react"; -import "react-accessible-accordion/dist/fancy-example.css"; +import React from 'react'; +import 'react-accessible-accordion/dist/fancy-example.css'; import { AccordionWrapper, AccordionItemWrapper, @@ -9,11 +9,11 @@ import { IconWrapper, OpenIcon, CloseIcon, -} from "./accordion.style"; +} from './accordion.style'; const Accordion = ({ className, children, allowZeroExpanded, allowMultipleExpanded }) => { // Add all classs to an array - const addAllClasses = ["reusecore__accordion"]; + const addAllClasses = ['reusecore__accordion']; // className prop checking if (className) { @@ -24,7 +24,7 @@ const Accordion = ({ className, children, allowZeroExpanded, allowMultipleExpand {children} @@ -33,7 +33,7 @@ const Accordion = ({ className, children, allowZeroExpanded, allowMultipleExpand const AccordionItem = ({ className, children }) => { // Add all classs to an array - const addAllClasses = ["accordion__item"]; + const addAllClasses = ['accordion__item']; // className prop checking if (className) { @@ -41,15 +41,13 @@ const AccordionItem = ({ className, children }) => { } return ( - - {children} - + {children} ); }; const AccordionTitle = ({ className, children }) => { // Add all classs to an array - const addAllClasses = ["accordion__header"]; + const addAllClasses = ['accordion__header']; // className prop checking if (className) { @@ -57,7 +55,7 @@ const AccordionTitle = ({ className, children }) => { } return ( - + {children} ); @@ -65,7 +63,7 @@ const AccordionTitle = ({ className, children }) => { const AccordionBody = ({ className, children }) => { // Add all classs to an array - const addAllClasses = ["accordion__body"]; + const addAllClasses = ['accordion__body']; // className prop checking if (className) { @@ -73,9 +71,7 @@ const AccordionBody = ({ className, children }) => { } return ( - - {children} - + {children} ); }; diff --git a/site/src/reusecore/Button/btn.style.js b/site/src/reusecore/Button/btn.style.js index 27f4b05..e7fb2c6 100644 --- a/site/src/reusecore/Button/btn.style.js +++ b/site/src/reusecore/Button/btn.style.js @@ -1,71 +1,80 @@ -import styled, { css } from "styled-components"; -const ButtonStyle = styled.button` - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - font-family: inherit; - font-size: 16px; - text-decoration: none; - text-transform: capitalize; - border: 0; - min-width: 170px; - padding: 14px; - border-radius: 5px; - -webkit-transition: 450ms all; - transition: 450ms all; - position: relative; - color: ${props => props.theme.white }; - background-color: #00B39F; - z-index: 999; - &:hover, - &:focus { - color: white; - background: ${props => props.theme.activeColor}; - box-shadow: 0 2px 10px ${props => props.theme.DarkTheme ? "rgb(255 255 255 / 40%)" : "rgb(0 0 0 / 40%)"}; - } - &:active{ - box-shadow: 0 2px 10px ${props => props.theme.DarkTheme ? "rgb(0 0 0 / 40%)" : "rgb(255 255 255 / 40%)"}; - transform: scale(0.98); - } - .icon-left{ - margin-right: 8px; - } - .icon-right{ - margin-left: 8px; - } +import styled, { css } from 'styled-components'; +const ButtonStyle = styled.button` + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + font-family: inherit; + font-size: 16px; + text-decoration: none; + text-transform: capitalize; + border: 0; + min-width: 170px; + padding: 14px; + border-radius: 5px; + -webkit-transition: 450ms all; + transition: 450ms all; + position: relative; + color: ${(props) => props.theme.white}; + background-color: #00b39f; + z-index: 999; + &:hover, + &:focus { + color: white; + background: ${(props) => props.theme.activeColor}; + box-shadow: 0 2px 10px + ${(props) => (props.theme.DarkTheme ? 'rgb(255 255 255 / 40%)' : 'rgb(0 0 0 / 40%)')}; + } + &:active { + box-shadow: 0 2px 10px + ${(props) => (props.theme.DarkTheme ? 'rgb(0 0 0 / 40%)' : 'rgb(255 255 255 / 40%)')}; + transform: scale(0.98); + } + .icon-left { + margin-right: 8px; + } + .icon-right { + margin-left: 8px; + } - ${props => props.primary && css` - color: ${props => props.theme.black}; - background: ${props => props.theme.highlightColor}; + ${(props) => + props.primary && + css` + color: ${(props) => props.theme.black}; + background: ${(props) => props.theme.highlightColor}; - &:hover{ - color: ${props.theme.black}; - background: ${props.theme.highlightColor}; - box-shadow: 0 2px 10px ${props.theme.DarkTheme ? "rgb(255 255 255 / 40%)" : "rgb(0 0 0 / 40%)"}; - } - &:active{ - background: ${props => props.theme.saffronColor}; - box-shadow: 0 2px 10px ${props.theme.DarkTheme ? "rgb(0 0 0 / 40%)" : "rgb(255 255 255 / 40%)"}; - transform: scale(0.98); - } - + &:hover { + color: ${props.theme.black}; + background: ${props.theme.highlightColor}; + box-shadow: 0 2px 10px + ${props.theme.DarkTheme ? 'rgb(255 255 255 / 40%)' : 'rgb(0 0 0 / 40%)'}; + } + &:active { + background: ${(props) => props.theme.saffronColor}; + box-shadow: 0 2px 10px + ${props.theme.DarkTheme ? 'rgb(0 0 0 / 40%)' : 'rgb(255 255 255 / 40%)'}; + transform: scale(0.98); + } `} - ${props => props.secondary && css` - color: white; - background: ${props.theme.secondaryColor}; - &:hover{ - background: ${props.theme.caribbeanGreenColor}; - box-shadow: 0 2px 10px ${props.theme.DarkTheme ? "rgb(255 255 255 / 40%)" : "rgb(0 0 0 / 40%)"}; - } - &:active{ - color: #326d62; - background: ${props.theme.secondaryColor}; - box-shadow: 0 2px 10px ${props.theme.DarkTheme ? "rgb(0 0 0 / 40%)" : "rgb(255 255 255 / 40%)"}; - transform: scale(0.98); - } + ${(props) => + props.secondary && + css` + color: white; + background: ${props.theme.secondaryColor}; + &:hover { + background: ${props.theme.caribbeanGreenColor}; + box-shadow: 0 2px 10px + ${props.theme.DarkTheme ? 'rgb(255 255 255 / 40%)' : 'rgb(0 0 0 / 40%)'}; + } + &:active { + color: #326d62; + background: ${props.theme.secondaryColor}; + box-shadow: 0 2px 10px + ${props.theme.DarkTheme ? 'rgb(0 0 0 / 40%)' : 'rgb(255 255 255 / 40%)'}; + transform: scale(0.98); + } `} `; -ButtonStyle.displayName = "ButtonStyle"; +ButtonStyle.displayName = 'ButtonStyle'; -export default ButtonStyle; \ No newline at end of file +export default ButtonStyle; diff --git a/site/src/reusecore/Button/index.js b/site/src/reusecore/Button/index.js index 30f0d84..be1e3c7 100644 --- a/site/src/reusecore/Button/index.js +++ b/site/src/reusecore/Button/index.js @@ -1,48 +1,43 @@ -import React from "react"; -import PropTypes from "prop-types"; -import BtnStyle from "./btn.style"; +import React from 'react'; +import PropTypes from 'prop-types'; +import BtnStyle from './btn.style'; -const Button = ({ - className, - children, - ...props - -}) => { - const addClasses = ["appion__btn"]; +const Button = ({ className, children, ...props }) => { + const addClasses = ['appion__btn']; if (className) { addClasses.push(className); } - const initalButton = - + const initalButton = ( + {children} {props.icon ? {props.title} : <> } {props.title} - ; - + + ); return ( - { - props.url ? - ({initalButton}) - : initalButton - } + {props.url ? ( + + {initalButton} + + ) : ( + initalButton + )} ); }; Button.propTypes = { - as: PropTypes.oneOf(["button", "a",]), //-- + as: PropTypes.oneOf(['button', 'a']), //-- upperCase: PropTypes.bool, title: PropTypes.string, url: PropTypes.string, className: PropTypes.string, external: PropTypes.bool, icon: PropTypes.string, - onClick: PropTypes.func + onClick: PropTypes.func, }; -export default Button; \ No newline at end of file +export default Button;