Community hub updates

package.json

@@ -54,7 +54,7 @@
     "react-dom": "17.0.2",
     "react-emoji-render": "^1.2.4",
     "react-helmet": "^6.1.0",
-    "react-icons": "^4.1.0",
+    "react-icons": "^4.3.1",
     "react-instantsearch-dom": "^6.6.0",
     "react-select": "^4.3.0",
     "recharts": "1.8.5",

src/components/EventCard.js

@@ -0,0 +1,59 @@
+import React from "react"
+import styled from "styled-components"
+import Emoji from "./Emoji"
+import ButtonLink from "./ButtonLink"
+
+const StyledCard = styled.div`
+  display: flex;
+  flex: 1 1 30%;
+  max-width: 620px;
+  min-width: 240px;
+  margin: 2rem 0;
+  flex-direction: column;
+  justify-content: space-between;
+  background: ${(props) => props.theme.colors.ednBackground};
+  border-radius: 2px;
+  border: 1px solid ${(props) => props.theme.colors.lightBorder};
+  padding: 1.5rem;
+`
+
+const Description = styled.p`
+  opacity: 0.8;
+`
+
+const Date = styled.p`
+  color: ${(props) => props.theme.colors.primary};
+  margin-bottom: 0;
+  text-align: right;
+`
+
+const Location = styled.p`
+  margin-bottom: 0;
+  text-align: right;
+`
+
+const LocationText = styled.span`
+  opacity: 0.6;
+`
+
+const Title = styled.h3`
+  margin-top: 0;
+`
+
+const EventCard = ({ title, to, date, description, className, location }) => (
+  <StyledCard className={className}>
+    <Date>
+      {date}
+      <Emoji text=":spiral_calendar:" size={1} ml={`0.5em`} />
+    </Date>
+    <Location>
+      <LocationText>{location}</LocationText>
+      <Emoji text=":round_pushpin:" size={1} ml={`0.5em`} />
+    </Location>
+    <Title>{title}</Title>
+    <Description>{description}</Description>
+    <ButtonLink to={to}>View Event</ButtonLink>
+  </StyledCard>
+)
+
+export default EventCard

src/components/Footer.js

@@ -225,7 +225,7 @@ const Footer = () => {
       links: [
         {
           to: `/community/`,
-          text: "ethereum-community",
+          text: "community-hub",
         },
         {
           to: "/foundation/",

src/components/Icon.js

@@ -2,7 +2,15 @@ import React from "react"
 import PropTypes from "prop-types"
 import styled from "styled-components"
 import { IconContext } from "react-icons"
-import { FaGithub, FaTwitter, FaYoutube, FaDiscord } from "react-icons/fa"
+import {
+  FaGithub,
+  FaTwitter,
+  FaYoutube,
+  FaDiscord,
+  FaRedditAlien,
+  FaStackExchange,
+  FaGlobe,
+} from "react-icons/fa"
 import {
   MdAdd,
   MdBrightness2,
@@ -20,7 +28,15 @@ import {
 import { BsQuestionSquareFill, BsToggleOff, BsToggleOn } from "react-icons/bs"
 import { IoCodeOutline, IoCodeDownload } from "react-icons/io5"
 
-const Icon = ({ name, size, className }) => (
+const socialColors = {
+  reddit: "#FF4301",
+  twitter: "#1DA1F2",
+  youtube: "#FF0000",
+  discord: "#7289da",
+  stackExchange: "#48a2da",
+}
+
+const Icon = ({ name, color = false, size, className }) => (
   <IconContext.Provider value={{ size: size, className: className }}>
     {name === "add" && <MdAdd />}
     {name === "chevronDown" && <MdExpandMore />}
@@ -34,15 +50,28 @@ const Icon = ({ name, size, className }) => (
     {name === "zenModeOff" && <BsToggleOff />}
     {name === "zenModeOn" && <BsToggleOn />}
     {name === "menu" && <MdMenu />}
-    {name === "twitter" && <FaTwitter />}
+    {name === "twitter" && (
+      <FaTwitter color={color ? socialColors.twitter : undefined} />
+    )}
     {name === "search" && <MdSearch />}
-    {name === "youtube" && <FaYoutube />}
-    {name === "discord" && <FaDiscord />}
+    {name === "youtube" && (
+      <FaYoutube color={color ? socialColors.youtube : undefined} />
+    )}
+    {name === "discord" && (
+      <FaDiscord color={color ? socialColors.discord : undefined} />
+    )}
     {name === "glossary" && <BsQuestionSquareFill />}
     {name === "codeDownload" && <IoCodeDownload />}
     {name === "code" && <IoCodeOutline />}
     {name === "flip" && <MdFlip />}
     {name === "help" && <MdLiveHelp />}
+    {name === "reddit" && (
+      <FaRedditAlien color={color ? socialColors.reddit : undefined} />
+    )}
+    {name === "stackExchange" && (
+      <FaStackExchange color={color ? socialColors.stackExchange : undefined} />
+    )}
+    {name === "webpage" && <FaGlobe />}
   </IconContext.Provider>
 )
 
@@ -58,8 +87,10 @@ Icon.propTypes = {
 }
 
 const StyledIcon = styled(Icon)`
-  fill: ${(props) => props.theme.colors.secondary};
-  &:hover path:last-of-type {
+  fill: ${(props) =>
+    props.color ? props.color : props.theme.colors.secondary};
+
+  &:hover svg {
     fill: ${(props) => props.theme.colors.primary};
   }
 `

src/components/Layout.js

@@ -83,10 +83,9 @@ const Layout = (props) => {
       if (localStorage.getItem("zen-mode") !== null) {
         let isMobile = false
         if (typeof window !== undefined) {
-          isMobile =
-            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-              window.navigator.userAgent
-            )
+          isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+            window.navigator.userAgent
+          )
         }
         setIsZenMode(localStorage.getItem("zen-mode") === "true" && !isMobile)
       }