Issue 1161 Added hustle link to home page (reactplay#1162)

* added hustle link to home page * lint fix * tonal update for links
rh-abir · Jun 7, 2023 · c3dbe29 · c3dbe29
1 parent ad98c3f
commit c3dbe29
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 1 deletion.
diff --git a/src/common/badges-dashboard/badge.css b/src/common/badges-dashboard/badge.css
@@ -20,3 +20,4 @@
  grid-gap: 0.3rem;
  margin-left: 0.4rem;
 }
+
diff --git a/src/common/defaultBanner/DefaultBanner.jsx b/src/common/defaultBanner/DefaultBanner.jsx
@@ -19,6 +19,7 @@ const DefaultBanner = () => {
  ReactPlay is an open-source platform to learn, create and share ReactJS projects with the
  developer community. Start by browsing the plays or exploring the source code.
  </p>
+
  <div className="body-c2a">
  <Link className="body-c2a-btn body-c2a-btn--primary" to="/plays">
  <MdManageSearch className="icon" />
@@ -40,6 +41,12 @@ const DefaultBanner = () => {
  </span>
  </a>
  </div>
+ <div className="body-desc">
+ Check out our bouquet of events{' '}
+ <Link className="home-anchor" target="_blank" to="https://hustles.reactplay.io/">
+ <span className="text text-secondary">here</span>
+ </Link>
+ </div>
  </div>
  );
 };

diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
@@ -4,7 +4,7 @@ import { BsTwitter, BsGithub, BsTrophyFill } 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 { MdManageSearch, MdClose, MdEvent } from 'react-icons/md';
 import SocialShare from 'common/components/SocialShare';
 import { GoX } from 'react-icons/go';
 import { Modal, Box, Typography, Menu } from '@mui/material';
@@ -74,6 +74,7 @@ const HeaderNav = ({ showBrowse }) => {
  <span className="sr-only">Close</span>
  </button>
  </li>
+
  {showBrowse && !showToggleMenu && (
  <li>
  <Link
@@ -86,6 +87,17 @@ const HeaderNav = ({ showBrowse }) => {
  </Link>
  </li>
  )}
+ <li>
+ <Link
+ className="app-header-btn app-header-btn--secondary"
+ data-testid="events-btn"
+ target="_blank"
+ to="https://hustles.reactplay.io/"
+ >
+ <MdEvent className="icon" />
+ <span className="btn-label">Events</span>
+ </Link>
+ </li>
  <li className="menu-spacer">
  {process.env.NODE_ENV === 'development' ? (
  <a

diff --git a/src/common/header/header.css b/src/common/header/header.css
@@ -286,6 +286,7 @@
 .header-links > li > .app-header-btn.app-header-btn--secondary {
  border: solid 1px var(--color-neutral-60);
  border-radius: 2rem;
+ margin-left: 0.4rem;
 }
 
 .header-links > li > .app-header-btn.app-header-btn--secondary:hover,

diff --git a/src/common/home/home.css b/src/common/home/home.css
@@ -769,11 +769,20 @@
  font-family: var(--ff-accent);
 }
 
+.home-anchor .text-secondary {
+ color: var(--color-neutral-40);
+}
+
 .home-anchor:hover .text,
 .home-anchor:focus .text {
  color: var(--color-neutral-90);
 }
 
+.home-anchor:hover .text-secondary,
+.home-anchor:focus .text-secondary {
+ color: var(--color-neutral-20);
+}
+
 .home-anchor:before {
  content: '';
  position: absolute;