fix: Bring UI closer to mockups

This makes many tweaks to get the UI closer to
the mockup and using Paragon components as much as possible.

Related tickets:
* [TNL-8427](https://openedx.atlassian.net/browse/TNL-8427)
* [BB-4417](https://tasks.opencraft.com/browse/BB-4417)

src/discussions/posts/post/LikeButton.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Icon, IconButton, OverlayTrigger, Tooltip,
+} from '@edx/paragon';
+import { ThumbUpFilled, ThumbUpOutline } from '@edx/paragon/icons';
+import messages from './messages';
+
+function LikeButton(
+  {
+    count,
+    intl,
+    onClick,
+    voted,
+  },
+) {
+  const handleClick = (e) => {
+    e.preventDefault();
+    if (onClick) {
+      onClick();
+    }
+    return false;
+  };
+
+  return (
+    <div className="d-flex align-items-center mx-2.5">
+      <OverlayTrigger
+        overlay={(
+          <Tooltip>
+            {intl.formatMessage(voted ? messages.removeLike : messages.like)}
+          </Tooltip>
+        )}
+      >
+        <IconButton
+          onClick={handleClick}
+          alt="Like"
+          iconAs={Icon}
+          size="inline"
+          src={voted ? ThumbUpFilled : ThumbUpOutline}
+        />
+      </OverlayTrigger>
+      {count}
+    </div>
+  );
+}
+
+LikeButton.propTypes = {
+  count: PropTypes.number.isRequired,
+  intl: intlShape.isRequired,
+  onClick: PropTypes.func,
+  voted: PropTypes.bool,
+};
+
+LikeButton.defaultProps = {
+  voted: false,
+  onClick: undefined,
+};
+
+export default injectIntl(LikeButton);