refactor avatar

frontend/app/__stubs__/svg.tsx

@@ -1,3 +1,3 @@
-const SvgrUrl = 'https://url-to-svg-image';
+const SvgrUrl = '/image.svg';
 
 export default SvgrUrl;

frontend/app/components/avatar-icon/avatar-icon.css → frontend/app/components/avatar/avatar.module.css

@@ -1,8 +1,13 @@
-.avatar-icon {
+.avatar {
   display: inline-block;
   width: 24px;
   height: 24px;
   margin-right: 8px;
   vertical-align: middle;
   border-radius: 4px;
 }
+
+.avatarGhost {
+  box-sizing: border-box;
+  border: 1px solid var(--color40);
+}

frontend/app/components/avatar/avatar.spec.tsx

@@ -0,0 +1,16 @@
+import '@testing-library/jest-dom';
+import { h } from 'preact';
+import { render } from '@testing-library/preact';
+
+import { BASE_URL } from 'common/constants.config';
+
+import { Avatar } from './avatar';
+
+describe('<Avatar/>', () => {
+  it('should get', () => {
+    const { getByAltText } = render(<Avatar className="avatar" alt="avatar" />);
+
+    expect(getByAltText('avatar')).toHaveAttribute('src', `${BASE_URL}/image.svg`);
+    expect(getByAltText('avatar')).toHaveAttribute('alt', 'avatar');
+  });
+});

frontend/app/components/avatar/avatar.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+import { h } from 'preact';
+
+import { BASE_URL } from 'common/constants.config';
+
+import styles from './avatar.module.css';
+
+type Props = {
+  url?: string;
+  alt: string;
+  /** className should be used only in puprose of put permanent class on Avatar for user themization */
+  className: string;
+};
+
+export function Avatar({ url, className, alt }: Props) {
+  const avatarUrl = url || `${BASE_URL}${require('./assets/ghost.svg').default}`;
+
+  return (
+    // eslint-disable-next-line jsx-a11y/alt-text
+    <img className={clsx('avatar', className, styles.avatar, !url && styles.avatarGhost)} src={avatarUrl} alt={alt} />
+  );
+}

frontend/app/components/avatar/index.ts

@@ -0,0 +1 @@
+export * from './avatar';

frontend/app/components/comment/comment.tsx

@@ -12,7 +12,7 @@ import { extractErrorMessageFromResponse, FetcherError } from 'utils/errorUtils'
 import { isUserAnonymous } from 'utils/isUserAnonymous';
 
 import { CommentFormProps } from 'components/comment-form';
-import { AvatarIcon } from 'components/avatar-icon';
+import { Avatar } from 'components/avatar';
 import { Button } from 'components/button';
 import { Countdown } from 'components/countdown';
 import { getPreview, uploadImage } from 'common/api';
@@ -661,9 +661,8 @@ export class Comment extends Component<CommentProps, State> {
         )}
         <div className="comment__info">
           {props.view !== 'user' && !props.collapsed && (
-            <AvatarIcon mix="comment__avatar" theme={this.props.theme} picture={o.user.picture} />
+            <Avatar className="comment__avatar" url={o.user.picture} alt={o.user.name} />
           )}
-
           {props.view !== 'user' && (
             <span
               {...getHandleClickProps(this.toggleUserInfoVisibility)}

frontend/app/components/user-info/user-info.tsx

@@ -7,12 +7,11 @@ import { StoreState } from 'store';
 import { Comment } from 'common/types';
 import { fetchInfo } from 'store/user-info/actions';
 import { userInfo } from 'common/user-info-settings';
-
 import { postMessage } from 'utils/postMessage';
 import { bindActions } from 'utils/actionBinder';
 import { useActions } from 'hooks/useAction';
+import { Avatar } from 'components/avatar';
 
-import { AvatarIcon } from '../avatar-icon';
 import { LastCommentsList } from './last-comments-list';
 
 const boundActions = bindActions({ fetchInfo });
@@ -67,7 +66,7 @@ class UserInfo extends Component<Props, State> {
 
     return (
       <div className={b('root user-info', {})}>
-        <AvatarIcon mix="user-info__avatar" picture={user.picture} />
+        <Avatar className="user-info__avatar" url={user.picture} alt={user.name} />
         <p className="user-info__title">
           <FormattedMessage
             id="user-info.last-comments"

frontend/app/styles/custom-properties.css

@@ -0,0 +1,80 @@
+:root {
+  --color0: #0f172a;
+  --color8: #262626;
+  --color22: #2d2d2c;
+  --color24: #313133;
+  --color7: #333;
+  --color23: #393734;
+  --color18: #383838;
+  --color19: #404040;
+  --color36: #575757;
+  --color34: #555;
+  --color37: #586069;
+  --color14: #6a6a6a;
+  --color10: #777;
+  --color13: #888;
+  --color11: #969696;
+  --color32: #a6a6a6;
+  --color1: #aaa;
+  --color35: #d1d5db;
+  --color20: #ddd;
+  --color46: rgba(27, 31, 35, 0.15);
+  --color45: rgba(0, 0, 0, 0.1);
+  --color41: #efefef;
+  --color5: #eee;
+  --color44: rgba(255, 255, 255, 0.3);
+  --color6: #fff;
+  --color3: #e2efef;
+  --color4: #edf6f7;
+  --color16: #e2e8f0;
+  --color31: #cbd5e1;
+  --color21: #f1f5f9;
+  --color29: #0e7e9d;
+  --color9: #0aa;
+  --color15: #099;
+  --color33: #06c5c5;
+  --color40: #9cdddb;
+  --color43: #b7dddd;
+  --color42: #c6efef;
+  --color48: rgba(37, 156, 154, 0.6);
+  --color47: rgba(37, 156, 154, 0.4);
+  --color12: #259e06;
+  --color28: #672323;
+  --color25: #9a0000;
+  --color30: #cc0606;
+  --color38: #ef0000;
+  --color27: #f98989;
+  --color26: #ffd7d7;
+
+  /* code-highlight */
+  --chroma-bg: rgba(0, 0, 0, 0.05);
+  --chroma-base: #586e75;
+  --chroma-c: #7d7d7d;
+  --chroma-01: #589000;
+  --chroma-02: #cb4b16;
+  --chroma-03: #268bd2;
+  --chroma-04: #2aa198;
+  --chroma-05: #859900;
+  --chroma-06: #d33682;
+  --chroma-07: #00aee2;
+
+  /* Named variables */
+  --primary-color: 0, 170, 170;
+  --primary-brighter-color: 0, 153, 153;
+  --secondary-text-color: 100, 116, 139;
+  --black-color: 0, 0, 0;
+  --white-color: 255, 255, 255;
+  --error-color: #b91c1c;
+  --error-background: #ff466f2b;
+  --line-color: var(--color16);
+  --line-brighter-color: var(--color31);
+}
+
+:root .dark {
+  --line-color: var(--color36);
+  --primary-color: 0, 153, 153;
+  --primary-brighter-color: 0, 170, 170;
+  --secondary-text-color: 209, 213, 219;
+  --error-color: #ffa0a0;
+  --line-brighter-color: var(--color11);
+}

frontend/app/styles/global.css

@@ -0,0 +1,71 @@
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 6px;
+  font-family: PT Sans, Helvetica, Arial, sans-serif;
+}
+
+/* Preloader */
+
+.preloader,
+.preloader::before,
+.preloader::after {
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  text-align: left;
+  animation-name: bouncing;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: both;
+  animation-duration: 1.8s;
+  animation-iteration-count: infinite;
+}
+
+.preloader {
+  /* stylelint-disable-next-line */
+  color: #fff;
+  color: var(--color6, #fff);
+  position: relative;
+  transform: translate3d(0, -10px, 0);
+  animation-delay: -0.16s;
+}
+
+.preloader::before,
+.preloader::after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.preloader::before {
+  transform: translate3d(-15px, 0, 0);
+  animation-delay: -0.32s;
+}
+
+.preloader::after {
+  transform: translate3d(15px, 0, 0);
+}
+
+.preloader_view_iframe {
+  margin: 0 auto;
+  /* stylelint-disable-next-line */
+  color: #888;
+  color: var(--color13, #888);
+}
+
+:focus:not(.focus-visible):not(.button) {
+  outline: none;
+}
+
+@keyframes bouncing {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 10px 0 -10px;
+  }
+
+  40% {
+    box-shadow: 0 10px 0 0;
+  }
+}