Merge pull request #57 from pbteja1998/master

vinaypuppal · web-flow · commit 222fccadd502 · 2017-10-24T22:33:23.000+05:30
Resolved Issue #53
diff --git a/components/subscribe.js b/components/subscribe.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Form, Message } from 'semantic-ui-react';
+import { Form, Message, Grid } from 'semantic-ui-react';
 import { baseEventsURL, subscribeURL } from '../utils/urls';
 
 class Subscribe extends Component {
@@ -65,7 +65,7 @@ class Subscribe extends Component {
     return (
       <div>
         <section className="update">
-          <div className="container update_container">
+          <div>
             <h3 className="taglines">
               We are constanly updating our platform.<br />If you would like to
               stay informed about our updates, drop you email.
@@ -76,18 +76,24 @@ class Subscribe extends Component {
               ) : (
                 <Form onSubmit={this.handleSubmit} error={hasError}>
                   <Form.Group>
-                    <Form.Input
-                      placeholder="Enter email address"
-                      name="email"
-                      value={this.state.subscribersEmail}
-                      onChange={this.handleChange}
-                      disabled={this.state.submittingEmail}
-                    />
-                    <Form.Button
-                      loading={this.state.submittingEmail}
-                      color="pink"
-                      content="Subscribe"
-                    />
+                    <Grid stackable columns={2}>
+                      <Grid.Column width={12}>
+                        <Form.Input
+                          placeholder="Enter email address"
+                          name="email"
+                          value={this.state.subscribersEmail}
+                          onChange={this.handleChange}
+                          disabled={this.state.submittingEmail}
+                        />
+                      </Grid.Column>
+                      <Grid.Column width={4}>
+                        <Form.Button
+                          loading={this.state.submittingEmail}
+                          color="pink"
+                          content="Subscribe"
+                        />
+                      </Grid.Column>
+                    </Grid>
                   </Form.Group>
                   <Message
                     error
@@ -103,9 +109,6 @@ class Subscribe extends Component {
           .taglines {
             padding-bottom: 20px;
           }
-          .update_container {
-            background-color: #f6f6f6 !important;
-          }
           .update_content {
             display: flex;
             flex-direction: row;
@@ -114,11 +117,6 @@ class Subscribe extends Component {
             align-content: center;
             align-items: center;
           }
-          .container {
-            background-color: #ffffff;
-            text-align: center;
-            padding: 60px;
-          }
         `}</style>
       </div>
     );
diff --git a/pages/index.js b/pages/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
-import { Card, Button, Divider } from 'semantic-ui-react';
-
+import { Card, Button, Divider, Grid, Segment } from 'semantic-ui-react';
 import { baseEventsURL, indexPageEventURL } from '../utils/urls';
 import RowEvent from '../components/row-events';
 import publicPage from '../hocs/public-page';
@@ -170,23 +169,38 @@ class Home extends React.Component {
             </div>
           </section>
           <Divider hidden />
-          <section className="discord">
+          <section className="discord-subscribe">
             <div className="container">
-              <h3 className="taglines">
-                Join our Discord server, and say Hello World!
-              </h3>
-              <Button.Group basic>
-                <Button
-                  content="Join Chat"
-                  icon="discussions"
-                  labelPosition="left"
-                  onClick={() =>
-                    window.open('https://discord.gg/dVnQ2Gf', '_blank')}
-                />
-              </Button.Group>
+              <Grid stackable columns={2} divided>
+                <Grid.Column>
+                  <Segment basic>
+                    <section className="discord">
+                      <div>
+                        <h3 className="taglines">
+                          Join our Discord server, and say Hello World!
+                        </h3>
+                        <Button.Group basic>
+                          <Button
+                            content="Join Chat"
+                            icon="discussions"
+                            labelPosition="left"
+                            onClick={() =>
+                              window.open(
+                                'https://discord.gg/dVnQ2Gf',
+                                '_blank',
+                              )}
+                          />
+                        </Button.Group>
+                      </div>
+                    </section>
+                  </Segment>
+                </Grid.Column>
+                <Grid.Column>
+                  <Subscribe />
+                </Grid.Column>
+              </Grid>
             </div>
           </section>
-          <Subscribe />
         </main>
         <style jsx>{`
           main {
@@ -239,7 +253,7 @@ class Home extends React.Component {
             padding-left: 30px;
             padding-right: 30px;
           }
-          .discord .container {
+          .discord-subscribe .container {
             background: #FAFAFA;
           }
 
