feat: add a CoC Reporting page (#48)

feat: add a CoC Reporting page Co-authored-by: Sara Vieira <[email protected]>
React-Robins · Nov 12, 2019 · f0c1b21 · f0c1b21
2 parents dcac181 + 9dbfb51
commit f0c1b21
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 39 deletions.
diff --git a/src/components/Thanks.js b/src/components/Thanks.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Link } from 'gatsby'
 import styled from 'styled-components'
 
 const Thanks = styled.ul`
@@ -13,7 +12,7 @@ const Thanks = styled.ul`
   }
 `
 
-export default ({ thanks, mainOrganizer, site }) => {
+export default ({ thanks }) => {
   return (
     <>
       <Thanks>
@@ -25,22 +24,6 @@ export default ({ thanks, mainOrganizer, site }) => {
           </li>
         ))}
       </Thanks>
-      We have a{' '}
-      <Link state={{ organizer: mainOrganizer, site: site }} to="/code-of-conduct">
-        Code of Conduct
-      </Link>
-      .
-      <br />
-      <Link state={{ site: site }} to="/flags">
-        What's with all the flags?
-      </Link>
-      <br />
-      Follow QueerJS on{' '}
-      <a href="https://twitter.com/queerjs" title="Follow us on Twitter">
-        Twitter
-      </a>
-      <br />
-      <br />
     </>
   )
 }
diff --git a/src/components/footer/elements.js b/src/components/footer/elements.js
@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const FooterWrap = styled.div`
+  bottom: 0;
+`
diff --git a/src/components/footer/index.js b/src/components/footer/index.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import { FooterWrap } from './elements'
+
+const Footer = () => {
+  const site = {
+    title: 'QueerJS',
+    description: 'A meetup for everyone where Queer Speakers take the stage'
+  }
+
+  return (
+    <FooterWrap>
+      We have a{' '}
+      <Link to="/code-of-conduct"> Code of Conduct</Link>
+      .
+      <br />
+      <Link state={{ site: site }} to="/flags">
+        What's with all the flags?
+      </Link>
+      <br />
+      Follow QueerJS on{' '}
+      <a href="https://twitter.com/queerjs" title="Follow us on Twitter">
+        Twitter
+      </a>
+      <br />
+      <br />
+    </FooterWrap>
+    )
+}
+
+export default Footer
diff --git a/src/components/header/elements.js b/src/components/header/elements.js
@@ -4,7 +4,6 @@ import { Link } from 'gatsby'
 import styled, { css } from 'styled-components'
 
 export const Nav = styled.nav`
-  margin: auto;
   padding: 3em 0 1.5em;
   @media screen and (max-width: 38em) {
     padding: 0.5em 0 0;

diff --git a/src/components/layout/elements.js b/src/components/layout/elements.js
@@ -70,6 +70,9 @@ export const Wrapper = styled.main`
   width: 80%;
   max-width: 56em;
   margin: auto;
+  display: grid;
+  grid-template-rows: auto 1fr 100px;
+  height: 100%;
 `
 
 export const SubWrapper = styled.div``

diff --git a/src/components/layout/index.js b/src/components/layout/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 import Header from '../header'
 import { ThemeProvider } from 'styled-components'
 import { theme, Global, Wrapper, SubWrapper, SideRainbow } from './elements'
+import Footer from '../../components/footer'
 
 const Layout = ({ children, siteTitle }) => (
   <ThemeProvider theme={theme}>
@@ -11,6 +12,7 @@ const Layout = ({ children, siteTitle }) => (
       <Wrapper>
         <Header siteTitle={siteTitle} />
         <SubWrapper>{children}</SubWrapper>
+        <Footer/>
       </Wrapper>
     </>
   </ThemeProvider>

diff --git a/src/pages/_main.js b/src/pages/_main.js
@@ -10,7 +10,7 @@ import Panel from '../components/Panel'
 import Heading from '../components/Heading'
 
 const Main = ({ city, attendees }) => {
-  const { site, organizers, mainOrganizer, thanks, speakers, sponsors, info } = city
+  const { site, thanks, speakers, sponsors, info } = city
 
   return (
     <Layout>
@@ -54,12 +54,7 @@ const Main = ({ city, attendees }) => {
       </section>
 
       <Panel heading={thanks && thanks.length ? 'Special Thanks' : null}>
-        <Thanks
-          organizers={organizers}
-          thanks={thanks || []}
-          site={site}
-          mainOrganizer={(mainOrganizer || []).find(o => o.main)}
-        />
+        <Thanks thanks={thanks || []} />
       </Panel>
     </Layout>
   )

diff --git a/src/pages/code-of-conduct.js b/src/pages/code-of-conduct.js
@@ -1,22 +1,21 @@
 import React from 'react'
 import SEO from '../components/seo'
+import { Link } from 'gatsby'
 import Layout from '../containers/layout'
 import Panel from '../components/Panel'
 
-const CodeOfConduct = ({ location }) => {
-  const organizer = (location.state || {}).organizer || {
-    name: 'Sara Vieira',
-    phoneNumber: '+351 91 7296 830',
-    email: '[email protected]',
-    twitterHandle: '@NikkitaFTW'
-  }
+const CodeOfConduct = () => {
   return (
     <Layout>
       <SEO
         title="QueerJS - Code Of Conduct"
         description="A meetup for everyone where Queer Speakers take the stage"
       />
-      <main>
+      <main
+        css={`
+          margin-bottom: 40px;
+        `}
+      >
         <h1 hidden>Welcome to QueerJS</h1>
         <Panel heading="Code of Conduct">
           <section
@@ -33,7 +32,11 @@ const CodeOfConduct = ({ location }) => {
               from all participants to help ensuring a safe environment for everybody.
             </p>
             <p>
-              Need Help? Contact {organizer.name} {organizer.phoneNumber}
+              {' '}
+              <Link to="/report" title="Code of Conduct">
+                Report an Issue
+              </Link>
+              .
             </p>
 
             <h2>The Quick Version</h2>
@@ -74,8 +77,11 @@ const CodeOfConduct = ({ location }) => {
               please notify a QueerJS organizer as soon as possible.
             </p>
             <p>
-              If you can’t find the organizer, reach out to {organizer.name} at {organizer.email} /{' '}
-              {organizer.phoneNumber} / {organizer.twitterHandle}
+              If you can’t find the organizer, please{' '}
+              <Link to="/report" title="Code of Conduct">
+                Report an Issue
+              </Link>
+              .
             </p>
             <p>
               Conference staff will be happy to help participants and assist those experiencing

diff --git a/src/pages/flags.js b/src/pages/flags.js
@@ -58,15 +58,13 @@ const OrganizersPage = ({ location }) => {
         </Panel>
       </main>
       <Thanks
-        organizers={[]}
         thanks={[
           {
             link: 'https://www.flaticon.com',
             name: 'Thank you to flaticon',
             reason: 'icons'
           }
         ]}
-        site={site}
       />
     </Layout>
   )

diff --git a/src/pages/report.js b/src/pages/report.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import SEO from '../components/seo'
+import Layout from '../containers/layout'
+import Panel from '../components/Panel'
+import { Link } from 'gatsby'
+
+const Report = () => {
+  const contactInfo = {
+    email: '[email protected]',
+    twitterHandle: '@QueerJS'
+  }
+
+  return (
+    <Layout>
+      <SEO
+        title="QueerJS - Code Of Conduct"
+        description="A meetup for everyone where Queer Speakers take the stage"
+      />
+      <main>
+        <h1 hidden>Welcome to QueerJS</h1>
+        <Panel heading="Code of Conduct - Report An Issue">
+          <section
+            css={`
+              line-height: 1.5;
+            `}
+          >
+            <p>
+              We want QueerJS to be a safe and inclusive environment. That’s why we ask our
+              attendees to follow our{' '}
+              <Link to="/code-of-conduct" title="Code of Conduct">
+                Code of Conduct
+              </Link>
+              !
+            </p>
+            <p>
+              In the unfortunate case that you see someone violating the code of conduct, here are
+              some ways you can report it to us:
+            </p>
+            <ul>
+              <li>- Send a DM to {contactInfo.twitterHandle}</li>
+              <li>
+                - Let a{' '}
+                <Link to="/organizers" title="Code of Conduct">
+                  Core Team
+                </Link>{' '}
+                organizer know, either in person or via Twitter.
+              </li>
+              <li>- Send an email to <a href={`mailto:${contactInfo.email}`}>{contactInfo.email}</a></li>
+            </ul>
+          </section>
+        </Panel>
+      </main>
+    </Layout>
+  )
+}
+
+export default Report