From 826d179ea2fece57a44f24c2fbca5d7e110d1d77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Sat, 2 Feb 2019 22:30:03 +0100
Subject: [PATCH] Style tables like in homework page, style the buttons
---
src/components/forms/AddEventForm.js | 5 ++++-
src/components/forms/AddNewsForm.js | 5 ++++-
src/components/forms/EditEventForm.js | 5 +++--
src/components/pages/Applications.js | 2 +-
src/components/pages/EventDetail.js | 8 ++++++--
src/components/pages/Events.js | 14 +++++++-------
src/components/pages/Trainees.js | 4 ++--
7 files changed, 27 insertions(+), 16 deletions(-)
diff --git a/src/components/forms/AddEventForm.js b/src/components/forms/AddEventForm.js
index 22b4016..3be27b0 100644
--- a/src/components/forms/AddEventForm.js
+++ b/src/components/forms/AddEventForm.js
@@ -31,9 +31,12 @@ class AddEventForm extends Component {
open={this.state.showModal}
trigger={
<Button
+ inverted
+ color='green'
size='big'
onClick={() => { this.setState({ showModal: true }); }}
- >Alkalom hozzĂĄadĂĄsa
+ >
+ <Icon name='plus' />Alkalom hozzĂĄadĂĄsa
</Button>
}
>
diff --git a/src/components/forms/AddNewsForm.js b/src/components/forms/AddNewsForm.js
index 24deefa..ec68182 100644
--- a/src/components/forms/AddNewsForm.js
+++ b/src/components/forms/AddNewsForm.js
@@ -20,9 +20,12 @@ class AddNewsForm extends Component {
open={this.state.showModal}
trigger={
<Button
+ inverted
+ color='green'
size='big'
onClick={() => { this.setState({ showModal: true }); }}
- >HĂr hozzĂĄadĂĄsa
+ >
+ <Icon name='plus' />HĂr hozzĂĄadĂĄsa
</Button>
}
>
diff --git a/src/components/forms/EditEventForm.js b/src/components/forms/EditEventForm.js
index fd50446..d0ec1fb 100644
--- a/src/components/forms/EditEventForm.js
+++ b/src/components/forms/EditEventForm.js
@@ -34,11 +34,12 @@ class EditEventForm extends Component {
open={this.state.showModal}
trigger={
<Button
- compact
+ inverted
+ color='orange'
onClick={() => { this.props.onClick();
this.setState({ showModal: true }); }}
- size='mini'
>
+ <Icon name='edit'/>
Szerkeszt
</Button>
}
diff --git a/src/components/pages/Applications.js b/src/components/pages/Applications.js
index 934252c..c91771e 100644
--- a/src/components/pages/Applications.js
+++ b/src/components/pages/Applications.js
@@ -79,7 +79,7 @@ class Applications extends Component {
padding: '80px'
}}
>
- <Table color='blue' celled selectable compact>
+ <Table color='blue' selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Jelentkezettek</Table.HeaderCell>
diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
index 4c75171..3584835 100644
--- a/src/components/pages/EventDetail.js
+++ b/src/components/pages/EventDetail.js
@@ -109,11 +109,11 @@ class EventDetail extends Component {
''
}
</Container>
- <Table celled centered>
+ <Table centered>
<Table.Header>
<Table.Row>
<Table.HeaderCell>NĂŠv</Table.HeaderCell>
- <Table.HeaderCell>Jelen volt</Table.HeaderCell>
+ <Table.HeaderCell textAlign='center'>Jelen volt</Table.HeaderCell>
<Table.HeaderCell>MegjegyzĂŠsek</Table.HeaderCell>
</Table.Row>
</Table.Header>
@@ -126,12 +126,16 @@ class EventDetail extends Component {
</Table.Body>
</Table>
<Button
+ inverted
+ color='orange'
onClick={() => this.setState({ edit: true })}
>
Szerkeszt
</Button>
{ this.state.edit ?
<Button
+ inverted
+ color='blue'
onClick={() => {
this.setState({ edit: false });
this.props.submitVisitors(this.props.selectedEvent);
diff --git a/src/components/pages/Events.js b/src/components/pages/Events.js
index d5b6d30..4a06d79 100644
--- a/src/components/pages/Events.js
+++ b/src/components/pages/Events.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import moment from 'moment';
import { Link } from 'react-router-dom';
-import { Container, Table, Button } from 'semantic-ui-react';
+import { Container, Table, Button, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getStaffEvents, deleteEvent, selectEventForEdit } from '../../actions/statistics';
import AddEventForm from '../forms/AddEventForm';
@@ -24,21 +24,21 @@ class Events extends Component {
</Table.Cell>
<Table.Cell>{moment(event.date).format('LL')}</Table.Cell>
<Table.Cell>{event.visitor_number}</Table.Cell>
- <Table.Cell>
+ <Table.Cell textAlign='center'>
+ <EditEventForm onClick={() => this.props.selectEventForEdit(event)} />
<ConfirmModal
text={`tĂśrĂślni akarod a kĂśvetkezĹ alkalmat:${event.name}`}
button={
<Button
- compact
+ inverted
color='red'
- size='mini'
>
- TĂśrlĂŠs
+ <Icon name='x' />
+ TĂśrlĂŠs
</Button>
}
onAccept={() => this.props.deleteEvent(event)}
/>
- <EditEventForm onClick={() => this.props.selectEventForEdit(event)} />
</Table.Cell>
</Table.Row>
);
@@ -48,7 +48,7 @@ class Events extends Component {
render() {
return (
<Container textAlign='center'>
- <Table color='blue' celled selectable compact>
+ <Table color='blue' selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Alkalom neve</Table.HeaderCell>
diff --git a/src/components/pages/Trainees.js b/src/components/pages/Trainees.js
index e49cc33..0847eef 100644
--- a/src/components/pages/Trainees.js
+++ b/src/components/pages/Trainees.js
@@ -43,7 +43,7 @@ class Trainees extends Component {
renderTableHeader() {
return (this.props.events.map(event => (
- <Table.HeaderCell>
+ <Table.HeaderCell textAlign='center'>
{event.name}
</Table.HeaderCell>)));
}
@@ -51,7 +51,7 @@ class Trainees extends Component {
render() {
return (
<Container textAlign='center'>
- <Table color='blue' celled selectable compact>
+ <Table color='blue' selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell>KĂŠpzĹdĹk</Table.HeaderCell>
--
GitLab