Resolved merge conflicts.

client/components/HomeView/HomeView.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { graphql, createFragmentContainer } from 'react-relay';
 import Page from 'components/Page/Page';
 import Neighbour from 'components/Nudges/Neighbour/Neighbour'
+import RankingScreen from 'components/Nudges/RankingScreen/RankingScreen';
 import { withAuth } from 'modules/auth/utils';
-import { Button, Segment, Header, Label, Statistic, Form } from 'semantic-ui-react';
+import { Button, Segment, Header, Label, Statistic, Form, Icon, Popup } from 'semantic-ui-react';
 import { Link } from 'found';
 import styles from './HomeView.scss';
 import classNames from 'classnames';
@@ -40,10 +41,20 @@ class HomeView extends React.Component {
 
             <div className={styles.currentTime}>
               <Segment floated='right'>
+                  <Icon name='clock' size='large' />
                 16:11
               </Segment>
             </div>
 
+
+           <Popup position='top-left'
+           trigger={
+              <Icon name='winner' size='huge' />
+            }
+            content={<RankingScreen/>}
+            />
+
+
             <div className={styles.timeContainer}>
               <Segment circular className={styles.timeSegment}>
                 <Statistic className={styles.timeLabel}>
@@ -84,8 +95,8 @@ class HomeView extends React.Component {
             Bestätigen
           </Button>
         </Form>
-
           </Segment>
+
       </section>
       </Page>
     );

client/components/HomeView/HomeView.scss

@@ -13,6 +13,15 @@
     clear: both;
   }
 
+  .ranking{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 20px;
+    justify-content: center;
+
+  }
+
   .form {
     width: 500px;
   }

client/components/Nudges/RankingScreen/RankingScreen.js

+import React from 'react';
+//import { graphql, createFragmentContainer } from 'react-relay';
+import { Table } from 'semantic-ui-react';
+import styles from './RankingScreen.scss';
+
+
+
+const rankingEntries = [
+                        {id: "1", name: "Peter", score: "54", rank: "#1"},
+                        {id: "2", name: "Felix", score: "37", rank: "#2"},
+                        {id: "3", name: "Daniel", score: "26", rank: "#3"},
+                        {id: "4", name: "Paul", score: "13", rank: "#4"},
+                        {id: "5", name: "David", score: "7", rank: "#5"},
+                      ];
+
+class RankingScreen extends React.Component {
+
+
+
+  render() {
+
+      return (
+        <div className={styles.root}>
+          <h2 className={styles.heading}>#369 Clique</h2>
+          <Table singleLine className={styles.books}>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell className={styles.name}>Name</Table.HeaderCell>
+                <Table.HeaderCell className={styles.score}>Score</Table.HeaderCell>
+                <Table.HeaderCell className={styles.rank}>Rang</Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+
+            <Table.Body>
+
+              {rankingEntries.map(e =>
+
+
+                    <Table.Row key={e.id} >
+                      {e.name == "Paul" &&
+                        <Table.Cell className={styles.user}>{e.name}</Table.Cell>
+                      }
+                      {e.name != "Paul" &&
+                        <Table.Cell >{e.name}</Table.Cell>
+                      }
+
+
+                      {e.name == "Paul" &&
+                        <Table.Cell className={styles.user}>{e.score}</Table.Cell>
+                      }
+                      {e.name != "Paul" &&
+                        <Table.Cell >{e.score}</Table.Cell>
+                      }
+
+
+                      {e.name == "Paul" &&
+                        <Table.Cell className={styles.user}>{e.rank}</Table.Cell>
+                      }
+                      {e.name != "Paul" &&
+                        <Table.Cell >{e.rank}</Table.Cell>
+                      }
+
+                    </Table.Row>
+
+                )}
+
+
+            </Table.Body>
+
+          </Table>
+        </div>
+      );
+    }
+  }
+
+export default RankingScreen

client/components/Nudges/RankingScreen/RankingScreen.scss

+@import "./global.scss";
+
+.root {
+  .heading{
+    text-align: center;
+    color: rgba(0, 0, 0, 0.4);
+  }
+  .table{
+    width: 100%;
+    table-layout: fixed;
+  }
+  .name{
+    width: 40%;
+  }
+  .score{
+    width: 40%;
+  }
+  .rank{
+    width: 20%;
+    text-align: right!important;
+  }
+  .user{
+    color: rgba(0, 158, 224, 1);
+  }
+
+}