PLT-1300 adding jump button to bottom of center archive channel

3 files changed, 37 insertions, 2 deletions

diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx
index 3c6a36ad4..e458187ff 100644
--- a/web/react/components/center_panel.jsx
+++ b/web/react/components/center_panel.jsx
@@ -13,6 +13,8 @@ import PreferenceStore from '../stores/preference_store.jsx';
 import ChannelStore from '../stores/channel_store.jsx';
 import UserStore from '../stores/user_store.jsx';
 
+import * as Utils from '../utils/utils.jsx';
+
 import Constants from '../utils/constants.jsx';
 const TutorialSteps = Constants.TutorialSteps;
 const Preferences = Constants.Preferences;
@@ -46,6 +48,8 @@ export default class CenterPanel extends React.Component {
         this.setState({showPostFocus: ChannelStore.getPostMode() === ChannelStore.POST_MODE_FOCUS});
     }
     render() {
+        const channel = ChannelStore.getCurrent();
+        var handleClick = null;
         let postsContainer;
         let createPost;
         if (this.state.showTutorialScreens) {
@@ -53,7 +57,24 @@ export default class CenterPanel extends React.Component {
             createPost = null;
         } else if (this.state.showPostFocus) {
             postsContainer = <PostFocusView />;
-            createPost = null;
+
+            handleClick = function clickHandler(e) {
+                e.preventDefault();
+                Utils.switchChannel(channel);
+            };
+
+            createPost = (
+                <div
+                    id='perma-link-home'
+                >
+                    <a
+                        href=''
+                        onClick={handleClick}
+                    >
+                        {'You are viewing the Archives. Click here to jump to recent messages.'}
+                    </a>
+                </div>
+            );
         } else {
             postsContainer = <PostsViewContainer />;
             createPost = (
diff --git a/web/react/components/post_focus_view.jsx b/web/react/components/post_focus_view.jsx
index 5c6ad6c28..adcd78839 100644
--- a/web/react/components/post_focus_view.jsx
+++ b/web/react/components/post_focus_view.jsx
@@ -73,7 +73,7 @@ export default class PostFocusView extends React.Component {
     getIntroMessage() {
         return (
             <div className='channel-intro'>
-                <h4 className='channel-intro__title'>{'Beginning of Channel'}</h4>
+                <h4 className='channel-intro__title'>{'Beginning of Channel Archives'}</h4>
             </div>
         );
     }
diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
index 44a959a9b..7957493a6 100644
--- a/web/sass-files/sass/partials/_content.scss
+++ b/web/sass-files/sass/partials/_content.scss
@@ -30,6 +30,20 @@
 	width: 100%;
 	z-index: 3;
 }
+
+#perma-link-home {
+    @include flex(0 0 auto);
+	background: #fff;
+	width: 100%;
+	min-height: 50px;
+	z-index: 3;
+	background-color: beige;
+	text-align: center;
+	vertical-align: middle;
+	padding-top: 10px;
+	cursor: pointer;
+}
+
 .post-list {
 	.new-messages-hr {
 		margin-top: 5px;