fix: improve UX to match mockups better

- Move the learner header to the home page so it can use full width.
- Remove the menu icon from learner page till there is a menu in place
- Improve styling of header bar and sidebar

src/discussions/discussions-home/DiscussionContent.jsx

@@ -7,6 +7,7 @@ import { Routes } from '../../data/constants';
 import { CommentsView } from '../comments';
 import { useContainerSizeForParent } from '../data/hooks';
 import { LearnersContentView } from '../learners';
+import LearnerPageHeader from '../learners/LearnerPageHeader';
 import { PostEditor } from '../posts';
 
 export default function DiscussionContent() {
@@ -16,6 +17,9 @@ export default function DiscussionContent() {
 
   return (
     <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center h-100 overflow-auto">
+      <Route path={Routes.LEARNERS.LEARNER}>
+        <LearnerPageHeader />
+      </Route>
       <div className="d-flex flex-column w-100 mw-xl" ref={refContainer}>
         {postEditorVisible ? (
           <Route path={Routes.POSTS.NEW_POST}>

src/discussions/learners/LearnerPageHeader.jsx

@@ -0,0 +1,70 @@
+import React, { useContext } from 'react';
+
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { generatePath, NavLink } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Avatar, ButtonGroup, Icon } from '@edx/paragon';
+import { Report } from '@edx/paragon/icons';
+
+import { Routes } from '../../data/constants';
+import { DiscussionContext } from '../common/context';
+import { selectLearner, selectLearnerAvatar, selectLearnerProfile } from './data/selectors';
+import messages from './messages';
+
+function LearnerPageHeader({ intl }) {
+  const { courseId, learnerUsername } = useContext(DiscussionContext);
+  const params = { courseId, learnerUsername };
+  const learner = useSelector(selectLearner(learnerUsername));
+  const profile = useSelector(selectLearnerProfile(learnerUsername));
+  const avatar = useSelector(selectLearnerAvatar(learnerUsername));
+
+  const activeTabClass = (active) => classNames('btn', { 'btn-primary': active, 'btn-outline-primary': !active });
+
+  return (
+    <div className="d-flex flex-column w-100 bg-white shadow-sm">
+      <div className="d-flex flex-row align-items-center m-4">
+        <Avatar src={avatar} alt={learnerUsername} />
+        <span className="font-weight-bold mx-3">
+          {profile.username}
+        </span>
+      </div>
+      <div className="d-flex pb-0 bg-light-200 justify-content-center p-2 flex-fill">
+        <ButtonGroup className="my-2 bg-white">
+          <NavLink
+            className={activeTabClass}
+            to={generatePath(Routes.LEARNERS.TABS.posts, params)}
+          >
+            {intl.formatMessage(messages.postsTab)} <span className="ml-3">{learner.threads}</span>
+            {
+              learner.activeFlags ? (
+                <span className="ml-3">
+                  <Icon src={Report} />
+                </span>
+              ) : null
+            }
+          </NavLink>
+          <NavLink
+            className={activeTabClass}
+            to={generatePath(Routes.LEARNERS.TABS.responses, params)}
+          >
+            {intl.formatMessage(messages.responsesTab)} <span className="ml-3">{learner.responses}</span>
+          </NavLink>
+          <NavLink
+            className={activeTabClass}
+            to={generatePath(Routes.LEARNERS.TABS.comments, params)}
+          >
+            {intl.formatMessage(messages.commentsTab)} <span className="ml-3">{learner.replies}</span>
+          </NavLink>
+        </ButtonGroup>
+      </div>
+    </div>
+  );
+}
+
+LearnerPageHeader.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(LearnerPageHeader);

src/discussions/learners/LearnersContentView.jsx

@@ -1,81 +1,25 @@
 import React, { useContext } from 'react';
 
-import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import {
-  generatePath, NavLink, Redirect, Route, Switch,
+  generatePath, Redirect, Route, Switch,
 } from 'react-router-dom';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Avatar, ButtonGroup, Card, Icon, IconButton, Spinner,
-} from '@edx/paragon';
-import { MoreHoriz, Report } from '@edx/paragon/icons';
+import { Spinner } from '@edx/paragon';
 
 import { LearnerTabs, RequestStatus, Routes } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
-import {
-  learnersLoadingStatus, selectLearner, selectLearnerAvatar, selectLearnerProfile,
-} from './data/selectors';
+import { learnersLoadingStatus } from './data/selectors';
 import CommentsTabContent from './learner/CommentsTabContent';
 import PostsTabContent from './learner/PostsTabContent';
-import messages from './messages';
 
-function LearnersContentView({ intl }) {
+function LearnersContentView() {
   const { courseId, learnerUsername } = useContext(DiscussionContext);
   const params = { courseId, learnerUsername };
   const apiStatus = useSelector(learnersLoadingStatus());
-  const learner = useSelector(selectLearner(learnerUsername));
-  const profile = useSelector(selectLearnerProfile(learnerUsername));
-  const avatar = useSelector(selectLearnerAvatar(learnerUsername));
-
-  const activeTabClass = (active) => classNames('btn', { 'btn-primary': active, 'btn-outline-primary': !active });
 
   return (
     <div className="learner-content d-flex flex-column">
-      <Card>
-        <Card.Body>
-          <div className="d-flex flex-row align-items-center m-3">
-            <Avatar src={avatar} alt={learnerUsername} />
-            <span className="font-weight-bold mx-3">
-              {profile.username}
-            </span>
-            <div className="ml-auto">
-              <IconButton iconAs={Icon} src={MoreHoriz} alt="Options" />
-            </div>
-          </div>
-        </Card.Body>
-        <Card.Footer className="pb-0 bg-light-200 justify-content-center">
-          <ButtonGroup className="my-2">
-            <NavLink
-              className={activeTabClass}
-              to={generatePath(Routes.LEARNERS.TABS.posts, params)}
-            >
-              {intl.formatMessage(messages.postsTab)} <span className="ml-3">{learner.threads}</span>
-              {
-                learner.activeFlags ? (
-                  <span className="ml-3">
-                    <Icon src={Report} />
-                  </span>
-                ) : null
-              }
-            </NavLink>
-            <NavLink
-              className={activeTabClass}
-              to={generatePath(Routes.LEARNERS.TABS.responses, params)}
-            >
-              {intl.formatMessage(messages.responsesTab)} <span className="ml-3">{learner.responses}</span>
-            </NavLink>
-            <NavLink
-              className={activeTabClass}
-              to={generatePath(Routes.LEARNERS.TABS.comments, params)}
-            >
-              {intl.formatMessage(messages.commentsTab)} <span className="ml-3">{learner.replies}</span>
-            </NavLink>
-          </ButtonGroup>
-        </Card.Footer>
-      </Card>
-
       <Switch>
         <Route path={Routes.LEARNERS.LEARNER} exact>
           <Redirect to={generatePath(Routes.LEARNERS.TABS.posts, params)} />
@@ -104,7 +48,6 @@ function LearnersContentView({ intl }) {
 }
 
 LearnersContentView.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(LearnersContentView);
+export default LearnersContentView;

src/discussions/learners/LearnersContentView.test.jsx

@@ -16,10 +16,10 @@ import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import { commentsApiUrl } from '../comments/data/api';
 import { DiscussionContext } from '../common/context';
+import DiscussionContent from '../discussions-home/DiscussionContent';
 import { threadsApiUrl } from '../posts/data/api';
 import { coursesApiUrl, userProfileApiUrl } from './data/api';
 import { fetchLearners } from './data/thunks';
-import LearnersContentView from './LearnersContentView';
 
 import '../comments/data/__factories__';
 import '../posts/data/__factories__';
@@ -37,7 +37,7 @@ function renderComponent(username = testUsername) {
         <DiscussionContext.Provider value={{ learnerUsername: username, courseId }}>
           <MemoryRouter initialEntries={[`/${courseId}/learners/${username}/${LearnerTabs.POSTS}`]}>
             <Route path="/:courseId/learners/:learnerUsername">
-              <LearnersContentView />
+              <DiscussionContent />
             </Route>
           </MemoryRouter>
         </DiscussionContext.Provider>

src/discussions/learners/LearnersView.jsx

@@ -46,8 +46,8 @@ function LearnersView() {
     }
   };
   return (
-    <div className="d-flex flex-column">
-      <div className="list-group list-group-flush">
+    <div className="d-flex flex-column border-right border-light-300 h-100">
+      <div className="list-group list-group-flush ">
         {courseConfigLoadingStatus === RequestStatus.SUCCESSFUL && !learnersTabEnabled && (
         <Redirect
           to={{

src/discussions/learners/learner/LearnerCard.jsx

@@ -6,10 +6,6 @@ import { Link } from 'react-router-dom';
 import * as timeago from 'timeago.js';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Icon, IconButton,
-} from '@edx/paragon';
-import { MoreVert } from '@edx/paragon/icons';
 
 import { Routes } from '../../../data/constants';
 import { DiscussionContext } from '../../common/context';
@@ -63,12 +59,6 @@ function LearnerCard({
           </div>
           <LearnerFooter learner={learner} />
         </div>
-        <IconButton
-          src={MoreVert}
-          iconAs={Icon}
-          alt={learner.username}
-          disabled
-        />
       </div>
     </Link>
   );