From fe1e8f7bc9773e21f94981c4638b4b576f4f674d Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 20 Nov 2017 13:54:13 +0530
Subject: [PATCH 01/24] added jsx in same line prettier

---
 .prettierrc    | 3 ++-
 pages/index.js | 6 ++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index aa41fe5d7..2f0bc5363 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,6 @@
   "printWidth": 120,
   "semi": true,
   "trailingComma": "es5",
-  "singleQuote": true
+  "singleQuote": true,
+  "jsxBracketSameLine": true
 }
diff --git a/pages/index.js b/pages/index.js
index 9f16d170a..a443c828d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -179,8 +179,7 @@ export default () => (
               className="box"
               width={[1]}
               pt={[2, 3]}
-              pb={[4, 4, 0]}
-            >
+              pb={[4, 4, 0]}>
               <Link href={'/space'}>
                 <Button href={'/space'} medium>
                   LEARN MORE ABOUT HACKERSPACE
@@ -246,8 +245,7 @@ export default () => (
               rel="noopener noreferrer"
               target="_blank"
               inverted
-              large
-            >
+              large>
               Join Discord
             </Button>
           </Box>

From e2d275982db07f934c15845b82a5cc2f733cc4ee Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 20 Nov 2017 13:56:10 +0530
Subject: [PATCH 02/24] added jsx in same line prettier pck.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index de6fa1dce..7cb58f9ed 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
   },
   "lint-staged": {
     "*.js": [
-      "prettier --write --single-quote --print-width=120 --trailing-comma=es5",
+      "prettier --write --single-quote --print-width=120 --trailing-comma=es5 --jsx-bracket-same-line",
       "xo",
       "jest --findRelatedTests",
       "git add"

From 81a4a9650e2df886df03d995705992545186bd00 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 20 Nov 2017 15:20:28 +0530
Subject: [PATCH 03/24] updated rm

---
 README.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 07212ca24..4787b6b39 100644
--- a/README.md
+++ b/README.md
@@ -10,11 +10,15 @@
 
 This project mainly uses
 
-- [Next.js](https://github.com/zeit/next.js/)
-- [emotion](https://emotion.sh) As css-in-js library
+* [ReactJS](https://reactjs.org/) - A declarative, efficient, and flexible JavaScript library for building user
+  interfaces.
+* [Next.js](https://github.com/zeit/next.js/) - A minimalistic framework for server-rendered React applications.
+* [emotion](https://emotion.sh) - A high performance, lightweight css-in-js library.
 
 ### [Join our community here](https://www.coderplex.org)
 
 ## Contributing
 
-We welcome pull requests from hackerspace members (our students) and seasoned JavaScript developers alike! Please follow [these steps](CONTRIBUTING.md) to contribute.
+We welcome pull requests from beginners and seasoned javaScript developers alike!. You can work on open issues, fix bugs
+and more. Be sure to read our Contributing guide for hassel free contribution. <br/> This project follows ✨
+[All Contributors](https://github.com/kentcdodds/all-contributors) ✨ guidlines to recognize all contributors.

From bd4d527016097bd8afc2846a1add01c861061a09 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 20 Nov 2017 15:22:18 +0530
Subject: [PATCH 04/24] link cnt in rm added

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4787b6b39..340c5697a 100644
--- a/README.md
+++ b/README.md
@@ -20,5 +20,6 @@ This project mainly uses
 ## Contributing
 
 We welcome pull requests from beginners and seasoned javaScript developers alike!. You can work on open issues, fix bugs
-and more. Be sure to read our Contributing guide for hassel free contribution. <br/> This project follows ✨
-[All Contributors](https://github.com/kentcdodds/all-contributors) ✨ guidlines to recognize all contributors.
+and more. Be sure to read our [contributing guide](https://github.com/coderplex/coderplex/blob/v2/CONTRIBUTING.md) for
+hassel free contribution. <br/> This project follows ✨
+[All Contributors](https://github.com/kentcdodds/all-contributors) ✨ specifications to recognize all contributors.

From db34bf41dfb91580b5c9623213b72217f953fe7b Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 20 Nov 2017 16:13:41 +0530
Subject: [PATCH 05/24] ghost button style made

---
 utils/base.styles.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/utils/base.styles.js b/utils/base.styles.js
index 6d613a889..23d9d30b3 100644
--- a/utils/base.styles.js
+++ b/utils/base.styles.js
@@ -1,5 +1,7 @@
 import styled, { css } from 'react-emotion';
 
+const purplePrimary = '#7657fb';
+const whiteFull = '#ffffff';
 export const breakpoints = {
   xs: '@media screen and (max-width: 40em)',
   sm: '@media screen and (min-width: 40em) and (max-width: 52em)',
@@ -45,15 +47,18 @@ export const baseButton = css`
 
 export const Button = styled.a`
   ${baseButton};
-  background: ${props => (props.inverted ? '#7657fb' : '#fff')}
-  color: ${props => (props.inverted ? '#fff' : '#222')}
+  background: ${props => (props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff')}
+  color: ${props => (props.inverted ? '#fff' : props.ghost ? purplePrimary : '#222')}
   padding: ${props => (props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem')};
   font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '1rem')}
+  outline:${props => (props.ghost ? `3px solid ${purplePrimary}` : 'none')}
+  outline-offset:${props => (props.ghost ? '-3px' : '0px')}
   cursor: pointer;
   user-select: none;
   -webkit-touch-callout: none;
   &:hover {
-    background: ${props => (props.inverted ? '#6f19ed' : '#eee')};
+    background: ${props => (props.inverted ? '#6f19ed' : props.ghost ? purplePrimary : '#eee')};
+    color: ${props => (props.inverted ? '#fff' : props.ghost ? whiteFull : '#222')}
   }
 `;
 

From 95748ca4cb2cc2e87019571460c301744a1eca38 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 20 Nov 2017 20:30:27 +0530
Subject: [PATCH 06/24] made layout of event card in css grid

---
 components/events/event-card.js | 72 +++++++++++++++++++++++++++++++++
 utils/base.styles.js            |  6 ++-
 2 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/components/events/event-card.js b/components/events/event-card.js
index e69de29bb..ab4b7e74f 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'react-emotion';
+
+import { Button, graySecondary } from '../../utils/base.styles';
+
+const Card = styled.a`
+  text-decoration: none;
+  width: calc(100% - 40px);
+  margin: 20px;
+  padding-right: 10px;
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+  grid-template-rows: 1.2fr 1fr 1fr;
+  grid-template-areas:
+    'photo title'
+    'photo location'
+    'photo info';
+  background: #fff;
+  border: 1px solid ${graySecondary};
+  transition: all 0.25s;
+  & .photo {
+    grid-area: photo;
+    width: 120px;
+    height: auto;
+  }
+  & .title {
+    grid-area: title;
+  }
+  & .location {
+    grid-area: location;
+  }
+  & .info {
+    grid-area: info;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: stretch;
+    align-items: center;
+  }
+  & .infotext {
+    order: 0;
+    flex: 0 1 auto;
+    align-self: auto;
+  }
+  & .rsvp {
+    order: 0;
+    align-items: flex-end;
+    flex: 1 1 auto;
+    align-self: auto;
+    text-align: right;
+    }
+}
+`;
+
+export default () => (
+  <div>
+    <Card>
+      <img className="photo" src="http://via.placeholder.com/100x100" />
+      <div className="title">A huge Meetup</div>
+      <div className="location">Location</div>
+      <div className="info">
+        <div className="infotext">Time</div>
+        <div className="infotext">Time</div>
+        <div className="infotext">Time</div>
+        <div className="rsvp">
+          <Button ghost>RSVP</Button>
+        </div>
+      </div>
+    </Card>
+  </div>
+);
diff --git a/utils/base.styles.js b/utils/base.styles.js
index 23d9d30b3..666fb4776 100644
--- a/utils/base.styles.js
+++ b/utils/base.styles.js
@@ -1,7 +1,9 @@
 import styled, { css } from 'react-emotion';
 
-const purplePrimary = '#7657fb';
-const whiteFull = '#ffffff';
+export const purplePrimary = '#7657fb';
+export const whiteFull = '#ffffff';
+export const graySecondary = '#b9b9b9';
+
 export const breakpoints = {
   xs: '@media screen and (max-width: 40em)',
   sm: '@media screen and (min-width: 40em) and (max-width: 52em)',

From d1a9b9693938e76659a4bb71a444094fc01324ab Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 20 Nov 2017 21:36:07 +0530
Subject: [PATCH 07/24] events card with icons completed

---
 components/events/event-card.js | 46 +++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/components/events/event-card.js b/components/events/event-card.js
index ab4b7e74f..2d308b886 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -1,5 +1,10 @@
 import React from 'react';
 import styled from 'react-emotion';
+import TimeIcon from 'react-icons/lib/md/access-time';
+import LocationIcon from 'react-icons/lib/md/location-on';
+import AttendeesIcon from 'react-icons/lib/md/people';
+import TicketIcon from 'react-icons/lib/md/exit-to-app';
+import StreamIcon from 'react-icons/lib/md/desktop-mac';
 
 import { Button, graySecondary } from '../../utils/base.styles';
 
@@ -22,12 +27,18 @@ const Card = styled.a`
     grid-area: photo;
     width: 120px;
     height: auto;
+    margin-right: 10px;
   }
   & .title {
     grid-area: title;
+    font-size: 1.5rem;
+    color: #000;
+    font-weight: 400;
+    padding-top: 10px;
   }
   & .location {
     grid-area: location;
+    padding-top: 10px;
   }
   & .info {
     grid-area: info;
@@ -42,6 +53,7 @@ const Card = styled.a`
     order: 0;
     flex: 0 1 auto;
     align-self: auto;
+    margin-right: 1rem;
   }
   & .rsvp {
     order: 0;
@@ -50,21 +62,39 @@ const Card = styled.a`
     align-self: auto;
     text-align: right;
     }
+  & .icons{
+    font-size: 1.1rem;
+    margin-right: 0.25rem;
+  }
 }
 `;
 
-export default () => (
+export default props => (
   <div>
     <Card>
-      <img className="photo" src="http://via.placeholder.com/100x100" />
-      <div className="title">A huge Meetup</div>
-      <div className="location">Location</div>
+      <img className="photo" src={props.image} />
+      <div className="title">{props.title}</div>
+      <div className="location">
+        <LocationIcon className="icons" />
+        {props.location}
+      </div>
       <div className="info">
-        <div className="infotext">Time</div>
-        <div className="infotext">Time</div>
-        <div className="infotext">Time</div>
+        <div className="infotext">
+          <TimeIcon className="icons" />
+          {props.time}
+        </div>
+        <div className="infotext">
+          <AttendeesIcon className="icons" />
+          {props.attendees}
+        </div>
+        <div className="infotext">
+          {props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
+          {props.online ? 'Online' : 'Free entry'}
+        </div>
         <div className="rsvp">
-          <Button ghost>RSVP</Button>
+          <Button href={props.link} ghost>
+            {props.isPast ? 'View' : 'RSVP'}
+          </Button>
         </div>
       </div>
     </Card>

From 60b3decd55ee31d678aae46075703049edeacd3a Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 20 Nov 2017 21:44:16 +0530
Subject: [PATCH 08/24] events component added in page event

---
 pages/events.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pages/events.js b/pages/events.js
index 4f4cfeb8f..81834d029 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -6,6 +6,7 @@ import { space } from 'styled-system';
 import Layout from '../components/common/layout';
 import BannerSection from '../components/common/banner';
 import { Container, Title, SubTitle } from '../utils/base.styles';
+import EventCard from '../components/events/event-card';
 
 const EventsSection = styled.section`
   ${space};
@@ -26,6 +27,7 @@ export default () => (
             <SubTitle inverted color="#222">
               No events as of now, check back later
             </SubTitle>
+            <EventCard />
           </Box>
         </Flex>
         <Flex direction="column" align="center" justify="center">

From 6cae447c305d3882a56de34d2a875bf4da3b87b3 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 20 Nov 2017 21:53:18 +0530
Subject: [PATCH 09/24] converted events to class comp

---
 pages/events.js | 68 +++++++++++++++++++++++++++----------------------
 1 file changed, 38 insertions(+), 30 deletions(-)

diff --git a/pages/events.js b/pages/events.js
index 81834d029..a6da527ff 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -14,33 +14,41 @@ const EventsSection = styled.section`
   position: relative;
 `;
 
-export default () => (
-  <Layout>
-    <BannerSection textInverted title="Online & Offline Events" subTitle="Because you cannot change the world alone" />
-    <EventsSection py={[2, 4]} px={[2, 1]}>
-      <Container>
-        <Flex pb={[2, 4]} direction="column" align="center" justify="center">
-          <Box width={[1, 0.75]}>
-            <Title inverted color="#222">
-              Upcoming Events
-            </Title>
-            <SubTitle inverted color="#222">
-              No events as of now, check back later
-            </SubTitle>
-            <EventCard />
-          </Box>
-        </Flex>
-        <Flex direction="column" align="center" justify="center">
-          <Box width={[1, 0.75]}>
-            <Title inverted color="#222">
-              Past Events
-            </Title>
-            <SubTitle inverted color="#222">
-              Loading...
-            </SubTitle>
-          </Box>
-        </Flex>
-      </Container>
-    </EventsSection>
-  </Layout>
-);
+export default class Events extends React.Component {
+  render() {
+    return (
+      <Layout>
+        <BannerSection
+          textInverted
+          title="Online & Offline Events"
+          subTitle="Because you cannot change the world alone"
+        />
+        <EventsSection py={[2, 4]} px={[2, 1]}>
+          <Container>
+            <Flex pb={[2, 4]} direction="column" align="center" justify="center">
+              <Box width={[1, 0.75]}>
+                <Title inverted color="#222">
+                  Upcoming Events
+                </Title>
+                <SubTitle inverted color="#222">
+                  No events as of now, check back later
+                </SubTitle>
+                <EventCard />
+              </Box>
+            </Flex>
+            <Flex direction="column" align="center" justify="center">
+              <Box width={[1, 0.75]}>
+                <Title inverted color="#222">
+                  Past Events
+                </Title>
+                <SubTitle inverted color="#222">
+                  Loading...
+                </SubTitle>
+              </Box>
+            </Flex>
+          </Container>
+        </EventsSection>
+      </Layout>
+    );
+  }
+}

From b751b1223ada505e40d3942ae0369b3d5a82fa4e Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 20 Nov 2017 23:05:09 +0530
Subject: [PATCH 10/24] changed a to div for card

---
 components/events/event-card.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/events/event-card.js b/components/events/event-card.js
index 2d308b886..59aeedcf6 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -8,7 +8,7 @@ import StreamIcon from 'react-icons/lib/md/desktop-mac';
 
 import { Button, graySecondary } from '../../utils/base.styles';
 
-const Card = styled.a`
+const Card = styled.div`
   text-decoration: none;
   width: calc(100% - 40px);
   margin: 20px;

From 65b470c53fb7e152f361089ee147c1da8fccbdad Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Tue, 21 Nov 2017 00:30:19 +0530
Subject: [PATCH 11/24] reduced max line of prettier to 80 as in laptops it was
 a problem event card done except for time

---
 .prettierrc                       |   2 +-
 components/common/footer/index.js |  39 +++++++++---
 components/common/header/index.js |  41 ++++++++----
 components/common/meta.js         |  39 ++++++++++--
 components/events/event-card.js   |  27 +++++---
 package.json                      |   2 +-
 pages/events.js                   | 102 +++++++++++++++++++++++++++---
 pages/index.js                    |  49 ++++++++++----
 pages/learn/subject.js            |   6 +-
 pages/login.js                    |   6 +-
 pages/space.js                    |  25 +++++---
 utils/base.styles.js              |  23 +++++--
 utils/mock-data.js                |  24 ++++---
 13 files changed, 300 insertions(+), 85 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 2f0bc5363..e5ae8a1fe 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "printWidth": 120,
+  "printWidth": 80,
   "semi": true,
   "trailingComma": "es5",
   "singleQuote": true,
diff --git a/components/common/footer/index.js b/components/common/footer/index.js
index 5285ba07c..73c23aed8 100644
--- a/components/common/footer/index.js
+++ b/components/common/footer/index.js
@@ -151,11 +151,14 @@ export default class FooterBar extends React.Component {
 
   async postSubscriberEmail(subscribersEmail) {
     await this.setState({ submittingEmail: true });
-    const postSubscriberEmailRequest = await fetch(`${baseEventsURL}${subscribeURL}`, {
-      method: 'post',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ email: subscribersEmail }),
-    });
+    const postSubscriberEmailRequest = await fetch(
+      `${baseEventsURL}${subscribeURL}`,
+      {
+        method: 'post',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: subscribersEmail }),
+      }
+    );
     if (postSubscriberEmailRequest.status === 200) {
       this.setState({
         subscriberEmailPosted: true,
@@ -174,8 +177,17 @@ export default class FooterBar extends React.Component {
       <Footer>
         <Container>
           <Flex wrap py={[0, 3]}>
-            <Flex align="center" direction="column" justify="center" width={[1, 1, 1 / 2]} px={[2, 3]} py={[3, 0]}>
-              <Title>We are constantly updating our platform. Do subscribe to stay informed.</Title>
+            <Flex
+              align="center"
+              direction="column"
+              justify="center"
+              width={[1, 1, 1 / 2]}
+              px={[2, 3]}
+              py={[3, 0]}>
+              <Title>
+                We are constantly updating our platform. Do subscribe to stay
+                informed.
+              </Title>
               {this.state.subscriberEmailPosted ? (
                 <h3>Thank you, we will keep you posted</h3>
               ) : (
@@ -187,15 +199,22 @@ export default class FooterBar extends React.Component {
                     placeholder="Enter your email..."
                   />
                   <button type="submit" disabled={this.state.submittingEmail}>
-                    {this.state.submittingEmail ? 'Subscribing...' : 'Subscribe'}
+                    {this.state.submittingEmail
+                      ? 'Subscribing...'
+                      : 'Subscribe'}
                   </button>
                 </Form>
               )}
-              <Message className={this.state.emailSubmittingError ? 'error' : ''}>
+              <Message
+                className={this.state.emailSubmittingError ? 'error' : ''}>
                 <p>{this.state.emailSubmittingError}</p>
               </Message>
             </Flex>
-            <Flex className="follow" align="center" justify="center" width={[1, 1, 1 / 2]}>
+            <Flex
+              className="follow"
+              align="center"
+              justify="center"
+              width={[1, 1, 1 / 2]}>
               <Box p={[1, 2]}>
                 <Title>Follow Us</Title>
                 <SocialLinks>
diff --git a/components/common/header/index.js b/components/common/header/index.js
index 6a8192b91..20bb8f90e 100644
--- a/components/common/header/index.js
+++ b/components/common/header/index.js
@@ -7,7 +7,14 @@ import Link from 'next/link';
 import MetaInfo from '../../../config/meta-info';
 import { Container } from '../../../utils/base.styles';
 import Meta from '../meta';
-import { Header, Nav, NavLinks, NavLink, NavLogo, MobileMenuBtn } from './index.styles';
+import {
+  Header,
+  Nav,
+  NavLinks,
+  NavLink,
+  NavLogo,
+  MobileMenuBtn,
+} from './index.styles';
 
 Router.onRouteChangeStart = () => {
   NProgress.start();
@@ -61,7 +68,8 @@ class NavBar extends React.Component {
   };
   render() {
     const pathName = this.props.router.pathname;
-    const metaData = MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
+    const metaData =
+      MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
     const title = metaData.title;
     const description = metaData.description;
     const image = metaData.image;
@@ -71,7 +79,9 @@ class NavBar extends React.Component {
           <Meta title={title} description={description} image={image} />
           <Container>
             <Nav>
-              <MobileMenuBtn onClick={this.toggleMenu} className={this.state.menuOpen ? 'open' : ''}>
+              <MobileMenuBtn
+                onClick={this.toggleMenu}
+                className={this.state.menuOpen ? 'open' : ''}>
                 <span>Menu</span>
               </MobileMenuBtn>
               <NavLogo>
@@ -83,18 +93,23 @@ class NavBar extends React.Component {
                 </Link>
               </NavLogo>
               <NavLinks className={this.state.menuOpen ? 'open' : ''}>
-                {this.state.navItems.filter(item => !item.external).map(item => (
-                  <NavLink key={item.path}>
-                    <Link href={item.path}>
-                      <a className={pathName === item.path ? 'active' : ''}>
-                        <span>{item.title}</span>
-                      </a>
-                    </Link>
-                  </NavLink>
-                ))}
+                {this.state.navItems
+                  .filter(item => !item.external)
+                  .map(item => (
+                    <NavLink key={item.path}>
+                      <Link href={item.path}>
+                        <a className={pathName === item.path ? 'active' : ''}>
+                          <span>{item.title}</span>
+                        </a>
+                      </Link>
+                    </NavLink>
+                  ))}
                 {this.state.navItems.filter(item => item.external).map(item => (
                   <NavLink key={item.path}>
-                    <a href={item.path} rel="noopener noreferrer" className={pathName === item.path ? 'active' : ''}>
+                    <a
+                      href={item.path}
+                      rel="noopener noreferrer"
+                      className={pathName === item.path ? 'active' : ''}>
                       <span>{item.title}</span>
                     </a>
                   </NavLink>
diff --git a/components/common/meta.js b/components/common/meta.js
index 0e8f99735..58e80494c 100644
--- a/components/common/meta.js
+++ b/components/common/meta.js
@@ -8,24 +8,51 @@ export default ({ title, description, image }) => {
       <meta name="viewport" content="width=device-width,initial-scale=1" />
       <meta name="mobile-web-app-capable" content="yes" />
       <meta name="apple-mobile-web-app-capable" content="yes" />
-      <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png" />
-      <link rel="icon" type="image/png" href="/static/favicons/favicon-32x32.png" sizes="32x32" />
-      <link rel="icon" type="image/png" href="/static/favicons/favicon-16x16.png" sizes="16x16" />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/static/favicons/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        href="/static/favicons/favicon-32x32.png"
+        sizes="32x32"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        href="/static/favicons/favicon-16x16.png"
+        sizes="16x16"
+      />
       <link rel="manifest" href="/static/favicons/manifest.json" />
-      <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#c201b9" />
+      <link
+        rel="mask-icon"
+        href="/static/favicons/safari-pinned-tab.svg"
+        color="#c201b9"
+      />
       <link rel="shortcut icon" href="/static/favicons/favicon.ico" />
       <link
         rel="stylesheet"
         href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"
       />
-      <meta name="msapplication-config" content="/static/favicons/browserconfig.xml" />
+      <meta
+        name="msapplication-config"
+        content="/static/favicons/browserconfig.xml"
+      />
       <meta name="theme-color" content="#c201b9" />
       <title>{title}</title>
       <meta name="description" content={description} />
       <meta property="og:type" content="website" />
       <meta property="og:title" content={title} />
       <meta property="og:url" content="https://coderplex.org" />
-      <meta property="og:image" content={image || 'https://coderplex.org/static/favicons/android-chrome-512x512.png'} />
+      <meta
+        property="og:image"
+        content={
+          image ||
+          'https://coderplex.org/static/favicons/android-chrome-512x512.png'
+        }
+      />
       <meta property="og:site_name" content="coderplex.org" />
       <meta property="og:description" content={description} />
     </Head>
diff --git a/components/events/event-card.js b/components/events/event-card.js
index 59aeedcf6..0f6789020 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -10,8 +10,9 @@ import { Button, graySecondary } from '../../utils/base.styles';
 
 const Card = styled.div`
   text-decoration: none;
-  width: calc(100% - 40px);
-  margin: 20px;
+  width: 100%;
+  min-height: 150px;
+  margin-top: 20px;
   padding-right: 10px;
   display: grid;
   grid-template-columns: 1fr 4fr;
@@ -73,7 +74,7 @@ export default props => (
   <div>
     <Card>
       <img className="photo" src={props.image} />
-      <div className="title">{props.title}</div>
+      <div className="title">{props.name}</div>
       <div className="location">
         <LocationIcon className="icons" />
         {props.location}
@@ -85,15 +86,23 @@ export default props => (
         </div>
         <div className="infotext">
           <AttendeesIcon className="icons" />
-          {props.attendees}
-        </div>
-        <div className="infotext">
-          {props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
-          {props.online ? 'Online' : 'Free entry'}
+          {props.tense === 'past'
+            ? `${props.attendees} attended`
+            : `${props.attendees} attending`}
         </div>
+        {props.tense === 'past' ? null : (
+          <div className="infotext">
+            {props.online ? (
+              <StreamIcon className="icons" />
+            ) : (
+              <TicketIcon className="icons" />
+            )}
+            {props.online ? 'Free session' : 'Free entry'}
+          </div>
+        )}
         <div className="rsvp">
           <Button href={props.link} ghost>
-            {props.isPast ? 'View' : 'RSVP'}
+            {props.tense === 'past' ? 'View' : 'RSVP'}
           </Button>
         </div>
       </div>
diff --git a/package.json b/package.json
index 7cb58f9ed..3087f98ad 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
   },
   "lint-staged": {
     "*.js": [
-      "prettier --write --single-quote --print-width=120 --trailing-comma=es5 --jsx-bracket-same-line",
+      "prettier --write --single-quote --print-width=80 --trailing-comma=es5 --jsx-bracket-same-line",
       "xo",
       "jest --findRelatedTests",
       "git add"
diff --git a/pages/events.js b/pages/events.js
index a6da527ff..f6b4c11d6 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import fetch from 'isomorphic-unfetch';
 import { Flex, Box } from 'grid-emotion';
 import styled from 'react-emotion';
 import { space } from 'styled-system';
@@ -6,6 +7,7 @@ import { space } from 'styled-system';
 import Layout from '../components/common/layout';
 import BannerSection from '../components/common/banner';
 import { Container, Title, SubTitle } from '../utils/base.styles';
+import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
 import EventCard from '../components/events/event-card';
 
 const EventsSection = styled.section`
@@ -15,6 +17,89 @@ const EventsSection = styled.section`
 `;
 
 export default class Events extends React.Component {
+  state = {
+    pastEvents: [],
+    futureEvents: [],
+    fetchError: null,
+    loading: true,
+  };
+
+  async componentDidMount() {
+    try {
+      let pastEvents;
+      let futureEvents;
+      const pastEventsResponse = await fetch(
+        `${baseEventsURL}${pastEventsURL}`
+      );
+      if (pastEventsResponse.ok) {
+        pastEvents = await pastEventsResponse.json();
+        console.log(pastEvents);
+      } else {
+        throw new Error('Failed to Retrieve past events');
+      }
+      const futureEventsResponse = await fetch(
+        `${baseEventsURL}${futureEventsURL}`
+      );
+      if (futureEventsResponse.ok) {
+        futureEvents = await futureEventsResponse.json();
+        console.log(futureEvents);
+      } else {
+        throw new Error('Failed to retieve future events');
+      }
+      await this.setState({
+        pastEvents,
+        futureEvents,
+        fetchError: null,
+        loading: false,
+      });
+    } catch (err) {
+      console.log(err);
+      await this.setState({
+        pastEvents: null,
+        futureEvents: null,
+        fetchError: err.message,
+        loading: false,
+      });
+    }
+  }
+
+  renderEvents(events) {
+    if (this.state.loading) {
+      return (
+        <SubTitle inverted color="#222">
+          Loading..
+        </SubTitle>
+      );
+    }
+    if (events.length === 0) {
+      return (
+        <SubTitle inverted color="#222">
+          No upcoming events yet, check back later
+        </SubTitle>
+      );
+    }
+    return (
+      <div>
+        {events.map(event => {
+          const regexForImageSrc = /<img.*?src="([^">]*\/([^">]*?))".*?>/g;
+          const imageSrc = regexForImageSrc.exec(event.description);
+          return (
+            <EventCard
+              key={event.id}
+              image={imageSrc ? imageSrc[1] : ''}
+              location={event.venue ? event.venue.name : 'Online'}
+              link={event.link}
+              name={event.name}
+              tense={event.status}
+              attendees={event.yes_rsvp_count}
+              time={event.time}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
   render() {
     return (
       <Layout>
@@ -25,25 +110,24 @@ export default class Events extends React.Component {
         />
         <EventsSection py={[2, 4]} px={[2, 1]}>
           <Container>
-            <Flex pb={[2, 4]} direction="column" align="center" justify="center">
+            <Flex
+              pb={[2, 4]}
+              direction="column"
+              align="center"
+              justify="center">
               <Box width={[1, 0.75]}>
                 <Title inverted color="#222">
                   Upcoming Events
                 </Title>
-                <SubTitle inverted color="#222">
-                  No events as of now, check back later
-                </SubTitle>
-                <EventCard />
+                {this.renderEvents(this.state.futureEvents)}
               </Box>
             </Flex>
             <Flex direction="column" align="center" justify="center">
               <Box width={[1, 0.75]}>
                 <Title inverted color="#222">
-                  Past Events
+                  Recent Events
                 </Title>
-                <SubTitle inverted color="#222">
-                  Loading...
-                </SubTitle>
+                {this.renderEvents(this.state.pastEvents)}
               </Box>
             </Flex>
           </Container>
diff --git a/pages/index.js b/pages/index.js
index a443c828d..8e8a1b447 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,7 +5,13 @@ import { Flex, Box } from 'grid-emotion';
 import take from 'lodash.take';
 import Link from 'next/link';
 
-import Hide, { Container, Button, Title, SubTitle, breakpoints } from '../utils/base.styles';
+import Hide, {
+  Container,
+  Button,
+  Title,
+  SubTitle,
+  breakpoints,
+} from '../utils/base.styles';
 import { listOfSubjects } from '../utils/mock-data';
 import Layout from '../components/common/layout';
 import SubjectCard from '../components/learn/subject-card';
@@ -141,7 +147,8 @@ export default () => (
           <Box width={1}>
             <Title inverted>Open Source Learning Guides</Title>
             <SubTitle inverted>
-              Our guides are crowd-sourced recommendations of free online resources to learn any technology
+              Our guides are crowd-sourced recommendations of free online
+              resources to learn any technology
             </SubTitle>
           </Box>
           <Box width={1}>
@@ -164,14 +171,21 @@ export default () => (
     <SpaceSection>
       <Container>
         <Flex justify="center" wrap>
-          <Box order={[2, 2, 1]} className="box" width={[1, 1, 1 / 2]} py={[0, 2, 3]} px={[2, 4, 3]}>
+          <Box
+            order={[2, 2, 1]}
+            className="box"
+            width={[1, 1, 1 / 2]}
+            py={[0, 2, 3]}
+            px={[2, 4, 3]}>
             <Title>Offline Co-Learning Spaces</Title>
             <SubTitle small>
-              Physical spaces where you can come down to engage in self learning, peer-learning and collaboration.
+              Physical spaces where you can come down to engage in self
+              learning, peer-learning and collaboration.
             </SubTitle>
             <SubTitle small>
-              These are dynamic learning environments where everyone learns at their own pace and compliments each
-              other. We also organize weekly group activities like Open Source evenings, casual hackathons etc.
+              These are dynamic learning environments where everyone learns at
+              their own pace and compliments each other. We also organize weekly
+              group activities like Open Source evenings, casual hackathons etc.
             </SubTitle>
             <Box
               mx={['auto', 'auto', 0]}
@@ -187,7 +201,13 @@ export default () => (
               </Link>
             </Box>
           </Box>
-          <Box order={1} className="box" width={[1, 1, 1 / 2]} pt={4} pb={[0, 1, 4]} px={[3, 4, 3]}>
+          <Box
+            order={1}
+            className="box"
+            width={[1, 1, 1 / 2]}
+            pt={4}
+            pb={[0, 1, 4]}
+            px={[3, 4, 3]}>
             <img
               className="space__img"
               alt="sapce__img"
@@ -209,12 +229,19 @@ export default () => (
               />
             </Hide>
           </Box>
-          <Box order={1} width={[1, 1, 1 / 2]} px={[2, 3]} pt={[3, 4, 0]} pb={[4, 4, 0]}>
+          <Box
+            order={1}
+            width={[1, 1, 1 / 2]}
+            px={[2, 3]}
+            pt={[3, 4, 0]}
+            pb={[4, 4, 0]}>
             <Title>Online & Offline Events</Title>
             <SubTitle small>
-              We do frequent online and offline events, covering broad range of topics, from Web Development to Data
-              Science. The goal of these events are to share knowledge, connect with people and enable collaboration. We
-              also partner with local comunities to help them reach a wider audience.
+              We do frequent online and offline events, covering broad range of
+              topics, from Web Development to Data Science. The goal of these
+              events are to share knowledge, connect with people and enable
+              collaboration. We also partner with local comunities to help them
+              reach a wider audience.
             </SubTitle>
             <Box className="box" width={[1]} pt={[2]} px={[3, 0]}>
               <Hide md lg>
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
index 4e4c592de..4068f22f3 100644
--- a/pages/learn/subject.js
+++ b/pages/learn/subject.js
@@ -6,7 +6,11 @@ import BannerSection from '../../components/common/banner';
 export default props => {
   return (
     <Layout>
-      <BannerSection textInverted title={props.url.query.id.toUpperCase()} subTitle="Coming Soon..." />
+      <BannerSection
+        textInverted
+        title={props.url.query.id.toUpperCase()}
+        subTitle="Coming Soon..."
+      />
     </Layout>
   );
 };
diff --git a/pages/login.js b/pages/login.js
index 0caf64ee2..a3ac95bfa 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -6,7 +6,11 @@ import BannerSection from '../components/common/banner';
 export default () => {
   return (
     <Layout>
-      <BannerSection textInverted title="Login / Register" subTitle="Coming Soon..." />
+      <BannerSection
+        textInverted
+        title="Login / Register"
+        subTitle="Coming Soon..."
+      />
     </Layout>
   );
 };
diff --git a/pages/space.js b/pages/space.js
index e062afd8c..b945356c9 100644
--- a/pages/space.js
+++ b/pages/space.js
@@ -72,7 +72,8 @@ const forWhomPoints = [
 const activities = [
   {
     day: 'Daily',
-    task: 'You will engage in daily code review and pair programming exercises with other members.',
+    task:
+      'You will engage in daily code review and pair programming exercises with other members.',
   },
   {
     day: 'Wednesday',
@@ -86,15 +87,18 @@ const activities = [
   },
   {
     day: 'Friday',
-    task: 'We will have casual hackathons, where everyone will participate to build a project, big or small.',
+    task:
+      'We will have casual hackathons, where everyone will participate to build a project, big or small.',
   },
   {
     day: 'Saturday',
-    task: 'In the evening, we will screen a tech-related documentary, movie or TV show.',
+    task:
+      'In the evening, we will screen a tech-related documentary, movie or TV show.',
   },
   {
     day: 'Sunday',
-    task: 'Members will present their work i.e. projects or new topics they have made or learned in the past week',
+    task:
+      'Members will present their work i.e. projects or new topics they have made or learned in the past week',
   },
 ];
 
@@ -119,12 +123,16 @@ export default () => (
           Activites and Schedule
         </Title>
         <SubTitle inverted>
-          We will help you pick a technology and provide you with learning guides to learn and build something on a
-          daily basis.
+          We will help you pick a technology and provide you with learning
+          guides to learn and build something on a daily basis.
         </SubTitle>
         <ActivityTimeline>
           {activities.map(activity => (
-            <ActiviteEvent key={activity.day} title={activity.day} icon={<FaCalender />} iconColor="#222">
+            <ActiviteEvent
+              key={activity.day}
+              title={activity.day}
+              icon={<FaCalender />}
+              iconColor="#222">
               {activity.task}
             </ActiviteEvent>
           ))}
@@ -137,7 +145,8 @@ export default () => (
           Pricing
         </Title>
         <SubTitle inverted>
-          INR 1000/- per month. For membership mail us at <a href="mailto:space@codeplex.org">space@coderplex.org</a>
+          INR 1000/- per month. For membership mail us at{' '}
+          <a href="mailto:space@codeplex.org">space@coderplex.org</a>
         </SubTitle>
       </Container>
     </PricingSection>
diff --git a/utils/base.styles.js b/utils/base.styles.js
index 666fb4776..175200fce 100644
--- a/utils/base.styles.js
+++ b/utils/base.styles.js
@@ -49,25 +49,34 @@ export const baseButton = css`
 
 export const Button = styled.a`
   ${baseButton};
-  background: ${props => (props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff')}
-  color: ${props => (props.inverted ? '#fff' : props.ghost ? purplePrimary : '#222')}
-  padding: ${props => (props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem')};
-  font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '1rem')}
+  background: ${props =>
+    props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff'}
+  color: ${props =>
+    props.inverted ? '#fff' : props.ghost ? purplePrimary : '#222'}
+  padding: ${props =>
+    props.large
+      ? '0.8rem 2.25rem'
+      : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem'};
+  font-size: ${props =>
+    props.large ? '1.8rem' : props.medium ? '1rem' : '1rem'}
   outline:${props => (props.ghost ? `3px solid ${purplePrimary}` : 'none')}
   outline-offset:${props => (props.ghost ? '-3px' : '0px')}
   cursor: pointer;
   user-select: none;
   -webkit-touch-callout: none;
   &:hover {
-    background: ${props => (props.inverted ? '#6f19ed' : props.ghost ? purplePrimary : '#eee')};
-    color: ${props => (props.inverted ? '#fff' : props.ghost ? whiteFull : '#222')}
+    background: ${props =>
+      props.inverted ? '#6f19ed' : props.ghost ? purplePrimary : '#eee'};
+    color: ${props =>
+      props.inverted ? '#fff' : props.ghost ? whiteFull : '#222'}
   }
 `;
 
 export const Title = styled.h2`
   font-size: 2rem;
   font-weight: 400;
-  color: ${props => (props.inverted ? (props.color ? props.color : '#7657fb') : '#fff')};
+  color: ${props =>
+    props.inverted ? (props.color ? props.color : '#7657fb') : '#fff'};
   ${breakpoints.md} {
     font-size: 1.8rem;
   }
diff --git a/utils/mock-data.js b/utils/mock-data.js
index 3805f8d07..0d525a227 100644
--- a/utils/mock-data.js
+++ b/utils/mock-data.js
@@ -93,37 +93,43 @@ export const listOfSubjects = [
 
 export const indexPageLearns = [
   {
-    link: 'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
+    link:
+      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
     title: 'ReactJS',
     subject: 'Frontend Web Development',
     image: '',
   },
   {
-    link: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
+    link:
+      'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
     title: 'Laravel',
     subject: 'Backend Web Development',
     image: '',
   },
   {
-    link: 'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
+    link:
+      'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
     title: 'Go',
     subject: 'Programming Language',
     image: '',
   },
   {
-    link: 'https://github.com/coderplex/learn/blob/master/computer-science/Learn-CS.md',
+    link:
+      'https://github.com/coderplex/learn/blob/master/computer-science/Learn-CS.md',
     title: 'Introduction to C.S',
     subject: 'Computer Science',
     image: '',
   },
   {
-    link: 'https://github.com/coderplex/learn/blob/master/Blockchain/blockchain-basics.md',
+    link:
+      'https://github.com/coderplex/learn/blob/master/Blockchain/blockchain-basics.md',
     title: 'Blockchain',
     subject: 'Decentralized Systems',
     image: '',
   },
   {
-    link: 'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
+    link:
+      'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
     title: 'Android',
     subject: 'Mobile Development',
     image: '',
@@ -143,7 +149,8 @@ export const listOfDomains = [
 
 export const contentsOfLaravel = {
   logo: 'devicon-laravel-plain colored',
-  overview: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/overview.md',
+  overview:
+    'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/overview.md',
   guides: [
     {
       name: 'Prerequisites',
@@ -217,7 +224,8 @@ export const contentsOfLaravel = {
     {
       userName: 'Vinay Puppal',
       userPage: 'https://www.vinaypuppal.com/',
-      userImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/214440/profile/profile-512.jpg?2',
+      userImage:
+        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/214440/profile/profile-512.jpg?2',
       contributions: [
         {
           type: 'topic',

From 25c181730e80851245a3535ca53edc1a3c40c55c Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Tue, 21 Nov 2017 01:04:47 +0530
Subject: [PATCH 12/24] events completed

---
 components/events/event-card.js | 11 +++++++----
 package.json                    | 26 +++++++++++++++++++-------
 pages/events.js                 | 20 ++++++++++++--------
 utils/urls.js                   |  3 +++
 yarn.lock                       |  2 +-
 5 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/components/events/event-card.js b/components/events/event-card.js
index 0f6789020..9a701386a 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -15,7 +15,7 @@ const Card = styled.div`
   margin-top: 20px;
   padding-right: 10px;
   display: grid;
-  grid-template-columns: 1fr 4fr;
+  grid-template-columns: 1fr 2.5fr;
   grid-template-rows: 1.2fr 1fr 1fr;
   grid-template-areas:
     'photo title'
@@ -26,11 +26,12 @@ const Card = styled.div`
   transition: all 0.25s;
   & .photo {
     grid-area: photo;
-    width: 120px;
-    height: auto;
-    margin-right: 10px;
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
   }
   & .title {
+    margin-left: 10px;
     grid-area: title;
     font-size: 1.5rem;
     color: #000;
@@ -38,10 +39,12 @@ const Card = styled.div`
     padding-top: 10px;
   }
   & .location {
+    margin-left: 10px;
     grid-area: location;
     padding-top: 10px;
   }
   & .info {
+    margin-left: 10px;
     grid-area: info;
     display: flex;
     flex-direction: row;
diff --git a/package.json b/package.json
index 3087f98ad..bb835123a 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "xo && jest",
-    "lint":
-      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo",
+    "lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo",
     "precommit": "lint-staged",
     "analyze": "cross-env ANALYZE=1 next build",
     "dev": "cross-env NODE_ENV=development node server.js",
@@ -16,19 +15,32 @@
   },
   "xo": {
     "parser": "babel-eslint",
-    "extends": ["prettier", "prettier/react", "plugin:react/recommended"],
-    "env": ["browser", "node"],
+    "extends": [
+      "prettier",
+      "prettier/react",
+      "plugin:react/recommended"
+    ],
+    "env": [
+      "browser",
+      "node"
+    ],
     "rules": {
       "linebreak-style": 0,
       "react/display-name": 0,
       "react/prop-types": 0
     },
     "space:": 2,
-    "ignores": ["next.config.js"],
+    "ignores": [
+      "next.config.js"
+    ],
     "overrides": [
       {
         "files": "**/__tests__/*.test.js",
-        "globals": ["describe", "it", "expect"]
+        "globals": [
+          "describe",
+          "it",
+          "expect"
+        ]
       }
     ]
   },
@@ -42,7 +54,7 @@
   },
   "dependencies": {
     "babel-plugin-emotion": "^8.0.10",
-    "date-fns": "1.29.0",
+    "date-fns": "^1.29.0",
     "emotion": "^8.0.10",
     "emotion-server": "^8.0.10",
     "grid-emotion": "^2.1.0",
diff --git a/pages/events.js b/pages/events.js
index f6b4c11d6..8b8805a34 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -3,11 +3,17 @@ import fetch from 'isomorphic-unfetch';
 import { Flex, Box } from 'grid-emotion';
 import styled from 'react-emotion';
 import { space } from 'styled-system';
+import format from 'date-fns/format';
 
 import Layout from '../components/common/layout';
 import BannerSection from '../components/common/banner';
 import { Container, Title, SubTitle } from '../utils/base.styles';
-import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
+import {
+  baseEventsURL,
+  futureEventsURL,
+  pastEventsURL,
+  noMeetupImageURL,
+} from '../utils/urls';
 import EventCard from '../components/events/event-card';
 
 const EventsSection = styled.section`
@@ -33,7 +39,6 @@ export default class Events extends React.Component {
       );
       if (pastEventsResponse.ok) {
         pastEvents = await pastEventsResponse.json();
-        console.log(pastEvents);
       } else {
         throw new Error('Failed to Retrieve past events');
       }
@@ -42,7 +47,6 @@ export default class Events extends React.Component {
       );
       if (futureEventsResponse.ok) {
         futureEvents = await futureEventsResponse.json();
-        console.log(futureEvents);
       } else {
         throw new Error('Failed to retieve future events');
       }
@@ -86,13 +90,13 @@ export default class Events extends React.Component {
           return (
             <EventCard
               key={event.id}
-              image={imageSrc ? imageSrc[1] : ''}
-              location={event.venue ? event.venue.name : 'Online'}
-              link={event.link}
+              image={imageSrc ? imageSrc[1] : noMeetupImageURL}
               name={event.name}
-              tense={event.status}
+              location={event.venue ? event.venue.name : 'Online'}
+              time={format(event.time, "h:mm A, ddd MMM Do 'YY")}
               attendees={event.yes_rsvp_count}
-              time={event.time}
+              tense={event.status}
+              link={event.link}
             />
           );
         })}
diff --git a/utils/urls.js b/utils/urls.js
index 5e52c6447..9de7770c2 100644
--- a/utils/urls.js
+++ b/utils/urls.js
@@ -7,3 +7,6 @@ export const pastEventsURL = '/events/past';
 export const indexPageEventURL = '/events';
 
 export const subscribeURL = '/subscribe';
+
+export const noMeetupImageURL =
+  'https://res.cloudinary.com/hkf2ycaep/image/fetch/d_project-placeholder.png,f_auto/https:/assets/project-placeholder-b90804f0a659d3f283c62d185d49635da22a5b8bbfb7e985f0d0390201f9d2b1.png';
diff --git a/yarn.lock b/yarn.lock
index 3622626a9..306594db6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1833,7 +1833,7 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-date-fns@1.29.0, date-fns@^1.27.2:
+date-fns@^1.27.2, date-fns@^1.29.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
 

From 4df9c9abed0c1df29789e1f0e2b388eb9a67f725 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Tue, 21 Nov 2017 01:17:59 +0530
Subject: [PATCH 13/24] shifted few image urls to urls.js

---
 pages/index.js | 8 +++-----
 utils/urls.js  | 6 ++++++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 8e8a1b447..d1d08df90 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -15,13 +15,14 @@ import Hide, {
 import { listOfSubjects } from '../utils/mock-data';
 import Layout from '../components/common/layout';
 import SubjectCard from '../components/learn/subject-card';
+import { heroPattern, heroBanner } from '../utils/urls';
 
 const HeroSection = styled.section`
   ${space};
   background-color: #fff;
   position: relative;
   text-align: center;
-  background-image: url('https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png');
+  background-image: url(${heroPattern});
   & h1 {
     font-size: 2.5rem;
     font-weight: 300;
@@ -132,10 +133,7 @@ export default () => (
       <Container>
         <Flex justify="center" align="center" direction="column">
           <Box width={1}>
-            <img
-              src="https://res.cloudinary.com/coderplex/image/upload/c_scale,w_1024/v1510788480/website__assets/banner1280x370.png"
-              alt="words"
-            />
+            <img src={heroBanner} alt="words" />
             <h1>On a mission to improve the state of tech across India</h1>
           </Box>
         </Flex>
diff --git a/utils/urls.js b/utils/urls.js
index 9de7770c2..fd1cbba1e 100644
--- a/utils/urls.js
+++ b/utils/urls.js
@@ -10,3 +10,9 @@ export const subscribeURL = '/subscribe';
 
 export const noMeetupImageURL =
   'https://res.cloudinary.com/hkf2ycaep/image/fetch/d_project-placeholder.png,f_auto/https:/assets/project-placeholder-b90804f0a659d3f283c62d185d49635da22a5b8bbfb7e985f0d0390201f9d2b1.png';
+
+export const heroPattern =
+  'https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png';
+
+export const heroBanner =
+  'https://res.cloudinary.com/coderplex/image/upload/c_scale,w_1024/v1510788480/website__assets/banner1280x370.png';

From 40eaa41dc0d2fbbb138d7c434a9971f543f5e824 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Tue, 21 Nov 2017 01:25:33 +0530
Subject: [PATCH 14/24] reverted back to 120 chars in line

---
 .prettierrc                       |  2 +-
 components/common/footer/index.js | 39 +++++++-----------------
 components/common/header/index.js | 41 ++++++++------------------
 components/common/meta.js         | 39 ++++--------------------
 components/events/event-card.js   | 10 ++-----
 package.json                      | 26 +++++-----------
 pages/events.js                   | 21 +++----------
 pages/index.js                    | 49 +++++++------------------------
 pages/learn/subject.js            |  6 +---
 pages/login.js                    |  6 +---
 pages/space.js                    | 25 +++++-----------
 utils/base.styles.js              | 23 +++++----------
 utils/mock-data.js                | 24 +++++----------
 utils/urls.js                     |  3 +-
 14 files changed, 80 insertions(+), 234 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index e5ae8a1fe..2f0bc5363 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "printWidth": 80,
+  "printWidth": 120,
   "semi": true,
   "trailingComma": "es5",
   "singleQuote": true,
diff --git a/components/common/footer/index.js b/components/common/footer/index.js
index 73c23aed8..5285ba07c 100644
--- a/components/common/footer/index.js
+++ b/components/common/footer/index.js
@@ -151,14 +151,11 @@ export default class FooterBar extends React.Component {
 
   async postSubscriberEmail(subscribersEmail) {
     await this.setState({ submittingEmail: true });
-    const postSubscriberEmailRequest = await fetch(
-      `${baseEventsURL}${subscribeURL}`,
-      {
-        method: 'post',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: subscribersEmail }),
-      }
-    );
+    const postSubscriberEmailRequest = await fetch(`${baseEventsURL}${subscribeURL}`, {
+      method: 'post',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: subscribersEmail }),
+    });
     if (postSubscriberEmailRequest.status === 200) {
       this.setState({
         subscriberEmailPosted: true,
@@ -177,17 +174,8 @@ export default class FooterBar extends React.Component {
       <Footer>
         <Container>
           <Flex wrap py={[0, 3]}>
-            <Flex
-              align="center"
-              direction="column"
-              justify="center"
-              width={[1, 1, 1 / 2]}
-              px={[2, 3]}
-              py={[3, 0]}>
-              <Title>
-                We are constantly updating our platform. Do subscribe to stay
-                informed.
-              </Title>
+            <Flex align="center" direction="column" justify="center" width={[1, 1, 1 / 2]} px={[2, 3]} py={[3, 0]}>
+              <Title>We are constantly updating our platform. Do subscribe to stay informed.</Title>
               {this.state.subscriberEmailPosted ? (
                 <h3>Thank you, we will keep you posted</h3>
               ) : (
@@ -199,22 +187,15 @@ export default class FooterBar extends React.Component {
                     placeholder="Enter your email..."
                   />
                   <button type="submit" disabled={this.state.submittingEmail}>
-                    {this.state.submittingEmail
-                      ? 'Subscribing...'
-                      : 'Subscribe'}
+                    {this.state.submittingEmail ? 'Subscribing...' : 'Subscribe'}
                   </button>
                 </Form>
               )}
-              <Message
-                className={this.state.emailSubmittingError ? 'error' : ''}>
+              <Message className={this.state.emailSubmittingError ? 'error' : ''}>
                 <p>{this.state.emailSubmittingError}</p>
               </Message>
             </Flex>
-            <Flex
-              className="follow"
-              align="center"
-              justify="center"
-              width={[1, 1, 1 / 2]}>
+            <Flex className="follow" align="center" justify="center" width={[1, 1, 1 / 2]}>
               <Box p={[1, 2]}>
                 <Title>Follow Us</Title>
                 <SocialLinks>
diff --git a/components/common/header/index.js b/components/common/header/index.js
index f28258161..73d451384 100644
--- a/components/common/header/index.js
+++ b/components/common/header/index.js
@@ -8,14 +8,7 @@ import { hydrate } from 'react-emotion';
 import MetaInfo from '../../../config/meta-info';
 import { Container } from '../../../utils/base.styles';
 import Meta from '../meta';
-import {
-  Header,
-  Nav,
-  NavLinks,
-  NavLink,
-  NavLogo,
-  MobileMenuBtn,
-} from './index.styles';
+import { Header, Nav, NavLinks, NavLink, NavLogo, MobileMenuBtn } from './index.styles';
 
 Router.onRouteChangeStart = () => {
   NProgress.start();
@@ -69,8 +62,7 @@ class NavBar extends React.Component {
   };
   render() {
     const pathName = this.props.router.pathname;
-    const metaData =
-      MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
+    const metaData = MetaInfo[pathName === '/' ? 'home' : pathName.split('/')[1]];
     const title = metaData.title;
     const description = metaData.description;
     const image = metaData.image;
@@ -80,9 +72,7 @@ class NavBar extends React.Component {
           <Meta title={title} description={description} image={image} />
           <Container>
             <Nav>
-              <MobileMenuBtn
-                onClick={this.toggleMenu}
-                className={this.state.menuOpen ? 'open' : ''}>
+              <MobileMenuBtn onClick={this.toggleMenu} className={this.state.menuOpen ? 'open' : ''}>
                 <span>Menu</span>
               </MobileMenuBtn>
               <NavLogo>
@@ -94,23 +84,18 @@ class NavBar extends React.Component {
                 </Link>
               </NavLogo>
               <NavLinks className={this.state.menuOpen ? 'open' : ''}>
-                {this.state.navItems
-                  .filter(item => !item.external)
-                  .map(item => (
-                    <NavLink key={item.path}>
-                      <Link href={item.path}>
-                        <a className={pathName === item.path ? 'active' : ''}>
-                          <span>{item.title}</span>
-                        </a>
-                      </Link>
-                    </NavLink>
-                  ))}
+                {this.state.navItems.filter(item => !item.external).map(item => (
+                  <NavLink key={item.path}>
+                    <Link href={item.path}>
+                      <a className={pathName === item.path ? 'active' : ''}>
+                        <span>{item.title}</span>
+                      </a>
+                    </Link>
+                  </NavLink>
+                ))}
                 {this.state.navItems.filter(item => item.external).map(item => (
                   <NavLink key={item.path}>
-                    <a
-                      href={item.path}
-                      rel="noopener noreferrer"
-                      className={pathName === item.path ? 'active' : ''}>
+                    <a href={item.path} rel="noopener noreferrer" className={pathName === item.path ? 'active' : ''}>
                       <span>{item.title}</span>
                     </a>
                   </NavLink>
diff --git a/components/common/meta.js b/components/common/meta.js
index 58e80494c..0e8f99735 100644
--- a/components/common/meta.js
+++ b/components/common/meta.js
@@ -8,51 +8,24 @@ export default ({ title, description, image }) => {
       <meta name="viewport" content="width=device-width,initial-scale=1" />
       <meta name="mobile-web-app-capable" content="yes" />
       <meta name="apple-mobile-web-app-capable" content="yes" />
-      <link
-        rel="apple-touch-icon"
-        sizes="180x180"
-        href="/static/favicons/apple-touch-icon.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        href="/static/favicons/favicon-32x32.png"
-        sizes="32x32"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        href="/static/favicons/favicon-16x16.png"
-        sizes="16x16"
-      />
+      <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png" />
+      <link rel="icon" type="image/png" href="/static/favicons/favicon-32x32.png" sizes="32x32" />
+      <link rel="icon" type="image/png" href="/static/favicons/favicon-16x16.png" sizes="16x16" />
       <link rel="manifest" href="/static/favicons/manifest.json" />
-      <link
-        rel="mask-icon"
-        href="/static/favicons/safari-pinned-tab.svg"
-        color="#c201b9"
-      />
+      <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#c201b9" />
       <link rel="shortcut icon" href="/static/favicons/favicon.ico" />
       <link
         rel="stylesheet"
         href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"
       />
-      <meta
-        name="msapplication-config"
-        content="/static/favicons/browserconfig.xml"
-      />
+      <meta name="msapplication-config" content="/static/favicons/browserconfig.xml" />
       <meta name="theme-color" content="#c201b9" />
       <title>{title}</title>
       <meta name="description" content={description} />
       <meta property="og:type" content="website" />
       <meta property="og:title" content={title} />
       <meta property="og:url" content="https://coderplex.org" />
-      <meta
-        property="og:image"
-        content={
-          image ||
-          'https://coderplex.org/static/favicons/android-chrome-512x512.png'
-        }
-      />
+      <meta property="og:image" content={image || 'https://coderplex.org/static/favicons/android-chrome-512x512.png'} />
       <meta property="og:site_name" content="coderplex.org" />
       <meta property="og:description" content={description} />
     </Head>
diff --git a/components/events/event-card.js b/components/events/event-card.js
index 9a701386a..76965e0cd 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -89,17 +89,11 @@ export default props => (
         </div>
         <div className="infotext">
           <AttendeesIcon className="icons" />
-          {props.tense === 'past'
-            ? `${props.attendees} attended`
-            : `${props.attendees} attending`}
+          {props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}
         </div>
         {props.tense === 'past' ? null : (
           <div className="infotext">
-            {props.online ? (
-              <StreamIcon className="icons" />
-            ) : (
-              <TicketIcon className="icons" />
-            )}
+            {props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
             {props.online ? 'Free session' : 'Free entry'}
           </div>
         )}
diff --git a/package.json b/package.json
index bb835123a..300caf18e 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "xo && jest",
-    "lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo",
+    "lint":
+      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo",
     "precommit": "lint-staged",
     "analyze": "cross-env ANALYZE=1 next build",
     "dev": "cross-env NODE_ENV=development node server.js",
@@ -15,38 +16,25 @@
   },
   "xo": {
     "parser": "babel-eslint",
-    "extends": [
-      "prettier",
-      "prettier/react",
-      "plugin:react/recommended"
-    ],
-    "env": [
-      "browser",
-      "node"
-    ],
+    "extends": ["prettier", "prettier/react", "plugin:react/recommended"],
+    "env": ["browser", "node"],
     "rules": {
       "linebreak-style": 0,
       "react/display-name": 0,
       "react/prop-types": 0
     },
     "space:": 2,
-    "ignores": [
-      "next.config.js"
-    ],
+    "ignores": ["next.config.js"],
     "overrides": [
       {
         "files": "**/__tests__/*.test.js",
-        "globals": [
-          "describe",
-          "it",
-          "expect"
-        ]
+        "globals": ["describe", "it", "expect"]
       }
     ]
   },
   "lint-staged": {
     "*.js": [
-      "prettier --write --single-quote --print-width=80 --trailing-comma=es5 --jsx-bracket-same-line",
+      "prettier --write --single-quote --print-width=120 --trailing-comma=es5 --jsx-bracket-same-line",
       "xo",
       "jest --findRelatedTests",
       "git add"
diff --git a/pages/events.js b/pages/events.js
index 8b8805a34..093b92a94 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -8,12 +8,7 @@ import format from 'date-fns/format';
 import Layout from '../components/common/layout';
 import BannerSection from '../components/common/banner';
 import { Container, Title, SubTitle } from '../utils/base.styles';
-import {
-  baseEventsURL,
-  futureEventsURL,
-  pastEventsURL,
-  noMeetupImageURL,
-} from '../utils/urls';
+import { baseEventsURL, futureEventsURL, pastEventsURL, noMeetupImageURL } from '../utils/urls';
 import EventCard from '../components/events/event-card';
 
 const EventsSection = styled.section`
@@ -34,17 +29,13 @@ export default class Events extends React.Component {
     try {
       let pastEvents;
       let futureEvents;
-      const pastEventsResponse = await fetch(
-        `${baseEventsURL}${pastEventsURL}`
-      );
+      const pastEventsResponse = await fetch(`${baseEventsURL}${pastEventsURL}`);
       if (pastEventsResponse.ok) {
         pastEvents = await pastEventsResponse.json();
       } else {
         throw new Error('Failed to Retrieve past events');
       }
-      const futureEventsResponse = await fetch(
-        `${baseEventsURL}${futureEventsURL}`
-      );
+      const futureEventsResponse = await fetch(`${baseEventsURL}${futureEventsURL}`);
       if (futureEventsResponse.ok) {
         futureEvents = await futureEventsResponse.json();
       } else {
@@ -114,11 +105,7 @@ export default class Events extends React.Component {
         />
         <EventsSection py={[2, 4]} px={[2, 1]}>
           <Container>
-            <Flex
-              pb={[2, 4]}
-              direction="column"
-              align="center"
-              justify="center">
+            <Flex pb={[2, 4]} direction="column" align="center" justify="center">
               <Box width={[1, 0.75]}>
                 <Title inverted color="#222">
                   Upcoming Events
diff --git a/pages/index.js b/pages/index.js
index d1d08df90..a8d5b827c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,13 +5,7 @@ import { Flex, Box } from 'grid-emotion';
 import take from 'lodash.take';
 import Link from 'next/link';
 
-import Hide, {
-  Container,
-  Button,
-  Title,
-  SubTitle,
-  breakpoints,
-} from '../utils/base.styles';
+import Hide, { Container, Button, Title, SubTitle, breakpoints } from '../utils/base.styles';
 import { listOfSubjects } from '../utils/mock-data';
 import Layout from '../components/common/layout';
 import SubjectCard from '../components/learn/subject-card';
@@ -145,8 +139,7 @@ export default () => (
           <Box width={1}>
             <Title inverted>Open Source Learning Guides</Title>
             <SubTitle inverted>
-              Our guides are crowd-sourced recommendations of free online
-              resources to learn any technology
+              Our guides are crowd-sourced recommendations of free online resources to learn any technology
             </SubTitle>
           </Box>
           <Box width={1}>
@@ -169,21 +162,14 @@ export default () => (
     <SpaceSection>
       <Container>
         <Flex justify="center" wrap>
-          <Box
-            order={[2, 2, 1]}
-            className="box"
-            width={[1, 1, 1 / 2]}
-            py={[0, 2, 3]}
-            px={[2, 4, 3]}>
+          <Box order={[2, 2, 1]} className="box" width={[1, 1, 1 / 2]} py={[0, 2, 3]} px={[2, 4, 3]}>
             <Title>Offline Co-Learning Spaces</Title>
             <SubTitle small>
-              Physical spaces where you can come down to engage in self
-              learning, peer-learning and collaboration.
+              Physical spaces where you can come down to engage in self learning, peer-learning and collaboration.
             </SubTitle>
             <SubTitle small>
-              These are dynamic learning environments where everyone learns at
-              their own pace and compliments each other. We also organize weekly
-              group activities like Open Source evenings, casual hackathons etc.
+              These are dynamic learning environments where everyone learns at their own pace and compliments each
+              other. We also organize weekly group activities like Open Source evenings, casual hackathons etc.
             </SubTitle>
             <Box
               mx={['auto', 'auto', 0]}
@@ -199,13 +185,7 @@ export default () => (
               </Link>
             </Box>
           </Box>
-          <Box
-            order={1}
-            className="box"
-            width={[1, 1, 1 / 2]}
-            pt={4}
-            pb={[0, 1, 4]}
-            px={[3, 4, 3]}>
+          <Box order={1} className="box" width={[1, 1, 1 / 2]} pt={4} pb={[0, 1, 4]} px={[3, 4, 3]}>
             <img
               className="space__img"
               alt="sapce__img"
@@ -227,19 +207,12 @@ export default () => (
               />
             </Hide>
           </Box>
-          <Box
-            order={1}
-            width={[1, 1, 1 / 2]}
-            px={[2, 3]}
-            pt={[3, 4, 0]}
-            pb={[4, 4, 0]}>
+          <Box order={1} width={[1, 1, 1 / 2]} px={[2, 3]} pt={[3, 4, 0]} pb={[4, 4, 0]}>
             <Title>Online & Offline Events</Title>
             <SubTitle small>
-              We do frequent online and offline events, covering broad range of
-              topics, from Web Development to Data Science. The goal of these
-              events are to share knowledge, connect with people and enable
-              collaboration. We also partner with local comunities to help them
-              reach a wider audience.
+              We do frequent online and offline events, covering broad range of topics, from Web Development to Data
+              Science. The goal of these events are to share knowledge, connect with people and enable collaboration. We
+              also partner with local comunities to help them reach a wider audience.
             </SubTitle>
             <Box className="box" width={[1]} pt={[2]} px={[3, 0]}>
               <Hide md lg>
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
index 4068f22f3..4e4c592de 100644
--- a/pages/learn/subject.js
+++ b/pages/learn/subject.js
@@ -6,11 +6,7 @@ import BannerSection from '../../components/common/banner';
 export default props => {
   return (
     <Layout>
-      <BannerSection
-        textInverted
-        title={props.url.query.id.toUpperCase()}
-        subTitle="Coming Soon..."
-      />
+      <BannerSection textInverted title={props.url.query.id.toUpperCase()} subTitle="Coming Soon..." />
     </Layout>
   );
 };
diff --git a/pages/login.js b/pages/login.js
index a3ac95bfa..0caf64ee2 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -6,11 +6,7 @@ import BannerSection from '../components/common/banner';
 export default () => {
   return (
     <Layout>
-      <BannerSection
-        textInverted
-        title="Login / Register"
-        subTitle="Coming Soon..."
-      />
+      <BannerSection textInverted title="Login / Register" subTitle="Coming Soon..." />
     </Layout>
   );
 };
diff --git a/pages/space.js b/pages/space.js
index b945356c9..e062afd8c 100644
--- a/pages/space.js
+++ b/pages/space.js
@@ -72,8 +72,7 @@ const forWhomPoints = [
 const activities = [
   {
     day: 'Daily',
-    task:
-      'You will engage in daily code review and pair programming exercises with other members.',
+    task: 'You will engage in daily code review and pair programming exercises with other members.',
   },
   {
     day: 'Wednesday',
@@ -87,18 +86,15 @@ const activities = [
   },
   {
     day: 'Friday',
-    task:
-      'We will have casual hackathons, where everyone will participate to build a project, big or small.',
+    task: 'We will have casual hackathons, where everyone will participate to build a project, big or small.',
   },
   {
     day: 'Saturday',
-    task:
-      'In the evening, we will screen a tech-related documentary, movie or TV show.',
+    task: 'In the evening, we will screen a tech-related documentary, movie or TV show.',
   },
   {
     day: 'Sunday',
-    task:
-      'Members will present their work i.e. projects or new topics they have made or learned in the past week',
+    task: 'Members will present their work i.e. projects or new topics they have made or learned in the past week',
   },
 ];
 
@@ -123,16 +119,12 @@ export default () => (
           Activites and Schedule
         </Title>
         <SubTitle inverted>
-          We will help you pick a technology and provide you with learning
-          guides to learn and build something on a daily basis.
+          We will help you pick a technology and provide you with learning guides to learn and build something on a
+          daily basis.
         </SubTitle>
         <ActivityTimeline>
           {activities.map(activity => (
-            <ActiviteEvent
-              key={activity.day}
-              title={activity.day}
-              icon={<FaCalender />}
-              iconColor="#222">
+            <ActiviteEvent key={activity.day} title={activity.day} icon={<FaCalender />} iconColor="#222">
               {activity.task}
             </ActiviteEvent>
           ))}
@@ -145,8 +137,7 @@ export default () => (
           Pricing
         </Title>
         <SubTitle inverted>
-          INR 1000/- per month. For membership mail us at{' '}
-          <a href="mailto:space@codeplex.org">space@coderplex.org</a>
+          INR 1000/- per month. For membership mail us at <a href="mailto:space@codeplex.org">space@coderplex.org</a>
         </SubTitle>
       </Container>
     </PricingSection>
diff --git a/utils/base.styles.js b/utils/base.styles.js
index 175200fce..666fb4776 100644
--- a/utils/base.styles.js
+++ b/utils/base.styles.js
@@ -49,34 +49,25 @@ export const baseButton = css`
 
 export const Button = styled.a`
   ${baseButton};
-  background: ${props =>
-    props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff'}
-  color: ${props =>
-    props.inverted ? '#fff' : props.ghost ? purplePrimary : '#222'}
-  padding: ${props =>
-    props.large
-      ? '0.8rem 2.25rem'
-      : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem'};
-  font-size: ${props =>
-    props.large ? '1.8rem' : props.medium ? '1rem' : '1rem'}
+  background: ${props => (props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff')}
+  color: ${props => (props.inverted ? '#fff' : props.ghost ? purplePrimary : '#222')}
+  padding: ${props => (props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem')};
+  font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '1rem')}
   outline:${props => (props.ghost ? `3px solid ${purplePrimary}` : 'none')}
   outline-offset:${props => (props.ghost ? '-3px' : '0px')}
   cursor: pointer;
   user-select: none;
   -webkit-touch-callout: none;
   &:hover {
-    background: ${props =>
-      props.inverted ? '#6f19ed' : props.ghost ? purplePrimary : '#eee'};
-    color: ${props =>
-      props.inverted ? '#fff' : props.ghost ? whiteFull : '#222'}
+    background: ${props => (props.inverted ? '#6f19ed' : props.ghost ? purplePrimary : '#eee')};
+    color: ${props => (props.inverted ? '#fff' : props.ghost ? whiteFull : '#222')}
   }
 `;
 
 export const Title = styled.h2`
   font-size: 2rem;
   font-weight: 400;
-  color: ${props =>
-    props.inverted ? (props.color ? props.color : '#7657fb') : '#fff'};
+  color: ${props => (props.inverted ? (props.color ? props.color : '#7657fb') : '#fff')};
   ${breakpoints.md} {
     font-size: 1.8rem;
   }
diff --git a/utils/mock-data.js b/utils/mock-data.js
index 0d525a227..3805f8d07 100644
--- a/utils/mock-data.js
+++ b/utils/mock-data.js
@@ -93,43 +93,37 @@ export const listOfSubjects = [
 
 export const indexPageLearns = [
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
+    link: 'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
     title: 'ReactJS',
     subject: 'Frontend Web Development',
     image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
+    link: 'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
     title: 'Laravel',
     subject: 'Backend Web Development',
     image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
+    link: 'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
     title: 'Go',
     subject: 'Programming Language',
     image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/computer-science/Learn-CS.md',
+    link: 'https://github.com/coderplex/learn/blob/master/computer-science/Learn-CS.md',
     title: 'Introduction to C.S',
     subject: 'Computer Science',
     image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/Blockchain/blockchain-basics.md',
+    link: 'https://github.com/coderplex/learn/blob/master/Blockchain/blockchain-basics.md',
     title: 'Blockchain',
     subject: 'Decentralized Systems',
     image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
+    link: 'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
     title: 'Android',
     subject: 'Mobile Development',
     image: '',
@@ -149,8 +143,7 @@ export const listOfDomains = [
 
 export const contentsOfLaravel = {
   logo: 'devicon-laravel-plain colored',
-  overview:
-    'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/overview.md',
+  overview: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/overview.md',
   guides: [
     {
       name: 'Prerequisites',
@@ -224,8 +217,7 @@ export const contentsOfLaravel = {
     {
       userName: 'Vinay Puppal',
       userPage: 'https://www.vinaypuppal.com/',
-      userImage:
-        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/214440/profile/profile-512.jpg?2',
+      userImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/214440/profile/profile-512.jpg?2',
       contributions: [
         {
           type: 'topic',
diff --git a/utils/urls.js b/utils/urls.js
index fd1cbba1e..1eed7a1f5 100644
--- a/utils/urls.js
+++ b/utils/urls.js
@@ -11,8 +11,7 @@ export const subscribeURL = '/subscribe';
 export const noMeetupImageURL =
   'https://res.cloudinary.com/hkf2ycaep/image/fetch/d_project-placeholder.png,f_auto/https:/assets/project-placeholder-b90804f0a659d3f283c62d185d49635da22a5b8bbfb7e985f0d0390201f9d2b1.png';
 
-export const heroPattern =
-  'https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png';
+export const heroPattern = 'https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png';
 
 export const heroBanner =
   'https://res.cloudinary.com/coderplex/image/upload/c_scale,w_1024/v1510788480/website__assets/banner1280x370.png';

From 3bdc1a6d3e53e7e6c1476aec2d29be2aa5869827 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Wed, 22 Nov 2017 15:29:19 +0530
Subject: [PATCH 15/24] event card with css flex

---
 components/events/event-card.js | 127 +++++++++++++++++---------------
 pages/events.js                 |  12 ++-
 utils/base.styles.js            |  11 +--
 3 files changed, 81 insertions(+), 69 deletions(-)

diff --git a/components/events/event-card.js b/components/events/event-card.js
index 76965e0cd..e56451f9a 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'react-emotion';
 import TimeIcon from 'react-icons/lib/md/access-time';
+import format from 'date-fns/format';
 import LocationIcon from 'react-icons/lib/md/location-on';
 import AttendeesIcon from 'react-icons/lib/md/people';
 import TicketIcon from 'react-icons/lib/md/exit-to-app';
@@ -9,74 +10,80 @@ import StreamIcon from 'react-icons/lib/md/desktop-mac';
 import { Button, graySecondary } from '../../utils/base.styles';
 
 const Card = styled.div`
-  text-decoration: none;
-  width: 100%;
-  min-height: 150px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-height: 120px;
+  justify-content: center;
+  align-content: stretch;
+  align-items: center;
   margin-top: 20px;
-  padding-right: 10px;
-  display: grid;
-  grid-template-columns: 1fr 2.5fr;
-  grid-template-rows: 1.2fr 1fr 1fr;
-  grid-template-areas:
-    'photo title'
-    'photo location'
-    'photo info';
-  background: #fff;
   border: 1px solid ${graySecondary};
-  transition: all 0.25s;
   & .photo {
-    grid-area: photo;
-    object-fit: cover;
-    height: 100%;
-    width: 100%;
-  }
-  & .title {
-    margin-left: 10px;
-    grid-area: title;
-    font-size: 1.5rem;
-    color: #000;
-    font-weight: 400;
-    padding-top: 10px;
-  }
-  & .location {
-    margin-left: 10px;
-    grid-area: location;
-    padding-top: 10px;
+    flex: 1 1 auto;
+    align-self: auto;
+    max-width: 180px;
   }
-  & .info {
-    margin-left: 10px;
-    grid-area: info;
+  & .content {
+    flex: 3 1 auto;
+    align-self: stretch;
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
     align-content: stretch;
-    align-items: center;
-  }
-  & .infotext {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    margin-right: 1rem;
-  }
-  & .rsvp {
-    order: 0;
-    align-items: flex-end;
-    flex: 1 1 auto;
-    align-self: auto;
-    text-align: right;
+    align-items: flex-start;
+    margin: 5px;
+    & .title {
+      order: 1;
+      flex: 1.5 1 auto;
+      align-self: flex-start;
+      font-size: 1.2rem;
+      vertical-align: top;
+      font-weight: 400;
+    }
+    & .location {
+      order: 2;
+      flex: 1 1 auto;
+      align-self: auto;
+      font-size: 0.8rem;
+    }
+    & .info {
+      order: 3;
+      flex: 1 1 auto;
+      align-self: auto;
+      display: flex;
+      width: 100%;
+      font-size: 0.8rem;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-content: stretch;
+      align-items: center;
+        & .infotext {
+          flex: 0 1 auto;
+          align-self: auto;
+          margin-right: 1rem;
+        }
+        & .rsvp {
+          align-items: flex-end;
+          flex: 1 1 auto;
+          align-self: auto;
+          text-align: right;
+        }
+      }
+      & .icons{
+        font-size: 1rem;
+        margin-right: 0.25rem;
+       }
     }
-  & .icons{
-    font-size: 1.1rem;
-    margin-right: 0.25rem;
   }
-}
 `;
 
 export default props => (
-  <div>
-    <Card>
-      <img className="photo" src={props.image} />
+  <Card>
+    <img className="photo" src={props.image} />
+    <div className="content">
       <div className="title">{props.name}</div>
       <div className="location">
         <LocationIcon className="icons" />
@@ -85,7 +92,7 @@ export default props => (
       <div className="info">
         <div className="infotext">
           <TimeIcon className="icons" />
-          {props.time}
+          {props.tense === 'past' ? format(props.time, "ddd MMM Do 'YY") : format(props.time, "h:mm A, ddd MMM Do 'YY")}
         </div>
         <div className="infotext">
           <AttendeesIcon className="icons" />
@@ -103,6 +110,6 @@ export default props => (
           </Button>
         </div>
       </div>
-    </Card>
-  </div>
+    </div>
+  </Card>
 );
diff --git a/pages/events.js b/pages/events.js
index 093b92a94..6ca2c42b5 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -3,7 +3,6 @@ import fetch from 'isomorphic-unfetch';
 import { Flex, Box } from 'grid-emotion';
 import styled from 'react-emotion';
 import { space } from 'styled-system';
-import format from 'date-fns/format';
 
 import Layout from '../components/common/layout';
 import BannerSection from '../components/common/banner';
@@ -65,13 +64,18 @@ export default class Events extends React.Component {
           Loading..
         </SubTitle>
       );
-    }
-    if (events.length === 0) {
+    } else if (events.length === 0) {
       return (
         <SubTitle inverted color="#222">
           No upcoming events yet, check back later
         </SubTitle>
       );
+    } else if (events === null) {
+      return (
+        <SubTitle inverted color="#222">
+          Oops! somethings went wrong while fetching the events
+        </SubTitle>
+      );
     }
     return (
       <div>
@@ -84,7 +88,7 @@ export default class Events extends React.Component {
               image={imageSrc ? imageSrc[1] : noMeetupImageURL}
               name={event.name}
               location={event.venue ? event.venue.name : 'Online'}
-              time={format(event.time, "h:mm A, ddd MMM Do 'YY")}
+              time={event.time}
               attendees={event.yes_rsvp_count}
               tense={event.status}
               link={event.link}
diff --git a/utils/base.styles.js b/utils/base.styles.js
index 666fb4776..6d0f9b7ae 100644
--- a/utils/base.styles.js
+++ b/utils/base.styles.js
@@ -1,6 +1,7 @@
 import styled, { css } from 'react-emotion';
 
 export const purplePrimary = '#7657fb';
+export const purpleSecondary = '#6f19ed';
 export const whiteFull = '#ffffff';
 export const graySecondary = '#b9b9b9';
 
@@ -50,16 +51,16 @@ export const baseButton = css`
 export const Button = styled.a`
   ${baseButton};
   background: ${props => (props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff')}
-  color: ${props => (props.inverted ? '#fff' : props.ghost ? purplePrimary : '#222')}
+  color: ${props => (props.inverted ? '#fff' : props.ghost ? purpleSecondary : '#222')}
   padding: ${props => (props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem')};
-  font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '1rem')}
-  outline:${props => (props.ghost ? `3px solid ${purplePrimary}` : 'none')}
-  outline-offset:${props => (props.ghost ? '-3px' : '0px')}
+  font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '0.8rem')}
+  outline:${props => (props.ghost ? `1px solid ${purpleSecondary}` : 'none')}
+  outline-offset:${props => (props.ghost ? '-1px' : '0px')}
   cursor: pointer;
   user-select: none;
   -webkit-touch-callout: none;
   &:hover {
-    background: ${props => (props.inverted ? '#6f19ed' : props.ghost ? purplePrimary : '#eee')};
+    background: ${props => (props.inverted ? purpleSecondary : props.ghost ? purpleSecondary : '#eee')};
     color: ${props => (props.inverted ? '#fff' : props.ghost ? whiteFull : '#222')}
   }
 `;

From 08fe634893775885d03101c3b64f1a56a1ff8efa Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Wed, 22 Nov 2017 15:58:56 +0530
Subject: [PATCH 16/24] abstracted urls to another file

---
 pages/index.js | 22 ++++++----------------
 utils/urls.js  | 15 +++++++++++----
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index a8d5b827c..8e47366fc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -9,14 +9,14 @@ import Hide, { Container, Button, Title, SubTitle, breakpoints } from '../utils/
 import { listOfSubjects } from '../utils/mock-data';
 import Layout from '../components/common/layout';
 import SubjectCard from '../components/learn/subject-card';
-import { heroPattern, heroBanner } from '../utils/urls';
+import { heroPatternURL, heroBannerURL, spaceCoverURL, eventsCoverURL } from '../utils/urls';
 
 const HeroSection = styled.section`
   ${space};
   background-color: #fff;
   position: relative;
   text-align: center;
-  background-image: url(${heroPattern});
+  background-image: url(${heroPatternURL});
   & h1 {
     font-size: 2.5rem;
     font-weight: 300;
@@ -127,7 +127,7 @@ export default () => (
       <Container>
         <Flex justify="center" align="center" direction="column">
           <Box width={1}>
-            <img src={heroBanner} alt="words" />
+            <img src={heroBannerURL} alt="words" />
             <h1>On a mission to improve the state of tech across India</h1>
           </Box>
         </Flex>
@@ -186,11 +186,7 @@ export default () => (
             </Box>
           </Box>
           <Box order={1} className="box" width={[1, 1, 1 / 2]} pt={4} pb={[0, 1, 4]} px={[3, 4, 3]}>
-            <img
-              className="space__img"
-              alt="sapce__img"
-              src="https://res.cloudinary.com/coderplex/image/upload/c_scale,w_450/v1510788480/website__assets/space.png"
-            />
+            <img className="space__img" alt="sapce__img" src={spaceCoverURL} />
           </Box>
         </Flex>
       </Container>
@@ -201,10 +197,7 @@ export default () => (
         <Flex align="center" justify="center" wrap>
           <Box order={[2, 2, 1]} width={[1, 1, 1 / 2]} px={[4, 4, 3]}>
             <Hide sm xs>
-              <img
-                src="https://res.cloudinary.com/coderplex/image/upload/c_scale,w_348/v1510788480/website__assets/events.png"
-                alt="events__pic"
-              />
+              <img src={eventsCoverURL} alt="events__pic" />
             </Hide>
           </Box>
           <Box order={1} width={[1, 1, 1 / 2]} px={[2, 3]} pt={[3, 4, 0]} pb={[4, 4, 0]}>
@@ -216,10 +209,7 @@ export default () => (
             </SubTitle>
             <Box className="box" width={[1]} pt={[2]} px={[3, 0]}>
               <Hide md lg>
-                <img
-                  src="https://res.cloudinary.com/coderplex/image/upload/c_scale,w_316/v1510788480/website__assets/events.png"
-                  alt="events__pic"
-                />
+                <img src={eventsCoverURL} alt="events__pic" />
               </Hide>
               <Link href={'/events'}>
                 <Button href={'/events'} medium>
diff --git a/utils/urls.js b/utils/urls.js
index 1eed7a1f5..73e14a763 100644
--- a/utils/urls.js
+++ b/utils/urls.js
@@ -8,10 +8,17 @@ export const indexPageEventURL = '/events';
 
 export const subscribeURL = '/subscribe';
 
-export const noMeetupImageURL =
-  'https://res.cloudinary.com/hkf2ycaep/image/fetch/d_project-placeholder.png,f_auto/https:/assets/project-placeholder-b90804f0a659d3f283c62d185d49635da22a5b8bbfb7e985f0d0390201f9d2b1.png';
+export const imagePlaceholder =
+  'http://res.cloudinary.com/coderplex/image/upload/c_scale,h_400,w_600/v1511345686/website__assets/placeholder.png';
 
-export const heroPattern = 'https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png';
+export const heroPatternURL =
+  'https://res.cloudinary.com/coderplex/image/upload/v1510788480/website__assets/pattern.png';
 
-export const heroBanner =
+export const heroBannerURL =
   'https://res.cloudinary.com/coderplex/image/upload/c_scale,w_1024/v1510788480/website__assets/banner1280x370.png';
+
+export const spaceCoverURL =
+  'https://res.cloudinary.com/coderplex/image/upload/c_scale,w_450/v1510788480/website__assets/space.png';
+
+export const eventsCoverURL =
+  'https://res.cloudinary.com/coderplex/image/upload/c_scale,w_348/v1510788480/website__assets/events.png';

From a48cb8d4802e804c726b51c969c0eb7fadc324a2 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Thu, 23 Nov 2017 00:38:53 +0530
Subject: [PATCH 17/24] events card converted to emotion style

---
 components/events/event-card.js | 168 ++++++++++++++------------------
 pages/events.js                 |   4 +-
 utils/base.styles.js            |   1 +
 utils/urls.js                   |   2 +-
 4 files changed, 77 insertions(+), 98 deletions(-)

diff --git a/components/events/event-card.js b/components/events/event-card.js
index e56451f9a..c1436c2be 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import styled from 'react-emotion';
+import { space } from 'styled-system';
+import { Flex, Box } from 'grid-emotion';
 import TimeIcon from 'react-icons/lib/md/access-time';
 import format from 'date-fns/format';
 import LocationIcon from 'react-icons/lib/md/location-on';
@@ -7,109 +9,85 @@ import AttendeesIcon from 'react-icons/lib/md/people';
 import TicketIcon from 'react-icons/lib/md/exit-to-app';
 import StreamIcon from 'react-icons/lib/md/desktop-mac';
 
-import { Button, graySecondary } from '../../utils/base.styles';
+import { breakpoints, Button, graySecondary } from '../../utils/base.styles';
 
 const Card = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  max-height: 120px;
-  justify-content: center;
-  align-content: stretch;
-  align-items: center;
-  margin-top: 20px;
+  ${space};
+  background: #fff;
   border: 1px solid ${graySecondary};
-  & .photo {
-    flex: 1 1 auto;
-    align-self: auto;
-    max-width: 180px;
+  & .eventPhoto {
+    width: 100%;
+    height: 150px;
+    vertical-align: middle;
+    object-fit: cover;
   }
-  & .content {
-    flex: 3 1 auto;
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-content: stretch;
-    align-items: flex-start;
-    margin: 5px;
-    & .title {
-      order: 1;
-      flex: 1.5 1 auto;
-      align-self: flex-start;
-      font-size: 1.2rem;
-      vertical-align: top;
-      font-weight: 400;
-    }
-    & .location {
-      order: 2;
-      flex: 1 1 auto;
-      align-self: auto;
-      font-size: 0.8rem;
-    }
-    & .info {
-      order: 3;
-      flex: 1 1 auto;
-      align-self: auto;
-      display: flex;
-      width: 100%;
-      font-size: 0.8rem;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      justify-content: flex-start;
-      align-content: stretch;
-      align-items: center;
-        & .infotext {
-          flex: 0 1 auto;
-          align-self: auto;
-          margin-right: 1rem;
-        }
-        & .rsvp {
-          align-items: flex-end;
-          flex: 1 1 auto;
-          align-self: auto;
-          text-align: right;
-        }
-      }
-      & .icons{
-        font-size: 1rem;
-        margin-right: 0.25rem;
-       }
+  & .title {
+    font-size: 1rem;
+    font-weight: 350;
+    color: #000;
+    border-bottom: 1px solid ${graySecondary};
+    ${breakpoints.xs} {
+      font-size: 0.9rem;
     }
   }
+  & .secondaryText {
+    font-size: 0.8rem;
+    color: #36434d;
+  }
+  & .icons {
+    font-size: 1.2rem;
+    margin-right: 0.25rem;
+    color: #36434d;
+  }
+  & .rsvp {
+    text-align: right;
+  }
 `;
 
 export default props => (
-  <Card>
-    <img className="photo" src={props.image} />
-    <div className="content">
-      <div className="title">{props.name}</div>
-      <div className="location">
-        <LocationIcon className="icons" />
-        {props.location}
-      </div>
-      <div className="info">
-        <div className="infotext">
-          <TimeIcon className="icons" />
-          {props.tense === 'past' ? format(props.time, "ddd MMM Do 'YY") : format(props.time, "h:mm A, ddd MMM Do 'YY")}
-        </div>
-        <div className="infotext">
-          <AttendeesIcon className="icons" />
-          {props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}
-        </div>
-        {props.tense === 'past' ? null : (
-          <div className="infotext">
-            {props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
-            {props.online ? 'Free session' : 'Free entry'}
-          </div>
-        )}
-        <div className="rsvp">
-          <Button href={props.link} ghost>
-            {props.tense === 'past' ? 'View' : 'RSVP'}
-          </Button>
-        </div>
-      </div>
-    </div>
+  <Card m={2}>
+    <Flex wrap>
+      <Box width={[1, 1 / 3, 1 / 4, 1 / 4]}>
+        <img className="eventPhoto" src={props.image} />
+      </Box>
+      <Box width={[1, 2 / 3, 3 / 4, 3 / 4]} pb={1} pt={1}>
+        <Flex column justify={'space-between'} align={'stretch'}>
+          <Box className="title" pr={1} pl={1}>
+            {props.name}
+          </Box>
+          <Box className="secondaryText" pr={1} pl={1}>
+            <LocationIcon className="icons" />
+            <span>{props.location}</span>
+          </Box>
+          <Box pr={1} pl={1}>
+            <Flex wrap>
+              <Box className="secondaryText" pr={1}>
+                <TimeIcon className="icons" />
+                {props.tense === 'past'
+                  ? format(props.time, "ddd MMM Do 'YY")
+                  : format(props.time, "h:mm A, ddd MMM Do 'YY")}
+              </Box>
+              <Box className="secondaryText" pr={1}>
+                <AttendeesIcon className="icons" />
+                {props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}
+              </Box>
+              <Box className="secondaryText" pr={1}>
+                {props.tense === 'past' ? null : (
+                  <div>
+                    {props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
+                    {props.online ? 'Free session' : 'Free entry'}
+                  </div>
+                )}
+              </Box>
+              <Box flex="1 1 auto" className="rsvp">
+                <Button href={props.link} ghost>
+                  {props.tense === 'past' ? 'View' : 'RSVP'}
+                </Button>
+              </Box>
+            </Flex>
+          </Box>
+        </Flex>
+      </Box>
+    </Flex>
   </Card>
 );
diff --git a/pages/events.js b/pages/events.js
index 6ca2c42b5..027f29659 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -7,7 +7,7 @@ import { space } from 'styled-system';
 import Layout from '../components/common/layout';
 import BannerSection from '../components/common/banner';
 import { Container, Title, SubTitle } from '../utils/base.styles';
-import { baseEventsURL, futureEventsURL, pastEventsURL, noMeetupImageURL } from '../utils/urls';
+import { baseEventsURL, futureEventsURL, pastEventsURL, imagePlaceholderURL } from '../utils/urls';
 import EventCard from '../components/events/event-card';
 
 const EventsSection = styled.section`
@@ -85,7 +85,7 @@ export default class Events extends React.Component {
           return (
             <EventCard
               key={event.id}
-              image={imageSrc ? imageSrc[1] : noMeetupImageURL}
+              image={imageSrc ? imageSrc[1] : imagePlaceholderURL}
               name={event.name}
               location={event.venue ? event.venue.name : 'Online'}
               time={event.time}
diff --git a/utils/base.styles.js b/utils/base.styles.js
index 6d0f9b7ae..400b55228 100644
--- a/utils/base.styles.js
+++ b/utils/base.styles.js
@@ -3,6 +3,7 @@ import styled, { css } from 'react-emotion';
 export const purplePrimary = '#7657fb';
 export const purpleSecondary = '#6f19ed';
 export const whiteFull = '#ffffff';
+export const blackPure = '#000000';
 export const graySecondary = '#b9b9b9';
 
 export const breakpoints = {
diff --git a/utils/urls.js b/utils/urls.js
index 73e14a763..9624e91e5 100644
--- a/utils/urls.js
+++ b/utils/urls.js
@@ -8,7 +8,7 @@ export const indexPageEventURL = '/events';
 
 export const subscribeURL = '/subscribe';
 
-export const imagePlaceholder =
+export const imagePlaceholderURL =
   'http://res.cloudinary.com/coderplex/image/upload/c_scale,h_400,w_600/v1511345686/website__assets/placeholder.png';
 
 export const heroPatternURL =

From 248340e967f24289747ce55aafa7da3b1c381d0c Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Thu, 23 Nov 2017 18:50:15 +0530
Subject: [PATCH 18/24] make events cards responsive

---
 components/events/event-card.js | 136 +++++++++++++++++++-------------
 utils/base.styles.js            |  13 +--
 2 files changed, 90 insertions(+), 59 deletions(-)

diff --git a/components/events/event-card.js b/components/events/event-card.js
index c1436c2be..265da26a9 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'react-emotion';
-import { space } from 'styled-system';
+import { space, fontSize } from 'styled-system';
 import { Flex, Box } from 'grid-emotion';
 import TimeIcon from 'react-icons/lib/md/access-time';
 import format from 'date-fns/format';
@@ -10,28 +10,30 @@ import TicketIcon from 'react-icons/lib/md/exit-to-app';
 import StreamIcon from 'react-icons/lib/md/desktop-mac';
 
 import { breakpoints, Button, graySecondary } from '../../utils/base.styles';
+import truncateString from '../../utils';
 
-const Card = styled.div`
+const Card = styled(Flex)`
   ${space};
   background: #fff;
   border: 1px solid ${graySecondary};
+  min-height: 120px;
   & .eventPhoto {
+    height: 120px;
     width: 100%;
-    height: 150px;
-    vertical-align: middle;
-    object-fit: cover;
-  }
-  & .title {
-    font-size: 1rem;
-    font-weight: 350;
-    color: #000;
-    border-bottom: 1px solid ${graySecondary};
+    ${breakpoints.sm} {
+      object-fit: cover;
+      height: 200px;
+    }
     ${breakpoints.xs} {
-      font-size: 0.9rem;
+      height: 200px;
+      object-fit: cover;
     }
   }
+  & .eventDetails {
+    min-height: 120px;
+  }
   & .secondaryText {
-    font-size: 0.8rem;
+    ${fontSize};
     color: #36434d;
   }
   & .icons {
@@ -41,53 +43,79 @@ const Card = styled.div`
   }
   & .rsvp {
     text-align: right;
+    ${breakpoints.sm} {
+      text-align: left;
+      & > * {
+        width: 100%;
+        display: block;
+        text-align: center;
+        margin: 0;
+      }
+    }
+    ${breakpoints.xs} {
+      text-align: left;
+      & > * {
+        width: 100%;
+        display: block;
+        text-align: center;
+        margin: 0;
+      }
+    }
   }
 `;
 
+const CardTitle = styled.h3`
+  ${space};
+  font-weight: 650;
+  border-bottom: 1px solid ${graySecondary};
+`;
+
 export default props => (
-  <Card m={2}>
-    <Flex wrap>
-      <Box width={[1, 1 / 3, 1 / 4, 1 / 4]}>
-        <img className="eventPhoto" src={props.image} />
-      </Box>
-      <Box width={[1, 2 / 3, 3 / 4, 3 / 4]} pb={1} pt={1}>
-        <Flex column justify={'space-between'} align={'stretch'}>
-          <Box className="title" pr={1} pl={1}>
-            {props.name}
-          </Box>
-          <Box className="secondaryText" pr={1} pl={1}>
-            <LocationIcon className="icons" />
-            <span>{props.location}</span>
-          </Box>
-          <Box pr={1} pl={1}>
-            <Flex wrap>
-              <Box className="secondaryText" pr={1}>
-                <TimeIcon className="icons" />
+  <Card my={[3]} wrap>
+    <Flex align="streach" width={[1, 1, 1 / 4]}>
+      <img
+        className="eventPhoto"
+        src={`https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image}`}
+        srcSet={`https://res.cloudinary.com/coderplex/image/fetch/w_300,h_200/${
+          props.image
+        } 720w, https://res.cloudinary.com/coderplex/image/fetch/w_200,h_150/${props.image} 1024w`}
+      />
+    </Flex>
+    <Box className="eventDetails" width={[1, 1, 3 / 4]}>
+      <Flex className="eventDetails" column justify="space-between">
+        <CardTitle inverted color="#222" px={[2]} py={[1]} m={0}>
+          {truncateString(props.name, 64)}
+        </CardTitle>
+        <Box fontSize={[12, 14, 16]} className="secondaryText" px={[2]} my={[1, 1, 0]}>
+          <LocationIcon className="icons" />
+          <span>{props.location}</span>
+        </Box>
+        <Box px={2} pb={[2, 1]}>
+          <Flex wrap>
+            <Box fontSize={[12, 14, 16]} width={[1, 1, 0.33]} className="secondaryText" pr={1} mr={[0]} my={[1, 1, 0]}>
+              <TimeIcon className="icons" />
+              <span>
                 {props.tense === 'past'
                   ? format(props.time, "ddd MMM Do 'YY")
                   : format(props.time, "h:mm A, ddd MMM Do 'YY")}
-              </Box>
-              <Box className="secondaryText" pr={1}>
-                <AttendeesIcon className="icons" />
-                {props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}
-              </Box>
-              <Box className="secondaryText" pr={1}>
-                {props.tense === 'past' ? null : (
-                  <div>
-                    {props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
-                    {props.online ? 'Free session' : 'Free entry'}
-                  </div>
-                )}
-              </Box>
-              <Box flex="1 1 auto" className="rsvp">
-                <Button href={props.link} ghost>
-                  {props.tense === 'past' ? 'View' : 'RSVP'}
-                </Button>
-              </Box>
-            </Flex>
-          </Box>
-        </Flex>
-      </Box>
-    </Flex>
+              </span>
+            </Box>
+            <Box fontSize={[12, 14, 16]} width={[1, 1, 0.25]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
+              <AttendeesIcon className="icons" />
+              <span>{props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}</span>
+            </Box>
+            <Box fontSize={[12, 14, 16]} width={[1, 1, 0.25]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
+              {props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
+              <span>{props.online ? 'Free session' : 'Free entry'}</span>
+            </Box>
+            <Box fontSize={[12, 14, 16]} width={[1, 1, 0.17]} mt={[1, 1, 0]} className="rsvp">
+              <Button href={props.link} ghost small>
+                {props.tense === 'past' ? 'View' : 'RSVP'}
+              </Button>
+            </Box>
+          </Flex>
+        </Box>
+      </Flex>
+    </Box>
   </Card>
 );
diff --git a/utils/base.styles.js b/utils/base.styles.js
index 400b55228..6fab0e84d 100644
--- a/utils/base.styles.js
+++ b/utils/base.styles.js
@@ -4,7 +4,7 @@ export const purplePrimary = '#7657fb';
 export const purpleSecondary = '#6f19ed';
 export const whiteFull = '#ffffff';
 export const blackPure = '#000000';
-export const graySecondary = '#b9b9b9';
+export const graySecondary = '#ddd';
 
 export const breakpoints = {
   xs: '@media screen and (max-width: 40em)',
@@ -43,6 +43,7 @@ export const baseButton = css`
   padding: 0.2rem 1rem;
   color: #fff;
   text-decoration: none;
+  transition: all 0.25s;
   &:hover {
     background: #6f19ed;
     font-weight: normal;
@@ -53,14 +54,16 @@ export const Button = styled.a`
   ${baseButton};
   background: ${props => (props.inverted ? '#7657fb' : props.ghost ? '#fff' : '#fff')}
   color: ${props => (props.inverted ? '#fff' : props.ghost ? purpleSecondary : '#222')}
-  padding: ${props => (props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : '0.2rem 1rem')};
-  font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '0.8rem')}
-  outline:${props => (props.ghost ? `1px solid ${purpleSecondary}` : 'none')}
-  outline-offset:${props => (props.ghost ? '-1px' : '0px')}
+  padding: ${props =>
+    props.large ? '0.8rem 2.25rem' : props.medium ? '0.6rem 1.2rem' : props.small ? '0.3rem 1.1rem' : '0.2rem 1rem'};
+  font-size: ${props => (props.large ? '1.8rem' : props.medium ? '1rem' : '0.8rem')};
+  font-weight: ${props => (props.ghost ? 600 : 300)};
+  border: ${props => (props.ghost ? `2px solid ${purpleSecondary}` : 'none')};
   cursor: pointer;
   user-select: none;
   -webkit-touch-callout: none;
   &:hover {
+    font-weight: ${props => (props.ghost ? 600 : 300)};
     background: ${props => (props.inverted ? purpleSecondary : props.ghost ? purpleSecondary : '#eee')};
     color: ${props => (props.inverted ? '#fff' : props.ghost ? whiteFull : '#222')}
   }

From 4839c24a2c4784a137b65979fd96286d391e76e1 Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Thu, 23 Nov 2017 19:14:04 +0530
Subject: [PATCH 19/24] configure get-port npm package

---
 package.json | 25 +++++++++++++++++++------
 server.js    | 36 +++++++++++++++++++-----------------
 yarn.lock    |  4 ++++
 3 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 300caf18e..fd47f7fff 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "xo && jest",
-    "lint":
-      "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo",
+    "lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo",
     "precommit": "lint-staged",
     "analyze": "cross-env ANALYZE=1 next build",
     "dev": "cross-env NODE_ENV=development node server.js",
@@ -16,19 +15,32 @@
   },
   "xo": {
     "parser": "babel-eslint",
-    "extends": ["prettier", "prettier/react", "plugin:react/recommended"],
-    "env": ["browser", "node"],
+    "extends": [
+      "prettier",
+      "prettier/react",
+      "plugin:react/recommended"
+    ],
+    "env": [
+      "browser",
+      "node"
+    ],
     "rules": {
       "linebreak-style": 0,
       "react/display-name": 0,
       "react/prop-types": 0
     },
     "space:": 2,
-    "ignores": ["next.config.js"],
+    "ignores": [
+      "next.config.js"
+    ],
     "overrides": [
       {
         "files": "**/__tests__/*.test.js",
-        "globals": ["describe", "it", "expect"]
+        "globals": [
+          "describe",
+          "it",
+          "expect"
+        ]
       }
     ]
   },
@@ -45,6 +57,7 @@
     "date-fns": "^1.29.0",
     "emotion": "^8.0.10",
     "emotion-server": "^8.0.10",
+    "get-port": "^3.2.0",
     "grid-emotion": "^2.1.0",
     "isomorphic-unfetch": "2.0.0",
     "lodash.take": "^4.1.1",
diff --git a/server.js b/server.js
index e50f94b16..8c9f73475 100644
--- a/server.js
+++ b/server.js
@@ -3,29 +3,31 @@ const { parse } = require('url');
 const next = require('next');
 const pathMatch = require('path-match');
 const opn = require('opn');
+const getPort = require('get-port');
 
-const port = parseInt(process.env.PORT, 10) || 3000;
 const dev = process.env.NODE_ENV !== 'production';
 const app = next({ dev });
 const handle = app.getRequestHandler();
 const route = pathMatch();
 const match = route('/learn/:id');
 
-app.prepare().then(() => {
-  createServer((req, res) => {
-    const { pathname, query } = parse(req.url, true);
-    const params = match(pathname);
-    if (params === false) {
-      handle(req, res);
-      return;
-    }
-    // Assigning `query` into the params means that we still
-    // get the query string passed to our application
-    // i.e. /blog/foo?show-comments=true
-    app.render(req, res, '/learn/subject', Object.assign(params, query));
-  }).listen(port, err => {
-    if (err) throw err;
-    console.log(`>> App running on http://localhost:${port}`);
-    opn(`http://localhost:${port}`);
+getPort({ port: 3000 }).then(port => {
+  app.prepare().then(() => {
+    createServer((req, res) => {
+      const { pathname, query } = parse(req.url, true);
+      const params = match(pathname);
+      if (params === false) {
+        handle(req, res);
+        return;
+      }
+      // Assigning `query` into the params means that we still
+      // get the query string passed to our application
+      // i.e. /blog/foo?show-comments=true
+      app.render(req, res, '/learn/subject', Object.assign(params, query));
+    }).listen(port, err => {
+      if (err) throw err;
+      console.log(`>> App running on http://localhost:${port}`);
+      opn(`http://localhost:${port}`);
+    });
   });
 });
diff --git a/yarn.lock b/yarn.lock
index 306594db6..2d5b9553c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2912,6 +2912,10 @@ get-pkg-repo@^1.0.0:
     parse-github-repo-url "^1.3.0"
     through2 "^2.0.0"
 
+get-port@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
+
 get-set-props@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-set-props/-/get-set-props-0.1.0.tgz#998475c178445686d0b32246da5df8dbcfbe8ea3"

From 1185f0d08087d4c69010951fa930edaf9ee09f17 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 27 Nov 2017 20:10:57 +0530
Subject: [PATCH 20/24] minor changes in width

---
 components/events/event-card.js | 10 +++++-----
 pages/events.js                 |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/events/event-card.js b/components/events/event-card.js
index 265da26a9..09f123224 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -88,23 +88,23 @@ export default props => (
         </CardTitle>
         <Box fontSize={[12, 14, 16]} className="secondaryText" px={[2]} my={[1, 1, 0]}>
           <LocationIcon className="icons" />
-          <span>{props.location}</span>
+          <span>{truncateString(props.location, 55)}</span>
         </Box>
         <Box px={2} pb={[2, 1]}>
           <Flex wrap>
-            <Box fontSize={[12, 14, 16]} width={[1, 1, 0.33]} className="secondaryText" pr={1} mr={[0]} my={[1, 1, 0]}>
+            <Box fontSize={[12, 14, 16]} width={[1, 1, 0.38]} className="secondaryText" pr={1} mr={[0]} my={[1, 1, 0]}>
               <TimeIcon className="icons" />
               <span>
                 {props.tense === 'past'
                   ? format(props.time, "ddd MMM Do 'YY")
-                  : format(props.time, "h:mm A, ddd MMM Do 'YY")}
+                  : format(props.time, "ddd MMM Do 'YY, h:mm A")}
               </span>
             </Box>
-            <Box fontSize={[12, 14, 16]} width={[1, 1, 0.25]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
+            <Box fontSize={[12, 14, 16]} width={[1, 1, 0.24]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
               <AttendeesIcon className="icons" />
               <span>{props.tense === 'past' ? `${props.attendees} attended` : `${props.attendees} attending`}</span>
             </Box>
-            <Box fontSize={[12, 14, 16]} width={[1, 1, 0.25]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
+            <Box fontSize={[12, 14, 16]} width={[1, 1, 0.21]} className="secondaryText" pr={1} mx={[0]} my={[1, 1, 0]}>
               {props.online ? <StreamIcon className="icons" /> : <TicketIcon className="icons" />}
               <span>{props.online ? 'Free session' : 'Free entry'}</span>
             </Box>
diff --git a/pages/events.js b/pages/events.js
index 027f29659..1daf6f3db 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -88,6 +88,7 @@ export default class Events extends React.Component {
               image={imageSrc ? imageSrc[1] : imagePlaceholderURL}
               name={event.name}
               location={event.venue ? event.venue.name : 'Online'}
+              online={!event.venue}
               time={event.time}
               attendees={event.yes_rsvp_count}
               tense={event.status}

From 869647b54a58fb4f2fa38252e524dcae758b08f9 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Mon, 27 Nov 2017 21:08:14 +0530
Subject: [PATCH 21/24] added load more

---
 pages/events.js | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/pages/events.js b/pages/events.js
index 1daf6f3db..21d058520 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -6,7 +6,7 @@ import { space } from 'styled-system';
 
 import Layout from '../components/common/layout';
 import BannerSection from '../components/common/banner';
-import { Container, Title, SubTitle } from '../utils/base.styles';
+import { Container, Title, SubTitle, Button } from '../utils/base.styles';
 import { baseEventsURL, futureEventsURL, pastEventsURL, imagePlaceholderURL } from '../utils/urls';
 import EventCard from '../components/events/event-card';
 
@@ -14,12 +14,17 @@ const EventsSection = styled.section`
   ${space};
   background: #fff;
   position: relative;
+  & .loadmore_div {
+    text-align: center;
+  }
 `;
 
 export default class Events extends React.Component {
   state = {
     pastEvents: [],
+    pastEventsLoadLimit: 2,
     futureEvents: [],
+    futureEventsLoadLimit: 2,
     fetchError: null,
     loading: true,
   };
@@ -57,7 +62,7 @@ export default class Events extends React.Component {
     }
   }
 
-  renderEvents(events) {
+  renderEvents(events, loadLimit) {
     if (this.state.loading) {
       return (
         <SubTitle inverted color="#222">
@@ -79,7 +84,7 @@ export default class Events extends React.Component {
     }
     return (
       <div>
-        {events.map(event => {
+        {events.slice(0, loadLimit).map(event => {
           const regexForImageSrc = /<img.*?src="([^">]*\/([^">]*?))".*?>/g;
           const imageSrc = regexForImageSrc.exec(event.description);
           return (
@@ -100,6 +105,22 @@ export default class Events extends React.Component {
     );
   }
 
+  renderLoadMoreButton(eventsTotalLength, loadLimit, isPastEvent) {
+    return loadLimit >= eventsTotalLength ? null : (
+      <div className="loadmore_div">
+        <Button inverted medium onClick={event => this.loadMore(event, isPastEvent)}>
+          Load more
+        </Button>
+      </div>
+    );
+  }
+
+  loadMore(isPastEvent) {
+    return isPastEvent
+      ? this.setState({ pastEventsLoadLimit: this.state.pastEventsLoadLimit + 5 })
+      : this.setState({ futureEventsLoadLimit: this.state.futureEventsLoadLimit + 5 });
+  }
+
   render() {
     return (
       <Layout>
@@ -115,7 +136,8 @@ export default class Events extends React.Component {
                 <Title inverted color="#222">
                   Upcoming Events
                 </Title>
-                {this.renderEvents(this.state.futureEvents)}
+                {this.renderEvents(this.state.futureEvents, this.state.futureEventsLoadLimit)}
+                {this.renderLoadMoreButton(this.state.futureEvents.length, this.state.futureEventsLoadLimit, false)}
               </Box>
             </Flex>
             <Flex direction="column" align="center" justify="center">
@@ -123,7 +145,8 @@ export default class Events extends React.Component {
                 <Title inverted color="#222">
                   Recent Events
                 </Title>
-                {this.renderEvents(this.state.pastEvents)}
+                {this.renderEvents(this.state.pastEvents, this.state.pastEventsLoadLimit)}
+                {this.renderLoadMoreButton(this.state.pastEvents.length, this.state.pastEventsLoadLimit, true)}
               </Box>
             </Flex>
           </Container>

From cd41862c1074e8ba546c36e73f9e087d49873e96 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Tue, 28 Nov 2017 17:31:57 +0530
Subject: [PATCH 22/24] changes asper designer

---
 components/events/event-card.js |  8 +++++---
 pages/events.js                 | 18 ++++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/components/events/event-card.js b/components/events/event-card.js
index 09f123224..2aa3b4512 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -17,6 +17,7 @@ const Card = styled(Flex)`
   background: #fff;
   border: 1px solid ${graySecondary};
   min-height: 120px;
+  color: #8393a7;
   & .eventPhoto {
     height: 120px;
     width: 100%;
@@ -34,12 +35,12 @@ const Card = styled(Flex)`
   }
   & .secondaryText {
     ${fontSize};
-    color: #36434d;
+    color: #8393a7;
   }
   & .icons {
     font-size: 1.2rem;
     margin-right: 0.25rem;
-    color: #36434d;
+    color: #8393a7;
   }
   & .rsvp {
     text-align: right;
@@ -66,7 +67,8 @@ const Card = styled(Flex)`
 
 const CardTitle = styled.h3`
   ${space};
-  font-weight: 650;
+  color: #374355;
+  font-weight: 400;
   border-bottom: 1px solid ${graySecondary};
 `;
 
diff --git a/pages/events.js b/pages/events.js
index 21d058520..223a6e413 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -6,7 +6,7 @@ import { space } from 'styled-system';
 
 import Layout from '../components/common/layout';
 import BannerSection from '../components/common/banner';
-import { Container, Title, SubTitle, Button } from '../utils/base.styles';
+import { Container, SubTitle, Button } from '../utils/base.styles';
 import { baseEventsURL, futureEventsURL, pastEventsURL, imagePlaceholderURL } from '../utils/urls';
 import EventCard from '../components/events/event-card';
 
@@ -16,6 +16,12 @@ const EventsSection = styled.section`
   position: relative;
   & .loadmore_div {
     text-align: center;
+    margin-top: 2rem;
+    margin-bottom: 0.8rem;
+  }
+  & .event_type_title {
+    color: #374355;
+    font-weight: bold;
   }
 `;
 
@@ -107,7 +113,7 @@ export default class Events extends React.Component {
 
   renderLoadMoreButton(eventsTotalLength, loadLimit, isPastEvent) {
     return loadLimit >= eventsTotalLength ? null : (
-      <div className="loadmore_div">
+      <div className="loadmore_div" mb={[5, 5]}>
         <Button inverted medium onClick={event => this.loadMore(event, isPastEvent)}>
           Load more
         </Button>
@@ -133,18 +139,18 @@ export default class Events extends React.Component {
           <Container>
             <Flex pb={[2, 4]} direction="column" align="center" justify="center">
               <Box width={[1, 0.75]}>
-                <Title inverted color="#222">
+                <h3 className="event_type_title" inverted color="#222">
                   Upcoming Events
-                </Title>
+                </h3>
                 {this.renderEvents(this.state.futureEvents, this.state.futureEventsLoadLimit)}
                 {this.renderLoadMoreButton(this.state.futureEvents.length, this.state.futureEventsLoadLimit, false)}
               </Box>
             </Flex>
             <Flex direction="column" align="center" justify="center">
               <Box width={[1, 0.75]}>
-                <Title inverted color="#222">
+                <h3 className="event_type_title" inverted color="#222">
                   Recent Events
-                </Title>
+                </h3>
                 {this.renderEvents(this.state.pastEvents, this.state.pastEventsLoadLimit)}
                 {this.renderLoadMoreButton(this.state.pastEvents.length, this.state.pastEventsLoadLimit, true)}
               </Box>

From cf0c8c4ad3e3249d4ebc3c8ab3e3e1c54d1c2c27 Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Tue, 28 Nov 2017 17:51:30 +0530
Subject: [PATCH 23/24] decreased paddings

---
 pages/events.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/events.js b/pages/events.js
index 223a6e413..a70a86eaa 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -135,9 +135,9 @@ export default class Events extends React.Component {
           title="Online & Offline Events"
           subTitle="Because you cannot change the world alone"
         />
-        <EventsSection py={[2, 4]} px={[2, 1]}>
+        <EventsSection py={[2, 2]} px={[2, 1]}>
           <Container>
-            <Flex pb={[2, 4]} direction="column" align="center" justify="center">
+            <Flex pb={[2, 2]} direction="column" align="center" justify="center">
               <Box width={[1, 0.75]}>
                 <h3 className="event_type_title" inverted color="#222">
                   Upcoming Events

From f7d38e8dd0014dc0427fedbb254ffbfcf1fd332b Mon Sep 17 00:00:00 2001
From: z <ahmedzubair216@gmail.com>
Date: Tue, 28 Nov 2017 18:01:18 +0530
Subject: [PATCH 24/24] weight 500 to card events title

---
 components/events/event-card.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/events/event-card.js b/components/events/event-card.js
index 2aa3b4512..5e19a5c89 100644
--- a/components/events/event-card.js
+++ b/components/events/event-card.js
@@ -68,7 +68,7 @@ const Card = styled(Flex)`
 const CardTitle = styled.h3`
   ${space};
   color: #374355;
-  font-weight: 400;
+  font-weight: 500;
   border-bottom: 1px solid ${graySecondary};
 `;
 
