From cbf821f2084ddfad0cd0e6cb3f699f1c9f800cfd Mon Sep 17 00:00:00 2001
From: iamuteti <iamuteti@gmail.com>
Date: Tue, 11 Dec 2018 14:38:53 +0300
Subject: [PATCH 1/2] adding sementic

---
 .gitignore                             |   1 +
 package-lock.json                      |  93 ++++++++++++--
 package.json                           |   6 +-
 src/components/Account/index.js        | 166 ++++++++++++++++---------
 src/components/Admin/index.js          |   4 +-
 src/components/App/index.js            |   6 +-
 src/components/Messages/MessageItem.js |  89 +++++++------
 src/components/Messages/MessageList.js |   6 +-
 src/components/Messages/Messages.js    |  70 +++++------
 src/components/Navigation/index.js     |  70 +++++++----
 src/components/PasswordChange/index.js |  51 +++++---
 src/components/PasswordForget/index.js |  50 ++++----
 src/components/SignIn/index.js         | 108 +++++++++-------
 src/components/SignOut/index.js        |  11 +-
 src/components/SignUp/index.js         | 112 +++++++++--------
 src/components/Users/UserItem.js       |  52 ++++----
 src/components/Users/UserList.js       |  51 ++++----
 src/index.css                          |   4 +
 18 files changed, 584 insertions(+), 366 deletions(-)

diff --git a/.gitignore b/.gitignore
index 13c5506..39468bd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,4 @@ yarn-error.log*
 
 .firebase
 .firebaserc
+.idea
diff --git a/package-lock.json b/package-lock.json
index be3fda3..d0934b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-firebase-authentication",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1012,6 +1012,15 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@semantic-ui-react/event-stack": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.0.1.tgz",
+      "integrity": "sha512-9YNRr0z9GEvk/yvIzAzv0sbYa/FPrtWTYibu+chJ0CEMQjYDjUdRSqtxXOvP0eM6kZjD1G/Oy1LhPiHG7DRHsg==",
+      "requires": {
+        "exenv": "^1.2.2",
+        "prop-types": "^15.6.2"
+      }
+    },
     "@svgr/core": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@svgr/core/-/core-2.4.1.tgz",
@@ -2912,6 +2921,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -4059,6 +4073,11 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
       "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
     },
+    "epoch-timeago": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/epoch-timeago/-/epoch-timeago-1.1.9.tgz",
+      "integrity": "sha512-yzU3tG9YfvlImtgWjQM753F8+VRHFfUge2Bs++DNOEu5dzK2mX+lRBXSWUQEKGBi4b7WNJHIlQVuCmvp24j14A=="
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -4552,6 +4571,11 @@
         }
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -5647,11 +5671,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5664,15 +5690,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5775,7 +5804,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5785,6 +5815,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5797,17 +5828,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5824,6 +5858,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5896,7 +5931,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5906,6 +5942,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6011,6 +6048,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -8761,6 +8799,11 @@
         "array-includes": "^3.0.3"
       }
     },
+    "keyboard-key": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.0.2.tgz",
+      "integrity": "sha512-05cjQmw4ss/YuY2utmVim0wywDyBZGUivo8siLPkWinwGWtKlO8/4RGbPUqNycwlD3u/3D15eNRjnNAyaTDs8g=="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -13349,6 +13392,35 @@
         "node-forge": "0.7.5"
       }
     },
+    "semantic-ui-react": {
+      "version": "0.83.0",
+      "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.83.0.tgz",
+      "integrity": "sha512-rPW4TZwbDJRJZeKxCpYuNiRnBwUpWeDkZ/yF3j5iLNS8hZ6yOjoFFmqGohqpqKD+jVyzlxz2NCmah54mwbNGOw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "@semantic-ui-react/event-stack": "^3.0.0",
+        "classnames": "^2.2.6",
+        "keyboard-key": "^1.0.2",
+        "lodash": "^4.17.10",
+        "prop-types": "^15.6.2",
+        "shallowequal": "^1.1.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.2.0.tgz",
+          "integrity": "sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "semver": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
@@ -13510,6 +13582,11 @@
         }
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
diff --git a/package.json b/package.json
index 0462ad1..0ca9d3c 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,16 @@
 {
-  "name": "react-semantic-ui-firebase-authentication",
+  "name": "react-firebase-authentication",
   "version": "0.2.0",
   "private": true,
   "dependencies": {
+    "epoch-timeago": "^1.1.9",
     "firebase": "^5.6.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
-    "recompose": "^0.30.0"
+    "recompose": "^0.30.0",
+    "semantic-ui-react": "^0.83.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/Account/index.js b/src/components/Account/index.js
index 9963006..e1a1997 100644
--- a/src/components/Account/index.js
+++ b/src/components/Account/index.js
@@ -10,6 +10,8 @@ import { withFirebase } from '../Firebase';
 import { PasswordForgetForm } from '../PasswordForget';
 import PasswordChangeForm from '../PasswordChange';
 
+import {Grid, Card, Header, Message, Form, Button } from 'semantic-ui-react'
+
 const SIGN_IN_METHODS = [
   {
     id: 'password',
@@ -33,9 +35,29 @@ const AccountPage = () => (
   <AuthUserContext.Consumer>
     {authUser => (
       <div>
-        <h1>Account: {authUser.email}</h1>
-        <PasswordForgetForm />
-        <PasswordChangeForm />
+        <Header as='h2'>Account: {authUser.email}</Header>
+        <Grid columns={2}>
+          <Grid.Column>
+            <Card fluid={true}>
+              <Card.Content>
+                <Card.Header>Reset Password</Card.Header>
+                <Card.Description>
+                  <PasswordForgetForm />
+                </Card.Description>
+              </Card.Content>
+            </Card>
+          </Grid.Column>
+          <Grid.Column>
+            <Card fluid={true}>
+              <Card.Content>
+                <Card.Header>New Password</Card.Header>
+                <Card.Description>
+                  <PasswordChangeForm />
+                </Card.Description>
+              </Card.Content>
+            </Card>
+          </Grid.Column>
+        </Grid>
         <LoginManagement authUser={authUser} />
       </div>
     )}
@@ -95,40 +117,51 @@ class LoginManagementBase extends Component {
     const { activeSignInMethods, error } = this.state;
 
     return (
-      <div>
-        Sign In Methods:
-        <ul>
-          {SIGN_IN_METHODS.map(signInMethod => {
-            const onlyOneLeft = activeSignInMethods.length === 1;
-            const isEnabled = activeSignInMethods.includes(
-              signInMethod.id,
-            );
-
-            return (
-              <li key={signInMethod.id}>
-                {signInMethod.id === 'password' ? (
-                  <DefaultLoginToggle
-                    onlyOneLeft={onlyOneLeft}
-                    isEnabled={isEnabled}
-                    signInMethod={signInMethod}
-                    onLink={this.onDefaultLoginLink}
-                    onUnlink={this.onUnlink}
-                  />
-                ) : (
-                  <SocialLoginToggle
-                    onlyOneLeft={onlyOneLeft}
-                    isEnabled={isEnabled}
-                    signInMethod={signInMethod}
-                    onLink={this.onSocialLoginLink}
-                    onUnlink={this.onUnlink}
-                  />
-                )}
-              </li>
-            );
-          })}
-        </ul>
-        {error && error.message}
-      </div>
+      <Card fluid={true}>
+        <Card.Content>
+          <Card.Header>Sign In Methods</Card.Header>
+          <Card.Description>
+            {error && <Message negative>
+              <p>{error.message}</p>
+            </Message>}
+            <div>
+              {SIGN_IN_METHODS.map(signInMethod => {
+                const onlyOneLeft = activeSignInMethods.length === 1;
+                const isEnabled = activeSignInMethods.includes(
+                  signInMethod.id,
+                );
+
+                return (
+                  <span key={signInMethod.id}>
+                    {signInMethod.id === 'password' ? (
+                      <Grid columns={1}>
+                        <Grid.Column>
+                          <DefaultLoginToggle
+                            onlyOneLeft={onlyOneLeft}
+                            isEnabled={isEnabled}
+                            signInMethod={signInMethod}
+                            onLink={this.onDefaultLoginLink}
+                            onUnlink={this.onUnlink}
+                          />
+                          <br />
+                        </Grid.Column>
+                      </Grid>
+                    ) : (
+                      <SocialLoginToggle
+                        onlyOneLeft={onlyOneLeft}
+                        isEnabled={isEnabled}
+                        signInMethod={signInMethod}
+                        onLink={this.onSocialLoginLink}
+                        onUnlink={this.onUnlink}
+                      />
+                    )}
+                  </span>
+                );
+              })}
+            </div>
+          </Card.Description>
+        </Card.Content>
+      </Card>
     );
   }
 }
@@ -141,20 +174,22 @@ const SocialLoginToggle = ({
   onUnlink,
 }) =>
   isEnabled ? (
-    <button
+    <Button
+      color={signInMethod.id === 'google.com' ? 'google plus' : signInMethod.id === 'facebook.com' ? 'facebook' : signInMethod.id === 'twitter.com' ? 'twitter' : ''}
       type="button"
       onClick={() => onUnlink(signInMethod.id)}
       disabled={onlyOneLeft}
     >
       Deactivate {signInMethod.id}
-    </button>
+    </Button>
   ) : (
-    <button
+    <Button
+      color={signInMethod.id === 'google.com' ? 'google plus' : signInMethod.id === 'facebook.com' ? 'facebook' : signInMethod.id === 'twitter.com' ? 'twitter' : ''}
       type="button"
       onClick={() => onLink(signInMethod.provider)}
     >
       Link {signInMethod.id}
-    </button>
+    </Button>
   );
 
 class DefaultLoginToggle extends Component {
@@ -189,34 +224,41 @@ class DefaultLoginToggle extends Component {
       passwordOne !== passwordTwo || passwordOne === '';
 
     return isEnabled ? (
-      <button
+      <Button
         type="button"
         onClick={() => onUnlink(signInMethod.id)}
         disabled={onlyOneLeft}
       >
         Deactivate {signInMethod.id}
-      </button>
+      </Button>
     ) : (
-      <form onSubmit={this.onSubmit}>
-        <input
-          name="passwordOne"
-          value={passwordOne}
-          onChange={this.onChange}
-          type="password"
-          placeholder="New Password"
-        />
-        <input
-          name="passwordTwo"
-          value={passwordTwo}
-          onChange={this.onChange}
-          type="password"
-          placeholder="Confirm New Password"
-        />
-
-        <button disabled={isInvalid} type="submit">
+      <Form onSubmit={this.onSubmit}>
+        <Form.Group widths='equal'>
+          <Form.Field>
+            <label>New Password</label>
+            <input
+              name="passwordOne"
+              value={passwordOne}
+              onChange={this.onChange}
+              type="password"
+              placeholder="New Password"
+            />
+          </Form.Field>
+          <Form.Field>
+            <label>Confirm Password</label>
+            <input
+              name="passwordTwo"
+              value={passwordTwo}
+              onChange={this.onChange}
+              type="password"
+              placeholder="Confirm New Password"
+            />
+          </Form.Field>
+        </Form.Group>
+        <Button primary disabled={isInvalid} type="submit">
           Link {signInMethod.id}
-        </button>
-      </form>
+        </Button>
+      </Form>
     );
   }
 }
diff --git a/src/components/Admin/index.js b/src/components/Admin/index.js
index cd0c7b6..695a4d6 100644
--- a/src/components/Admin/index.js
+++ b/src/components/Admin/index.js
@@ -7,9 +7,11 @@ import { UserList, UserItem } from '../Users';
 import * as ROLES from '../../constants/roles';
 import * as ROUTES from '../../constants/routes';
 
+import { Header } from 'semantic-ui-react';
+
 const AdminPage = () => (
   <div>
-    <h1>Admin</h1>
+    <Header as='h2'>Admin</Header>
     <p>The Admin Page is accessible by every signed in admin user.</p>
 
     <Switch>
diff --git a/src/components/App/index.js b/src/components/App/index.js
index 21e5419..bda7e9b 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -13,12 +13,13 @@ import AdminPage from '../Admin';
 import * as ROUTES from '../../constants/routes';
 import { withAuthentication } from '../Session';
 
+import { Container } from 'semantic-ui-react'
+
 const App = () => (
   <Router>
     <div>
       <Navigation />
-
-      <hr />
+      <Container>
 
       <Route exact path={ROUTES.LANDING} component={LandingPage} />
       <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
@@ -30,6 +31,7 @@ const App = () => (
       <Route path={ROUTES.HOME} component={HomePage} />
       <Route path={ROUTES.ACCOUNT} component={AccountPage} />
       <Route path={ROUTES.ADMIN} component={AdminPage} />
+      </Container>
     </div>
   </Router>
 );
diff --git a/src/components/Messages/MessageItem.js b/src/components/Messages/MessageItem.js
index 78a9bb2..673649e 100644
--- a/src/components/Messages/MessageItem.js
+++ b/src/components/Messages/MessageItem.js
@@ -1,4 +1,12 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
+import timeago from 'epoch-timeago';
+import { Link } from 'react-router-dom';
+import { Feed, Icon, Form } from 'semantic-ui-react';
+
+export const TimeAgo = ({ time }) => (
+  <time dateTime={new Date(time).toISOString()}>{timeago(time)}</time>
+)
+
 
 class MessageItem extends Component {
   constructor(props) {
@@ -18,54 +26,59 @@ class MessageItem extends Component {
   };
 
   onChangeEditText = event => {
-    this.setState({ editText: event.target.value });
+    this.setState({editText: event.target.value});
   };
 
   onSaveEditText = () => {
     this.props.onEditMessage(this.props.message, this.state.editText);
 
-    this.setState({ editMode: false });
+    this.setState({editMode: false});
   };
 
   render() {
-    const { message, onRemoveMessage } = this.props;
-    const { editMode, editText } = this.state;
+    const {message, onRemoveMessage} = this.props;
+    const {editMode, editText} = this.state;
 
     return (
-      <li>
-        {editMode ? (
-          <input
-            type="text"
-            value={editText}
-            onChange={this.onChangeEditText}
-          />
-        ) : (
-          <span>
-            <strong>
-              {message.user.username || message.user.userId}
-            </strong>{' '}
-            {message.text} {message.editedAt && <span>(Edited)</span>}
-          </span>
-        )}
-
-        {editMode ? (
-          <span>
-            <button onClick={this.onSaveEditText}>Save</button>
-            <button onClick={this.onToggleEditMode}>Reset</button>
-          </span>
-        ) : (
-          <button onClick={this.onToggleEditMode}>Edit</button>
-        )}
+      <Feed.Event>
+        <Feed.Content>
+          <Feed.Summary>
+            <Feed.User as={Link } to={`/`}>{message.user.username || message.user.userId}</Feed.User>
+            <Feed.Date><TimeAgo time={message.createdAt} /></Feed.Date>
+          </Feed.Summary>
+          <Feed.Extra>
+            {editMode ? (
+              <Form>
+                <Form.Field>
+                  <input
+                    type="text"
+                    value={editText}
+                    onChange={this.onChangeEditText}
+                  />
+                </Form.Field>
+              </Form>
+            ) : (
+              <span>
+                  {message.text} {message.editedAt && <span>(Edited)</span>}
+                </span>
+            )}
+          </Feed.Extra>
+          <Feed.Meta>
+            {editMode ? (
+              <span>
+                <Icon bordered size='large' color='green' name='save outline' onClick={this.onSaveEditText} />
+                <Icon bordered size='large' color='blue' name='undo alternate' onClick={this.onToggleEditMode} />
+              </span>
+            ) : (
+                <Icon bordered size='large' color='blue' name='edit outline' onClick={this.onToggleEditMode} />
+            )}
 
-        {!editMode && (
-          <button
-            type="button"
-            onClick={() => onRemoveMessage(message.uid)}
-          >
-            Delete
-          </button>
-        )}
-      </li>
+            {!editMode && (
+              <Icon bordered size='large' color='red' name='trash alternate' onClick={() => onRemoveMessage(message.uid)} />
+            )}
+          </Feed.Meta>
+        </Feed.Content>
+      </Feed.Event>
     );
   }
 }
diff --git a/src/components/Messages/MessageList.js b/src/components/Messages/MessageList.js
index 4e0c49b..47da90a 100644
--- a/src/components/Messages/MessageList.js
+++ b/src/components/Messages/MessageList.js
@@ -2,12 +2,14 @@ import React from 'react';
 
 import MessageItem from './MessageItem';
 
+import { Feed } from 'semantic-ui-react'
+
 const MessageList = ({
   messages,
   onEditMessage,
   onRemoveMessage,
 }) => (
-  <ul>
+  <Feed>
     {messages.map(message => (
       <MessageItem
         key={message.uid}
@@ -16,7 +18,7 @@ const MessageList = ({
         onRemoveMessage={onRemoveMessage}
       />
     ))}
-  </ul>
+  </Feed>
 );
 
 export default MessageList;
diff --git a/src/components/Messages/Messages.js b/src/components/Messages/Messages.js
index e6e70fd..70d393e 100644
--- a/src/components/Messages/Messages.js
+++ b/src/components/Messages/Messages.js
@@ -4,6 +4,8 @@ import { AuthUserContext } from '../Session';
 import { withFirebase } from '../Firebase';
 import MessageList from './MessageList';
 
+import { Card, Message, Button, Loader, Form, Icon } from 'semantic-ui-react'
+
 class Messages extends Component {
   constructor(props) {
     super(props);
@@ -88,47 +90,39 @@ class Messages extends Component {
   render() {
     const { users } = this.props;
     const { text, messages, loading } = this.state;
-
     return (
       <AuthUserContext.Consumer>
         {authUser => (
-          <div>
-            {!loading && messages && (
-              <button type="button" onClick={this.onNextPage}>
-                More
-              </button>
-            )}
-
-            {loading && <div>Loading ...</div>}
-
-            {messages && (
-              <MessageList
-                messages={messages.map(message => ({
-                  ...message,
-                  user: users
-                    ? users[message.userId]
-                    : { userId: message.userId },
-                }))}
-                onEditMessage={this.onEditMessage}
-                onRemoveMessage={this.onRemoveMessage}
-              />
-            )}
-
-            {!messages && <div>There are no messages ...</div>}
-
-            <form
-              onSubmit={event =>
-                this.onCreateMessage(event, authUser)
-              }
-            >
-              <input
-                type="text"
-                value={text}
-                onChange={this.onChangeText}
-              />
-              <button type="submit">Send</button>
-            </form>
-          </div>
+          <Card fluid={true}>
+            <Card.Content>
+              <Card.Description>
+                {loading && <Loader active inline='centered' />}
+
+                {messages && (<MessageList
+                    messages={messages.map(message => ({
+                      ...message,
+                      user: users
+                        ? users[message.userId]
+                        : { userId: message.userId },
+                    }))}
+                    onEditMessage={this.onEditMessage}
+                    onRemoveMessage={this.onRemoveMessage}
+                  />)}
+
+                {!loading && !messages && <Message info>
+                  <p>There are no messages ...</p>
+                </Message>}
+
+                {!loading && <Form onSubmit={event => this.onCreateMessage(event, authUser)}>
+                  <Form.TextArea value={text} onChange={this.onChangeText} placeholder='Enter your message here...' />
+                  <Button primary type='submit'>Send  <Icon name='send' /></Button>
+                  {!loading && messages && (
+                    <Button positive type="button" onClick={this.onNextPage}>More</Button>
+                  )}
+                </Form>}
+              </Card.Description>
+            </Card.Content>
+          </Card>
         )}
       </AuthUserContext.Consumer>
     );
diff --git a/src/components/Navigation/index.js b/src/components/Navigation/index.js
index 156e27a..2be5ebd 100644
--- a/src/components/Navigation/index.js
+++ b/src/components/Navigation/index.js
@@ -6,6 +6,8 @@ import SignOutButton from '../SignOut';
 import * as ROUTES from '../../constants/routes';
 import * as ROLES from '../../constants/roles';
 
+import { Container, Menu } from 'semantic-ui-react'
+
 const Navigation = () => (
   <AuthUserContext.Consumer>
     {authUser =>
@@ -19,36 +21,52 @@ const Navigation = () => (
 );
 
 const NavigationAuth = ({ authUser }) => (
-  <ul>
-    <li>
-      <Link to={ROUTES.LANDING}>Landing</Link>
-    </li>
-    <li>
-      <Link to={ROUTES.HOME}>Home</Link>
-    </li>
-    <li>
-      <Link to={ROUTES.ACCOUNT}>Account</Link>
-    </li>
-    {authUser.roles.includes(ROLES.ADMIN) && (
-      <li>
-        <Link to={ROUTES.ADMIN}>Admin</Link>
-      </li>
-    )}
-    <li>
+  <Menu pointing secondary>
+    <Container>
+      <Menu.Item
+        name='Landing'
+        as={Link}
+        to={ROUTES.LANDING}
+      />
+      <Menu.Item
+        name='home'
+        as={Link}
+        to={ROUTES.HOME}
+      />
+      <Menu.Item
+        name='Account'
+        as={Link}
+        to={ROUTES.ACCOUNT}
+      />
+      {authUser.roles.includes(ROLES.ADMIN) && (
+        <Menu.Item
+          name='Admin'
+          as={Link}
+          to={ROUTES.ADMIN}
+        />
+      )}
       <SignOutButton />
-    </li>
-  </ul>
+    </Container>
+  </Menu>
 );
 
 const NavigationNonAuth = () => (
-  <ul>
-    <li>
-      <Link to={ROUTES.LANDING}>Landing</Link>
-    </li>
-    <li>
-      <Link to={ROUTES.SIGN_IN}>Sign In</Link>
-    </li>
-  </ul>
+  <Menu pointing secondary>
+    <Container>
+      <Menu.Item
+        name='home'
+        as={Link}
+        to={ROUTES.LANDING}
+      />
+      <Menu.Menu position='right'>
+        <Menu.Item
+          name='signin'
+          as={Link}
+          to={ROUTES.SIGN_IN}
+        />
+      </Menu.Menu>
+    </Container>
+  </Menu>
 );
 
 export default Navigation;
diff --git a/src/components/PasswordChange/index.js b/src/components/PasswordChange/index.js
index 14fa581..a1e7543 100644
--- a/src/components/PasswordChange/index.js
+++ b/src/components/PasswordChange/index.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 
 import { withFirebase } from '../Firebase';
 
+import { Form, Message, Button } from 'semantic-ui-react'
+
 const INITIAL_STATE = {
   passwordOne: '',
   passwordTwo: '',
@@ -41,27 +43,36 @@ class PasswordChangeForm extends Component {
       passwordOne !== passwordTwo || passwordOne === '';
 
     return (
-      <form onSubmit={this.onSubmit}>
-        <input
-          name="passwordOne"
-          value={passwordOne}
-          onChange={this.onChange}
-          type="password"
-          placeholder="New Password"
-        />
-        <input
-          name="passwordTwo"
-          value={passwordTwo}
-          onChange={this.onChange}
-          type="password"
-          placeholder="Confirm New Password"
-        />
-        <button disabled={isInvalid} type="submit">
+      <Form onSubmit={this.onSubmit}>
+        {error && <Message negative>
+          <p>{error.message}</p>
+        </Message>}
+        <Form.Group widths='equal'>
+          <Form.Field>
+            <label>Old Password</label>
+            <input
+              name="passwordOne"
+              value={passwordOne}
+              onChange={this.onChange}
+              type="password"
+              placeholder="New Password"
+            />
+          </Form.Field>
+          <Form.Field>
+            <label>New Password</label>
+            <input
+              name="passwordTwo"
+              value={passwordTwo}
+              onChange={this.onChange}
+              type="password"
+              placeholder="Confirm New Password"
+            />
+          </Form.Field>
+        </Form.Group>
+        <Button primary disabled={isInvalid} type="submit">
           Reset My Password
-        </button>
-
-        {error && <p>{error.message}</p>}
-      </form>
+        </Button>
+      </Form>
     );
   }
 }
diff --git a/src/components/PasswordForget/index.js b/src/components/PasswordForget/index.js
index 9d6fa38..ec96d60 100644
--- a/src/components/PasswordForget/index.js
+++ b/src/components/PasswordForget/index.js
@@ -4,11 +4,15 @@ import { Link } from 'react-router-dom';
 import { withFirebase } from '../Firebase';
 import * as ROUTES from '../../constants/routes';
 
+import {Grid, Form, Header, Button, Message} from 'semantic-ui-react'
+
 const PasswordForgetPage = () => (
-  <div>
-    <h1>PasswordForget</h1>
-    <PasswordForgetForm />
-  </div>
+  <Grid centered columns={2}>
+    <Grid.Column>
+      <Header as='h2' textAlign='center'>Password Forget</Header>
+      <PasswordForgetForm />
+    </Grid.Column>
+  </Grid>
 );
 
 const INITIAL_STATE = {
@@ -48,28 +52,32 @@ class PasswordForgetFormBase extends Component {
     const isInvalid = email === '';
 
     return (
-      <form onSubmit={this.onSubmit}>
-        <input
-          name="email"
-          value={this.state.email}
-          onChange={this.onChange}
-          type="text"
-          placeholder="Email Address"
-        />
-        <button disabled={isInvalid} type="submit">
-          Reset My Password
-        </button>
-
-        {error && <p>{error.message}</p>}
-      </form>
+      <div>
+        {error && <Message negative>
+          <p>{error.message}</p>
+        </Message>}
+        <Form onSubmit={this.onSubmit}>
+          <Form.Field>
+            <label>Email</label>
+            <input
+              name="email"
+              value={this.state.email}
+              onChange={this.onChange}
+              type="text"
+              placeholder="Email Address"
+            />
+          </Form.Field>
+          <Button primary disabled={isInvalid} type="submit">
+            Reset My Password
+          </Button>
+        </Form>
+      </div>
     );
   }
 }
 
 const PasswordForgetLink = () => (
-  <p>
-    <Link to={ROUTES.PASSWORD_FORGET}>Forgot Password?</Link>
-  </p>
+  <Link to={ROUTES.PASSWORD_FORGET}>Forgot Password?</Link>
 );
 
 export default PasswordForgetPage;
diff --git a/src/components/SignIn/index.js b/src/components/SignIn/index.js
index 91e3f56..c2dc32f 100644
--- a/src/components/SignIn/index.js
+++ b/src/components/SignIn/index.js
@@ -7,16 +7,19 @@ import { PasswordForgetLink } from '../PasswordForget';
 import { withFirebase } from '../Firebase';
 import * as ROUTES from '../../constants/routes';
 
+import { Grid, Form, Button, Header, Icon, Message, Divider } from 'semantic-ui-react';
+
 const SignInPage = () => (
-  <div>
-    <h1>SignIn</h1>
-    <SignInForm />
-    <SignInGoogle />
-    <SignInFacebook />
-    <SignInTwitter />
-    <PasswordForgetLink />
-    <SignUpLink />
-  </div>
+  <Grid centered columns={2}>
+    <Grid.Column>
+      <Header as='h2' textAlign='center'>Sign In</Header>
+      <SignInForm />
+      <SignInGoogle />
+      <SignInFacebook />
+      <SignInTwitter />
+      <SignUpLink />
+    </Grid.Column>
+  </Grid>
 );
 
 const INITIAL_STATE = {
@@ -68,27 +71,36 @@ class SignInFormBase extends Component {
     const isInvalid = password === '' || email === '';
 
     return (
-      <form onSubmit={this.onSubmit}>
-        <input
-          name="email"
-          value={email}
-          onChange={this.onChange}
-          type="text"
-          placeholder="Email Address"
-        />
-        <input
-          name="password"
-          value={password}
-          onChange={this.onChange}
-          type="password"
-          placeholder="Password"
-        />
-        <button disabled={isInvalid} type="submit">
-          Sign In
-        </button>
-
-        {error && <p>{error.message}</p>}
-      </form>
+      <div>
+        {error && <Message negative>
+          <p>{error.message}</p>
+        </Message>}
+        <Form onSubmit={this.onSubmit}>
+          <Form.Field>
+            <label>Email</label>
+            <input
+              name="email"
+              value={email}
+              onChange={this.onChange}
+              type="text"
+              placeholder="Email Address"
+            />
+          </Form.Field>
+          <Form.Field>
+            <label>Password</label>
+            <input
+              name="password"
+              value={password}
+              onChange={this.onChange}
+              type="password"
+              placeholder="Password"
+            />
+          </Form.Field>
+          <Button primary disabled={isInvalid} type='submit'>Submit</Button>
+          <PasswordForgetLink />
+          <Divider horizontal>Or sign in with</Divider>
+        </Form>
+      </div>
     );
   }
 }
@@ -130,10 +142,14 @@ class SignInGoogleBase extends Component {
     const { error } = this.state;
 
     return (
-      <form onSubmit={this.onSubmit}>
-        <button type="submit">Sign In with Google</button>
-
-        {error && <p>{error.message}</p>}
+      <form onSubmit={this.onSubmit} className='inline'>
+        <Button color='google plus' type="submit">
+          <Icon name='google' /> Google
+        </Button>
+
+        {error && <Message negative>
+          <p>{error.message}</p>
+        </Message>}
       </form>
     );
   }
@@ -176,10 +192,14 @@ class SignInFacebookBase extends Component {
     const { error } = this.state;
 
     return (
-      <form onSubmit={this.onSubmit}>
-        <button type="submit">Sign In with Facebook</button>
-
-        {error && <p>{error.message}</p>}
+      <form onSubmit={this.onSubmit} className='inline'>
+        <Button color='facebook' type="submit">
+          <Icon name='facebook' /> Facebook
+        </Button>
+
+        {error && <Message negative>
+          <p>{error.message}</p>
+        </Message>}
       </form>
     );
   }
@@ -222,10 +242,14 @@ class SignInTwitterBase extends Component {
     const { error } = this.state;
 
     return (
-      <form onSubmit={this.onSubmit}>
-        <button type="submit">Sign In with Twitter</button>
-
-        {error && <p>{error.message}</p>}
+      <form onSubmit={this.onSubmit} className='inline'>
+        <Button color='twitter' type="submit">
+          <Icon name='twitter' /> Twitter
+        </Button>
+
+        {error && <Message negative>
+          <p>{error.message}</p>
+        </Message>}
       </form>
     );
   }
diff --git a/src/components/SignOut/index.js b/src/components/SignOut/index.js
index cfee4ed..b54a73e 100644
--- a/src/components/SignOut/index.js
+++ b/src/components/SignOut/index.js
@@ -2,10 +2,15 @@ import React from 'react';
 
 import { withFirebase } from '../Firebase';
 
+import { Menu } from 'semantic-ui-react'
+
 const SignOutButton = ({ firebase }) => (
-  <button type="button" onClick={firebase.doSignOut}>
-    Sign Out
-  </button>
+  <Menu.Menu position='right'>
+    <Menu.Item
+      name='Logout'
+      onClick={firebase.doSignOut}
+    />
+  </Menu.Menu>
 );
 
 export default withFirebase(SignOutButton);
diff --git a/src/components/SignUp/index.js b/src/components/SignUp/index.js
index f10e50b..b27d0b2 100644
--- a/src/components/SignUp/index.js
+++ b/src/components/SignUp/index.js
@@ -4,12 +4,15 @@ import { Link, withRouter } from 'react-router-dom';
 import { withFirebase } from '../Firebase';
 import * as ROUTES from '../../constants/routes';
 import * as ROLES from '../../constants/roles';
+import {Form, Button, Grid, Header, Message, Checkbox } from 'semantic-ui-react';
 
 const SignUpPage = () => (
-  <div>
-    <h1>SignUp</h1>
-    <SignUpForm />
-  </div>
+  <Grid centered columns={2}>
+    <Grid.Column>
+      <Header as='h2' textAlign='center'>Sign Up</Header>
+      <SignUpForm />
+    </Grid.Column>
+  </Grid>
 );
 
 const INITIAL_STATE = {
@@ -78,8 +81,8 @@ class SignUpFormBase extends Component {
     this.setState({ [event.target.name]: event.target.value });
   };
 
-  onChangeCheckbox = event => {
-    this.setState({ [event.target.name]: event.target.checked });
+  onChangeCheckbox = () => {
+    this.setState({ isAdmin: !this.state.isAdmin });
   };
 
   render() {
@@ -99,50 +102,59 @@ class SignUpFormBase extends Component {
       username === '';
 
     return (
-      <form onSubmit={this.onSubmit}>
-        <input
-          name="username"
-          value={username}
-          onChange={this.onChange}
-          type="text"
-          placeholder="Full Name"
-        />
-        <input
-          name="email"
-          value={email}
-          onChange={this.onChange}
-          type="text"
-          placeholder="Email Address"
-        />
-        <input
-          name="passwordOne"
-          value={passwordOne}
-          onChange={this.onChange}
-          type="password"
-          placeholder="Password"
-        />
-        <input
-          name="passwordTwo"
-          value={passwordTwo}
-          onChange={this.onChange}
-          type="password"
-          placeholder="Confirm Password"
-        />
-        <label>
-          Admin:
-          <input
-            name="isAdmin"
-            type="checkbox"
-            checked={isAdmin}
-            onChange={this.onChangeCheckbox}
-          />
-        </label>
-        <button disabled={isInvalid} type="submit">
-          Sign Up
-        </button>
-
-        {error && <p>{error.message}</p>}
-      </form>
+      <div>
+        {error && <Message negative>
+          <p>{error.message}</p>
+        </Message>}
+        <Form onSubmit={this.onSubmit}>
+          <Form.Field>
+            <label>Username</label>
+            <input
+              name="username"
+              value={username}
+              onChange={this.onChange}
+              type="text"
+              placeholder="Full Name"
+            />
+          </Form.Field>
+          <Form.Field>
+            <label>Email</label>
+            <input
+              name="email"
+              value={email}
+              onChange={this.onChange}
+              type="text"
+              placeholder="Email Address"
+            />
+          </Form.Field>
+          <Form.Group widths='equal'>
+            <Form.Field>
+              <label>Password</label>
+              <input
+                name="passwordOne"
+                value={passwordOne}
+                onChange={this.onChange}
+                type="password"
+                placeholder="Password"
+              />
+            </Form.Field>
+            <Form.Field>
+              <label>Confirm Password</label>
+              <input
+                name="passwordTwo"
+                value={passwordTwo}
+                onChange={this.onChange}
+                type="password"
+                placeholder="Confirm Password"
+              />
+            </Form.Field>
+          </Form.Group>
+          <Form.Field>
+            <Checkbox label='Admin' name='isAdmin' onChange={this.onChangeCheckbox} checked={isAdmin} />
+          </Form.Field>
+          <Button primary disabled={isInvalid} type="submit">Sign Up</Button>
+        </Form>
+      </div>
     );
   }
 }
diff --git a/src/components/Users/UserItem.js b/src/components/Users/UserItem.js
index 05e4319..5e4118f 100644
--- a/src/components/Users/UserItem.js
+++ b/src/components/Users/UserItem.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import { withFirebase } from '../Firebase';
+import { Card, Loader, Button } from 'semantic-ui-react';
 
 class UserItem extends Component {
   constructor(props) {
@@ -42,32 +43,31 @@ class UserItem extends Component {
     const { user, loading } = this.state;
 
     return (
-      <div>
-        <h2>User ({this.props.match.params.id})</h2>
-        {loading && <div>Loading ...</div>}
-
-        {user && (
-          <div>
-            <span>
-              <strong>ID:</strong> {user.uid}
-            </span>
-            <span>
-              <strong>E-Mail:</strong> {user.email}
-            </span>
-            <span>
-              <strong>Username:</strong> {user.username}
-            </span>
-            <span>
-              <button
-                type="button"
-                onClick={this.onSendPasswordResetEmail}
-              >
-                Send Password Reset
-              </button>
-            </span>
-          </div>
-        )}
-      </div>
+      <Card fluid={true}>
+        {loading ? <Loader active inline='centered' /> : <Card.Content>
+          <Card.Header>User: {user.uid}</Card.Header>
+          <Card.Description>
+            {user && (
+              <div>
+                <Card.Content>
+                  <Card.Meta>
+                    <span>Username: {user.username}</span>
+                  </Card.Meta>
+                  <Card.Description>{user.email}</Card.Description>
+                  <br />
+                  <Button
+                    primary
+                    type="button"
+                    onClick={this.onSendPasswordResetEmail}
+                  >
+                    Send Password Reset
+                  </Button>
+                </Card.Content>
+              </div>
+            )}
+          </Card.Description>
+        </Card.Content>}
+      </Card>
     );
   }
 }
diff --git a/src/components/Users/UserList.js b/src/components/Users/UserList.js
index 85b4955..6062f01 100644
--- a/src/components/Users/UserList.js
+++ b/src/components/Users/UserList.js
@@ -4,6 +4,8 @@ import { Link } from 'react-router-dom';
 import { withFirebase } from '../Firebase';
 import * as ROUTES from '../../constants/routes';
 
+import { Header, Loader, Table, Button } from 'semantic-ui-react'
+
 class UserList extends Component {
   constructor(props) {
     super(props);
@@ -41,33 +43,32 @@ class UserList extends Component {
 
     return (
       <div>
-        <h2>Users</h2>
-        {loading && <div>Loading ...</div>}
-        <ul>
-          {users.map(user => (
-            <li key={user.uid}>
-              <span>
-                <strong>ID:</strong> {user.uid}
-              </span>
-              <span>
-                <strong>E-Mail:</strong> {user.email}
-              </span>
-              <span>
-                <strong>Username:</strong> {user.username}
-              </span>
-              <span>
-                <Link
-                  to={{
+        <Header as='h2'>Users</Header>
+        {loading ? <Loader active inline /> : <Table singleLine>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>ID</Table.HeaderCell>
+              <Table.HeaderCell>Username</Table.HeaderCell>
+              <Table.HeaderCell>Email Address</Table.HeaderCell>
+              <Table.HeaderCell>Actions</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {users.map((user, i) => (
+              <Table.Row key={i}>
+                <Table.Cell>{user.uid}</Table.Cell>
+                <Table.Cell>{user.username}</Table.Cell>
+                <Table.Cell>{user.email}</Table.Cell>
+                <Table.Cell>
+                  <Button primary as={Link} to={{
                     pathname: `${ROUTES.ADMIN}/${user.uid}`,
                     state: { user },
-                  }}
-                >
-                  Details
-                </Link>
-              </span>
-            </li>
-          ))}
-        </ul>
+                  }}>Details</Button>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>}
       </div>
     );
   }
diff --git a/src/index.css b/src/index.css
index cee5f34..d631847 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,3 +12,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.inline {
+  display: inline-block;
+}

From bacdcf2fd354aa7bc106335000f5396c9e594be4 Mon Sep 17 00:00:00 2001
From: iamuteti <iamuteti@gmail.com>
Date: Tue, 11 Dec 2018 16:56:10 +0300
Subject: [PATCH 2/2] bug fixes

---
 package-lock.json                      | 51 +++++++++++++-------------
 package.json                           |  3 +-
 src/components/Account/index.js        | 13 +++----
 src/components/Messages/MessageItem.js | 13 ++++---
 src/components/Messages/Messages.js    |  7 ++--
 src/index.js                           |  2 +-
 6 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d0934b8..195ea62 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3606,6 +3606,11 @@
         "whatwg-url": "^7.0.0"
       }
     },
+    "date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
@@ -4073,11 +4078,6 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
       "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
     },
-    "epoch-timeago": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/epoch-timeago/-/epoch-timeago-1.1.9.tgz",
-      "integrity": "sha512-yzU3tG9YfvlImtgWjQM753F8+VRHFfUge2Bs++DNOEu5dzK2mX+lRBXSWUQEKGBi4b7WNJHIlQVuCmvp24j14A=="
-    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -5671,13 +5671,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5690,18 +5688,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5804,8 +5799,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5815,7 +5809,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5828,20 +5821,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5858,7 +5848,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5931,8 +5920,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5942,7 +5930,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6048,7 +6035,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -8662,6 +8648,11 @@
         "topo": "2.x.x"
       }
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-levenshtein": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.4.tgz",
@@ -13392,6 +13383,14 @@
         "node-forge": "0.7.5"
       }
     },
+    "semantic-ui-css": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.4.1.tgz",
+      "integrity": "sha512-Pkp0p9oWOxlH0kODx7qFpIRYpK1T4WJOO4lNnpNPOoWKCrYsfHqYSKgk5fHfQtnWnsAKy7nLJMW02bgDWWFZFg==",
+      "requires": {
+        "jquery": "x.*"
+      }
+    },
     "semantic-ui-react": {
       "version": "0.83.0",
       "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.83.0.tgz",
diff --git a/package.json b/package.json
index 0ca9d3c..c726912 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,14 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "epoch-timeago": "^1.1.9",
+    "date-fns": "^1.30.1",
     "firebase": "^5.6.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "recompose": "^0.30.0",
+    "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.83.0"
   },
   "scripts": {
diff --git a/src/components/Account/index.js b/src/components/Account/index.js
index e1a1997..36ec8fb 100644
--- a/src/components/Account/index.js
+++ b/src/components/Account/index.js
@@ -224,13 +224,12 @@ class DefaultLoginToggle extends Component {
       passwordOne !== passwordTwo || passwordOne === '';
 
     return isEnabled ? (
-      <Button
-        type="button"
-        onClick={() => onUnlink(signInMethod.id)}
-        disabled={onlyOneLeft}
-      >
-        Deactivate {signInMethod.id}
-      </Button>
+      <span>
+        <Button type="button" onClick={() => onUnlink(signInMethod.id)} disabled={onlyOneLeft}>
+          Deactivate {signInMethod.id}
+        </Button>
+        <br />
+      </span>
     ) : (
       <Form onSubmit={this.onSubmit}>
         <Form.Group widths='equal'>
diff --git a/src/components/Messages/MessageItem.js b/src/components/Messages/MessageItem.js
index 673649e..6d994f9 100644
--- a/src/components/Messages/MessageItem.js
+++ b/src/components/Messages/MessageItem.js
@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
-import timeago from 'epoch-timeago';
+import { distanceInWordsToNow } from 'date-fns'
 import { Link } from 'react-router-dom';
 import { Feed, Icon, Form } from 'semantic-ui-react';
 
 export const TimeAgo = ({ time }) => (
-  <time dateTime={new Date(time).toISOString()}>{timeago(time)}</time>
+  <time>{distanceInWordsToNow(time)} ago</time>
 )
 
 
@@ -69,12 +69,13 @@ class MessageItem extends Component {
                 <Icon bordered size='large' color='green' name='save outline' onClick={this.onSaveEditText} />
                 <Icon bordered size='large' color='blue' name='undo alternate' onClick={this.onToggleEditMode} />
               </span>
-            ) : (
-                <Icon bordered size='large' color='blue' name='edit outline' onClick={this.onToggleEditMode} />
-            )}
+            ) : null}
 
             {!editMode && (
-              <Icon bordered size='large' color='red' name='trash alternate' onClick={() => onRemoveMessage(message.uid)} />
+              <span>
+                <Icon bordered size='large' color='blue' name='edit outline' onClick={this.onToggleEditMode} />
+                <Icon bordered size='large' color='red' name='trash alternate' onClick={() => onRemoveMessage(message.uid)} />
+              </span>
             )}
           </Feed.Meta>
         </Feed.Content>
diff --git a/src/components/Messages/Messages.js b/src/components/Messages/Messages.js
index 70d393e..4a5353e 100644
--- a/src/components/Messages/Messages.js
+++ b/src/components/Messages/Messages.js
@@ -98,6 +98,10 @@ class Messages extends Component {
               <Card.Description>
                 {loading && <Loader active inline='centered' />}
 
+                {!loading && messages && (
+                  <Button size='small' floated='right' positive type="button" onClick={this.onNextPage}>Older Messages</Button>
+                )}
+
                 {messages && (<MessageList
                     messages={messages.map(message => ({
                       ...message,
@@ -116,9 +120,6 @@ class Messages extends Component {
                 {!loading && <Form onSubmit={event => this.onCreateMessage(event, authUser)}>
                   <Form.TextArea value={text} onChange={this.onChangeText} placeholder='Enter your message here...' />
                   <Button primary type='submit'>Send  <Icon name='send' /></Button>
-                  {!loading && messages && (
-                    <Button positive type="button" onClick={this.onNextPage}>More</Button>
-                  )}
                 </Form>}
               </Card.Description>
             </Card.Content>
diff --git a/src/index.js b/src/index.js
index 5275a6b..aab58de 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
+import 'semantic-ui-css/semantic.min.css';
 import './index.css';
 import * as serviceWorker from './serviceWorker';