src/components/forms/InfoModal.js

+import { Button, Header, Icon, Modal } from 'semantic-ui-react';
+import React, { Component } from 'react';
+
+class InfoModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  close = () => this.setState({ showModal: false });
+
+  open = () => this.setState({ showModal: true });
+
+  render() {
+    const { button, title, content } = this.props;
+    const open = this.state.showModal;
+    return (
+      <Modal
+        open={open}
+        closeOnDimmerClick
+        trigger={button}
+        onOpen={this.open}
+        onClose={this.close}
+        size="small"
+        basic
+      >
+        <Header icon="info" content={title} />
+        <Modal.Content>
+          {content.split('\n').map((s) => (
+            <p key={Math.random()}>{s}</p>
+          ))}
+        </Modal.Content>
+        <Modal.Actions>
+          <Button color="green" inverted onClick={() => this.close()}>
+            <Icon name="checkmark" /> Rendben
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+export default InfoModal;

src/components/forms/SolutionDetailsForm.js

+import './Forms.css';
+
+import { Button, Divider, Header, Icon, Modal } from 'semantic-ui-react';
 import React, { Component } from 'react';
-import { Modal, Button, Header, Icon, Divider } from 'semantic-ui-react';
-import { connect } from 'react-redux';
+import { getDocuments, getSolutions } from '../../actions/homework';
+
 import CorrectSolutionForm from './CorrectSolutionForm';
-import { emptyMessage } from '../pages/Homework';
-import './Forms.css';
+import { connect } from 'react-redux';
+import { customMessage } from '../pages/Homework';
 
 class SolutionDetailsForm extends Component {
   constructor(props) {
@@ -14,97 +17,143 @@ class SolutionDetailsForm extends Component {
   }
 
   render() {
-    const taskSolutions = this.props.homeworks.solutions.filter(solution =>
-      solution.task === this.props.taskid);
+    const taskSolutions = this.props.homeworks.solutions.filter(
+      (solution) => solution.task === this.props.taskid
+    );
 
     const noSubmitStudents = [];
     const waitForCorrectionStudents = [];
     const noAcceptStudents = [];
     const acceptedStudents = [];
 
-    for (let i = 0; i < this.props.homeworks.profiles.length; i += 1) {
-      const profileSolutions = taskSolutions.filter(solution =>
-        solution.created_by === this.props.homeworks.profiles[i].id);
+    this.props.homeworks.profiles.forEach((profile) => {
+      const profileSolutions = taskSolutions.filter(
+        (solution) => solution.created_by === profile.id
+      );
 
-      if (this.props.homeworks.profiles[i].role === 'Student') {
+      if (profile.role === 'Student') {
         if (profileSolutions.length === 0) {
-          noSubmitStudents.push(this.props.homeworks.profiles[i]);
-        } else if (taskSolutions[taskSolutions.length - 1].corrected === false) {
-          waitForCorrectionStudents.push(this.props.homeworks.profiles[i]);
-        } else if (taskSolutions[taskSolutions.length - 1].accepted === false) {
-          noAcceptStudents.push(this.props.homeworks.profiles[i]);
+          noSubmitStudents.push(profile);
+        } else if (
+          profileSolutions[profileSolutions.length - 1].corrected === false
+        ) {
+          waitForCorrectionStudents.push(profile);
+        } else if (
+          profileSolutions[profileSolutions.length - 1].accepted === false
+        ) {
+          noAcceptStudents.push(profile);
         } else {
-          acceptedStudents.push(this.props.homeworks.profiles[i]);
+          acceptedStudents.push(profile);
         }
       }
-    }
+    });
 
-    const emptyStudentText = 'Nincs ilyen képződő jelenleg.';
+    const noStudentText = 'Nincs ilyen képződő jelenleg.';
 
     return (
       <Modal
         open={this.state.showModal}
+        closeOnDimmerClick
+        onClose={() => this.setState({ showModal: false })}
         trigger={
-          <button id='task' onClick={() => { this.setState({ showModal: true }); }}>
-            <Icon name='external' />
+          <button
+            type="button"
+            id="task"
+            onClick={() => {
+              this.setState({ showModal: true });
+              this.props.getSolutions();
+              this.props.getDocuments();
+            }}
+          >
+            <Icon name="external" />
             {this.props.tasktitle}
           </button>
         }
       >
         <Modal.Header>
-          A megoldások beadásának állapota a(z) {this.props.tasktitle} nevű feladatnál:
+          A megoldások beadásának állapota a(z) {this.props.tasktitle} nevű
+          feladatnál:
         </Modal.Header>
         <Modal.Content>
-          <Header as='h3'>A feladat leírása:</Header>
-          {this.props.taskdesc.split('\n').map(s => (<p>{s}</p>))}
+          <Header as="h3">A feladat leírása:</Header>
+          {this.props.taskdesc.split('\n').map((s) => (
+            <p key={Math.random()}>{s}</p>
+          ))}
           <Divider />
-          <Header as='h3'>Nem érkezett még megoldás:</Header>
-          {noSubmitStudents.length === 0 ?
-              emptyMessage(emptyStudentText) :
-              noSubmitStudents.map(student => (
-                <Button color='blue' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button>
-              ))
-          }
+          <Header as="h3">Nem érkezett még megoldás:</Header>
+          {noSubmitStudents.length === 0
+            ? customMessage(noStudentText)
+            : noSubmitStudents.map((student) => (
+                <Button
+                  key={Math.random()}
+                  color="blue"
+                  style={{ marginRight: '1.5em', marginTop: '1.5em' }}
+                >
+                  {student.full_name}
+                </Button>
+              ))}
           <Divider />
-          <Header as='h3'>Javításra vár (A névre kattintva kijavítható a megoldás):</Header>
-          {waitForCorrectionStudents.length === 0 ?
-            emptyMessage(emptyStudentText) :
-            waitForCorrectionStudents.map(student => (
-              <CorrectSolutionForm
-                studentName={student.nick}
-                studentFullName={student.full_name}
-                studentId={student.id}
-                taskTitle={this.props.tasktitle}
-                taskSolutions={taskSolutions}
-              />
-            ))
-          }
+          <Header as="h3">
+            Javításra vár (A névre kattintva kijavítható a megoldás):
+          </Header>
+          {waitForCorrectionStudents.length === 0
+            ? customMessage(noStudentText)
+            : waitForCorrectionStudents.map((student) => (
+                <CorrectSolutionForm
+                  key={Math.random()}
+                  color="orange"
+                  studentName={student.nick}
+                  studentFullName={student.full_name}
+                  studentId={student.id}
+                  taskTitle={this.props.tasktitle}
+                  taskSolutions={taskSolutions}
+                />
+              ))}
           <Divider />
-          <Header as='h3'>A megoldás nem elfogadható:</Header>
-          {noAcceptStudents.length === 0 ?
-            emptyMessage(emptyStudentText) :
-            noAcceptStudents.map(student => (
-              <Button color='red' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button>
-            ))
-        }
+          <Header as="h3">
+            A megoldás nem elfogadható (A névre kattintva módosítható a
+            javítás):
+          </Header>
+          {noAcceptStudents.length === 0
+            ? customMessage(noStudentText)
+            : noAcceptStudents.map((student) => (
+                <CorrectSolutionForm
+                  key={Math.random()}
+                  color="red"
+                  studentName={student.nick}
+                  studentFullName={student.full_name}
+                  studentId={student.id}
+                  taskTitle={this.props.tasktitle}
+                  taskSolutions={taskSolutions}
+                />
+              ))}
           <Divider />
-          <Header as='h3'>Elfogadva:</Header>
-          {acceptedStudents.length === 0 ?
-            emptyMessage(emptyStudentText) :
-            acceptedStudents.map(student => (
-              <Button color='green' style={{ marginRight: '1.5em', marginTop: '1.5em' }}>{student.full_name}</Button>
-            ))
-        }
+          <Header as="h3">
+            Elfogadva (A névre kattintva módosítható a javítás):
+          </Header>
+          {acceptedStudents.length === 0
+            ? customMessage(noStudentText)
+            : acceptedStudents.map((student) => (
+                <CorrectSolutionForm
+                  key={Math.random()}
+                  color="green"
+                  studentName={student.nick}
+                  studentFullName={student.full_name}
+                  studentId={student.id}
+                  taskTitle={this.props.tasktitle}
+                  taskSolutions={taskSolutions}
+                />
+              ))}
         </Modal.Content>
         <Modal.Actions>
           <Button
             inverted
-            color='green'
+            color="green"
             onClick={() => {
               this.setState({ showModal: false });
-              }}
+            }}
           >
-            <Icon name='checkmark' /> Kész
+            <Icon name="checkmark" /> Kész
           </Button>
         </Modal.Actions>
       </Modal>
@@ -115,4 +164,6 @@ class SolutionDetailsForm extends Component {
 const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
 
 export default connect(mapStateToProps, {
+  getSolutions,
+  getDocuments,
 })(SolutionDetailsForm);

src/components/pages/ApplicantProfile.js

+import { Button, Container, Header, Item, Label } from 'semantic-ui-react';
 import React, { Component } from 'react';
-import { Container, Header, Item, Button, Label, List } from 'semantic-ui-react';
-import { connect } from 'react-redux';
 import { getSelectedProfile, setStatus } from '../../actions/statistics';
+
 import ConfirmModal from '../forms/ConfirmModal';
+import { connect } from 'react-redux';
 
-const options = [
-  { key: 'DT', text: 'DevTeam' },
-  { key: 'NET', text: 'NETeam' },
-  { key: 'ST', text: 'SecurITeam' },
-  { key: 'SYS', text: 'SysAdmin' },
-  { key: 'HAT', text: 'Hallgatói Tudásbázis' },
-];
+const groupTypes = {
+  HAT: {
+    name: 'Hallgatói Tudásbázis',
+    color: 'purple',
+  },
+  SYS: {
+    name: 'Sysadmin',
+    color: 'violet',
+  },
+  NET: {
+    name: 'NETeam',
+    color: 'blue',
+  },
+  ST: {
+    name: 'SecurITeam',
+    color: 'teal',
+  },
+  DT: {
+    name: 'DevTeam',
+    color: 'green',
+  },
+};
 
 class ApplicantProfile extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.getSelectedProfile(this.props.match.params.id);
   }
 
-  renderGroups() {
-    const { groups } = this.props.selectedProfile;
-    const groupNames = options.map(item => (groups.includes(item.key) ? item.text : null));
-    return groupNames.map(item => (
-      <List.Item>
-        <List.Content>
-          <List.Header>{item}</List.Header>
-        </List.Content>
-      </List.Item>
-    ));
-  }
-
   render() {
-    const { id, signed, groups, role, full_name, nick, motivation_about, motivation_exercise, motivation_profession }
-    = this.props.selectedProfile;
+    const {
+      id,
+      signed,
+      role,
+      full_name,
+      nick,
+      motivation_about,
+      motivation_exercise,
+      motivation_profession,
+      groups,
+    } = this.props.selectedProfile;
     return (
-      <Container style={{ padding: '60px' }}>
+      <Container style={{ paddingTop: '3em', paddingBottom: '6em' }}>
         <Item>
           <Item.Content>
-            <Container textAlign='center'>
-              <Header as='h2'>{full_name}</Header>
+            <Container textAlign="center" style={{ paddingBottom: '2em' }}>
+              <Header as="h2">{full_name}</Header>
               <Item.Meta>{nick}</Item.Meta>
+              <Header as="h2">
+                {groups?.map((group) => (
+                  <Label color={groupTypes[group].color}>
+                    {groupTypes[group].name}
+                  </Label>
+                ))}
+              </Header>
             </Container>
             <Item.Description>
-              <Container textAlign='justified' style={{ padding: '30px' }}>
-                <Header as='h3'>Magamról, eddigi tevékenységem:</Header>
-                <p>{motivation_about}</p>
-                <Header as='h3'>Szakmai motiváció:</Header>
-                <p>{motivation_profession}</p>
-                <Header as='h3'>Feladatok megoldása:</Header>
-                <p>{motivation_exercise}</p>
-                <Header as='h3'>Érdeklődés:</Header>
-                { groups ?
-                  <List horizontal>
-                    {this.renderGroups()}
-                  </List>
-                  :
-                  null
-                }
+              <Container textAlign="justified" style={{ padding: '1em' }}>
+                <Header as="h3">Magamról, eddigi tevékenységem:</Header>
+                <p>
+                  {motivation_about?.split('\n').map((item, i) => (
+                    <div key={i}>{item}</div>
+                  ))}
+                </p>
+                <Header as="h3">Szakmai motiváció:</Header>
+                <p>
+                  {motivation_profession?.split('\n').map((item, i) => (
+                    <div key={i}>{item}</div>
+                  ))}
+                </p>
+                <Header as="h3">Feladatok megoldása:</Header>
+                <p>
+                  {motivation_exercise?.split('\n').map((item, i) => (
+                    <div key={i}>{item}</div>
+                  ))}
+                </p>
               </Container>
-              <Container textAlign='center' style={{ padding: '20px' }}>
-                <Header as='h3'>Státusz:</Header>
-                { signed ?
+              <Container textAlign="center" style={{ padding: '1em' }}>
+                <Header as="h3">Státusz:</Header>
+                {signed ? (
                   <div>
-                    { role === 'Student' ?
-                      <Label color='green' size='huge'>Elfogadva</Label>
-                        :
-                        null
-                      }
-                    { role === 'Staff' ?
-                      <Label color='blue' size='huge'>Staff</Label>
-                        :
-                        null
-                      }
-                    { role === 'Applicant' ?
-                      <Label color='orange' size='huge'>Jelentkezett</Label>
-                        :
-                        null
-                      }
-                    { role === 'Denied' ?
-                      <Label color='red' size='huge'>Elutasítva</Label>
-                        :
-                        null
-                      }
+                    {role === 'Student' ? (
+                      <Label color="green" size="huge">
+                        Elfogadva
+                      </Label>
+                    ) : null}
+                    {role === 'Staff' ? (
+                      <Label color="blue" size="huge">
+                        Staff
+                      </Label>
+                    ) : null}
+                    {role === 'Applicant' ? (
+                      <Label color="orange" size="huge">
+                        Jelentkezett
+                      </Label>
+                    ) : null}
+                    {role === 'Denied' ? (
+                      <Label color="red" size="huge">
+                        Elutasítva
+                      </Label>
+                    ) : null}
                   </div>
-                  :
-                  <Label color='red' size='huge'>Nem jelentkezett</Label>
-                }
+                ) : (
+                  <Label color="red" size="huge">
+                    Nem jelentkezett
+                  </Label>
+                )}
               </Container>
             </Item.Description>
           </Item.Content>
         </Item>
-        { signed && role !== 'Staff' ?
-          <Container textAlign='center'>
+        {signed && role !== 'Staff' ? (
+          <Container textAlign="center">
             <ConfirmModal
-              button={
-                <Button
-                  color='green'
-                >Jelentkezés elfogadása
-                </Button>}
-              text='elfogadod a jelentkezést'
+              button={<Button color="green">Jelentkezés elfogadása</Button>}
+              text="elfogadod a jelentkezést"
               onAccept={() => this.props.setStatus(id, 'Student')}
             />
             <ConfirmModal
-              button={
-                <Button
-                  color='red'
-                >Jelentkezés elutasítása
-                </Button>}
-              text='elutasítod a jelentkezést'
+              button={<Button color="red">Jelentkezés elutasítása</Button>}
+              text="elutasítod a jelentkezést"
               onAccept={() => this.props.setStatus(id, 'Denied')}
             />
           </Container>
-          :
-          null
-        }
+        ) : null}
       </Container>
     );
   }
 }
 
-const mapStateToProps = ({ trainees: { selectedProfile } }) => ({ selectedProfile });
+const mapStateToProps = ({ trainees: { selectedProfile } }) => ({
+  selectedProfile,
+});
 
-export default connect(mapStateToProps, { getSelectedProfile, setStatus })(ApplicantProfile);
+export default connect(mapStateToProps, { getSelectedProfile, setStatus })(
+  ApplicantProfile
+);

src/components/pages/Applications.js

+import { Button, Container, Label, Table } from 'semantic-ui-react';
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { Container, Table, Label, Button } from 'semantic-ui-react';
-import { connect } from 'react-redux';
 import { getProfiles, setStatus } from '../../actions/statistics';
+
 import ConfirmModal from '../forms/ConfirmModal';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+const role = [
+  {
+    role: 'Staff',
+    text: 'Staff',
+    color: 'blue',
+  },
+  {
+    role: 'Student',
+    text: 'Elfogadott',
+    color: 'green',
+  },
+  {
+    role: 'Applicant',
+    text: 'Jelentkezett',
+    color: 'orange',
+  },
+  {
+    role: 'Denied',
+    text: 'Elutasított',
+    color: 'red',
+  },
+  {
+    role: 'no',
+    text: 'Nem jelentkezett',
+    color: 'red',
+  },
+];
 
 class Applications extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.getProfiles();
   }
 
-  renderApplicants() {
+  renderApplicants(format) {
     return this.props.profiles.map((profile) =>
-    { return (
-      <Table.Row>
-        <Table.Cell>
-          <Link to={`applicant/${profile.id}`}>
-            {profile.full_name}
-          </Link>
-        </Table.Cell>
-        { profile.signed ?
-          <Table.Cell textAlign='center'>
-            { profile.role === 'Student' ?
-              <Label color='green'>Elfogadva</Label>
-              :
-              null
-            }
-            { profile.role === 'Staff' ?
-              <Label color='blue'>Staff</Label>
-              :
-              null
-            }
-            { profile.role === 'Applicant' ?
-              <Label color='orange'>Jelentkezett</Label>
-              :
-              null
-            }
-            { profile.role === 'Denied' ?
-              <Label color='red'>Elutasítva</Label>
-              :
-              null
-            }
+      profile.role === format.role &&
+      (profile.signed === true || profile.role === 'Staff') ? (
+        <Table.Row key={profile.id}>
+          <Table.Cell textAlign="center">
+            <Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
           </Table.Cell>
-          :
-          <Table.Cell textAlign='center'>
-            { profile.role === 'Staff' ?
-              <Label color='blue'>Staff</Label>
-              :
-              <Label color='red'>Nem jelentkezett</Label>
-            }
+          {format.role === 'Staff' ? null : (
+            <Table.Cell textAlign="center">
+              <ConfirmModal
+                button={
+                  <Button color="blue" size="tiny">
+                    ADD STAFF STATUS
+                  </Button>
+                }
+                text="staff jogot adsz neki"
+                onAccept={() => this.props.setStatus(profile.id, 'Staff')}
+              />
+            </Table.Cell>
+          )}
+        </Table.Row>
+      ) : null
+    );
+  }
+
+  renderNotApplicants(format) {
+    return this.props.profiles.map((profile) =>
+      profile.signed === false && profile.role !== 'Staff' ? (
+        <Table.Row key={profile.id}>
+          <Table.Cell textAlign="center">
+            <Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
           </Table.Cell>
-        }
-        <Table.Cell>
-          { profile.role !== 'Staff' ?
-            <ConfirmModal
-              button={<Button
-                color='blue'
-                size='tiny'
-              >
-              Staff jog adás
-            </Button>}
-            text='staff jogot adsz neki'
-            onAccept={() => this.props.setStatus(profile.id, 'Staff')}
-            />
-          :
-          null }
-        </Table.Cell>
-      </Table.Row>
+          {format.role === 'Staff' ? null : (
+            <Table.Cell textAlign="center">
+              <ConfirmModal
+                button={
+                  <Button color="blue" size="tiny">
+                    ADD STAFF STATUS
+                  </Button>
+                }
+                text="staff jogot adsz neki"
+                onAccept={() => this.props.setStatus(profile.id, 'Staff')}
+              />
+            </Table.Cell>
+          )}
+        </Table.Row>
+      ) : null
+    );
+  }
+
+  renderTable(format) {
+    return (
+      <Table color="blue" unstackable celled selectable compact>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell textAlign="center">
+              <Label color={format.color}>{format.text}</Label>
+            </Table.HeaderCell>
+            {format.role !== 'Staff' ? (
+              <Table.HeaderCell width={3} textAlign="center">
+                <Label color={null}>
+                  {format.role === 'no'
+                    ? this.props.profiles.filter(
+                        (profile) =>
+                          profile.signed === false && profile.role !== 'Staff'
+                      ).length
+                    : this.props.profiles.filter(
+                        (profile) =>
+                          profile.role === format.role &&
+                          (profile.signed === true || profile.role === 'Staff')
+                      ).length}{' '}
+                  fő
+                </Label>
+              </Table.HeaderCell>
+            ) : null}
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {format.role === 'no'
+            ? this.renderNotApplicants(format)
+            : this.renderApplicants(format)}
+        </Table.Body>
+      </Table>
     );
-    });
   }
 
   render() {
     return (
       <Container
-        textAlign='center'
-        style={{
-          padding: '80px'
-        }}
+        textAlign="center"
+        style={{ paddingTop: '1em', paddingBottom: '5em' }}
       >
-        <Table color='blue' selectable compact>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>Jelentkezettek</Table.HeaderCell>
-              <Table.HeaderCell textAlign='center'>Jelentkezés státusza:</Table.HeaderCell>
-              <Table.HeaderCell />
-            </Table.Row>
-          </Table.Header>
-
-          <Table.Body>
-            {this.renderApplicants()}
-          </Table.Body>
-        </Table>
+        {this.renderTable(role[2])} {/* Applicant */}
+        {this.renderTable(role[1])} {/* Student */}
+        {this.renderTable(role[0])} {/* Staff */}
+        {this.renderTable(role[3])} {/* Denied */}
+        {this.renderTable(role[4])} {/* Not Signed */}
       </Container>
     );
   }
 }
 
-const mapStateToProps = ({ trainees: { profiles }, user }) => ({ profiles, user });
+const mapStateToProps = ({ trainees: { profiles }, user }) => ({
+  profiles,
+  user,
+});
 
-export default connect(mapStateToProps, { getProfiles, setStatus })(Applications);
+export default connect(mapStateToProps, { getProfiles, setStatus })(
+  Applications
+);

src/components/pages/CommentModal.js

-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { Button, Comment, Modal } from 'semantic-ui-react';
-import { deleteNote } from '../../actions/notes';
-import ConfirmModal from '../forms/ConfirmModal';
-
-class CommentModal extends Component {
-  renderComments() {
-    const { notes, user } = this.props;
-    return notes.map((note) => {
-      return (
-        <Comment style={{ padding: '1em' }} stylekey={note.id}>
-          <Comment.Content>
-            <Comment.Author><strong>{note.created_by_name}</strong></Comment.Author>
-            <Comment.Text>
-              {note.note}
-            </Comment.Text>
-            { note.created_by_name === user.fullName ?
-              <ConfirmModal
-                text='törölni akarod a megjegyzést'
-                button={
-                  <Button
-                    compact
-                    color='red'
-                    size='mini'
-                  >
-                  Delete
-                  </Button>
-                   }
-                onAccept={() => this.props.deleteNote(note)}
-              />
-              :
-              null }
-          </Comment.Content>
-        </Comment>
-      );
-    });
-  }
-  render() {
-    return (
-      <Modal
-        closeIcon
-        trigger={
-          <Button icon='comment alternate outline' />
-        }
-      >
-        <Modal.Header>Megjegyzések:</Modal.Header>
-        <Modal.Content>
-          {this.renderComments()}
-        </Modal.Content>
-      </Modal>
-    );
-  }
-}
-
-const mapStateToProps = ({ user }) => ({ user });
-
-export default connect(mapStateToProps, { deleteNote })(CommentModal);

src/components/pages/Events.js

+import { Button, Container, Table } from 'semantic-ui-react';
 import React, { Component } from 'react';
-import moment from 'moment';
+import { deleteEvent, getStaffEvents } from '../../actions/statistics';
+
+import AddEventForm from '../forms/AddEventForm';
 import { Link } from 'react-router-dom';
-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';
-import EditEventForm from '../forms/EditEventForm';
-import ConfirmModal from '../forms/ConfirmModal';
+import moment from 'moment';
 
 class Events extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.getStaffEvents();
   }
 
   renderEvents() {
-    return this.props.events.map((event) =>
-    { return (
-      <Table.Row>
-        <Table.Cell>
-          <Link to={`events/${event.id}`}>
-            {event.name}
-          </Link>
+    return this.props.events.map((event) => (
+      <Table.Row key={event.id}>
+        <Table.Cell textAlign="center">
+          <Link to={`events/${event.id}`}>{event.name}</Link>
+        </Table.Cell>
+        <Table.Cell textAlign="center">
+          {moment(event.date).format('LL')}
         </Table.Cell>
-        <Table.Cell>{moment(event.date).format('LL')}</Table.Cell>
-        <Table.Cell>{event.visitor_number}</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
-                inverted
-                color='red'
-              >
-                <Icon name='x' />
-                Törlés
-              </Button>
-               }
-            onAccept={() => this.props.deleteEvent(event)}
-          />
+        <Table.Cell textAlign="center">{event.visitor_number}</Table.Cell>
+        <Table.Cell textAlign="center">
+          <Button
+            onClick={() => this.props.deleteEvent(event)}
+            color="red"
+            compact
+            size="small"
+          >
+            Törlés
+          </Button>
         </Table.Cell>
       </Table.Row>
-    );
-    });
+    ));
   }
 
   render() {
     return (
-      <Container textAlign='center'>
-        <Table color='blue' selectable compact>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>Alkalom neve</Table.HeaderCell>
-              <Table.HeaderCell>Dátum</Table.HeaderCell>
-              <Table.HeaderCell>Jelen voltak</Table.HeaderCell>
-              <Table.HeaderCell />
-            </Table.Row>
-          </Table.Header>
-
-          <Table.Body>
-            {this.props.events ? this.renderEvents() : 'Nincs még alaklom beírva'}
-          </Table.Body>
-        </Table>
+      <Container textAlign="center">
+        <div style={{ overflowX: 'scroll' }}>
+          <Table
+            color="blue"
+            unstackable
+            celled
+            selectable
+            compact
+            size="small"
+          >
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell textAlign="center">
+                  Alkalom neve
+                </Table.HeaderCell>
+                <Table.HeaderCell textAlign="center">Dátum</Table.HeaderCell>
+                <Table.HeaderCell textAlign="center">
+                  Jelen voltak
+                </Table.HeaderCell>
+                <Table.HeaderCell />
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {this.props.events
+                ? this.renderEvents()
+                : 'Nincs még alkalom beírva'}
+            </Table.Body>
+          </Table>
+        </div>
+        <br />
         <AddEventForm />
       </Container>
     );
@@ -70,4 +76,6 @@ class Events extends Component {
 
 const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
 
-export default connect(mapStateToProps, { getStaffEvents, selectEventForEdit, deleteEvent })(Events);
+export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(
+  Events
+);

src/components/pages/Home.css

@@ -5,8 +5,33 @@
 .car-text-kszk {
   position: absolute;
   width: 100%;
-  top: 0px;
+  top: 1vw;
+  text-shadow: black 0px 0px 10px, black 0px 0px 6px;
   -webkit-text-fill-color: white;
-  -webkit-text-stroke-color: black;
-  -webkit-text-stroke-width: 0.1vw;
+}
+
+.quote {
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+
+.quote:before {
+  content: '“';
+  position: absolute;
+  left: -0.45em;
+}
+
+.quote::after {
+  content: '”';
+  margin-right: -1rem;
+}
+
+.quote--container {
+  margin: 2rem auto 0;
+  padding-bottom: 0.7rem;
+}
+
+.quote--author {
+  text-align: right;
+  font-weight: 300;
 }