Implement new contextual banner based off design, add top margin to forum

pioneer/packages/joy-election/src/index.tsx

@@ -22,39 +22,10 @@ import Reveals from './Reveals';
 import { queryToProp } from '@polkadot/joy-utils/functions/misc';
 import { Seat } from '@joystream/types/council';
 import { ApiProps } from '@polkadot/react-api/types';
+import FMReminderBanner from '@polkadot/joy-utils/react/components/FMReminderBanner';
 
 const ElectionMain = styled.main`${style}`;
 
-const Banner = styled.div`
-  height: 150px;
-  display: flex;
-  justify-content: center;
-  margin: 0 -2em;
-  align-items: center;
-  border-bottom: 1px solid #ddd;
-`;
-
-const BannerText = styled.h1`
-  font-size: 24px;
-  color: black;
-  width: 75%;
-  text-align: center;
-  font-weight: 600;
-
-  @media(max-width: 1300px){
-    font-size: 20px;
-    width: 80%;
-  }
-
-  @media(max-width: 800px){
-    font-size: 16px;
-  }
-
-  @media(max-width: 500px){
-    font-size: 12px;
-  }
-`;
-
 // define out internal types
 type Props = AppMainRouteProps & ApiProps & I18nProps & {
   activeCouncil?: Seat[];
@@ -97,12 +68,7 @@ class App extends React.PureComponent<Props, State> {
 
     return (
       <ElectionMain className='election--App'>
-        <Banner>
-          <BannerText>
-            As Council Members you are eligible to share your testnet contributions to have a chance at becoming a Founding Member.
-            Make sure to do that to get a portion of the initial mainnet tokens and other interesting accolades. Get started <a href='https://www.joystream.org/founding-members' target='_blank' rel='noreferrer'>here</a>!
-          </BannerText>
-        </Banner>
+        <FMReminderBanner contextualTitle='Council'/>
         <header>
           <Tabs basePath={basePath} items={tabs} />
         </header>

pioneer/packages/joy-forum/src/index.tsx

@@ -16,39 +16,10 @@ import { CategoryList, ViewCategoryById } from './CategoryList';
 import { ViewThreadById } from './ViewThread';
 import { LegacyPagingRedirect } from './LegacyPagingRedirect';
 import ForumRoot from './ForumRoot';
+import FMReminderBanner from '@polkadot/joy-utils/react/components/FMReminderBanner';
 
 const ForumMain = styled.main`${style}`;
 
-const Banner = styled.div`
-  height: 150px;
-  display: flex;
-  justify-content: center;
-  margin: 0 -2em 15px -2em;
-  align-items: center;
-  border-bottom: 1px solid #ddd;
-`;
-
-const BannerText = styled.h1`
-  font-size: 24px;
-  color: black;
-  width: 75%;
-  text-align: center;
-  font-weight: 600;
-
-  @media(max-width: 1300px){
-    font-size: 20px;
-    width: 80%;
-  }
-
-  @media(max-width: 800px){
-    font-size: 16px;
-  }
-
-  @media(max-width: 500px){
-    font-size: 12px;
-  }
-`;
-
 type Props = AppMainRouteProps & I18nProps;
 
 class App extends React.PureComponent<Props> {
@@ -59,12 +30,7 @@ class App extends React.PureComponent<Props> {
       <ForumProvider>
         <ForumSudoProvider>
           <ForumMain className='forum--App'>
-            <Banner>
-              <BannerText>
-                By being an active contributor to the platform you are eligible to share your testnet contributions to have a chance at becoming a Founding Member.
-                Make sure to do that to get a portion of the initial mainnet tokens and other interesting accolades. Get started <a href='https://www.joystream.org/founding-members' target='_blank' rel='noreferrer'>here</a>!
-              </BannerText>
-            </Banner>
+            <FMReminderBanner contextualTitle='Forum'/>
             <Switch>
               <Route path={`${basePath}/categories/new`} component={NewCategory} />
               {/* routes for handling legacy format of forum paging within the routing path */}

pioneer/packages/joy-forum/src/style.ts

@@ -5,6 +5,10 @@ export default css`
     background-color: #fff;
   }
 
+  .ui.breadcrumb {
+    margin-top: 2em;
+  }
+
   .ForumPageTitle {
     display: flex;
     margin-top: 1rem;

pioneer/packages/joy-proposals/src/index.tsx

@@ -27,6 +27,7 @@ import { SignalForm,
 import { RouteProps as AppMainRouteProps } from '@polkadot/apps-routing/types';
 import style from './style';
 import { HistoricalProposalFromId } from './Proposal/ProposalFromId';
+import FMReminderBanner from '@polkadot/joy-utils/react/components/FMReminderBanner';
 
 const ProposalsMain = styled.main`${style}`;
 
@@ -41,36 +42,6 @@ const StyledHeader = styled.header`
   }
 `;
 
-const Banner = styled.div`
-  height: 150px;
-  display: flex;
-  justify-content: center;
-  margin: 0 -2em 15px -2em;
-  align-items: center;
-  border-bottom: 1px solid #ddd;
-`;
-
-const BannerText = styled.h1`
-  font-size: 24px;
-  color: black;
-  width: 75%;
-  text-align: center;
-  font-weight: 600;
-
-  @media(max-width: 1300px){
-    font-size: 20px;
-    width: 80%;
-  }
-
-  @media(max-width: 800px){
-    font-size: 16px;
-  }
-
-  @media(max-width: 500px){
-    font-size: 12px;
-  }
-`;
-
 function App (props: Props): React.ReactElement<Props> {
   const { basePath, t } = props;
   const tabs = [
@@ -88,12 +59,7 @@ function App (props: Props): React.ReactElement<Props> {
 
   return (
     <ProposalsMain className='proposal--App'>
-      <Banner>
-        <BannerText>
-          By being an active contributor to the platform you are eligible to share your testnet contributions to have a chance at becoming a Founding Member.
-          Make sure to do that to get a portion of the initial mainnet tokens and other interesting accolades. Get started <a href='https://www.joystream.org/founding-members' target='_blank' rel='noreferrer'>here</a>!
-        </BannerText>
-      </Banner>
+      <FMReminderBanner contextualTitle='Proposals'/>
       <StyledHeader>
         <Tabs
           basePath={basePath}

pioneer/packages/joy-roles/src/index.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { ApiContext } from '@polkadot/react-api';
 import { AppProps, I18nProps } from '@polkadot/react-components/types';
@@ -18,41 +17,12 @@ import { OpportunityController, OpportunityView } from './tabs/Opportunity.contr
 import { OpportunitiesController, OpportunitiesView } from './tabs/Opportunities.controller';
 import { ApplyController, ApplyView } from './flows/apply.controller';
 import { MyRolesController, MyRolesView } from './tabs/MyRoles.controller';
+import FMReminderBanner from '@polkadot/joy-utils/react/components/FMReminderBanner';
 
 import './index.sass';
 
 import translate from './translate';
 
-const Banner = styled.div`
-  height: 150px;
-  display: flex;
-  justify-content: center;
-  margin: 0 -2em;
-  align-items: center;
-  border-bottom: 1px solid #ddd;
-`;
-
-const BannerText = styled.h1`
-  font-size: 24px;
-  color: black;
-  width: 75%;
-  text-align: center;
-  font-weight: 600;
-
-  @media(max-width: 1300px){
-    font-size: 20px;
-    width: 80%;
-  }
-
-  @media(max-width: 800px){
-    font-size: 16px;
-  }
-
-  @media(max-width: 500px){
-    font-size: 12px;
-  }
-`;
-
 type Props = AppProps & ApiProps & I18nProps & MyAccountProps
 
 type DefaultRouteProps = RouteComponentProps<Record<string, string | undefined>>;
@@ -105,12 +75,7 @@ export const App: React.FC<Props> = (props: Props) => {
 
   return (
     <main className='roles--App'>
-      <Banner>
-        <BannerText>
-          As Working Group Members you are eligible to share your testnet contributions to have a chance at becoming a Founding Member.
-          Make sure to do that to get a portion of the initial mainnet tokens and other interesting accolades. Get started <a href='https://www.joystream.org/founding-members' target='_blank' rel='noreferrer'>here</a>!
-        </BannerText>
-      </Banner>
+      <FMReminderBanner contextualTitle='Working Groups'/>
       <header>
         <Tabs
           basePath={basePath}

pioneer/packages/joy-utils/src/react/components/FMReminderBanner.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, Icon } from 'semantic-ui-react';
+import CoinIllustration from '../../assets/coin-illustration.png';
+import CoinIllustrationSmall from '../../assets/coin-illustration1.png';
+
+const FM_SUBMISSION_GUIDELINES_LINK = 'https://github.com/Joystream/founding-members/blob/main/SUBMISSION-GUIDELINES.md';
+
+const Container = styled.div`
+  height: auto;
+  margin: 2em 0 0 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Banner = styled.div`
+  height: 89px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5em;
+  background-color: #262626;
+  box-shadow: inset 0px 0px 0px 1px rgba(34, 36, 38, 0.22);
+  border-radius: 4px;
+  background-image: url(${CoinIllustration});
+  background-position: 90% 0;
+  background-repeat: no-repeat;
+  background-size: contain;
+
+  @media(max-width: 1450px){
+    height: 109px;
+  }
+
+  @media(max-width: 1200px){
+    background-image: none;
+  }
+
+  @media(max-width: 800px){
+    flex-direction: column;
+    align-items: initial;
+    height: auto;
+  }
+
+  @media (max-width: 425px){
+    background-image: url(${CoinIllustrationSmall});
+    padding-top: 7em;
+    background-position: left 0;
+    background-size: 200px;
+  }
+`;
+
+const TextContainer = styled.div``;
+
+const BannerTitle = styled.h1`
+  font-family: Lato;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 20px;
+  letter-spacing: 0em;
+  color: white;
+  margin-bottom: 7px;
+`;
+
+const BannerText = styled.p`
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.0033em;
+  color: #FFFFFFDE;
+
+  a {
+    text-decoration: underline;
+    color: inherit;
+  }
+`;
+
+const LinkWrapper = styled.a`
+  margin-left: 260px;
+
+  @media(max-width: 1200px){
+    margin-left: 30px;  
+  }
+
+  @media(max-width: 800px){
+    margin: 20px 0 0 0;
+  }
+`;
+
+const BannerButton = styled(Button)`
+  background-color: #4038FF !important;
+  color: white !important;
+  width: 155px !important;
+  height: 36px !important;
+
+  .icon {
+    background-color: #3D35F2 !important;
+  }
+`;
+
+interface Props {
+  contextualTitle: 'Council' | 'Working Groups' | 'Proposals' | 'Forum';
+}
+
+const FMReminderBanner = ({ contextualTitle } : Props) => {
+  return (
+    <Container>
+      <Banner>
+        <TextContainer>
+          <BannerTitle>Report your {contextualTitle} activity to earn Founding Members points!</BannerTitle>
+          <BannerText>Only activity that&apos;s been reported is eligible for earning FM points. <a href={FM_SUBMISSION_GUIDELINES_LINK}>Learn more about reporting your activity...</a></BannerText>
+        </TextContainer>
+        <LinkWrapper href='https://www.joystream.org/founding-members/form/'>
+          <BannerButton icon labelPosition='right'>
+              Report Now
+            <Icon name='arrow right' />
+          </BannerButton>
+        </LinkWrapper>
+      </Banner>
+    </Container>
+  );
+};
+
+export default FMReminderBanner;