From e5e86163ead47f1ba6af30e6fba9585b0abadfb3 Mon Sep 17 00:00:00 2001
From: Bilal Catic <bilal.catic@hotmail.com>
Date: Tue, 18 Jun 2019 15:25:24 +0200
Subject: [PATCH] improve date picker layout

---
 .../src/components/DateRangePicker/index.js   | 66 +++++++++++--------
 1 file changed, 40 insertions(+), 26 deletions(-)

diff --git a/client/src/components/DateRangePicker/index.js b/client/src/components/DateRangePicker/index.js
index 442a700..74d23f7 100644
--- a/client/src/components/DateRangePicker/index.js
+++ b/client/src/components/DateRangePicker/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 
-import { Form, Message } from 'semantic-ui-react';
+import { Form, Message, Grid } from 'semantic-ui-react';
 
 import { defaultDateFormat } from '../../constants/constants';
 
@@ -81,31 +81,45 @@ class DateRangePicker extends Component {
 
         return (
             <Form>
-                <Form.Group widths="equal">
-                    <Form.Input
-                        fluid
-                        required
-                        label={startDateLabel}
-                        type="date"
-                        value={startDateValue}
-                        onChange={this.onStartDateChange.bind(this)}
-                    />
-                    <Form.Input
-                        fluid
-                        required
-                        label={endDateLabel}
-                        type="date"
-                        value={endDateValue}
-                        onChange={this.onEndDateChange.bind(this)}
-                    />
-                </Form.Group>
-                { error &&
-                    <Message color="orange" onDismiss={this.onDismiss.bind(this)}>
-                        <Message.Header>Wrong date</Message.Header>
-                        <p><b>{startDateLabel}</b> has to be before <b>{endDateLabel}</b></p>
-                    </Message>
-                }
-                <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
+                <Grid columns="equal">
+                    <Grid.Row>
+                        <Grid.Column>
+                            <label>{startDateLabel}</label>
+                            <Form.Input
+                                fluid
+                                required
+                                type="date"
+                                value={startDateValue}
+                                onChange={this.onStartDateChange.bind(this)}
+                            />
+                        </Grid.Column>
+                        <Grid.Column>
+                            <label>{endDateLabel}</label>
+                            <Form.Input
+                                fluid
+                                required
+                                type="date"
+                                value={endDateValue}
+                                onChange={this.onEndDateChange.bind(this)}
+                            />
+                        </Grid.Column>
+                    </Grid.Row>
+                    { error &&
+                        <Grid.Row>
+                            <Grid.Column>
+                                <Message color="orange" onDismiss={this.onDismiss.bind(this)}>
+                                    <Message.Header>Wrong date</Message.Header>
+                                    <p><b>{startDateLabel}</b> has to be before <b>{endDateLabel}</b></p>
+                                </Message>
+                            </Grid.Column>
+                        </Grid.Row>
+                    }
+                    <Grid.Row>
+                        <Grid.Column>
+                            <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
+                        </Grid.Column>
+                    </Grid.Row>
+                </Grid>
             </Form>
         );
     }