Fix responsive layout breakpoint, replace mentions column with notifications

2 files changed, 13 insertions, 12 deletions

diff --git a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
index 8313d8826..868ebe00a 100644
--- a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
+++ b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
@@ -31,7 +31,7 @@ const TabsBar = () => {
     <div style={outerStyle}>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> <FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/home'><i className='fa fa-fw fa-home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link>
-      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/mentions'><i className='fa fa-fw fa-at' /> <FormattedMessage id='tabs_bar.mentions' defaultMessage='Mentions' /></Link>
+      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/public'><i className='fa fa-fw fa-globe' /> <FormattedMessage id='tabs_bar.public' defaultMessage='Public' /></Link>
     </div>
   );
diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx
index 655b1e2ee..9b5469bbd 100644
--- a/app/assets/javascripts/components/features/ui/index.jsx
+++ b/app/assets/javascripts/components/features/ui/index.jsx
@@ -1,13 +1,14 @@
-import ColumnsArea            from './components/columns_area';
+import ColumnsArea from './components/columns_area';
 import NotificationsContainer from './containers/notifications_container';
-import PureRenderMixin        from 'react-addons-pure-render-mixin';
-import LoadingBarContainer    from './containers/loading_bar_container';
-import HomeTimeline           from '../home_timeline';
-import MentionsTimeline       from '../mentions_timeline';
-import Compose                from '../compose';
-import MediaQuery             from 'react-responsive';
-import TabsBar                from './components/tabs_bar';
-import ModalContainer         from './containers/modal_container';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import LoadingBarContainer from './containers/loading_bar_container';
+import HomeTimeline from '../home_timeline';
+import MentionsTimeline from '../mentions_timeline';
+import Compose from '../compose';
+import MediaQuery from 'react-responsive';
+import TabsBar from './components/tabs_bar';
+import ModalContainer from './containers/modal_container';
+import Notifications from '../notifications';
 
 const UI = React.createClass({
 
@@ -26,11 +27,11 @@ const UI = React.createClass({
           {this.props.children}
         </MediaQuery>
 
-        <MediaQuery minWidth={layoutBreakpoint}>
+        <MediaQuery minWidth={layoutBreakpoint + 1}>
           <ColumnsArea>
             <Compose />
             <HomeTimeline trackScroll={false} />
-            <MentionsTimeline trackScroll={false} />
+            <Notifications trackScroll={false} />
             {this.props.children}
           </ColumnsArea>
         </MediaQuery>