Update to match mockups better

src/discussions/posts/data/api.js

@@ -1,5 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 import snakeCase from 'lodash.snakecase';
+
 import { ensureConfig, getConfig, snakeCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 

src/discussions/posts/index.js

@@ -1,3 +1,3 @@
 /* eslint-disable import/prefer-default-export */
-export { default as PostsView } from './PostsView';
 export { default as PostEditor } from './post-editor/PostEditor';
+export { default as PostsView } from './PostsView';

src/discussions/posts/post-editor/PostEditor.jsx

@@ -1,105 +1,113 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import { useDispatch } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, Form } from '@edx/paragon';
-import { faComments, faQuestion, faStar } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Help, Post } from '@edx/paragon/icons';
 
 import { hidePostEditor } from '../data';
-
 import messages from './messages';
 
+function DiscussionPostType({
+  value,
+  type,
+  description,
+  icon,
+}) {
+  return (
+    <Form.Check type="radio" value={value} className="d-flex border thin p-2 mr-2 my-0">
+      {/* <Form.Check.Input type="radio" className=""/> */}
+      <Form.Check.Label className="d-flex flex-column align-items-center">
+        {icon}
+        <span>{type}</span>
+        <span className="x-small">{description}</span>
+      </Form.Check.Label>
+    </Form.Check>
+  );
+}
+
+DiscussionPostType.propTypes = {
+  value: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  icon: PropTypes.element.isRequired,
+};
+
 function PostEditor({ intl }) {
   const dispatch = useDispatch();
   const cancelAdding = () => dispatch(hidePostEditor());
 
   return (
-    <div className="mx-4 my-2">
-      <Form>
-        <Form.Group>
-          <Form.Label>
-            {intl.formatMessage(messages.type)}
-          </Form.Label>
-          <Form.Text className="mb-3" muted>
-            {intl.formatMessage(messages.typeDescription)} ({intl.formatMessage(messages.required)})
-          </Form.Text>
+    <Form className="mx-4 my-2">
+      <h3>{intl.formatMessage(messages.heading)}</h3>
+      <Form.Group>
+        <Form.CheckboxSet className="d-flex flex-row my-3">
+          <DiscussionPostType
+            value="discussion"
+            type={intl.formatMessage(messages.discussionType)}
+            icon={<Post />}
+            description={intl.formatMessage(messages.discussionDescription)}
+          />
+          <DiscussionPostType
+            value="question"
+            type={intl.formatMessage(messages.questionType)}
+            icon={<Help />}
+            description={intl.formatMessage(messages.questionDescription)}
+          />
+        </Form.CheckboxSet>
+      </Form.Group>
 
-          <Form.Check inline type="radio" id="question">
-            <Form.Check.Input type="radio" />
-            <Form.Check.Label>
-              <FontAwesomeIcon icon={faQuestion} />
-              <span className="ml-2">{intl.formatMessage(messages.questionType)}</span>
-            </Form.Check.Label>
-          </Form.Check>
+      <Form.Group>
+        <Form.Control
+          as="select"
+          defaultValue="General"
+          aria-describedby="topicAreaInput"
+          floatingLabel={intl.formatMessage(messages.topicArea)}
+        >
+          {/* TODO: topics has to be filled in another PR */}
+          <option>General</option>
+        </Form.Control>
+      </Form.Group>
 
-          <Form.Check inline type="radio" id="discussion">
-            <Form.Check.Input type="radio" />
-            <Form.Check.Label>
-              <FontAwesomeIcon icon={faComments} />
-              <span className="ml-2">{intl.formatMessage(messages.discussionType)}</span>
-            </Form.Check.Label>
-          </Form.Check>
-        </Form.Group>
+      <Form.Group>
+        <Form.Control
+          type="text"
+          aria-describedby="titleInput"
+          floatingLabel={intl.formatMessage(messages.postTitle)}
+        />
+      </Form.Group>
 
-        <Form.Group>
-          <Form.Label>
-            {intl.formatMessage(messages.topicArea)}
-          </Form.Label>
-          <Form.Text id="topicAreaInput" muted>
-            {intl.formatMessage(messages.topicAreaDescription)} ({intl.formatMessage(messages.required)})
-          </Form.Text>
-          <Form.Control
-            as="select"
-            defaultValue="General"
-            aria-describedby="topicAreaInput"
-          >
-            {/* TODO: topics has to be filled in another PR */}
-            <option>General</option>
-          </Form.Control>
-        </Form.Group>
+      <Form.Group>
+        <Form.Control as="textarea" rows="3" />
+      </Form.Group>
 
-        <Form.Group>
-          <Form.Label>
-            {intl.formatMessage(messages.title)}
-          </Form.Label>
-          <Form.Text id="titleInput" muted>
-            {intl.formatMessage(messages.titleDescription)} ({intl.formatMessage(messages.required)})
-          </Form.Text>
-          <Form.Control type="text" aria-describedby="titleInput" />
-        </Form.Group>
+      <Form.Group>
+        <Form.Check inline type="checkbox" id="follow">
+          <Form.Check.Input type="checkbox" />
+          <Form.Check.Label>
+            <span className="ml-2">{intl.formatMessage(messages.followPost)}</span>
+          </Form.Check.Label>
+        </Form.Check>
 
-        <Form.Group>
-          <Form.Label>
-            {intl.formatMessage(messages.questionText)}
-          </Form.Label>
-          <Form.Control as="textarea" rows="3" />
-        </Form.Group>
+        <Form.Check inline type="checkbox" id="anonymous">
+          <Form.Check.Input type="checkbox" />
+          <Form.Check.Label>
+            <span className="ml-2">{intl.formatMessage(messages.anonymousPost)}</span>
+          </Form.Check.Label>
+        </Form.Check>
+      </Form.Group>
 
-        <Form.Group>
-          <Form.Check inline type="checkbox" id="follow">
-            <Form.Check.Input type="checkbox" />
-            <Form.Check.Label>
-              <FontAwesomeIcon icon={faStar} />
-              <span className="ml-2">{intl.formatMessage(messages.followPost)}</span>
-            </Form.Check.Label>
-          </Form.Check>
-
-          <Form.Check inline type="checkbox" id="anonymous">
-            <Form.Check.Input type="checkbox" />
-            <Form.Check.Label>
-              <span className="ml-2">{intl.formatMessage(messages.anonymousPost)}</span>
-            </Form.Check.Label>
-          </Form.Check>
-        </Form.Group>
-
-        <Button className="rounded-lg" variant="primary">
-          {intl.formatMessage(messages.submit)}
-        </Button>
-        <Button className="rounded-lg ml-2" variant="outline-primary" onClick={cancelAdding}>
+      <div className="d-flex justify-content-end">
+        <Button variant="outline-primary" onClick={cancelAdding}>
           {intl.formatMessage(messages.cancel)}
         </Button>
-      </Form>
-    </div>
+        <Button className="ml-2" variant="primary">
+          {intl.formatMessage(messages.submit)}
+        </Button>
+      </div>
+    </Form>
   );
 }
 

src/discussions/posts/post-editor/messages.js

@@ -5,6 +5,10 @@ const messages = defineMessages({
     id: 'discussions.post.editor.type',
     defaultMessage: 'Post type',
   },
+  heading: {
+    id: 'discussions.post.editor.heading',
+    defaultMessage: 'Add a post',
+  },
   typeDescription: {
     id: 'discussions.post.editor.typeDescription',
     defaultMessage: 'Questions raise issues that need answers. Discussions share ideas and start conversations.',
@@ -17,10 +21,18 @@ const messages = defineMessages({
     id: 'discussions.post.editor.questionType',
     defaultMessage: 'Question',
   },
+  questionDescription: {
+    id: 'discussions.post.editor.questionDescription',
+    defaultMessage: 'Raise issues that need answers',
+  },
   discussionType: {
     id: 'discussions.post.editor.discussionType',
     defaultMessage: 'Discussion',
   },
+  discussionDescription: {
+    id: 'discussions.post.editor.discussionDescription',
+    defaultMessage: 'Share ideas and start conversations',
+  },
   topicArea: {
     id: 'discussions.post.editor.topicArea',
     defaultMessage: 'Topic area',
@@ -29,9 +41,9 @@ const messages = defineMessages({
     id: 'discussions.post.editor.topicAreaDescription',
     defaultMessage: 'Add your post to a relevant topic to help others find it.',
   },
-  title: {
+  postTitle: {
     id: 'discussions.post.editor.title',
-    defaultMessage: 'Title',
+    defaultMessage: 'Post title',
   },
   titleDescription: {
     id: 'discussions.post.editor.titleDescription',
@@ -47,11 +59,11 @@ const messages = defineMessages({
   },
   followPost: {
     id: 'discussions.post.editor.followPost',
-    defaultMessage: 'follow this post',
+    defaultMessage: 'Follow this post',
   },
   anonymousPost: {
     id: 'discussions.post.editor.anonymousPost',
-    defaultMessage: 'post anonymously',
+    defaultMessage: 'Post anonymously',
   },
   submit: {
     id: 'discussions.post.editor.submit',