src/components/pages/EventDetail.js

-import React, { Component } from 'react';
 import {
-  Container,
-  Item,
   Button,
   Comment,
+  Container,
+  Divider,
   Form,
   Header,
-  Table,
+  Item,
   Segment,
-  Divider,
-} from 'semantic-ui-react';
-import { connect } from 'react-redux';
-import moment from 'moment';
-import { getEventById, getTrainees, visitorChange, submitVisitors } from '../../actions/statistics';
-import { getNotesByEvent, writeNote, clearWrite, postEventNote } from '../../actions/notes';
-import TraineeTableRow from './EventDetailTableRow';
+  Table,
+} from "semantic-ui-react";
+import React, { Component } from "react";
+import {
+  clearWrite,
+  getNotesByEvent,
+  postEventNote,
+  writeNote,
+} from "../../actions/notes";
+import {
+  getEventById,
+  getTrainees,
+  submitVisitors,
+  visitorChange,
+} from "../../actions/statistics";
 
+import TraineeTableRow from "./EventDetailTableRow";
+import { connect } from "react-redux";
+import moment from "moment";
 
 class EventDetail extends Component {
   constructor(props) {
@@ -31,21 +41,32 @@ class EventDetail extends Component {
     this.props.getNotesByEvent(this.props.match.params.id);
   }
 
-
   renderTrainees() {
     const event = this.props.selectedEvent;
-    return this.props.trainees?.map((item) => {
-      const notes = this.props.eventNotes?.filter(note => note.profile === item.id);
-      return (
-        <TraineeTableRow
-          selectedEvent={event}
-          notes={notes}
-          trainee={item}
-          edit={this.state.edit}
-          key={Math.random()}
-        />
-      );
-    });
+    return this.props.trainees
+      ?.sort(function (a, b) {
+        var nameA = a.full_name.toLowerCase(),
+          nameB = b.full_name.toLowerCase();
+        if (nameA < nameB)
+          //sort string ascending
+          return -1;
+        if (nameA > nameB) return 1;
+        return 0; //default return value (no sorting)
+      })
+      .map((item) => {
+        const notes = this.props.eventNotes?.filter(
+          (note) => note.profile === item.id
+        );
+        return item.role === "Student" ? (
+          <TraineeTableRow
+            selectedEvent={event}
+            notes={notes}
+            trainee={item}
+            edit={this.state.edit}
+            key={item.id}
+          />
+        ) : null;
+      });
   }
 
   renderEvent() {
@@ -53,16 +74,16 @@ class EventDetail extends Component {
     return (
       <Segment>
         <Item>
-          <Divider style={{ fontSize: '2em'}} horizontal>
-            <Header as='h1'>
+          <Divider style={{ fontSize: "2em" }} horizontal>
+            <Header as="h1">
               {name}
-              <Item.Header style={{ fontSize: '0.6em'}}>
-                {moment(date).format('LL')}
+              <Item.Header style={{ fontSize: "0.6em" }}>
+                {moment(date).format("LL")}
               </Item.Header>
             </Header>
           </Divider>
-          <Container textAlign='justified'>
-            <Item.Header as='h3'>Leírás</Item.Header>
+          <Container textAlign="justified">
+            <Item.Header as="h3">Leírás</Item.Header>
             <Item.Content>{description}</Item.Content>
           </Container>
         </Item>
@@ -75,19 +96,20 @@ class EventDetail extends Component {
     return notes.map((note) => {
       if (!note.profile) {
         return (
-          <Comment key={Math.random()}>
-            <Comment.Content>
-              <Comment.Author>{note.created_by_name}</Comment.Author>
-              <Comment.Metadata>
-                {moment(note.created_at).format('LL')}
-              </Comment.Metadata>
-              <Comment.Text>
-                {note.note}
-              </Comment.Text>
-            </Comment.Content>
-          </Comment>);
+          <Segment>
+            <Comment key={Math.random()}>
+              <Comment.Content>
+                <Comment.Author>{note.created_by_name}</Comment.Author>
+                <Comment.Metadata>
+                  {moment(note.created_at).format("LL")}
+                </Comment.Metadata>
+                <Comment.Text>{note.note}</Comment.Text>
+              </Comment.Content>
+            </Comment>
+          </Segment>
+        );
       }
-      return '';
+      return "";
     });
   }
 
@@ -95,66 +117,57 @@ class EventDetail extends Component {
     const event = this.props.selectedEvent;
     const note = this.props.actualNote;
     return (
-      <Container style={{paddingTop: '1em', paddingBottom: '7em'}}>
-        <Container textAlign='center'>
-          { this.props.selectedEvent && this.props.trainees ?
-            this.renderEvent()
-            :
-            ''
-        }
+      <Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
+        <Container textAlign="center">
+          {this.props.selectedEvent && this.props.trainees
+            ? this.renderEvent()
+            : ""}
         </Container>
+        {!this.state.edit ? (
+          <Button onClick={() => this.setState({ edit: true })}>
+            Módosítás
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              this.setState({ edit: false });
+            }}
+          >
+            {" "}
+            Kész
+          </Button>
+        )}
         <Table celled unstackable>
           <Table.Header>
-            <Table.Row textAlign='center'>
+            <Table.Row textAlign="center">
               <Table.HeaderCell>Név</Table.HeaderCell>
               <Table.HeaderCell>Jelen volt</Table.HeaderCell>
               <Table.HeaderCell>Megjegyzések</Table.HeaderCell>
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            { this.props.selectedEvent ?
-              this.renderTrainees()
-              :
-              null
-            }
+            {this.props.selectedEvent ? this.renderTrainees() : null}
           </Table.Body>
         </Table>
-        {!this.state.edit ?
-          <Button onClick={() => this.setState({ edit: true })}>
-            Módosítás
-          </Button>
-        : 
-          <Button onClick={() => {
-              this.setState({ edit: false });
-              this.props.submitVisitors(this.props.selectedEvent);
-            }}
-          > Kész
-          </Button>
-        }
         <Comment.Group>
-          <Header dividing>
-            Megjegyzések
-          </Header>
-          {this.props.eventNotes ?
-            this.renderComments()
-            :
-            ''
-          }
+          <Header dividing>Megjegyzések</Header>
+          {this.props.eventNotes ? this.renderComments() : ""}
           <Form reply>
             <Form.TextArea
               value={note.note}
-              onChange={e => this.props.writeNote(e)}
+              onChange={(e) => this.props.writeNote(e)}
             />
             <Button
               onClick={() => {
-                              this.props.postEventNote({ eventid: event.id,
-                                                        note: note.note });
-                              this.props.clearWrite();
-                            }
-                      }
-              content='Megjegyzés hozzáadása'
-              labelPosition='left'
-              icon='edit'
+                this.props.postEventNote({
+                  eventid: event.id,
+                  note: note.note,
+                });
+                this.props.clearWrite();
+              }}
+              content="Megjegyzés hozzáadása"
+              labelPosition="left"
+              icon="edit"
               primary
             />
           </Form>
@@ -167,8 +180,13 @@ class EventDetail extends Component {
 const mapStateToProps = ({
   notes: { eventNotes, actualNote },
   events: { selectedEvent },
-  trainees: { trainees }
-}) => ({ eventNotes, selectedEvent, trainees, actualNote });
+  trainees: { trainees },
+}) => ({
+  eventNotes,
+  selectedEvent,
+  trainees,
+  actualNote,
+});
 
 export default connect(mapStateToProps, {
   getEventById,

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 } from 'semantic-ui-react';
 import { connect } from 'react-redux';
-import { getStaffEvents, deleteEvent } from '../../actions/statistics';
-import AddEventForm from '../forms/AddEventForm';
+import moment from 'moment';
 
 class Events extends Component {
   UNSAFE_componentWillMount() {
@@ -12,56 +13,62 @@ class Events extends Component {
   }
 
   renderEvents() {
-    return this.props.events.map((event) => { 
-      return (
-        <Table.Row >
-          <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 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>
-      );
-    });
+    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 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'>
-        <div style={{overflowX: 'scroll'}}>
-          <Table color='blue' unstackable celled selectable compact
-          size='small'>
+      <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 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'}
+              {this.props.events
+                ? this.renderEvents()
+                : 'Nincs még alkalom beírva'}
             </Table.Body>
           </Table>
         </div>
         <br />
-        <AddEventForm/>
+        <AddEventForm />
       </Container>
     );
   }
@@ -69,4 +76,6 @@ class Events extends Component {
 
 const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
 
-export default connect(mapStateToProps, { getStaffEvents, 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.75px;
+}
+
+.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;
 }