From dc89b22abb769c01ad3c4fc08c1f7cbce107df51 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 26 Jan 2017 15:39:16 -0300
Subject: [PATCH 01/23] Clicking user goes to Settings Tab

---
 client/coral-embed-stream/src/Embed.js     | 5 ++---
 client/coral-sign-in/components/UserBox.js | 9 +++------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index 416c7fef8..b97e64108 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -109,15 +109,14 @@ class Embed extends Component {
             <Tab>Settings</Tab>
             <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
-            {loggedIn && <UserBox user={user} logout={this.props.logout} />}
+            {loggedIn && <UserBox user={user} logout={this.props.logout} changeTab={this.changeTab} />}
             <TabContent show={activeTab === 0}>
                 {
                   openStream
                    ? <div id="commentBox">
                        <InfoBox
                          content={asset.settings.infoBoxContent}
-                         enable={asset.settings.infoBoxEnable}
-                       />
+                         enable={asset.settings.infoBoxEnable} />
                      <RestrictedContent restricted={false} restrictedComp={<SuspendedAccount />}>
                        {
                          user
diff --git a/client/coral-sign-in/components/UserBox.js b/client/coral-sign-in/components/UserBox.js
index e99c0f88c..5aa173572 100644
--- a/client/coral-sign-in/components/UserBox.js
+++ b/client/coral-sign-in/components/UserBox.js
@@ -4,13 +4,10 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const UserBox = ({className, user, logout, ...props}) => (
-  <div
-    className={`${styles.userBox} ${className ? className : ''}`}
-    {...props}
-  >
+const UserBox = ({className, user, logout, changeTab}) => (
+  <div className={`${styles.userBox} ${className ? className : ''}`}>
     {lang.t('signIn.loggedInAs')}
-    <a>{user.displayName}</a>. {lang.t('signIn.notYou')}
+    <a onClick={() => changeTab(1)}>{user.displayName}</a>. {lang.t('signIn.notYou')}
     <a onClick={logout} id='logout'>{lang.t('signIn.logout')}</a>
   </div>
 );

From 58c4d5ceb5217d9d48a6c7b24a1a15db9d5a1518 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 26 Jan 2017 16:09:56 -0300
Subject: [PATCH 02/23] Comment button order

---
 client/coral-embed-stream/src/Comment.js         | 12 ++++++------
 client/coral-plugin-permalinks/translations.json |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index f734bce0b..b54276eb2 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -105,11 +105,6 @@ class Comment extends React.Component {
         <PubDate created_at={comment.created_at} />
         <Content body={comment.body} />
           <div className="commentActionsLeft">
-              <ReplyButton
-                onClick={this.onReplyBoxClick}
-                parentCommentId={parentId || comment.id}
-                currentUserId={currentUser && currentUser.id}
-                banned={false} />
               <LikeButton
                 like={like}
                 id={comment.id}
@@ -117,8 +112,14 @@ class Comment extends React.Component {
                 deleteAction={deleteAction}
                 showSignInDialog={showSignInDialog}
                 currentUser={currentUser} />
+              <ReplyButton
+                onClick={this.onReplyBoxClick}
+                parentCommentId={parentId || comment.id}
+                currentUserId={currentUser && currentUser.id}
+                banned={false} />
             </div>
         <div className="commentActionsRight">
+          <PermalinkButton articleURL={asset.url} commentId={comment.id} />
           <FlagComment
             flag={flag}
             id={comment.id}
@@ -127,7 +128,6 @@ class Comment extends React.Component {
             deleteAction={deleteAction}
             showSignInDialog={showSignInDialog}
             currentUser={currentUser} />
-          <PermalinkButton articleURL={asset.url} commentId={comment.id} />
         </div>
         {
           this.state.replyBoxVisible
diff --git a/client/coral-plugin-permalinks/translations.json b/client/coral-plugin-permalinks/translations.json
index af5c19b0a..9e1523af8 100644
--- a/client/coral-plugin-permalinks/translations.json
+++ b/client/coral-plugin-permalinks/translations.json
@@ -1,12 +1,12 @@
 {
   "en": {
     "permalink": {
-      "permalink": "Permalink"
+      "permalink": "Link"
     }
   },
   "es": {
     "permalink": {
-      "permalink": "Enlace permanente"
+      "permalink": "Enlace"
     }
   }
 }

From 1778c19f6ab0cfed1139a98d297ede25790262cd Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 27 Jan 2017 14:55:55 -0300
Subject: [PATCH 03/23] =?UTF-8?q?=C3=A7hanges?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/coral-sign-in/components/UserBox.js | 2 +-
 client/coral-sign-in/components/styles.css | 5 ++++-
 client/coral-ui/components/Checkbox.js     | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/coral-sign-in/components/UserBox.js b/client/coral-sign-in/components/UserBox.js
index 5aa173572..5b95095d2 100644
--- a/client/coral-sign-in/components/UserBox.js
+++ b/client/coral-sign-in/components/UserBox.js
@@ -8,7 +8,7 @@ const UserBox = ({className, user, logout, changeTab}) => (
   <div className={`${styles.userBox} ${className ? className : ''}`}>
     {lang.t('signIn.loggedInAs')}
     <a onClick={() => changeTab(1)}>{user.displayName}</a>. {lang.t('signIn.notYou')}
-    <a onClick={logout} id='logout'>{lang.t('signIn.logout')}</a>
+    <a className={styles.logout} onClick={logout} id='logout'>{lang.t('signIn.logout')}</a>
   </div>
 );
 
diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css
index f1a7bace3..d4ca8c309 100644
--- a/client/coral-sign-in/components/styles.css
+++ b/client/coral-sign-in/components/styles.css
@@ -115,7 +115,10 @@ input.error{
     margin: 0px;
     margin-left: 4px;
     padding-bottom: 2px;
-    border-bottom: solid 1px black;
+}
+
+.userBox .logout {
+  border-bottom: solid 1px black;
 }
 
 .attention {
diff --git a/client/coral-ui/components/Checkbox.js b/client/coral-ui/components/Checkbox.js
index 9b88d83ad..f80666c65 100644
--- a/client/coral-ui/components/Checkbox.js
+++ b/client/coral-ui/components/Checkbox.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import styles from './Checkbox.css';
 
-export default ({name, cStyle = 'base', onChange, label, className, info, ...props}) => (
+export default ({name, cStyle = 'base', onChange, label, className, info, ...attrs}) => (
   <label className={`${styles.label} ${styles[`type--${cStyle}`]} ${className}`} htmlFor={name}>
-    <input type="checkbox" id={name} name={name} onChange={onChange} {...props} />
+    <input type="checkbox" id={name} name={name} onChange={onChange} {...attrs} />
     <span className={styles.checkbox}></span>
     {label && <span>{label}</span>}
     {info && (

From 61d24bad60e935639a5ee8c8f08618b70e854bf8 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 06:17:39 -0300
Subject: [PATCH 04/23] User bio, onClick and onMouseOver -  Styles and Tooltip

---
 client/coral-plugin-author-name/AuthorName.js | 50 +++++++++----------
 client/coral-plugin-author-name/styles.css    | 32 ++++++++++++
 client/coral-ui/components/Tooltip.css        |  2 +-
 3 files changed, 56 insertions(+), 28 deletions(-)
 create mode 100644 client/coral-plugin-author-name/styles.css

diff --git a/client/coral-plugin-author-name/AuthorName.js b/client/coral-plugin-author-name/AuthorName.js
index fcf464403..06caab381 100644
--- a/client/coral-plugin-author-name/AuthorName.js
+++ b/client/coral-plugin-author-name/AuthorName.js
@@ -1,51 +1,47 @@
 import React, {Component} from 'react';
 import {Tooltip} from 'coral-ui';
-import FlagBio from '../coral-plugin-flags/FlagBio';
+import FlagBio from 'coral-plugin-flags/FlagBio';
 const packagename = 'coral-plugin-author-name';
+import styles from './styles.css';
 
 export default class AuthorName extends Component {
-  constructor (props) {
-    super(props);
 
-    this.state = {
-      showTooltip: false
-    };
+  state = {showTooltip: false}
 
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+  handleClick = () => {
+    this.setState(state => ({
+      showTooltip: !state.showTooltip
+    }));
   }
 
-  handleMouseOver () {
-    this.setState({
-      showTooltip: true
-    });
-  }
-
-  handleMouseLeave () {
-    this.setState({
-      showTooltip: false
-    });
+  handleMouseLeave = () => {
+    setTimeout(() => {
+      this.setState({
+        showTooltip: false
+      });
+    }, 500);
   }
 
   render () {
     const {author} = this.props;
     const {showTooltip} = this.state;
     return (
-      <div
-        className={`${packagename}-text`}
-        onMouseOver={this.handleMouseOver}
-        onMouseLeave={this.handleMouseLeave}
-      >
-        {author && author.name}
-        { showTooltip && author.settings.bio && <Tooltip>
+      <div className={`${packagename}-text ${styles.container}`} onClick={this.handleClick} onMouseLeave={this.handleMouseLeave}>
+        <a className={styles.authorName}>
+          {author && author.name}
+          {author.settings.bio ? <span className={`${styles.arrowDown} ${showTooltip ? styles.arrowUp : ''}`} /> : null}
+        </a>
+        {showTooltip && author.settings.bio
+          && (
+          <Tooltip>
             <div className={`${packagename}-bio`}>
               {author.settings.bio}
             </div>
             <div className={`${packagename}-bio-flag`}>
               <FlagBio  {...this.props}/>
             </div>
-            </Tooltip>
-        }
+          </Tooltip>
+        )}
       </div>
     );
   }
diff --git a/client/coral-plugin-author-name/styles.css b/client/coral-plugin-author-name/styles.css
new file mode 100644
index 000000000..ef93c43d8
--- /dev/null
+++ b/client/coral-plugin-author-name/styles.css
@@ -0,0 +1,32 @@
+.authorName {
+  color: black;
+  display: inline-block;
+  margin: 10px 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.arrowDown {
+  top: 0;
+  width: 0;
+  height: 0;
+  margin-top: -2px;
+  margin-left: 2px;
+  display: inline-block;
+  vertical-align: middle;
+  border-bottom: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-top: 3px solid #000000;
+}
+
+.arrowUp {
+  width: 0;
+  height: 0;
+  border-top: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-bottom: 3px solid black;
+}
diff --git a/client/coral-ui/components/Tooltip.css b/client/coral-ui/components/Tooltip.css
index cf849b7cb..75c70c921 100644
--- a/client/coral-ui/components/Tooltip.css
+++ b/client/coral-ui/components/Tooltip.css
@@ -3,7 +3,7 @@
   position: absolute;
   width: 100%;
   border: solid 1px #2376D8;
-  top: 33px;
+  top: 48px;
   left: 0;
   box-sizing: border-box;
   background: white;

From 0105b1d4acfe7e7c911d5c58a974344f235bd158 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 06:57:12 -0300
Subject: [PATCH 05/23] Permalink

---
 .../PermalinkButton.js                        | 27 +++++-----
 client/coral-plugin-permalinks/styles.css     | 50 +++++++++++++++++++
 2 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 client/coral-plugin-permalinks/styles.css

diff --git a/client/coral-plugin-permalinks/PermalinkButton.js b/client/coral-plugin-permalinks/PermalinkButton.js
index 782e709d7..eb8c9d78d 100644
--- a/client/coral-plugin-permalinks/PermalinkButton.js
+++ b/client/coral-plugin-permalinks/PermalinkButton.js
@@ -3,6 +3,8 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from './translations';
 import onClickOutside from 'react-onclickoutside';
 const name = 'coral-plugin-permalinks';
+import {Button} from 'coral-ui';
+import styles from './styles.css';
 
 const lang = new I18n(translations);
 
@@ -32,40 +34,37 @@ class PermalinkButton extends React.Component {
     this.permalinkInput.select();
     try {
       document.execCommand('copy');
-      this.setState({copySuccessful: true});
+      this.setState({copySuccessful: true, copyFailure: null});
     } catch (err) {
-      this.setState({copyFailure: true});
+      this.setState({copyFailure: true, copySuccessful: null});
     }
 
     setTimeout(() => {
       this.setState({copyFailure: null, copySuccessful: null});
-    }, 4500);
+    }, 3500);
   }
 
   render () {
+    const {copySuccessful, copyFailure} = this.state;
     return (
       <div className={`${name}-container`}>
         <button onClick={this.toggle} className={`${name}-button`}>
           <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
           {lang.t('permalink.permalink')}
         </button>
-        <div
-          className={`${name}-popover ${this.state.popoverOpen ? 'active' : ''}`}>
+        <div className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
           <input
             className={`${name}-copy-field`}
             type='text'
             ref={input => this.permalinkInput = input}
             value={`${this.props.articleURL}#${this.props.commentId}`}
             onChange={() => {}} />
-          <button className={`${name}-copy-button`} onClick={this.copyPermalink}>Copy</button>
-          {
-            this.state.copySuccessful ? <p className={`${name}-copied-text`}>copied to clipboard</p> : null
-          }
-          {
-            this.state.copyFailure
-            ? <p className={`${name}-copied-error`}>copying to clipboard not supported in this browser. Use Cmd + C.</p>
-            : null
-          }
+          <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
+            onClick={this.copyPermalink} >
+            {!copyFailure && !copySuccessful && 'Copy'}
+            {copySuccessful && 'Copied'}
+            {copyFailure && 'Not supported'}
+          </Button>
         </div>
       </div>
     );
diff --git a/client/coral-plugin-permalinks/styles.css b/client/coral-plugin-permalinks/styles.css
new file mode 100644
index 000000000..0dc0fd26f
--- /dev/null
+++ b/client/coral-plugin-permalinks/styles.css
@@ -0,0 +1,50 @@
+.container {
+  border-radius: 3px;
+  border: solid 1px #D8D8D8;
+  border-radius: 3px;
+  padding: 15px 10px;
+  box-sizing: border-box;
+  box-shadow: 1px 3px 28px 48px rgba(255, 255, 255, 0.75);
+  width: auto;
+  margin: 0 auto;
+  left: 0;
+  margin: 0 5px;
+
+  input {
+    display: inline-block;
+    width: calc(100% - 78px);
+    padding: 8px;
+    border-radius: 3px;
+    border: solid 1px #e0e0e0;
+    height: 32px;
+    box-sizing: border-box;
+    font-size: 1em;
+  }
+
+  button {
+    display: inline-block;
+    float: right;
+    box-sizing: border-box;
+    margin: 0;
+    background-color: #e0e0e0;
+    font-size: 1em;
+    width: auto;
+    height: auto;
+    padding: 2px;
+    transition: background-color 0.4s ease;
+
+    &:hover{
+      color: black;
+    }
+
+    &.success {
+      background-color: #00897B;
+      color: white;
+    }
+
+    &.failure {
+      background-color: #FF5252;
+      color: white;
+    }
+  }
+}

From 177a4d8f2e88dc8b14063caa7416e13d8401fcf4 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 07:32:19 -0300
Subject: [PATCH 06/23] Permalinks and Embed

---
 client/coral-embed-stream/src/Embed.js        | 190 +++++++++---------
 client/coral-embed-stream/style/default.css   |   2 +-
 .../PermalinkButton.js                        |  38 ++--
 client/coral-plugin-permalinks/styles.css     |   9 +-
 4 files changed, 121 insertions(+), 118 deletions(-)

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index c425a822d..e424a99c5 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -3,7 +3,7 @@ import {compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import isEqual from 'lodash/isEqual';
 
-import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui';
+import {TabBar, Tab, TabContent, Spinner} from 'coral-ui';
 
 const {logout, showSignInDialog} = authActions;
 const {addNotification, clearNotification} = notificationActions;
@@ -17,27 +17,18 @@ import Stream from './Stream';
 import InfoBox from 'coral-plugin-infobox/InfoBox';
 import Count from 'coral-plugin-comment-count/CommentCount';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
-import UserBox from '../../coral-sign-in/components/UserBox';
-import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
-import SuspendedAccount from '../../coral-framework/components/SuspendedAccount';
-import SettingsContainer from '../../coral-settings/containers/SettingsContainer';
-import RestrictedContent from '../../coral-framework/components/RestrictedContent';
-import ConfigureStreamContainer from '../../coral-configure/containers/ConfigureStreamContainer';
+import UserBox from 'coral-sign-in/components/UserBox';
+import SignInContainer from 'coral-sign-in/containers/SignInContainer';
+import SuspendedAccount from 'coral-framework/components/SuspendedAccount';
+import SettingsContainer from 'coral-settings/containers/SettingsContainer';
+import RestrictedContent from 'coral-framework/components/RestrictedContent';
+import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
 
 class Embed extends Component {
 
-  constructor (props) {
-    super(props);
+  state = { activeTab: 0, showSignInDialog: false };
 
-    this.state = {
-      activeTab: 0,
-      showSignInDialog: false
-    };
-
-    this.changeTab = this.changeTab.bind(this);
-  }
-
-  changeTab (tab) {
+  changeTab = (tab) => {
     this.setState({
       activeTab: tab
     });
@@ -78,7 +69,6 @@ class Embed extends Component {
         }
       }, 100);
     });
-
   }
 
   componentWillReceiveProps (nextProps) {
@@ -100,85 +90,93 @@ class Embed extends Component {
       minHeight: document.body.scrollHeight + 200
     } : {};
 
-    return <div style={expandForLogin}>
-      {
-        loading ? <Spinner/>
-      : <div className="commentStream">
+    if (loading) {
+      return <Spinner />
+    }
+
+    console.log(
+      asset
+    )
+
+    return (
+      <div style={expandForLogin}>
+        <div className="commentStream">
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
-            <Tab><Count count={asset.comments.length}/></Tab>
-            <Tab>Settings</Tab>
-            <Tab restricted={!isAdmin}>Configure Stream</Tab>
+          <Tab><Count count={asset.comments.length}/></Tab>
+          <Tab>Settings</Tab>
+          <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
-            {loggedIn && <UserBox user={user} logout={this.props.logout} changeTab={this.changeTab} />}
-            <TabContent show={activeTab === 0}>
-                {
-                  openStream
-                   ? <div id="commentBox">
-                       <InfoBox
-                         content={asset.settings.infoBoxContent}
-                         enable={asset.settings.infoBoxEnable} />
-                     <RestrictedContent restricted={false} restrictedComp={<SuspendedAccount />}>
-                       {
-                         user
-                         ? <CommentBox
-                            commentPostedHandler={refetch}
-                            addNotification={this.props.addNotification}
-                            postItem={this.props.postItem}
-                            appendItemArray={this.props.appendItemArray}
-                            updateItem={this.props.updateItem}
-                            assetId={asset.id}
-                            premod={asset.settings.moderation}
-                            isReply={false}
-                            currentUser={this.props.auth.user}
-                            banned={false}
-                            authorId={user.id}
-                            charCount={asset.settings.charCountEnable && asset.settings.charCount} />
-                         : null
-                       }
-                     </RestrictedContent>
-                     </div>
-                   : <p>{asset.settings.closedMessage}</p>
-                }
-                {!loggedIn && <SignInContainer offset={signInOffset}/>}
-                <Stream
-                  refetch={refetch}
-                  addNotification={this.props.addNotification}
-                  postItem={this.props.postItem}
-                  asset={asset}
-                  currentUser={user}
-                  postAction={this.props.postAction}
-                  deleteAction={this.props.deleteAction}
-                  showSignInDialog={this.props.showSignInDialog}
-                  comments={asset.comments} />
-                <Notification
-                  notifLength={4500}
-                  clearNotification={this.props.clearNotification}
-                  notification={{text: null}}
-                />
-            </TabContent>
-             <TabContent show={activeTab === 1}>
-               <SettingsContainer
-                 loggedIn={loggedIn}
-                 userData={this.props.userData}
-                 showSignInDialog={this.props.showSignInDialog}
-               />
-             </TabContent>
-             <TabContent show={activeTab === 2}>
-               <RestrictedContent restricted={!loggedIn}>
-                 <ConfigureStreamContainer
-                   status={status}
-                   onClick={this.toggleStatus}
-                 />
-               </RestrictedContent>
-             </TabContent>
-              <Notification
-                notifLength={4500}
-                clearNotification={this.props.clearNotification}
-                notification={this.props.notification}
-              />
-        </div>
-      }
-    </div>;
+          {loggedIn && <UserBox user={user} logout={this.props.logout} />}
+          <TabContent show={activeTab === 0}>
+            {
+              openStream
+               ? <div id="commentBox">
+                   <InfoBox
+                     content={asset.settings.infoBoxContent}
+                     enable={asset.settings.infoBoxEnable}
+                   />
+                 <RestrictedContent restricted={false} restrictedComp={<SuspendedAccount />}>
+                   {
+                     user
+                     ? <CommentBox
+                        commentPostedHandler={refetch}
+                        addNotification={this.props.addNotification}
+                        postItem={this.props.postItem}
+                        appendItemArray={this.props.appendItemArray}
+                        updateItem={this.props.updateItem}
+                        assetId={asset.id}
+                        premod={asset.settings.moderation}
+                        isReply={false}
+                        currentUser={this.props.auth.user}
+                        banned={false}
+                        authorId={user.id}
+                        charCount={asset.settings.charCountEnable && asset.settings.charCount} />
+                     : null
+                   }
+                 </RestrictedContent>
+                 </div>
+               : <p>{asset.settings.closedMessage}</p>
+            }
+            {!loggedIn && <SignInContainer offset={signInOffset}/>}
+            <Stream
+              refetch={refetch}
+              addNotification={this.props.addNotification}
+              postItem={this.props.postItem}
+              asset={asset}
+              currentUser={user}
+              postAction={this.props.postAction}
+              deleteAction={this.props.deleteAction}
+              showSignInDialog={this.props.showSignInDialog}
+              comments={asset.comments} />
+            <Notification
+              notifLength={4500}
+              clearNotification={this.props.clearNotification}
+              notification={{text: null}}
+            />
+          </TabContent>
+          <TabContent show={activeTab === 1}>
+           <SettingsContainer
+             loggedIn={loggedIn}
+             userData={this.props.userData}
+             showSignInDialog={this.props.showSignInDialog}
+           />
+          </TabContent>
+          <TabContent show={activeTab === 2}>
+           <RestrictedContent restricted={!loggedIn}>
+             <ConfigureStreamContainer
+               status={status}
+               onClick={this.toggleStatus}
+             />
+           </RestrictedContent>
+          </TabContent>
+          <Notification
+            notifLength={4500}
+            clearNotification={this.props.clearNotification}
+            notification={this.props.notification}
+          />
+          </div>
+      </div>
+    );
   }
 }
 
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 28b2066e6..300323d37 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -219,8 +219,8 @@ hr {
 .coral-plugin-flags-popup span {
   min-width: 280px;
   bottom: 36px;
-  left: -190px;
   position: absolute;
+  right: 10px;
 }
 
 .coral-plugin-flags-popup-form {
diff --git a/client/coral-plugin-permalinks/PermalinkButton.js b/client/coral-plugin-permalinks/PermalinkButton.js
index eb8c9d78d..ca33e6e17 100644
--- a/client/coral-plugin-permalinks/PermalinkButton.js
+++ b/client/coral-plugin-permalinks/PermalinkButton.js
@@ -47,24 +47,26 @@ class PermalinkButton extends React.Component {
   render () {
     const {copySuccessful, copyFailure} = this.state;
     return (
-      <div className={`${name}-container`}>
-        <button onClick={this.toggle} className={`${name}-button`}>
-          <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
-          {lang.t('permalink.permalink')}
-        </button>
-        <div className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
-          <input
-            className={`${name}-copy-field`}
-            type='text'
-            ref={input => this.permalinkInput = input}
-            value={`${this.props.articleURL}#${this.props.commentId}`}
-            onChange={() => {}} />
-          <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
-            onClick={this.copyPermalink} >
-            {!copyFailure && !copySuccessful && 'Copy'}
-            {copySuccessful && 'Copied'}
-            {copyFailure && 'Not supported'}
-          </Button>
+      <div className={style.mainContainer}>
+        <div className={`${name}-container`}>
+          <button onClick={this.toggle} className={`${name}-button`}>
+            <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
+            {lang.t('permalink.permalink')}
+          </button>
+          <div className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
+            <input
+              className={`${name}-copy-field`}
+              type='text'
+              ref={input => this.permalinkInput = input}
+              value={`${this.props.articleURL}#${this.props.commentId}`}
+              onChange={() => {}} />
+            <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
+              onClick={this.copyPermalink} >
+              {!copyFailure && !copySuccessful && 'Copy'}
+              {copySuccessful && 'Copied'}
+              {copyFailure && 'Not supported'}
+            </Button>
+          </div>
         </div>
       </div>
     );
diff --git a/client/coral-plugin-permalinks/styles.css b/client/coral-plugin-permalinks/styles.css
index 0dc0fd26f..c5927034f 100644
--- a/client/coral-plugin-permalinks/styles.css
+++ b/client/coral-plugin-permalinks/styles.css
@@ -1,15 +1,18 @@
 .container {
-  border-radius: 3px;
-  border: solid 1px #D8D8D8;
   border-radius: 3px;
   padding: 15px 10px;
   box-sizing: border-box;
-  box-shadow: 1px 3px 28px 48px rgba(255, 255, 255, 0.75);
+  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
+  border: solid 1px #999;
   width: auto;
   margin: 0 auto;
   left: 0;
   margin: 0 5px;
 
+  &:before {
+    box-shadow: 1px 3px 28px 48px rgba(255, 255, 255, 0.75);
+  }
+
   input {
     display: inline-block;
     width: calc(100% - 78px);

From 8fe8f6c69013f6123ea84d2a9415895e12763655 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 07:56:08 -0300
Subject: [PATCH 07/23] Working permalink

---
 .../PermalinkButton.js                        | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/client/coral-plugin-permalinks/PermalinkButton.js b/client/coral-plugin-permalinks/PermalinkButton.js
index ca33e6e17..3643c4983 100644
--- a/client/coral-plugin-permalinks/PermalinkButton.js
+++ b/client/coral-plugin-permalinks/PermalinkButton.js
@@ -47,26 +47,24 @@ class PermalinkButton extends React.Component {
   render () {
     const {copySuccessful, copyFailure} = this.state;
     return (
-      <div className={style.mainContainer}>
-        <div className={`${name}-container`}>
-          <button onClick={this.toggle} className={`${name}-button`}>
-            <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
-            {lang.t('permalink.permalink')}
-          </button>
-          <div className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
-            <input
-              className={`${name}-copy-field`}
-              type='text'
-              ref={input => this.permalinkInput = input}
-              value={`${this.props.articleURL}#${this.props.commentId}`}
-              onChange={() => {}} />
-            <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
-              onClick={this.copyPermalink} >
-              {!copyFailure && !copySuccessful && 'Copy'}
-              {copySuccessful && 'Copied'}
-              {copyFailure && 'Not supported'}
-            </Button>
-          </div>
+      <div className={`${name}-container`}>
+        <button onClick={this.toggle} className={`${name}-button`}>
+          <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
+          {lang.t('permalink.permalink')}
+        </button>
+        <div className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
+          <input
+            className={`${name}-copy-field`}
+            type='text'
+            ref={input => this.permalinkInput = input}
+            value={`${this.props.articleURL}#${this.props.commentId}`}
+            onChange={() => {}} />
+          <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
+                  onClick={this.copyPermalink} >
+            {!copyFailure && !copySuccessful && 'Copy'}
+            {copySuccessful && 'Copied'}
+            {copyFailure && 'Not supported'}
+          </Button>
         </div>
       </div>
     );

From c42fea58893df5fe568486f41bb8c7cd1371b692 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 08:19:18 -0300
Subject: [PATCH 08/23] SnackBar

---
 .../modules/notification/Notification.js      | 11 ++++++-----
 client/coral-ui/components/SnackBar.css       | 19 +++++++++++++++++++
 client/coral-ui/components/SnackBar.js        |  8 ++++++++
 client/coral-ui/index.js                      |  1 +
 4 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 client/coral-ui/components/SnackBar.css
 create mode 100644 client/coral-ui/components/SnackBar.js

diff --git a/client/coral-framework/modules/notification/Notification.js b/client/coral-framework/modules/notification/Notification.js
index 2a5e1d693..965c17a2d 100644
--- a/client/coral-framework/modules/notification/Notification.js
+++ b/client/coral-framework/modules/notification/Notification.js
@@ -1,17 +1,18 @@
 import React from 'react';
+import {SnackBar} from 'coral-ui';
 
 const Notification = (props) => {
   if (props.notification.text) {
-    setTimeout(() => {
-      props.clearNotification();
-    }, props.notifLength);
+    // setTimeout(() => {
+    //   props.clearNotification();
+    // }, props.notifLength);
   }
   return <div>
   {
     props.notification.text &&
-    <dialog open id='coral-notif' className={`coral-notif-${  props.notification.type}`}>
+    <SnackBar id='coral-notif' className={`coral-notif-${props.notification.type}`}>
       {props.notification.text}
-    </dialog>
+    </SnackBar>
   }
   </div>;
 };
diff --git a/client/coral-ui/components/SnackBar.css b/client/coral-ui/components/SnackBar.css
new file mode 100644
index 000000000..3c39c4aca
--- /dev/null
+++ b/client/coral-ui/components/SnackBar.css
@@ -0,0 +1,19 @@
+.SnackBar {
+  top: 0;
+  background: red;
+  position: fixed;
+  cursor: default;
+  background-color: #323232;
+  z-index: 3;
+  display: flex;
+  will-change: transform;
+  transition: transform .25s cubic-bezier(.4,0,1,1);
+  pointer-events: none;
+  transform: translate(-50%,80px);
+  padding: 18px 14px;
+  vertical-align: middle;
+  color: #fff;
+  border-radius: 3px;
+  text-align: center;
+  left: 50%;
+}
diff --git a/client/coral-ui/components/SnackBar.js b/client/coral-ui/components/SnackBar.js
new file mode 100644
index 000000000..9e4abb032
--- /dev/null
+++ b/client/coral-ui/components/SnackBar.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './SnackBar.css'
+
+const SnackBar = ({children}) => (
+  <div className={styles.SnackBar}>{children}</div>
+);
+
+export default SnackBar;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 23d5d876a..9717134f7 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -14,3 +14,4 @@ export {default as List} from './components/List';
 export {default as Item} from './components/Item';
 export {default as Card} from './components/Card';
 export {default as Pager} from './components/Pager';
+export {default as SnackBar} from './components/SnackBar';

From 805b5cb441f400e4669ccaac93422c2d453724f3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 09:04:00 -0300
Subject: [PATCH 09/23] Lintin

---
 client/coral-embed-stream/src/Embed.js            | 15 +++++++++------
 client/coral-embed-stream/style/default.css       |  6 ++++++
 .../modules/notification/Notification.js          |  1 +
 client/coral-ui/components/SnackBar.css           |  5 ++---
 client/coral-ui/components/SnackBar.js            |  2 +-
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index e424a99c5..de4f7cc8e 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -26,7 +26,7 @@ import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStream
 
 class Embed extends Component {
 
-  state = { activeTab: 0, showSignInDialog: false };
+  state = {activeTab: 0, showSignInDialog: false};
 
   changeTab = (tab) => {
     this.setState({
@@ -69,6 +69,13 @@ class Embed extends Component {
         }
       }, 100);
     });
+    console.log(document.documentElement);
+    document.documentElement.addEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll = () => {
+    const doc = document.documentElement;
+    console.log((window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0));
   }
 
   componentWillReceiveProps (nextProps) {
@@ -91,13 +98,9 @@ class Embed extends Component {
     } : {};
 
     if (loading) {
-      return <Spinner />
+      return <Spinner />;
     }
 
-    console.log(
-      asset
-    )
-
     return (
       <div style={expandForLogin}>
         <div className="commentStream">
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 300323d37..b8592b925 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -1,3 +1,8 @@
+html, body {
+  width:auto;
+  height:auto;
+}
+
 body {
   font-family: 'Lato', sans-serif;
   font-family: 'Open Sans', sans-serif;
@@ -76,6 +81,7 @@ hr {
 .commentStream {
   /* prevent absolutely positioned final permalink popover from being clipped */
   padding-bottom: 50px;
+  /*height: 100vh;*/
 }
 
 /* Comment Box Styles */
diff --git a/client/coral-framework/modules/notification/Notification.js b/client/coral-framework/modules/notification/Notification.js
index 965c17a2d..08a5ecbca 100644
--- a/client/coral-framework/modules/notification/Notification.js
+++ b/client/coral-framework/modules/notification/Notification.js
@@ -3,6 +3,7 @@ import {SnackBar} from 'coral-ui';
 
 const Notification = (props) => {
   if (props.notification.text) {
+
     // setTimeout(() => {
     //   props.clearNotification();
     // }, props.notifLength);
diff --git a/client/coral-ui/components/SnackBar.css b/client/coral-ui/components/SnackBar.css
index 3c39c4aca..0daf9a152 100644
--- a/client/coral-ui/components/SnackBar.css
+++ b/client/coral-ui/components/SnackBar.css
@@ -1,6 +1,4 @@
 .SnackBar {
-  top: 0;
-  background: red;
   position: fixed;
   cursor: default;
   background-color: #323232;
@@ -9,11 +7,12 @@
   will-change: transform;
   transition: transform .25s cubic-bezier(.4,0,1,1);
   pointer-events: none;
-  transform: translate(-50%,80px);
   padding: 18px 14px;
   vertical-align: middle;
   color: #fff;
   border-radius: 3px;
   text-align: center;
   left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 0);
 }
diff --git a/client/coral-ui/components/SnackBar.js b/client/coral-ui/components/SnackBar.js
index 9e4abb032..380613f4c 100644
--- a/client/coral-ui/components/SnackBar.js
+++ b/client/coral-ui/components/SnackBar.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './SnackBar.css'
+import styles from './SnackBar.css';
 
 const SnackBar = ({children}) => (
   <div className={styles.SnackBar}>{children}</div>

From 7a227dff9180bac37dcf81f7cebf22c0e988e909 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 15:11:16 -0300
Subject: [PATCH 10/23] Notification in the CommentStream Working

---
 client/coral-embed-stream/src/Embed.js        | 24 +++++------------
 client/coral-embed-stream/style/default.css   |  4 +--
 .../coral-framework/actions/notification.js   |  5 ++--
 .../modules/notification/Notification.js      | 18 +++++++------
 .../coral-framework/reducers/notification.js  | 17 ++++++++----
 .../containers/SettingsContainer.js           |  3 ++-
 client/coral-ui/components/SnackBar.css       |  3 ++-
 client/coral-ui/components/SnackBar.js        | 10 ++++---
 views/article.ejs                             | 26 ++++++++++++++++++-
 9 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index de4f7cc8e..03631fe4f 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -42,15 +42,6 @@ class Embed extends Component {
   }
 
   componentDidMount () {
-
-    // stream id, logged in user, settings
-
-    // Set up messaging between embedded Iframe an parent component
-
-    // this.props.getStream(path || window.location);
-    // this.path = window.location.href.split('#')[0];
-    //
-
     pym.sendMessage('childReady');
 
     pym.onMessage('DOMContentLoaded', hash => {
@@ -69,13 +60,6 @@ class Embed extends Component {
         }
       }, 100);
     });
-    console.log(document.documentElement);
-    document.documentElement.addEventListener('scroll', this.handleScroll);
-  }
-
-  handleScroll = () => {
-    const doc = document.documentElement;
-    console.log((window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0));
   }
 
   componentWillReceiveProps (nextProps) {
@@ -192,7 +176,13 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   loadAsset: (asset) => dispatch(fetchAssetSuccess(asset)),
-  addNotification: (type, text) => dispatch(addNotification(type, text)),
+  addNotification: (type, text) => {
+    pym.sendMessage('getPosition');
+
+    pym.onMessage('position', position => {
+      dispatch(addNotification(type, text, position));
+    });
+  },
   clearNotification: () => dispatch(clearNotification()),
   showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
   logout: () => dispatch(logout()),
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index b8592b925..551bc6287 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -51,7 +51,6 @@ hr {
 /* Notification styles */
 #coral-notif {
   position: fixed;
-  bottom: 0;
   border: 0;
   background: rgb(105,105,105);
   color: white;
@@ -81,7 +80,8 @@ hr {
 .commentStream {
   /* prevent absolutely positioned final permalink popover from being clipped */
   padding-bottom: 50px;
-  /*height: 100vh;*/
+  min-height: 775px;
+  position: relative;
 }
 
 /* Comment Box Styles */
diff --git a/client/coral-framework/actions/notification.js b/client/coral-framework/actions/notification.js
index 4edc17601..f0ac4d951 100644
--- a/client/coral-framework/actions/notification.js
+++ b/client/coral-framework/actions/notification.js
@@ -1,11 +1,12 @@
 export const ADD_NOTIFICATION = 'ADD_NOTIFICATION';
 export const CLEAR_NOTIFICATION = 'CLEAR_NOTIFICATION';
 
-export const addNotification = (notifType, text) => {
+export const addNotification = (notifType, text, position) => {
   return {
     type: ADD_NOTIFICATION,
     notifType,
-    text
+    text,
+    position
   };
 };
 
diff --git a/client/coral-framework/modules/notification/Notification.js b/client/coral-framework/modules/notification/Notification.js
index 08a5ecbca..5ae8d94d7 100644
--- a/client/coral-framework/modules/notification/Notification.js
+++ b/client/coral-framework/modules/notification/Notification.js
@@ -8,14 +8,16 @@ const Notification = (props) => {
     //   props.clearNotification();
     // }, props.notifLength);
   }
-  return <div>
-  {
-    props.notification.text &&
-    <SnackBar id='coral-notif' className={`coral-notif-${props.notification.type}`}>
-      {props.notification.text}
-    </SnackBar>
-  }
-  </div>;
+  return (
+    <div>
+      {
+        props.notification.text &&
+        <SnackBar id='coral-notif' className={`coral-notif-${props.notification.type}`} position={props.notification.position}>
+          {props.notification.text}
+        </SnackBar>
+      }
+    </div>
+  );
 };
 
 export default Notification;
diff --git a/client/coral-framework/reducers/notification.js b/client/coral-framework/reducers/notification.js
index ea8b4889d..fbc58230f 100644
--- a/client/coral-framework/reducers/notification.js
+++ b/client/coral-framework/reducers/notification.js
@@ -1,14 +1,21 @@
-/* Items Notifications */
-
 import * as actions from '../actions/notification';
-import {fromJS} from 'immutable';
+import {Map} from 'immutable';
 
-const initialState = fromJS({});
+const initialState = Map({
+  text: '',
+  type: '',
+  position: 400
+});
 
 export default (state = initialState, action) => {
   switch (action.type) {
   case actions.ADD_NOTIFICATION:
-    return state.set('text', action.text).set('type', action.notifType);
+    return state
+      .merge({
+        type: action.notifType,
+        text: action.text,
+        position: action.position
+      });
   case actions.CLEAR_NOTIFICATION:
     return initialState;
   default:
diff --git a/client/coral-settings/containers/SettingsContainer.js b/client/coral-settings/containers/SettingsContainer.js
index f02badd80..665ba5e4c 100644
--- a/client/coral-settings/containers/SettingsContainer.js
+++ b/client/coral-settings/containers/SettingsContainer.js
@@ -1,6 +1,7 @@
 import {connect} from 'react-redux';
 import {compose} from 'react-apollo';
 import React, {Component} from 'react';
+import {addNotification} from '../actions/notification';
 import I18n from 'coral-framework/modules/i18n/i18n';
 
 import {myCommentHistory} from 'coral-framework/graphql/queries';
@@ -65,7 +66,7 @@ class SettingsContainer extends Component {
           }
         </TabContent>
         <TabContent show={activeTab === 1}>
-          <BioContainer bio={userData.settings.bio} handleSave={this.handleSave} {...this.props} />
+          <BioContainer bio={userData.settings.bio} handleSave={this.handleSave} addNotification={this.props.addNotification} {...this.props} />
         </TabContent>
       </div>
     );
diff --git a/client/coral-ui/components/SnackBar.css b/client/coral-ui/components/SnackBar.css
index 0daf9a152..d973844e4 100644
--- a/client/coral-ui/components/SnackBar.css
+++ b/client/coral-ui/components/SnackBar.css
@@ -13,6 +13,7 @@
   border-radius: 3px;
   text-align: center;
   left: 50%;
-  bottom: 0;
   transform: translate(-50%, 0);
+  top: 0;
+  bottom: auto;
 }
diff --git a/client/coral-ui/components/SnackBar.js b/client/coral-ui/components/SnackBar.js
index 380613f4c..9948eaa24 100644
--- a/client/coral-ui/components/SnackBar.js
+++ b/client/coral-ui/components/SnackBar.js
@@ -1,8 +1,12 @@
 import React from 'react';
 import styles from './SnackBar.css';
 
-const SnackBar = ({children}) => (
-  <div className={styles.SnackBar}>{children}</div>
-);
+const SnackBar = ({children, className, position, ...attrs}) => {
+  return (
+    <div className={`${styles.SnackBar} ${className}`} style={{top: `${position}px`}} {...attrs} >
+     {children}
+     </div>
+  );
+};
 
 export default SnackBar;
diff --git a/views/article.ejs b/views/article.ejs
index d0b468cf2..8aaaa1207 100644
--- a/views/article.ejs
+++ b/views/article.ejs
@@ -28,6 +28,7 @@
 <script type='text/javascript' src='<%= basePath %>/pym.v1.min.js'></script>
 <script>
   var ready = false;
+  var notificationOffset = 200;
 
   // default to using the window.location
   var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
@@ -38,7 +39,21 @@
   <%}%>
 
   var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream?asset_url=' + encodeURIComponent(url), {title: 'Talk Comments', id:'coralStreamIframe', name: 'coralStreamIframe', asset_url: url});
-  pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})
+  pymParent.onMessage('height', function(height) {
+    document.querySelector('#coralStreamEmbed iframe').height = height + 'px';
+  })
+
+
+  pymParent.onMessage('getPosition', function(notification) {
+    var position = viewport().height + document.body.scrollTop;
+
+    if (position > notificationOffset) {
+      position = position - notificationOffset;
+    }
+
+    pymParent.sendMessage('position', position);
+  });
+
   pymParent.onMessage('childReady', function () {
     var interval = setInterval(function () {
       if (ready) {
@@ -65,6 +80,15 @@
   document.addEventListener('DOMContentLoaded', function () {
     ready = true;
   });
+
+  function viewport() {
+    var e = window, a = 'inner';
+    if ( !( 'innerWidth' in window ) ){
+      a = 'client';
+      e = document.documentElement || document.body;
+    }
+  return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
+  }
 </script>
   </body>
 </html>

From f7725f41439874697cc0ea07b5d163929dde91b2 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 15:27:09 -0300
Subject: [PATCH 11/23] Notifications working everywhere :D

---
 client/coral-embed-stream/style/default.css            |  2 +-
 .../modules/notification/Notification.js               |  7 +++----
 client/coral-settings/containers/SettingsContainer.js  |  3 +--
 client/coral-ui/components/SnackBar.js                 | 10 +++++++---
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 551bc6287..0fc46c4e7 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -80,7 +80,7 @@ hr {
 .commentStream {
   /* prevent absolutely positioned final permalink popover from being clipped */
   padding-bottom: 50px;
-  min-height: 775px;
+  min-height: 500px;
   position: relative;
 }
 
diff --git a/client/coral-framework/modules/notification/Notification.js b/client/coral-framework/modules/notification/Notification.js
index 5ae8d94d7..709403976 100644
--- a/client/coral-framework/modules/notification/Notification.js
+++ b/client/coral-framework/modules/notification/Notification.js
@@ -3,10 +3,9 @@ import {SnackBar} from 'coral-ui';
 
 const Notification = (props) => {
   if (props.notification.text) {
-
-    // setTimeout(() => {
-    //   props.clearNotification();
-    // }, props.notifLength);
+    setTimeout(() => {
+      props.clearNotification();
+    }, props.notifLength);
   }
   return (
     <div>
diff --git a/client/coral-settings/containers/SettingsContainer.js b/client/coral-settings/containers/SettingsContainer.js
index 665ba5e4c..f02badd80 100644
--- a/client/coral-settings/containers/SettingsContainer.js
+++ b/client/coral-settings/containers/SettingsContainer.js
@@ -1,7 +1,6 @@
 import {connect} from 'react-redux';
 import {compose} from 'react-apollo';
 import React, {Component} from 'react';
-import {addNotification} from '../actions/notification';
 import I18n from 'coral-framework/modules/i18n/i18n';
 
 import {myCommentHistory} from 'coral-framework/graphql/queries';
@@ -66,7 +65,7 @@ class SettingsContainer extends Component {
           }
         </TabContent>
         <TabContent show={activeTab === 1}>
-          <BioContainer bio={userData.settings.bio} handleSave={this.handleSave} addNotification={this.props.addNotification} {...this.props} />
+          <BioContainer bio={userData.settings.bio} handleSave={this.handleSave} {...this.props} />
         </TabContent>
       </div>
     );
diff --git a/client/coral-ui/components/SnackBar.js b/client/coral-ui/components/SnackBar.js
index 9948eaa24..efebb89fa 100644
--- a/client/coral-ui/components/SnackBar.js
+++ b/client/coral-ui/components/SnackBar.js
@@ -3,10 +3,14 @@ import styles from './SnackBar.css';
 
 const SnackBar = ({children, className, position, ...attrs}) => {
   return (
-    <div className={`${styles.SnackBar} ${className}`} style={{top: `${position}px`}} {...attrs} >
-     {children}
-     </div>
+    <div className={`${styles.SnackBar} ${className}`}
+      style={ position ? {top: `${position}px`} : fixedStyle}
+      {...attrs} >
+      {children}
+    </div>
   );
 };
 
+const fixedStyle = {bottom: 0, top: 'auto'};
+
 export default SnackBar;

From b316d626f5eab6c7a0de58e560758d876d08662b Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 15:33:08 -0300
Subject: [PATCH 12/23] Bio and Embed Stream refresh

---
 client/coral-embed-stream/src/Embed.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index 03631fe4f..ba22f20de 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -29,6 +29,12 @@ class Embed extends Component {
   state = {activeTab: 0, showSignInDialog: false};
 
   changeTab = (tab) => {
+
+    // Everytime the comes from another tab, the Stream needs to be updated.
+    if (tab === 0) {
+      this.props.data.refetch()
+    }
+
     this.setState({
       activeTab: tab
     });

From 744f2085dab84e5e80282797d8223a75ddf015ce Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 15:38:26 -0300
Subject: [PATCH 13/23] Lint :tada:

---
 client/coral-embed-stream/src/Embed.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index ba22f20de..a85c05735 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -32,7 +32,7 @@ class Embed extends Component {
 
     // Everytime the comes from another tab, the Stream needs to be updated.
     if (tab === 0) {
-      this.props.data.refetch()
+      this.props.data.refetch();
     }
 
     this.setState({

From f5dc5ed8b7a319f34ab23ca4a5e3c960206c3f6b Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 15:53:29 -0300
Subject: [PATCH 14/23] Test updated

---
 test/client/coral-framework/store/notificationReducer.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/client/coral-framework/store/notificationReducer.spec.js b/test/client/coral-framework/store/notificationReducer.spec.js
index 960034119..40c50d11a 100644
--- a/test/client/coral-framework/store/notificationReducer.spec.js
+++ b/test/client/coral-framework/store/notificationReducer.spec.js
@@ -28,8 +28,8 @@ describe ('notificationsReducer', () => {
         type: 'test'
       });
       const result = notificationReducer(store, action);
-      expect(result.get('text')).to.equal(undefined);
-      expect(result.get('type')).to.equal(undefined);
+      expect(result.get('text')).to.equal('');
+      expect(result.get('type')).to.equal('');
     });
   });
 });

From 019e2a4fa985c96f2eabb734a4d1cae7d3ef9778 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 16:37:00 -0300
Subject: [PATCH 15/23] Flag order

---
 client/coral-embed-stream/style/default.css | 2 +-
 client/coral-plugin-flags/FlagComment.js    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 0fc46c4e7..2d7f478c1 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -80,7 +80,7 @@ hr {
 .commentStream {
   /* prevent absolutely positioned final permalink popover from being clipped */
   padding-bottom: 50px;
-  min-height: 500px;
+  min-height: 600px;
   position: relative;
 }
 
diff --git a/client/coral-plugin-flags/FlagComment.js b/client/coral-plugin-flags/FlagComment.js
index 5ea2e9fa1..bf3fca286 100644
--- a/client/coral-plugin-flags/FlagComment.js
+++ b/client/coral-plugin-flags/FlagComment.js
@@ -10,8 +10,8 @@ const getPopupMenu = [
     return {
       header: lang.t('step-1-header'),
       options: [
-        {val: 'USERS', text: lang.t('flag-username')},
-        {val: 'COMMENTS', text: lang.t('flag-comment')}
+        {val: 'COMMENTS', text: lang.t('flag-comment')},
+        {val: 'USERS', text: lang.t('flag-username')}
       ],
       button: lang.t('continue'),
       sets: 'itemType'

From 2e1dd35de335988ea58f14a71c5c3a7bec4469c8 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 16:47:26 -0300
Subject: [PATCH 16/23] Permalink box

---
 .../PermalinkButton.js                        |  2 +-
 client/coral-plugin-permalinks/styles.css     | 29 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/client/coral-plugin-permalinks/PermalinkButton.js b/client/coral-plugin-permalinks/PermalinkButton.js
index 3643c4983..1a99a5627 100644
--- a/client/coral-plugin-permalinks/PermalinkButton.js
+++ b/client/coral-plugin-permalinks/PermalinkButton.js
@@ -41,7 +41,7 @@ class PermalinkButton extends React.Component {
 
     setTimeout(() => {
       this.setState({copyFailure: null, copySuccessful: null});
-    }, 3500);
+    }, 3000);
   }
 
   render () {
diff --git a/client/coral-plugin-permalinks/styles.css b/client/coral-plugin-permalinks/styles.css
index c5927034f..863099122 100644
--- a/client/coral-plugin-permalinks/styles.css
+++ b/client/coral-plugin-permalinks/styles.css
@@ -2,15 +2,36 @@
   border-radius: 3px;
   padding: 15px 10px;
   box-sizing: border-box;
-  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
-  border: solid 1px #999;
+  /* box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); */
+  border: solid 1px rgba(153, 153, 153, 0.33);
   width: auto;
   margin: 0 auto;
   left: 0;
   margin: 0 5px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  margin-top: -13px;
 
-  &:before {
-    box-shadow: 1px 3px 28px 48px rgba(255, 255, 255, 0.75);
+  &::before {
+    content: '';
+    border: 10px solid transparent;
+    border-top-color: white;
+    position: absolute;
+    right: 8.69em;
+    bottom: -20px;
+    z-index: 2;
+  }
+
+  &::after{
+    content: '';
+    border: 10px solid transparent;
+    border-top-color: rgba(153, 153, 153, 0.33);
+    position: absolute;
+    right: 8.69em;
+    bottom: -21px;
+    z-index: 1;
   }
 
   input {

From f9363e86d0d6b2e88218c46ad1bf44c5a4f0f448 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 17:24:57 -0300
Subject: [PATCH 17/23] Merge

---
 client/coral-embed-stream/src/Comment.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 3c337810b..290c4a0e9 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -111,7 +111,7 @@ class Comment extends React.Component {
                 showSignInDialog={showSignInDialog}
                 currentUser={currentUser} />
               <ReplyButton
-                onClick={this.onReplyBoxClick}
+                onClick={() => setActiveReplyBox(comment.id)}
                 parentCommentId={parentId || comment.id}
                 currentUserId={currentUser && currentUser.id}
                 banned={false} />

From f83def83bd9cab8d70b3c1eebbdcf9d6134da354 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 19:38:58 -0300
Subject: [PATCH 18/23] tab

---
 client/coral-embed-stream/src/Embed.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index a85c05735..2987b4529 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -99,7 +99,7 @@ class Embed extends Component {
           <Tab>Settings</Tab>
           <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
-          {loggedIn && <UserBox user={user} logout={this.props.logout} />}
+          {loggedIn && <UserBox user={user} logout={this.props.logout} changeTab={this.changeTab} />}
           <TabContent show={activeTab === 0}>
             {
               openStream

From 5d2ed3f5857477efd900e33ce06e51fb9eb2bb78 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 19:48:07 -0300
Subject: [PATCH 19/23] Notifications

---
 client/coral-ui/components/SnackBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-ui/components/SnackBar.js b/client/coral-ui/components/SnackBar.js
index efebb89fa..498e64dc4 100644
--- a/client/coral-ui/components/SnackBar.js
+++ b/client/coral-ui/components/SnackBar.js
@@ -11,6 +11,6 @@ const SnackBar = ({children, className, position, ...attrs}) => {
   );
 };
 
-const fixedStyle = {bottom: 0, top: 'auto'};
+const fixedStyle = {bottom: '70px', top: 'auto'};
 
 export default SnackBar;

From 0881201465b36089f80d5e43cd4866b14bd3f0d7 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 20:00:01 -0300
Subject: [PATCH 20/23] Notification

---
 client/coral-ui/components/SnackBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-ui/components/SnackBar.js b/client/coral-ui/components/SnackBar.js
index 498e64dc4..3d2e2e626 100644
--- a/client/coral-ui/components/SnackBar.js
+++ b/client/coral-ui/components/SnackBar.js
@@ -11,6 +11,6 @@ const SnackBar = ({children, className, position, ...attrs}) => {
   );
 };
 
-const fixedStyle = {bottom: '70px', top: 'auto'};
+const fixedStyle = {bottom: '200px', top: 'auto'};
 
 export default SnackBar;

From 76f55b45247cc58360dcc9758aab2fc196a5ad12 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 20:50:25 -0300
Subject: [PATCH 21/23] Cursor on user name, and Reply Bio box

---
 client/coral-embed-stream/src/Comment.css     | 4 +++-
 client/coral-embed-stream/src/Comment.js      | 4 +++-
 client/coral-plugin-author-name/AuthorName.js | 2 +-
 client/coral-plugin-author-name/styles.css    | 6 ++++--
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css
index 8b1378917..09a94aa55 100644
--- a/client/coral-embed-stream/src/Comment.css
+++ b/client/coral-embed-stream/src/Comment.css
@@ -1 +1,3 @@
-
+.Reply {
+  position: relative;
+}
diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 290c4a0e9..1c275118f 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -16,6 +16,8 @@ import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
 import LikeButton from 'coral-plugin-likes/LikeButton';
 
+import styles from './Comment.css'
+
 const getAction = (type, comment) => comment.actions.filter((a) => a.type === type)[0];
 
 class Comment extends React.Component {
@@ -87,7 +89,7 @@ class Comment extends React.Component {
 
     return (
       <div
-        className={parentId ? 'reply' : 'comment'}
+        className={parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`}
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}>
         <hr aria-hidden={true} />
diff --git a/client/coral-plugin-author-name/AuthorName.js b/client/coral-plugin-author-name/AuthorName.js
index 06caab381..624750c60 100644
--- a/client/coral-plugin-author-name/AuthorName.js
+++ b/client/coral-plugin-author-name/AuthorName.js
@@ -27,7 +27,7 @@ export default class AuthorName extends Component {
     const {showTooltip} = this.state;
     return (
       <div className={`${packagename}-text ${styles.container}`} onClick={this.handleClick} onMouseLeave={this.handleMouseLeave}>
-        <a className={styles.authorName}>
+        <a className={`${styles.authorName} ${author.settings.bio ? styles.hasBio : ''}`}>
           {author && author.name}
           {author.settings.bio ? <span className={`${styles.arrowDown} ${showTooltip ? styles.arrowUp : ''}`} /> : null}
         </a>
diff --git a/client/coral-plugin-author-name/styles.css b/client/coral-plugin-author-name/styles.css
index ef93c43d8..55c00b282 100644
--- a/client/coral-plugin-author-name/styles.css
+++ b/client/coral-plugin-author-name/styles.css
@@ -2,10 +2,12 @@
   color: black;
   display: inline-block;
   margin: 10px 0;
+}
 
+.hasBio {
   &:hover {
-    cursor: pointer;
-  }
+     cursor: pointer;
+   }
 }
 
 .arrowDown {

From 6fd2a927f10f42372dc4907f7224796acc3e0c34 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 30 Jan 2017 20:51:28 -0300
Subject: [PATCH 22/23] Linted

---
 client/coral-embed-stream/src/Comment.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 1c275118f..778614880 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -16,7 +16,7 @@ import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
 import LikeButton from 'coral-plugin-likes/LikeButton';
 
-import styles from './Comment.css'
+import styles from './Comment.css';
 
 const getAction = (type, comment) => comment.actions.filter((a) => a.type === type)[0];
 

From d1cf6fd19bfb1297da9a6d09a36a2b24d7d0cacd Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 1 Feb 2017 10:45:01 -0700
Subject: [PATCH 23/23] Applied patch

---
 graph/loaders/comments.js | 6 +++++-
 graph/resolvers/user.js   | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/graph/loaders/comments.js b/graph/loaders/comments.js
index 7298cbbf4..144586064 100644
--- a/graph/loaders/comments.js
+++ b/graph/loaders/comments.js
@@ -73,7 +73,7 @@ const getCountsByParentID = (context, parent_ids) => {
  * @param  {Object} context   graph context
  * @param  {Object} query     query terms to apply to the comments query
  */
-const getCommentsByQuery = ({user}, {ids, statuses, asset_id, parent_id, limit, cursor, sort}) => {
+const getCommentsByQuery = ({user}, {ids, statuses, asset_id, parent_id, author_id, limit, cursor, sort}) => {
   let comments = CommentModel.find();
 
   // Only administrators can search for comments with statuses that are not
@@ -100,6 +100,10 @@ const getCommentsByQuery = ({user}, {ids, statuses, asset_id, parent_id, limit,
     });
   }
 
+  if (user && (user.hasRoles('ADMIN') || user.id === author_id)) {
+    comments = comments.where({author_id});
+  }
+
   if (asset_id) {
     comments = comments.where({asset_id});
   }
diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index 8cc11bba3..c75cdbf54 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -7,7 +7,7 @@ const User = {
     // If the user is not an admin, only return comment list for the owner of
     // the comments.
     if (user && (user.hasRoles('ADMIN') || user.id === id)) {
-      return Comments.getByAuthorID.load(id);
+      return Comments.getByQuery({author_id: id});
     }
 
     return null;