remove FM banner

pioneer/packages/apps/src/SideBar/index.tsx

@@ -100,8 +100,6 @@ function SideBar ({ className = '', collapse, handleResize, isCollapsed, isMenuO
                   />
                 )
             ))}
-            <Menu.Divider hidden />
-            <SidebarBanner isSidebarCollapsed={isCollapsed}/>
           </div>
           <div className={`apps--SideBar-collapse ${isCollapsed ? 'collapsed' : 'expanded'}`}>
             <Button

pioneer/packages/apps/src/SidebarBanner.tsx

@@ -1,325 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import usePromise from '@polkadot/joy-utils/react/hooks/usePromise';
-import styled from 'styled-components';
-import { Segment, Loader, Button } from 'semantic-ui-react';
-
-const COUNTER_BORDER_RADIUS_VALUE = 2;
-
-const BannerContainer = styled.div<{ isCollapsed?: boolean }>`
-  ${({ isCollapsed }) => isCollapsed ? `
-    min-height: 222px;
-    max-height: 222px;
-  ` : `
-    min-height: 322px;
-    max-height: 322px;
-    padding: 16px;
-  `}
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-color: #4038FF;
-`;
-
-const BannerTitle = styled.h1`
-  padding-right: 1px;
-  font-family: Lato;
-  font-size: 16px;
-  font-weight: 800;
-  line-height: 20px;
-  letter-spacing: 0em;
-  color: white;
-`;
-
-const BannerSubtitle = styled.h2`
-  margin-top: 16px;
-  font-family: Lato;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 18px;
-  letter-spacing: 0em;
-  color: #E0E1FF;
-`;
-
-const BannerLink = styled.a`
-  margin-top: 8px;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16px;
-  letter-spacing: 0em;
-  text-align: center;
-  text-decoration: underline;
-  color: #B4BBFF !important;
-`;
-
-const BannerButton = styled(Button)`
-  width: 100% !important;
-  margin-top: 8px !important;
-`;
-
-const ProgressContainer = styled.div<{ isCollapsed ?: boolean }>`
-  width: 100%;
-  ${({ isCollapsed }) => isCollapsed ? `
-    margin-top: 3px;
-  ` : `
-    margin-top: 8px;
-  `}
-`;
-
-const CounterContainer = styled.div<{ isCollapsed ?: boolean }>`
-  width: 100%;
-  ${({ isCollapsed }) => isCollapsed ? `
-    height: 120px;
-    flex-direction: column;
-  ` : `
-    height: 64px;
-  `}
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: ${({ children }) => children && children > 1 ? 'space-between' : 'center'};
-  background-color: #261EE4;
-  border-top-left-radius: ${COUNTER_BORDER_RADIUS_VALUE}px;
-  border-top-right-radius: ${COUNTER_BORDER_RADIUS_VALUE}px;
-`;
-
-const CounterItem = styled.div<{ isCollapsed ?: boolean }>`
-  ${({ isCollapsed }) => isCollapsed ? `
-    width: 43px;
-  ` : `
-    width: 56px;
-  `}
-  height: 48px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const CounterItemNumber = styled.p`
-  margin: 0;
-  font-size: 32px;
-  font-weight: 700;
-  line-height: 32px;
-  letter-spacing: 0em;
-  color: white;
-`;
-
-const CounterItemText = styled.p`
-  margin: 0;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 16px;
-  letter-spacing: 0em;
-  color: white;
-`;
-
-const Progress = styled.div<{ isCollapsed?: boolean }>`
-  width: 100%;
-  height: 6px;
-  background-color: #5252FF;
-  ${({ isCollapsed }) => !isCollapsed && `
-    border-bottom-left-radius: ${COUNTER_BORDER_RADIUS_VALUE}px;
-    border-bottom-right-radius: ${COUNTER_BORDER_RADIUS_VALUE}px;
-  `}
-`;
-
-const ProgressBar = styled.div<{ isCollapsed?: boolean }>`
-  width: 0%;
-  height: 100%;
-  background-color: white;
-  ${({ isCollapsed }) => !isCollapsed && `
-    border-bottom-left-radius: ${COUNTER_BORDER_RADIUS_VALUE}px;
-    border-bottom-right-radius: ${COUNTER_BORDER_RADIUS_VALUE}px;
-  `}
-`;
-
-const ErrorText = styled.h1`
-  font-size: 14px;
-  letter-spacing: 0em;
-  font-weight: 600;
-  color: white;
-`;
-
-const DatesContainer = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  margin-top: 8px;
-`;
-
-const DateText = styled.p<{ isCollapsed?: boolean }>`
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0em;
-  color: #E0E1FF;
-  ${({ isCollapsed }) => isCollapsed && `
-    margin-top: 8px;
-  `}
-`;
-
-const StyledLoader = styled(Loader)`
-  ::before {
-    border-color: rgba(255,255,255,.15) !important;
-  }
-
-  ::after {
-    border-color: white transparent transparent !important;
-  }
-`;
-
-const FM_DATA_URL = 'https://raw.githubusercontent.com/Joystream/founding-members/main/data/fm-info.json';
-const MILLISECONDS_TO_DAYS = 1000 * 60 * 60 * 24;
-
-type FoundingMembersData = {
-  scoringPeriodsFull: {
-    currentScoringPeriod: {
-      started: string;
-      ends: string;
-    }
-  }
-}
-
-const numberToDateString = (number: number) => {
-  const remainingTime: Array<[number, string]> = [];
-
-  const weeks = Math.floor(number / 7);
-  const days = Math.floor(number - (weeks * 7));
-  const hours = Math.floor((number - ((weeks * 7) + days)) * 24);
-
-  if (weeks) {
-    remainingTime.push([weeks, weeks === 1 ? 'WEEK' : 'WEEKS']);
-
-    if (days) {
-      remainingTime.push([days, days === 1 ? 'DAY' : 'DAYS']);
-    }
-
-    return remainingTime;
-  }
-
-  if (days) {
-    remainingTime.push([days, days === 1 ? 'DAY' : 'DAYS']);
-  }
-
-  if (hours) {
-    remainingTime.push([hours, hours === 1 ? 'HOUR' : 'HOURS']);
-  }
-
-  return remainingTime;
-};
-
-const SidebarBanner = ({ isSidebarCollapsed } : { isSidebarCollapsed: boolean}) => {
-  const [foundingMembersData, foundingMembersDataError] = usePromise<FoundingMembersData | undefined>(
-    () => fetch(FM_DATA_URL).then((res) => res.json().then((data) => data as FoundingMembersData)), undefined, []
-  );
-  const [dates, setDates] = useState<{ started: Date, ends: Date }>();
-  const [progress, setProgress] = useState<number>(0);
-  const [remainingTime, setRemainingTime] = useState<number>();
-
-  useEffect(() => {
-    if (foundingMembersData && !foundingMembersDataError) {
-      const scoringPeriodStartedDate = new Date(foundingMembersData.scoringPeriodsFull.currentScoringPeriod.started);
-      const scoringPeriodEndedDate = new Date(foundingMembersData.scoringPeriodsFull.currentScoringPeriod.ends);
-      const now = new Date();
-
-      // calculate the elapsed time from start of scoring period until now
-      const timeDifferenceBetweenDates = Math.abs(scoringPeriodEndedDate.getTime() - scoringPeriodStartedDate.getTime()) / MILLISECONDS_TO_DAYS;
-      const timePassedUntilNow = Math.abs(now.getTime() - scoringPeriodStartedDate.getTime()) / MILLISECONDS_TO_DAYS;
-      const progressPercentage = (timePassedUntilNow / timeDifferenceBetweenDates) * 100;
-
-      // calculate the amount of days remaining until the end of the scoring period
-      const remainingTime = Math.abs(scoringPeriodEndedDate.getTime() - now.getTime()) / MILLISECONDS_TO_DAYS;
-
-      setRemainingTime(remainingTime);
-
-      setDates({
-        started: scoringPeriodStartedDate,
-        ends: scoringPeriodEndedDate
-      });
-
-      setProgress(progressPercentage > 100 ? 100 : progressPercentage);
-    }
-  }, [foundingMembersData]);
-
-  const Loading = ({ isCollapsed } : { isCollapsed ?: boolean}) => (
-    <Segment>
-      <StyledLoader active size={isCollapsed ? 'small' : 'medium'} />
-    </Segment>
-  );
-
-  const Error = () => (
-    <ErrorText> Error.. </ErrorText>
-  );
-
-  if (isSidebarCollapsed) {
-    return (
-      <BannerContainer isCollapsed={true}>
-        <BannerSubtitle>Scoring period ends in:</BannerSubtitle>
-        <ProgressContainer isCollapsed={true}>
-          <CounterContainer isCollapsed={true}>
-            {remainingTime
-              ? numberToDateString(remainingTime).map(([amountOfTime, timePeriodString], index) => (
-                <CounterItem key={`${index}-${amountOfTime}-${timePeriodString}`}>
-                  <CounterItemNumber>{amountOfTime}</CounterItemNumber>
-                  <CounterItemText>{timePeriodString}</CounterItemText>
-                </CounterItem>
-              ))
-              : <Loading isCollapsed={true}/>
-            }
-            {!remainingTime && foundingMembersDataError ? <Error /> : null}
-          </CounterContainer>
-          <Progress isCollapsed={true}>
-            <ProgressBar isCollapsed={true} style={{ width: `${progress}%` }}/>
-          </Progress>
-        </ProgressContainer>
-        <DateText isCollapsed={true} >{dates?.ends.toLocaleString('default', { month: 'short' })} {dates?.ends.getDate()}</DateText>
-      </BannerContainer>
-    );
-  }
-
-  return (
-    <BannerContainer>
-      <BannerTitle>Report your activity to earn FM points</BannerTitle>
-      <BannerSubtitle>Current scoring period ends in:</BannerSubtitle>
-      <ProgressContainer>
-        <CounterContainer>
-          {remainingTime
-            ? numberToDateString(remainingTime).map(([amountOfTime, timePeriodString], index) => (
-              <CounterItem key={`${index}-${amountOfTime}-${timePeriodString}`}>
-                <CounterItemNumber>{amountOfTime}</CounterItemNumber>
-                <CounterItemText>{timePeriodString}</CounterItemText>
-              </CounterItem>
-            ))
-            : <Loading />
-          }
-          {!remainingTime && foundingMembersDataError ? <Error /> : null}
-        </CounterContainer>
-        <Progress>
-          <ProgressBar style={{ width: `${progress}%` }}/>
-        </Progress>
-        <DatesContainer>
-          <DateText>{dates?.started.toLocaleString('default', { month: 'short' })} {dates?.started.getDate()}</DateText>
-          <DateText>{dates?.ends.toLocaleString('default', { month: 'short' })} {dates?.ends.getDate()}</DateText>
-        </DatesContainer>
-      </ProgressContainer>
-      <BannerButton
-        color='black'
-        href='https://www.joystream.org/founding-members/form/'
-        target='_blank'
-        rel='noopener noreferrer'
-      >
-        Report now
-      </BannerButton>
-      <BannerLink
-        href='https://github.com/Joystream/founding-members/blob/main/SUBMISSION-GUIDELINES.md'
-        target='_blank'
-        rel='noopener noreferrer'
-      >
-        Learn more...
-      </BannerLink>
-    </BannerContainer>
-  );
-};
-
-export default SidebarBanner;

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

@@ -22,7 +22,6 @@ 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}`;
 
@@ -68,7 +67,6 @@ class App extends React.PureComponent<Props, State> {
 
     return (
       <ElectionMain className='election--App'>
-        <FMReminderBanner contextualTitle='Council'/>
         <header>
           <Tabs basePath={basePath} items={tabs} />
         </header>

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

@@ -16,7 +16,6 @@ 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}`;
 
@@ -30,7 +29,6 @@ class App extends React.PureComponent<Props> {
       <ForumProvider>
         <ForumSudoProvider>
           <ForumMain className='forum--App'>
-            <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-proposals/src/index.tsx

@@ -27,7 +27,6 @@ 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}`;
 
@@ -59,7 +58,6 @@ function App (props: Props): React.ReactElement<Props> {
 
   return (
     <ProposalsMain className='proposal--App'>
-      <FMReminderBanner contextualTitle='Proposals'/>
       <StyledHeader>
         <Tabs
           basePath={basePath}

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

@@ -17,7 +17,6 @@ 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';
 
@@ -75,7 +74,6 @@ export const App: React.FC<Props> = (props: Props) => {
 
   return (
     <main className='roles--App'>
-      <FMReminderBanner contextualTitle='Working Groups'/>
       <header>
         <Tabs
           basePath={basePath}

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

@@ -1,138 +0,0 @@
-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 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 BannerButton = styled(Button)`
-  background-color: #4038FF !important;
-  color: white !important;
-  min-width: 155px !important;
-  width: 155px !important;
-  min-height: 36px !important;
-  height: 36px !important;
-
-  .icon {
-    background-color: #3D35F2 !important;
-  }
-
-  margin-left: 260px !important;
-
-  @media(max-width: 1200px){
-    margin-left: 30px !important;
-  }
-
-  @media(max-width: 800px){
-    margin: 20px 0 0 0 !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='https://github.com/Joystream/founding-members/blob/main/SUBMISSION-GUIDELINES.md'
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              Learn more about reporting your activity...
-            </a>
-          </BannerText>
-        </TextContainer>
-        <BannerButton
-          icon
-          labelPosition='right'
-          href='https://www.joystream.org/founding-members/form/'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-            Report Now
-          <Icon name='arrow right' />
-        </BannerButton>
-      </Banner>
-    </Container>
-  );
-};
-
-export default FMReminderBanner;