src/components/pages/Groups.js

-import React, { Component } from 'react';
-import { Container, Header, Segment } from 'semantic-ui-react';
 import './Groups.css';
-import { connect } from 'react-redux';
-import GroupCard from '../extra/GroupCard';
 
-import { getGroups } from '../../actions/groups';
+import { Container, Header, Segment } from 'semantic-ui-react';
+import React, { Component } from 'react';
 
+import GroupCard from '../extra/GroupCard';
+import { connect } from 'react-redux';
+import { getGroups } from '../../actions/groups';
 
 class Groups extends Component {
   UNSAFE_componentWillMount() {
@@ -15,11 +15,11 @@ class Groups extends Component {
   render() {
     return (
       <div>
-        <Segment inverted textAlign='center' vertical>
+        <Segment inverted textAlign="center" vertical>
           <Container>
             <Header
-              as='h1'
-              content='Köreink'
+              as="h1"
+              content="Köreink"
               inverted
               style={{
                 fontSize: '3em',
@@ -36,7 +36,13 @@ class Groups extends Component {
             {this.props.groups
               // eslint-disable-next-line arrow-body-style
               .map((item) => {
-                return <GroupCard key={item.id} label={item.name} value={item.description} />;
+                return (
+                  <GroupCard
+                    key={item.id}
+                    label={item.name}
+                    value={item.description}
+                  />
+                );
               })}
           </Container>
         </Segment>

src/components/pages/Home.css

@@ -10,4 +10,28 @@
   -webkit-text-fill-color: white;
 }
 
+.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;
+}

src/components/pages/LeaderBoard.js

-import React, { Component } from 'react';
 import { Container, Table } from 'semantic-ui-react';
+import React, { Component } from 'react';
+
 import { connect } from 'react-redux';
 import { getTrainees } from '../../actions/statistics';
 
@@ -10,57 +11,46 @@ class LeaderBoard extends Component {
 
   // Every event rendered
   renderTraineeBits() {
-    return this.props.trainees.sort((a, b) => (Number(b.homework_bits) + b.events_visited)
-        - (Number(a.homework_bits) + a.events_visited)).map((trainee) => (
-      trainee.role === 'Student'
-        ? (
+    return this.props.trainees
+      .sort(
+        (a, b) =>
+          (Number(b.homework_bits) + Number(b.events_visited) + Number(b.extra_bits)) -
+          (Number(a.homework_bits) + Number(a.events_visited) + Number(a.extra_bits))
+      )
+      .map((trainee) =>
+        trainee.role === 'Student' ? (
           <Table.Row key={trainee.nick}>
-            <Table.Cell textAlign='center'>
-              {trainee.full_name}
-            </Table.Cell>
-            <Table.Cell textAlign='center'>
-              {trainee.events_visited}
+            <Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
+            <Table.Cell textAlign="center">{trainee.events_visited}</Table.Cell>
+            <Table.Cell textAlign="center">
+              {Number(trainee.homework_bits) + Number(trainee.extra_bits)}
             </Table.Cell>
-            <Table.Cell textAlign='center'>
-              {Number(trainee.homework_bits)}
-            </Table.Cell>
-            <Table.Cell textAlign='center'>
-              {Number(trainee.homework_bits) + trainee.events_visited}
+            <Table.Cell textAlign="center">
+              {Number(trainee.homework_bits) + trainee.events_visited + Number(trainee.extra_bits)}
             </Table.Cell>
           </Table.Row>
-        )
-        : null
-    ));
+        ) : null
+      );
   }
 
   render() {
     return (
-      <Container textAlign='center' style={{ overflowX: 'scroll' }}>
-        <Table color='blue' unstackable celled selectable compact>
+      <Container textAlign="center" style={{ overflowX: 'scroll' }}>
+        <Table color="blue" unstackable celled selectable compact>
           <Table.Header>
             <Table.Row>
-              <Table.HeaderCell textAlign='center'>
-                Képződők
-              </Table.HeaderCell>
-              <Table.HeaderCell textAlign='center'>
-                Jelenlét
-              </Table.HeaderCell>
-              <Table.HeaderCell textAlign='center'>
-                Bitek
-              </Table.HeaderCell>
-              <Table.HeaderCell textAlign='center'>
-                Szumma
-              </Table.HeaderCell>
+              <Table.HeaderCell textAlign="center">Képződők</Table.HeaderCell>
+              <Table.HeaderCell textAlign="center">Jelenlét</Table.HeaderCell>
+              <Table.HeaderCell textAlign="center">Bitek</Table.HeaderCell>
+              <Table.HeaderCell textAlign="center">Szumma</Table.HeaderCell>
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            {this.props.trainees
-              ? this.renderTraineeBits()
-              : (
+            {this.props.trainees ? (
+              this.renderTraineeBits()
+            ) : (
               <Table.Row>
-                  <Table.Cell>
-                  Nincsenek képződők
-                  </Table.Cell>
+                <Table.Cell>Nincsenek képződők</Table.Cell>
               </Table.Row>
             )}
           </Table.Body>
@@ -70,6 +60,9 @@ class LeaderBoard extends Component {
   }
 }
 
-const mapStateToProps = ({ trainees: { trainees }, user }) => ({ trainees, user });
+const mapStateToProps = ({ trainees: { trainees }, user }) => ({
+  trainees,
+  user,
+});
 
 export default connect(mapStateToProps, { getTrainees })(LeaderBoard);

src/components/pages/NotFound.js

+import { Button, Container, Header, Icon, Segment } from 'semantic-ui-react';
 import React, { Component } from 'react';
-import {
-  Button, Container, Header, Icon, Segment,
-} from 'semantic-ui-react';
 
 export default class NotFound extends Component {
   render() {
     return (
       <div>
-        <Segment inverted textAlign='center' vertical>
+        <Segment inverted textAlign="center" vertical>
           <Container>
             <Header
-              as='h1'
-              content='404 - A keresett oldal nem található!'
+              as="h1"
+              content="404 - A keresett oldal nem található!"
               inverted
               style={{
                 fontSize: '3em',
@@ -21,9 +19,9 @@ export default class NotFound extends Component {
               }}
             />
             <Button
-              href='/'
+              href="/"
               primary
-              size='huge'
+              size="huge"
               style={{
                 fontSize: '2em',
                 marginTop: '1em',
@@ -31,7 +29,7 @@ export default class NotFound extends Component {
               }}
             >
               Vissza a Főoldalra
-              <Icon name='right arrow' />
+              <Icon name="right arrow" />
             </Button>
           </Container>
         </Segment>