feat(DocPage): new design

src/components/ContributorAvatars/ContributorAvatars.tsx

@@ -30,9 +30,8 @@ const ContributorAvatars: React.FC<ContributorAvatarsProps> = (props) => {
         return null;
     }
 
-    if (contributors.length === 1) {
-        const oneAvatar = getOneAvatar(contributors[0], isAuthor, onlyAuthor);
-        return oneAvatar;
+    if (isAuthor && contributors.length === 1) {
+        return getOneAvatar(contributors[0], isAuthor, onlyAuthor);
     }
 
     const displayedContributors = [...contributors];

src/components/DocPage/DocPage.scss

@@ -235,7 +235,7 @@
     }
 
     &__separator {
-        margin: 0 5px 32px 0;
+        margin: 0 20px 32px 0;
         align-self: center;
     }
 

src/components/DocPage/DocPage.tsx

@@ -383,16 +383,16 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
             return null;
         }
 
-        const updatedAt = this.renderUpdatedAt(meta?.updatedAt);
         const author = this.renderAuthor(!meta?.contributors?.length);
         const contributors = this.renderContributors();
+        const updatedAt = this.renderUpdatedAt(meta?.updatedAt);
 
         return (
             <div className={b('page-contributors')}>
-                {[updatedAt, author, contributors].filter(Boolean).map((element, idx, arr) => (
+                {[author, contributors, updatedAt].filter(Boolean).map((element, idx, arr) => (
                     <Fragment key={idx}>
                         {element}
-                        {arr.length - 1 !== idx && <div className={b('separator')}>{','}</div>}
+                        {arr.length - 1 !== idx && <div className={b('separator')} />}
                     </Fragment>
                 ))}
             </div>

src/components/UpdatedAtDate/UpdatedAtDate.tsx

@@ -19,7 +19,7 @@ const UpdatedAtDate: React.FC<UpdatedAtDateProps> = ({updatedAt}) => {
 
     const updatedAtFormatted = useMemo(() => {
         const {localeCode} = getConfig();
-        return format(updatedAt, 'longDateTime', localeCode);
+        return format(updatedAt, 'longDate', localeCode);
     }, [updatedAt]);
 
     return (

src/i18n/en.json

@@ -57,7 +57,7 @@
     "title": "Written by"
   },
   "contributors": {
-    "title": "improved by"
+    "title": "Improved by"
   },
   "feedback": {
     "like-text": "Helpful",

src/i18n/ru.json

@@ -57,7 +57,7 @@
     "title": "Статья создана"
   },
   "contributors": {
-    "title": "улучшена"
+    "title": "Улучшена"
   },
   "feedback": {
     "like-text": "Статья полезна",

src/utils/date.ts

@@ -73,9 +73,5 @@ export const format = (
     formatCode: keyof DateTimeFormatter,
     localeCode = defaultRegion,
 ) => {
-    let result = getDateTimeFormatter(localeCode)[formatCode].format(new Date(date));
-    if (formatCode === 'longDate' && ['ru-RU', 'ru-KZ'].includes(localeCode)) {
-        result = result.replace(/\sг\.$/, '');
-    }
-    return result;
+    return getDateTimeFormatter(localeCode)[formatCode].format(new Date(date));
 };