From e1d3418c084ae1839a1b4a2688a5e34896d98df5 Mon Sep 17 00:00:00 2001 From: Nirmal Kumar Date: Tue, 28 Jun 2022 10:43:54 +0530 Subject: [PATCH 01/23] new footer markups and styling --- src/App.css | 259 ++++++++++++++++++++++++++++- src/common/footer/Footer.jsx | 116 ++++++++++++- src/common/home/home.css | 19 +++ src/common/modal/index.jsx | 4 +- src/common/playideas/playIdeas.css | 94 ----------- src/common/search/search.css | 38 ----- src/images/img-logo-light.svg | 1 + 7 files changed, 383 insertions(+), 148 deletions(-) create mode 100644 src/images/img-logo-light.svg diff --git a/src/App.css b/src/App.css index 6455a1588..8ec49f7c0 100644 --- a/src/App.css +++ b/src/App.css @@ -127,6 +127,9 @@ code { monospace; } +small { + font-size: var(--fs-sm); +} @media screen and (max-width: 1200px) { :root { @@ -188,26 +191,266 @@ code { height: 100%; } +/* Anchors or Links */ +.text-link-default { + font-weight: var(--fw-semibold); + color: var(--color-neutral-80); + text-decoration: underline; +} + +.text-link-default:hover, +.text-link-default:focus { + color: var(--color-brand-primary-alt); + text-decoration: underline; +} + + + /* App Footer */ .app-footer { - padding: 0 2rem; - text-align: center; + padding: 0; font-size: var(--fs-xs); font-weight: var(--fw-light); color: var(--color-neutral-50); border-top: solid 1px var(--color-neutral-30); } -.app-footer p { - margin: 0.4rem 0; +.app-footer.app-footer--home { + padding: 3rem 2rem 0 2rem; } -.app-footer a { - color: var(--color-neutral-80); +.app-footer-body { + width: 80%; + max-width: var(--screen-lg-max); + margin: 0 auto 1rem auto; + display: none; + grid-template-columns: 1fr 1.2fr .8fr; + gap: 4rem; + /* grid-template-columns: repeat(3, minmax(0, 1fr)); */ +} + +.app-footer--home .app-footer-body { + display: grid; +} + +.app-footer-body .section-title { + margin: 1rem 0; + font-family: var(--ff-accent); + font-size: var(--fs-lg); + font-weight: var(--fw-bold); + color: var(--color-neutral-90); +} + +.app-footer-body p { + font-size: var(--fs-rg); + color: var(--color-neutral-70); +} + +.app-footer-body .p-lg { + margin: 0; + font-size: var(--fs-md); + margin-bottom: 2rem; +} + +.app-footer-body .social-links { + margin: 0.6rem 0 2rem 0; + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.app-footer-body .social-links .social-link { + display: flex; + justify-content: center; + align-items: center; + width: 48px; + height: 48px; + border-radius: 48px; + background-color: rgba(var(--color-neutral-100-rgb), 0.08); + transition: all 0.12s ease-in-out; +} + +.app-footer-body .social-links .social-link .icon { + width: 24px; + height: 24px; + fill: rgba(var(--color-neutral-100-rgb), 0.6); + transition: all 0.12s ease-in-out; +} + +.app-footer-body .social-links .social-link:hover, +.app-footer-body .social-links .social-link:focus { + background-color: var(--color-brand-primary); +} + +.app-footer-body .social-links .social-link:hover .icon, +.app-footer-body .social-links .social-link:focus .icon { + fill: var(--color-neutral-100); +} + +.app-footer.app-footer--home .separater { + display: block; + max-width: var(--screen-lg-max); + margin: 0 auto; +} + +.app-footer .separater { + display: none; +} + +.app-footer .copy { + margin: .4rem 0; + text-align: center; +} + +.app-footer.app-footer--home .copy { + margin: 1rem 0; +} + +.app-footer .copy a { + color: var(--color-neutral-90); + text-decoration: underline; } -.app-footer a:hover, -.app-footer a:focus { +.app-footer .copy a:hover, +.app-footer .copy a:focus { color: var(--color-brand-primary-alt); } + + + +/* Buttons */ +.btn-default { + border: solid 1px var(--color-neutral-60); + border-radius: 2rem; + display: inline-flex; + flex-direction: row; + align-items: center; + grid-gap: 0.4rem; + padding: .8rem 1.4rem; + font-size: var(--fs-rg); + font-weight: var(--fw-bold); + text-decoration: none; + width: unset; + height: 48px; + background: transparent; + transition: all 0.12s ease-in-out; + color: var(--color-neutral-10); + cursor: pointer; +} + +.btn-default .icon { + width: var(--navbar-icon-size-rg); + height: var(--navbar-icon-size-rg); + fill: var(--color-brand-primary-dark); + color: var(--color-brand-primary-dark); +} + +.btn-default:hover, +.btn-default:focus { + border-color: var(--color-neutral-20); + background-color: var(--color-neutral-20); + color: var(--color-neutral-90); +} + +.btn-default:hover .icon, +.btn-default:focus .icon { + fill: var(--color-brand-primary-dark); + color: var(--color-brand-primary-dark); +} + +.btn-default .btn-label { + display: flex; + align-items: center; + grid-gap: 1.2rem; +} + + +.btn-default-light { + border: 0; + display: inline-flex; + align-items: center; + grid-gap: 0.4rem; + border-radius: 2rem; + padding: 0.8rem 1.4rem; + font-size: var(--fs-rg); + font-weight: var(--fw-bold); + background-color: rgba(var(--color-neutral-90-rgb),0.1); + color: var(--color-neutral-80); + transition: all 0.16s ease-in-out; +} + +.btn-default-light .icon { + width: var(--navbar-icon-size-rg); + height: var(--navbar-icon-size-rg); +} + +.btn-default-light:hover, +.btn-default-light:focus { + background-color: var(--color-neutral-20); + color: var(--color-neutral-90); +} + +.btn-default-light:hover .icon, +.btn-default-light:focus .icon { + fill: var(--color-brand-primary-dark); + color: var(--color-brand-primary-dark); +} + + +.btn-primary { + border: solid 2px var(--color-brand-primary); + background-color: var(--color-brand-primary); + color: var(--color-neutral-80); + + border-radius: 2rem; + display: inline-flex; + flex-direction: row; + align-items: center; + grid-gap: 0.4rem; + padding: .8rem 1.4rem; + font-size: var(--fs-rg); + font-weight: var(--fw-bold); + text-decoration: none; + width: unset; + height: 48px; + transition: all 0.12s ease-in-out; + cursor: pointer; +} + +.btn-primary .icon { + width: var(--navbar-icon-size-rg); + height: var(--navbar-icon-size-rg); + fill: var(--color-neutral-90); + color: var(--color-neutral-90); +} + +.btn-primary:hover, +.btn-primary:focus { + border-color: var(--color-neutral-20); + background-color: var(--color-neutral-20); + color: var(--color-neutral-90); +} + +.btn-primary:hover .icon, +.btn-primary:focus .icon { + fill: var(--color-brand-primary-dark); + color: var(--color-brand-primary-dark); +} + +.btn-primary .btn-label { + display: flex; + align-items: center; + grid-gap: 1.2rem; +} + +.btn-size--sm { + padding: .6rem 1.2rem; + height: 42px; + font-size: var(--fs-sm); +} + +.btn-size--sm .icon { + width: var(--navbar-icon-size-sm); + height: var(--navbar-icon-size-sm); +} diff --git a/src/common/footer/Footer.jsx b/src/common/footer/Footer.jsx index 40bd2b256..3542c9550 100644 --- a/src/common/footer/Footer.jsx +++ b/src/common/footer/Footer.jsx @@ -1,14 +1,118 @@ - +import { useEffect, useState } from "react"; +import { Link, useLocation } from "react-router-dom"; +import { IoAddSharp, IoLogoRss } from 'react-icons/io5'; +import { MdManageSearch } from 'react-icons/md'; +import { FaDiscord } from 'react-icons/fa'; +import { BsTwitter, BsGithub } from 'react-icons/bs'; +import LogoLight from "images/img-logo-light.svg"; const Footer = () => { + const location = useLocation(); + const pathName = location.pathname; + + const [showHideBits, setShowHideBits] = useState({ + showSearch: false, + showBrowse: false, + setHeaderStyle: true, + }); + + useEffect(() => { + if (pathName === "/") { + setShowHideBits((prev)=>({ + ...prev, + showSearch: false, + showBrowse: true, + setHeaderStyle: false, + })); + } else if (pathName === "/ideas") { + setShowHideBits((prev) => ({ + ...prev, + showSearch: false, + showBrowse: true, + setHeaderStyle: true, + })); + } else if (pathName === "/plays") { + setShowHideBits((prev) => ({ + ...prev, + showSearch: true, + showBrowse: false, + setHeaderStyle: true, + })); + } + }, [pathName]); return ( - ); diff --git a/src/common/home/home.css b/src/common/home/home.css index 85936e24b..0c5ab7e9d 100644 --- a/src/common/home/home.css +++ b/src/common/home/home.css @@ -748,6 +748,25 @@ right: -0.4rem; } +.home-anchor.home-anchor-sm { + font-size: calc(var(--fs-rg)*1.2); +} + +.home-anchor.home-anchor-sm:before { + bottom: -1px; + height: 2px; +} + +.home-anchor.home-anchor-sm:hover:before, +.home-anchor.home-anchor-sm:focus:before { + bottom: -2px; + height: 3px; +} + +.home-anchor.home-anchor-sm:after { + width: 16px; + background-size: contain; +} /* Home abstract graphics */ .home-bg-graphics { diff --git a/src/common/modal/index.jsx b/src/common/modal/index.jsx index 8dd0f927d..86ed39dcf 100644 --- a/src/common/modal/index.jsx +++ b/src/common/modal/index.jsx @@ -28,8 +28,8 @@ const Modal =({ title, show, onClose, onSubmit, children, cname })=> { { children }
- - { onSubmit && } + + { onSubmit && }
diff --git a/src/common/playideas/playIdeas.css b/src/common/playideas/playIdeas.css index b93bb8038..00de3e99a 100644 --- a/src/common/playideas/playIdeas.css +++ b/src/common/playideas/playIdeas.css @@ -215,97 +215,3 @@ padding: 0 2rem; } } - - -/* Buttons */ -.btn-default { - border: solid 1px var(--color-neutral-60); - border-radius: 2rem; - display: inline-flex; - flex-direction: row; - align-items: center; - grid-gap: 0.4rem; - padding: .8rem 1.4rem; - font-size: var(--fs-rg); - font-weight: var(--fw-bold); - text-decoration: none; - width: unset; - height: unset; - background: transparent; - transition: all 0.12s ease-in-out; - color: var(--color-neutral-10); - cursor: pointer; -} - -.btn-default .icon { - width: var(--navbar-icon-size-rg); - height: var(--navbar-icon-size-rg); - fill: var(--color-brand-primary-dark); - color: var(--color-brand-primary-dark); -} - -.btn-default:hover, -.btn-default:focus { - border-color: var(--color-neutral-20); - background-color: var(--color-neutral-20); - color: var(--color-neutral-90); -} - -.btn-default:hover .icon, -.btn-default:focus .icon { - fill: var(--color-brand-primary-dark); - color: var(--color-brand-primary-dark); -} - -.btn-default .btn-label { - display: flex; - align-items: center; - grid-gap: 1.2rem; -} - - -.btn-primary { - border: solid 2px var(--color-brand-primary); - background-color: var(--color-brand-primary); - color: var(--color-neutral-80); - - border-radius: 2rem; - display: inline-flex; - flex-direction: row; - align-items: center; - grid-gap: 0.4rem; - padding: .8rem 1.4rem; - font-size: var(--fs-rg); - font-weight: var(--fw-bold); - text-decoration: none; - width: unset; - height: unset; - transition: all 0.12s ease-in-out; - cursor: pointer; -} - -.btn-primary .icon { - width: var(--navbar-icon-size-rg); - height: var(--navbar-icon-size-rg); - fill: var(--color-neutral-90); - color: var(--color-neutral-90); -} - -.btn-primary:hover, -.btn-primary:focus { - border-color: var(--color-neutral-20); - background-color: var(--color-neutral-20); - color: var(--color-neutral-90); -} - -.btn-primary:hover .icon, -.btn-primary:focus .icon { - fill: var(--color-brand-primary-dark); - color: var(--color-brand-primary-dark); -} - -.btn-primary .btn-label { - display: flex; - align-items: center; - grid-gap: 1.2rem; -} \ No newline at end of file diff --git a/src/common/search/search.css b/src/common/search/search.css index 77ac8f2a9..fda365c87 100644 --- a/src/common/search/search.css +++ b/src/common/search/search.css @@ -205,42 +205,4 @@ font-size: var(--fs-rg); } -.btn-default-light { - border: 0; - display: inline-flex; - align-items: center; - grid-gap: 0.4rem; - border-radius: 2rem; - padding: 0.8rem 1.4rem; - font-size: var(--fs-rg); - font-weight: var(--fw-bold); - background-color: rgba(var(--color-neutral-90-rgb),0.1); - color: var(--color-neutral-80); - transition: all 0.16s ease-in-out; -} - -.btn-default-light:hover, -.btn-default-light:focus { - background-color: rgba(var(--color-neutral-90-rgb),0.2); - color: var(--color-neutral-90); -} -.btn-primary { - border: 0; - display: inline-flex; - align-items: center; - grid-gap: 0.4rem; - border-radius: 2rem; - padding: 0.8rem 1.4rem; - font-size: var(--fs-rg); - font-weight: var(--fw-bold); - background-color: var(--color-brand-primary); - color: var(--color-neutral-80); - transition: all 0.16s ease-in-out; -} - -.btn-primary:hover, -.btn-primary:focus { - color: var(--color-neutral-10); - background-color: var(--color-neutral-90); -} \ No newline at end of file diff --git a/src/images/img-logo-light.svg b/src/images/img-logo-light.svg new file mode 100644 index 000000000..2ecec4336 --- /dev/null +++ b/src/images/img-logo-light.svg @@ -0,0 +1 @@ +React Play \ No newline at end of file From fb9543afe8a7c38f428c73af633fa5347b8d06b6 Mon Sep 17 00:00:00 2001 From: Nirmal Kumar Date: Tue, 28 Jun 2022 11:03:06 +0530 Subject: [PATCH 02/23] footer responsive fixes --- src/App.css | 30 +++++++++++++++++++++++++++++- src/common/footer/Footer.jsx | 8 ++++---- 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/App.css b/src/App.css index 8ec49f7c0..80bf82787 100644 --- a/src/App.css +++ b/src/App.css @@ -226,7 +226,6 @@ small { display: none; grid-template-columns: 1fr 1.2fr .8fr; gap: 4rem; - /* grid-template-columns: repeat(3, minmax(0, 1fr)); */ } .app-footer--home .app-footer-body { @@ -316,6 +315,35 @@ small { color: var(--color-brand-primary-alt); } +@media screen and (max-width: 1024px) { + .app-footer--home .app-footer-body { + display: flex; + flex-wrap: wrap; + } + .app-footer--home .app-footer-body .body-primary { + width: 100%; + } + + .app-footer--home .app-footer-body .body-secondary, + .app-footer--home .app-footer-body .body-tertiary { + width: 40%; + } +} + +@media screen and (max-width: 480px) { + .app-footer--home .app-footer-body { + display: flex; + flex-wrap: wrap; + gap: 2.6rem; + width: 100%; + } + + .app-footer--home .app-footer-body .body-primary, + .app-footer--home .app-footer-body .body-secondary, + .app-footer--home .app-footer-body .body-tertiary { + width: 100%; + } +} diff --git a/src/common/footer/Footer.jsx b/src/common/footer/Footer.jsx index 3542c9550..a9bb771c0 100644 --- a/src/common/footer/Footer.jsx +++ b/src/common/footer/Footer.jsx @@ -48,7 +48,7 @@ const Footer = () => { }`} >
-
+

ReactPlay Logo of ReactPlay @@ -64,10 +64,10 @@ const Footer = () => {

Email us

-
+

About

A ReactPlay is a ReactJS project, which helps you Learn, create and sharing with the developer community.

- -
+

Not sure how to get started?
We have a lot of ideas, get started.

From 184d54e8a2809ad343ccc6243b9902db49830ac3 Mon Sep 17 00:00:00 2001 From: Nirmal Kumar Date: Tue, 5 Jul 2022 09:36:11 +0530 Subject: [PATCH 04/23] fixing logo --- src/images/img-logo-light.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/images/img-logo-light.svg b/src/images/img-logo-light.svg index 2ecec4336..74817f3e9 100644 --- a/src/images/img-logo-light.svg +++ b/src/images/img-logo-light.svg @@ -1 +1 @@ -React Play \ No newline at end of file + \ No newline at end of file From 46cb5a68c5875c9b9edee97484d6457aeff0c202 Mon Sep 17 00:00:00 2001 From: Nirmal Kumar Date: Tue, 5 Jul 2022 10:13:52 +0530 Subject: [PATCH 05/23] styling header sponsor modal contents --- src/App.css | 46 +++++++++++++++++++++++++++++++++ src/common/header/HeaderNav.jsx | 23 ++++++++++++++++- src/common/header/header.css | 23 +++++++++++++++++ 3 files changed, 91 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 80bf82787..8865af628 100644 --- a/src/App.css +++ b/src/App.css @@ -472,6 +472,52 @@ small { grid-gap: 1.2rem; } +.btn-secondary-light { + border: solid 2px var(--color-neutral-80); + background-color: var(--color-neutral-80); + color: var(--color-neutral-20); + + border-radius: 2rem; + display: inline-flex; + flex-direction: row; + align-items: center; + grid-gap: 0.4rem; + padding: .8rem 1.4rem; + font-size: var(--fs-rg); + font-weight: var(--fw-bold); + text-decoration: none; + width: unset; + height: 48px; + transition: all 0.12s ease-in-out; + cursor: pointer; +} + +.btn-secondary-light .icon { + width: var(--navbar-icon-size-rg); + height: var(--navbar-icon-size-rg); + fill: var(--color-brand-primary); + color: var(--color-brand-primary); +} + +.btn-secondary-light:hover, +.btn-secondary-light:focus { + border-color: var(--color-neutral-20); + background-color: var(--color-neutral-20); + color: var(--color-neutral-90); +} + +.btn-secondary-light:hover .icon, +.btn-secondary-light:focus .icon { + fill: var(--color-brand-primary-dark); + color: var(--color-brand-primary-dark); +} + +.btn-secondary-light .btn-label { + display: flex; + align-items: center; + grid-gap: 1.2rem; +} + .btn-size--sm { padding: .6rem 1.2rem; height: 42px; diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx index f8d672af0..ac2464cbb 100644 --- a/src/common/header/HeaderNav.jsx +++ b/src/common/header/HeaderNav.jsx @@ -3,7 +3,8 @@ import { useState } from 'react'; import { Link } from "react-router-dom"; import { BsTwitter, BsGithub } from 'react-icons/bs'; import { FaLightbulb } from 'react-icons/fa'; -import { IoAddSharp, IoShareSocial } from 'react-icons/io5'; +import { BiMoney } from 'react-icons/bi'; +import { IoAddSharp, IoShareSocial, IoHeartSharp } from 'react-icons/io5'; import { MdManageSearch, MdClose } from 'react-icons/md'; import SocialShare from 'common/components/SocialShare'; import { Modal } from "common"; @@ -87,6 +88,26 @@ const HeaderNav = ({ showBrowse }) => { Share +
  • + +
    +

    Show love

    + + + Share about ReactPlay + +

    Share your thoughts about ReactPlay in any of your favorite social media.

    + + + Sponsor ReactPlay + +

    Some text about asking for the money.

    +
    +
    • diff --git a/src/common/header/header.css b/src/common/header/header.css index 0f56a346b..5d24987a2 100644 --- a/src/common/header/header.css +++ b/src/common/header/header.css @@ -426,4 +426,27 @@ } .social-share-buttons .social-share-button:hover .icon { fill: var(--color-brand-primary); +} + +/* App Header Modal */ +.app-header-modal { + position: absolute; + background-color: var(--color-neutral-10); + padding: 1.6rem 2rem; + width: 360px; + right: 1.6rem; + margin-top: 0.6rem; +} + +.app-header-modal { + font-size: var(--fs-rg); + color: var(--color-neutral-70); +} + +.app-header-modal .modal-title { + margin: 0 0 1rem 0; + font-family: var(--ff-accent); + font-size: var(--fs-md); + font-weight: var(--fw-bold); + color: var(--color-neutral-90); } \ No newline at end of file From eaa3fb6f3cfc6076bc5bcbe83ee624ff184714e4 Mon Sep 17 00:00:00 2001 From: Angryman18 Date: Sat, 9 Jul 2022 17:57:47 +0530 Subject: [PATCH 06/23] required changes --- package.json | 3 + src/common/footer/Footer.jsx | 200 +++++++++++++++++------- src/common/header/HeaderNav.jsx | 232 +++++++++++++++++++--------- src/common/index.js | 3 +- src/common/routing/RouteDefs.jsx | 2 + src/common/search/search-context.js | 4 +- src/common/techstack/index.js | 89 +++++++++++ src/common/techstack/techstack.jsx | 39 +++++ src/images/nhost.svg | 1 + src/index.js | 10 +- 10 files changed, 449 insertions(+), 134 deletions(-) create mode 100644 src/common/techstack/index.js create mode 100644 src/common/techstack/techstack.jsx create mode 100644 src/images/nhost.svg diff --git a/package.json b/package.json index 3c222d764..56a318583 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,10 @@ "version": "1.0.0", "private": true, "dependencies": { + "@emotion/react": "^11.9.3", + "@emotion/styled": "^11.9.3", "@giscus/react": "^2.0.3", + "@mui/material": "^5.8.7", "@nhost/react": "^0.9.0", "@types/lodash": "^4.14.182", "@types/react": "^18.0.6", diff --git a/src/common/footer/Footer.jsx b/src/common/footer/Footer.jsx index eb0b0e39f..02b8ce651 100644 --- a/src/common/footer/Footer.jsx +++ b/src/common/footer/Footer.jsx @@ -1,15 +1,18 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState, useContext } from "react"; import { Link, useLocation } from "react-router-dom"; -import { IoAddSharp, IoLogoRss } from 'react-icons/io5'; -import { MdManageSearch } from 'react-icons/md'; -import { FaDiscord } from 'react-icons/fa'; -import { BsTwitter, BsGithub } from 'react-icons/bs'; +import { IoAddSharp, IoLogoRss } from "react-icons/io5"; +import { MdManageSearch } from "react-icons/md"; +import { FaDiscord } from "react-icons/fa"; +import { BsTwitter, BsGithub } from "react-icons/bs"; import LogoLight from "images/img-logo-light.svg"; +import { SearchContext } from "common/search/search-context"; const Footer = () => { const location = useLocation(); const pathName = location.pathname; + const { showShareModal, setShowShareModal } = useContext(SearchContext); + const [showHideBits, setShowHideBits] = useState({ showSearch: false, showBrowse: false, @@ -18,7 +21,7 @@ const Footer = () => { useEffect(() => { if (pathName === "/") { - setShowHideBits((prev)=>({ + setShowHideBits((prev) => ({ ...prev, showSearch: false, showBrowse: true, @@ -42,78 +45,155 @@ const Footer = () => { }, [pathName]); return ( - ); }; diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx index ac2464cbb..9a1301c18 100644 --- a/src/common/header/HeaderNav.jsx +++ b/src/common/header/HeaderNav.jsx @@ -1,113 +1,203 @@ - -import { useState } from 'react'; +import { useState } from "react"; import { Link } from "react-router-dom"; -import { BsTwitter, BsGithub } from 'react-icons/bs'; -import { FaLightbulb } from 'react-icons/fa'; -import { BiMoney } from 'react-icons/bi'; -import { IoAddSharp, IoShareSocial, IoHeartSharp } from 'react-icons/io5'; -import { MdManageSearch, MdClose } from 'react-icons/md'; -import SocialShare from 'common/components/SocialShare'; -import { Modal } from "common"; +import { BsTwitter, BsGithub } from "react-icons/bs"; +import { FaLightbulb } from "react-icons/fa"; +import { BiMoney } from "react-icons/bi"; +import { IoAddSharp, IoShareSocial, IoHeartSharp } from "react-icons/io5"; +import { MdManageSearch, MdClose } from "react-icons/md"; +import SocialShare from "common/components/SocialShare"; +import { GoX } from "react-icons/go"; +import { Modal, Box, Typography, Menu, Link as MuiLink } from "@mui/material"; +import { useContext } from "react"; +import { SearchContext } from "common/search/search-context"; + +const style = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 400, + bgcolor: "background.paper", + borderRadius: 2, + boxShadow: 24, + px: 4, + py: 2, +}; const HeaderNav = ({ showBrowse }) => { - const [showSocial, setShowSocial] = useState(false); + const { showShareModal, setShowShareModal } = useContext(SearchContext); + + // const [showSocial, setShowSocial] = useState(false); const [showToggleMenu, setShowToggleMenu] = useState(false); + + const [anchorEl, setAnchorEl] = useState(null); + + const open = Boolean(anchorEl); + + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + + const modalClose = () => setShowShareModal(!showShareModal); + return ( diff --git a/src/common/index.js b/src/common/index.js index 9f927f1e4..7dec23ac7 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -6,5 +6,6 @@ import Modal from "./modal"; import DefMeta from "meta/DefMeta"; import PlayMeta from "./playlists/PlayMeta"; import PlayIdeas from "./playideas/PlayIdeas"; +import TechStack from "./techstack/techstack"; -export { Header, Footer, Home, PageNotFound, Modal, PlayMeta, DefMeta, PlayIdeas }; +export { Header, Footer, Home, PageNotFound, Modal, PlayMeta, DefMeta, PlayIdeas, TechStack }; diff --git a/src/common/routing/RouteDefs.jsx b/src/common/routing/RouteDefs.jsx index c52efd877..0230af862 100644 --- a/src/common/routing/RouteDefs.jsx +++ b/src/common/routing/RouteDefs.jsx @@ -7,6 +7,7 @@ import { DefMeta, PageNotFound, PlayIdeas, + TechStack } from "common"; import PlayList from "common/playlists/PlayList"; import { BrowserRouter, Route, Routes } from "react-router-dom"; @@ -27,6 +28,7 @@ const RouteDefs = () => { } /> + } /> }> {}, - setFilterQuery: () => {} + setFilterQuery: () => {}, + setShowShareModal: () => {} }); \ No newline at end of file diff --git a/src/common/techstack/index.js b/src/common/techstack/index.js new file mode 100644 index 000000000..257423904 --- /dev/null +++ b/src/common/techstack/index.js @@ -0,0 +1,89 @@ +import { + SiReact, + SiRedux, + SiGit, + SiMaterialui, + SiTailwindcss, + SiMysql, + SiJavascript, + SiFirebase, + SiTypescript, + SiGraphql, + SiDocker, +} from "react-icons/si"; +import NHost from "images/nhost.svg"; + +export const Tech = [ + { + comp: SiReact, + text: "ReactJS", + type: "icon", + link: "https://reactjs.org", + }, + { + comp: SiRedux, + text: "Redux", + type: "icon", + link: "https://redux.js.org", + }, + { + comp: NHost, + text: "NHost", + type: "image", + link: "https://nhost.io", + }, + { + comp: SiGit, + text: "Git", + type: "icon", + link: "https://git-scm.com", + }, + { + comp: SiMaterialui, + text: "Material UI", + type: "icon", + link: "https://mui.com", + }, + { + comp: SiTailwindcss, + text: "Tailwind", + type: "icon", + link: "https://tailwindcss.com", + }, + { + comp: SiMysql, + text: "MySQL", + type: "icon", + link: "https://www.mysql.com", + }, + { + comp: SiJavascript, + text: "Javascript", + type: "icon", + link: "https://www.javascript.com", + }, + { + comp: SiFirebase, + text: "Firebase", + type: "icon", + link: "https://firebase.google.com", + }, + { + comp: SiTypescript, + text: "Typescript", + type: "icon", + link: "https://www.typescriptlang.org", + }, + { + comp: SiGraphql, + text: "Graphql", + type: "icon", + link: "https://graphql.org", + }, + { + comp: SiDocker, + text: "Docker", + type: "icon", + link: "https://www.docker.com", + }, +]; diff --git a/src/common/techstack/techstack.jsx b/src/common/techstack/techstack.jsx new file mode 100644 index 000000000..4261456b2 --- /dev/null +++ b/src/common/techstack/techstack.jsx @@ -0,0 +1,39 @@ +import { Tech } from "."; + +const TechStack = () => { + return ( +
    +
    + {Tech.map((Item, idx) => { + if (Item.type === "icon") { + return ( + + +

    {Item.text}

    +     + ); + } else if (Item.type === "image") { + return ( + + {Item.comp} +

    {Item.text}

    +     + ); + } + })} +
    +
    + ); +}; + +export default TechStack; diff --git a/src/images/nhost.svg b/src/images/nhost.svg new file mode 100644 index 000000000..8d8ab467d --- /dev/null +++ b/src/images/nhost.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 5ff033731..032dc0c88 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,7 @@ if (process.env.NODE_ENV !== "development") { const Index = () => { const [searchTerm, setSearchTerm] = useState(""); + const [showShareModal, setShowShareModal] = useState(false); const [filterQuery, setFilterQuery] = useState({ level_id: "", tags: [], @@ -22,7 +23,14 @@ const Index = () => { language: "", }); - const value = { searchTerm, setSearchTerm, filterQuery, setFilterQuery }; + const value = { + searchTerm, + setSearchTerm, + filterQuery, + setFilterQuery, + showShareModal, + setShowShareModal, + }; return ( From 73de57c8e4b57f151db01c695f33878b521c69f6 Mon Sep 17 00:00:00 2001 From: Angryman18 Date: Sat, 9 Jul 2022 19:54:02 +0530 Subject: [PATCH 07/23] hasura, postgres added and overlay espace on modal open --- src/common/header/HeaderNav.jsx | 23 +++++------------------ src/common/techstack/index.js | 15 +++++++++++---- src/common/techstack/techstack.jsx | 4 ++-- 3 files changed, 18 insertions(+), 24 deletions(-) diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx index 9a1301c18..e9fd78845 100644 --- a/src/common/header/HeaderNav.jsx +++ b/src/common/header/HeaderNav.jsx @@ -27,7 +27,6 @@ const style = { const HeaderNav = ({ showBrowse }) => { const { showShareModal, setShowShareModal } = useContext(SearchContext); - // const [showSocial, setShowSocial] = useState(false); const [showToggleMenu, setShowToggleMenu] = useState(false); const [anchorEl, setAnchorEl] = useState(null); @@ -150,22 +149,6 @@ const HeaderNav = ({ showBrowse }) => { Share - {/*
    -

    Show love

    - - - Share about ReactPlay - -

    - Share your thoughts about ReactPlay in any of your favorite - social media. -

    - - - Sponsor ReactPlay - -

    Some text about asking for the money.

    -
    */} @@ -173,7 +156,10 @@ const HeaderNav = ({ showBrowse }) => { Show Love -

    Some text about asking for the money.

    +

    Your support means a lot to us. Want to be our Sponsor and support us?

     Date: Sun, 10 Jul 2022 08:16:17 +0530 Subject: [PATCH 09/23] Link corrections and text changes --- src/common/header/Header.jsx | 2 +- src/common/index.js | 2 +- src/common/techstack/index.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/common/header/Header.jsx b/src/common/header/Header.jsx index 8a13e39d9..b44c432b4 100644 --- a/src/common/header/Header.jsx +++ b/src/common/header/Header.jsx @@ -23,7 +23,7 @@ const Header = () => { showBrowse: true, setHeaderStyle: false, })); - } else if (pathName === "/ideas") { + } else if (pathName === "/ideas" || pathName === "/tech-stacks") { setShowHideBits((prev) => ({ ...prev, showSearch: false, diff --git a/src/common/index.js b/src/common/index.js index 7dec23ac7..9ba61bd41 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -6,6 +6,6 @@ import Modal from "./modal"; import DefMeta from "meta/DefMeta"; import PlayMeta from "./playlists/PlayMeta"; import PlayIdeas from "./playideas/PlayIdeas"; -import TechStack from "./techstack/techstack"; +import TechStack from "./techstack/TechStack"; export { Header, Footer, Home, PageNotFound, Modal, PlayMeta, DefMeta, PlayIdeas, TechStack }; diff --git a/src/common/techstack/index.js b/src/common/techstack/index.js index fc9bee167..d7b77706c 100644 --- a/src/common/techstack/index.js +++ b/src/common/techstack/index.js @@ -67,7 +67,7 @@ export const Tech = [ comp: SiJavascript, text: "Javascript", type: "icon", - link: "https://www.javascript.com", + link: "https://www.ecma-international.org/", }, { comp: SiFirebase, From 17d8d1f3e35a677c216246b0185aa29cfaf59b10 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Sun, 10 Jul 2022 08:19:15 +0530 Subject: [PATCH 10/23] enhanced header support text --- src/common/header/HeaderNav.jsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx index e9fd78845..981106c15 100644 --- a/src/common/header/HeaderNav.jsx +++ b/src/common/header/HeaderNav.jsx @@ -167,8 +167,8 @@ const HeaderNav = ({ showBrowse }) => { Share about ReactPlay - Share your thoughts about ReactPlay in any of your favorite - social media. + Enjoying ReactPlay? Please help us spreading the word You can share about + ReactPlay on any of your favorite social media platforms. { Sponsor ReactPlay - It is appreciated if you sponsor and help reactplay to keep - active. + Your support means a lot to us. Want to be our Sponsor and support us?     From fed987503b781f4a642802bc93b0a34871430776 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Sun, 10 Jul 2022 08:26:02 +0530 Subject: [PATCH 11/23] techstack --- src/common/techstack/techstack.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/common/techstack/techstack.jsx b/src/common/techstack/techstack.jsx index 2e8c3d454..1a994bc2e 100644 --- a/src/common/techstack/techstack.jsx +++ b/src/common/techstack/techstack.jsx @@ -37,3 +37,4 @@ const TechStack = () => { }; export default TechStack; + From a7c43e57eb07ce00ee55ed5e68b6d1cad821b2d1 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Sun, 10 Jul 2022 08:27:32 +0530 Subject: [PATCH 12/23] build fail --- src/common/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/index.js b/src/common/index.js index 9ba61bd41..7dec23ac7 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -6,6 +6,6 @@ import Modal from "./modal"; import DefMeta from "meta/DefMeta"; import PlayMeta from "./playlists/PlayMeta"; import PlayIdeas from "./playideas/PlayIdeas"; -import TechStack from "./techstack/TechStack"; +import TechStack from "./techstack/techstack"; export { Header, Footer, Home, PageNotFound, Modal, PlayMeta, DefMeta, PlayIdeas, TechStack }; From 61285098edbc55fc208fb1ab10508ba29cd1e8fa Mon Sep 17 00:00:00 2001 From: Angryman18 Date: Sun, 10 Jul 2022 12:42:58 +0530 Subject: [PATCH 13/23] name convetion fix --- src/common/techstack/index.js | 2 +- src/common/techstack/techstack.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/common/techstack/index.js b/src/common/techstack/index.js index d7b77706c..5ad183051 100644 --- a/src/common/techstack/index.js +++ b/src/common/techstack/index.js @@ -14,7 +14,7 @@ import { } from "react-icons/si"; import NHost from "images/nhost.svg"; -export const Tech = [ +export const TechStackInfo = [ { comp: SiReact, text: "ReactJS", diff --git a/src/common/techstack/techstack.jsx b/src/common/techstack/techstack.jsx index 1a994bc2e..4150d99be 100644 --- a/src/common/techstack/techstack.jsx +++ b/src/common/techstack/techstack.jsx @@ -1,10 +1,10 @@ -import { Tech } from "."; +import { TechStackInfo } from "."; const TechStack = () => { return (
    - {Tech.map((Item, idx) => { + {TechStackInfo.map((Item, idx) => { if (Item.type === "icon") { return ( Date: Sun, 10 Jul 2022 20:44:27 +0530 Subject: [PATCH 14/23] do not show extended header other than home page --- src/common/footer/Footer.jsx | 32 +++++++++++--------------------- src/common/header/HeaderNav.jsx | 2 +- 2 files changed, 12 insertions(+), 22 deletions(-) diff --git a/src/common/footer/Footer.jsx b/src/common/footer/Footer.jsx index 61ae65577..21c989240 100644 --- a/src/common/footer/Footer.jsx +++ b/src/common/footer/Footer.jsx @@ -14,43 +14,33 @@ const Footer = () => { const { showShareModal, setShowShareModal } = useContext(SearchContext); const [showHideBits, setShowHideBits] = useState({ - showSearch: false, - showBrowse: false, - setHeaderStyle: true, + setFooterStyle: true, + showExtendedFooter: true, }); useEffect(() => { if (pathName === "/") { setShowHideBits((prev) => ({ ...prev, - showSearch: false, - showBrowse: true, - setHeaderStyle: false, + setFooterStyle: false, + showExtendedFooter: true, })); - } else if (pathName === "/ideas") { + } else { setShowHideBits((prev) => ({ ...prev, - showSearch: false, - showBrowse: true, - setHeaderStyle: true, + setFooterStyle: true, + showExtendedFooter: false, })); - } else if (pathName === "/plays") { - setShowHideBits((prev) => ({ - ...prev, - showSearch: true, - showBrowse: false, - setHeaderStyle: true, - })); - } + } }, [pathName]); return (