fix: post avatar alignment and size (#214)

* fix: post avatar alignment and size * refactor: post header scss class
2022-07-26 17:01:48 +05:00
parent f447be151d
commit d71a53d9ee
6 changed files with 93 additions and 50 deletions
--- a/src/components/icons/Issue.jsx
+++ b/src/components/icons/Issue.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+export default function Issue() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="28"
+      height="28"
+      fill="none"
+      viewBox="0 0 28 28"
+    >
+      <path
+        fill="#F2F0EF"
+        d="M0 14C0 6.268 6.268 0 14 0s14 6.268 14 14-6.268 14-14 14S0 21.732 0 14z"
+      />
+      <path
+        fill="#2D494E"
+        d="M14 2.333C7.56 2.333 2.333 7.56 2.333 14c0 6.44 5.227 11.667 11.667 11.667 6.44 0 11.667-5.227 11.667-11.667C25.667 7.56 20.44 2.334 14 2.334z"
+      />
+      <path
+        fill="#fff"
+        d="M12.833 22.167h2.334v-2.334h-2.334v2.334zM16.532 14.198l1.05-1.073a3.713 3.713 0 001.085-2.625A4.665 4.665 0 0014 5.833 4.665 4.665 0 009.333 10.5h2.334A2.34 2.34 0 0114 8.167a2.34 2.34 0 012.333 2.333c0 .642-.256 1.225-.688 1.645l-1.447 1.47a4.696 4.696 0 00-1.365 3.302v.583h2.334c0-1.75.525-2.45 1.365-3.302z"
+      />
+    </svg>
+  );
+}
--- a/src/components/icons/Question.jsx
+++ b/src/components/icons/Question.jsx
@@ -4,32 +4,23 @@ export default function Question() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
-      width="29"
+      width="28"
      height="28"
      fill="none"
-      viewBox="0 0 29 28"
+      viewBox="0 0 28 28"
    >
-      <g clipPath="url(#clip0_5714_503)">
-        <path
-          fill="#2D494E"
-          stroke="#fff"
-          strokeWidth="2"
-          d="M14.404 1.333C7.412 1.333 1.737 7.008 1.737 14s5.675 12.667 12.667 12.667S27.07 20.992 27.07 14 21.396 1.333 14.404 1.333z"
-        />
-        <path
-          fill="#fff"
-          d="M13.237 22.167h2.333v-2.334h-2.333v2.334zM16.936 14.198l1.05-1.073A3.712 3.712 0 0019.07 10.5a4.665 4.665 0 00-4.666-4.667A4.665 4.665 0 009.737 10.5h2.333a2.34 2.34 0 012.334-2.333 2.34 2.34 0 012.333 2.333c0 .642-.256 1.225-.688 1.645l-1.447 1.47a4.696 4.696 0 00-1.365 3.302v.583h2.333c0-1.75.526-2.45 1.366-3.302z"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_5714_503">
-          <path
-            fill="#fff"
-            d="M0 0H28V28H0z"
-            transform="translate(.404)"
-          />
-        </clipPath>
-      </defs>
+      <path
+        fill="#fff"
+        d="M0 14.001c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14z"
+      />
+      <path
+        fill="#2D494E"
+        d="M14 2.334c-6.44 0-11.667 5.227-11.667 11.667 0 6.44 5.227 11.667 11.667 11.667 6.44 0 11.666-5.227 11.666-11.667 0-6.44-5.226-11.667-11.666-11.667z"
+      />
+      <path
+        fill="#fff"
+        d="M12.833 22.168h2.333v-2.334h-2.333v2.334zM16.531 14.2l1.05-1.074a3.712 3.712 0 001.085-2.625A4.665 4.665 0 0014 5.834a4.665 4.665 0 00-4.667 4.667h2.333A2.34 2.34 0 0114 8.168a2.34 2.34 0 012.333 2.333c0 .642-.257 1.225-.688 1.645l-1.447 1.47a4.696 4.696 0 00-1.365 3.302v.583h2.333c0-1.75.525-2.45 1.365-3.302z"
+      />
    </svg>
  );
 }
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@@ -1,3 +1,4 @@
+export { default as Issue } from './Issue';
 export { default as People } from './People';
 export { default as PushPin } from './PushPin';
 export { default as Question } from './Question';
--- a/src/discussions/posts/post/PostHeader.jsx
+++ b/src/discussions/posts/post/PostHeader.jsx
@@ -1,57 +1,65 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';

+import classNames from 'classnames';
 import { useSelector } from 'react-redux';

 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Avatar, Badge, Icon } from '@edx/paragon';

-import { Question } from '../../../components/icons';
+import { Issue, Question } from '../../../components/icons';
 import { AvatarOutlineAndLabelColors, ThreadType } from '../../../data/constants';
 import { ActionsDropdown, AuthorLabel } from '../../common';
 import { selectAuthorAvatars } from '../data/selectors';
 import messages from './messages';
 import { postShape } from './proptypes';

-export function PostAvatar({ post, authorLabel, fromPostLink }) {
+export function PostAvatar({
+  post, authorLabel, fromPostLink, read,
+}) {
  const authorAvatars = useSelector(selectAuthorAvatars(post.author));
  const outlineColor = AvatarOutlineAndLabelColors[authorLabel];

-  const avatarSize = () => {
-    let size = '2rem';
-    if (post.type !== ThreadType.QUESTION && !fromPostLink) {
+  const avatarSize = useMemo(() => {
+    let size = '1.75rem';
+    if (post.type === ThreadType.DISCUSSION && !fromPostLink) {
      size = '2.375rem';
    } else if (post.type === ThreadType.QUESTION) {
-      size = '1.5rem';
+      size = '1.375rem';
    }
    return size;
-  };
+  }, [post.type]);
+
+  const avatarSpacing = useMemo(() => {
+    let spacing = 'mr-3 ';
+    if (post.type === ThreadType.DISCUSSION && fromPostLink) {
+      spacing += 'pt-2 ml-0.5';
+    } else if (post.type === ThreadType.DISCUSSION) {
+      spacing += 'ml-0.5 mt-0.5';
+    }
+    return spacing;
+  }, [post.type]);

  return (
-    <div className={`mr-3
-      ${post.type !== ThreadType.QUESTION && fromPostLink ? 'pt-1.5' : 'ml-0.5 mt-0.5'}`}
-    >
+    <div className={avatarSpacing}>
      {post.type === ThreadType.QUESTION && (
        <Icon
-          src={Question}
-          className="position-absolute bg-white rounded-circle"
-          style={{
-            width: '1.75rem',
-            height: '1.75rem',
-            top: fromPostLink ? '10px' : '',
-            left: fromPostLink ? '14px' : '',
-          }}
+          src={read ? Issue : Question}
+          className={classNames('position-absolute bg-white rounded-circle question-icon-size', {
+            'question-icon-position': fromPostLink,
+          })}
        />
      )}
      <Avatar
-        className={`border-0 ${outlineColor ? `outline-${outlineColor}` : 'outline-anonymous'}
-         ${post.type === ThreadType.QUESTION && fromPostLink ? 'mt-3 ml-2' : ''}
-        `}
+        className={classNames('border-0', {
+          [`outline-${outlineColor}`]: outlineColor,
+          'outline-anonymous': !outlineColor,
+          'mt-3 ml-2': post.type === ThreadType.QUESTION && fromPostLink,
+          'avarat-img-position': post.type === ThreadType.QUESTION,
+        })}
        style={{
-          height: avatarSize(),
-          width: avatarSize(),
-          marginTop: post.type === ThreadType.QUESTION ? '16px' : '',
-          marginLeft: post.type === ThreadType.QUESTION ? '18px' : '',
+          height: avatarSize,
+          width: avatarSize,
        }}
        alt={post.author}
        src={authorAvatars?.imageUrlSmall}
@@ -64,11 +72,13 @@ PostAvatar.propTypes = {
  post: postShape.isRequired,
  authorLabel: PropTypes.string,
  fromPostLink: PropTypes.bool,
+  read: PropTypes.bool,
 };

 PostAvatar.defaultProps = {
  authorLabel: null,
  fromPostLink: false,
+  read: false,
 };

 function PostHeader({
--- a/src/discussions/posts/post/PostLink.jsx
+++ b/src/discussions/posts/post/PostLink.jsx
@@ -60,7 +60,7 @@ function PostLink({
          borderRightStyle: 'solid',
        } : null}
      >
-        <PostAvatar post={post} authorLabel={post.authorLabel} fromPostLink />
+        <PostAvatar post={post} authorLabel={post.authorLabel} fromPostLink read={post.read} />
        <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
          <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
            <div className="d-flex align-items-center pb-0 mb-0 flex-fill font-weight-500">
--- a/src/index.scss
+++ b/src/index.scss
@@ -88,3 +88,18 @@ $fa-font-path: "~font-awesome/fonts";
  padding-top: 10px;
  padding-bottom: 10px;
 }
+
+.question-icon-size {
+  width: 1.625rem;
+  height: 1.625rem;
+}
+
+.question-icon-position {
+  top: 12px;
+  left: 14px;
+}
+
+.avarat-img-position {
+margin-top: 17px;
+margin-left: 17px;
+}