added a navigation button to exit BadgeDetails

webapp/i18n/en.json

@@ -92,6 +92,7 @@
   "badges.types.empty": "No types yet",
   "badges.types.no_badges": "No achievements in this type",
   "badges.rhs.back_to_types": "Back to types",
+  "badges.rhs.back_to_achievements": "Back to achievements",
 
   "badges.modal.allowlist_create": "Allowlist for creation",
   "badges.modal.allowlist_create_help": "Users who can create achievements of this type.",

webapp/i18n/ru.json

@@ -92,6 +92,7 @@
   "badges.types.empty": "Типов пока нет",
   "badges.types.no_badges": "В этом типе нет достижений",
   "badges.rhs.back_to_types": "Назад к типам",
+  "badges.rhs.back_to_achievements": "Назад к достижениям",
 
   "badges.modal.allowlist_create": "Список допущенных к созданию",
   "badges.modal.allowlist_create_help": "Пользователи, которые могут создавать достижения этого типа.",

webapp/src/components/back_button/back_button.scss

@@ -0,0 +1,13 @@
+.BackButton {
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: 12px;
+    color: var(--button-bg, #166de0);
+    cursor: pointer;
+    text-align: left;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}

webapp/src/components/back_button/back_button.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {RHSState} from '../../types/general';
+
+import './back_button.scss';
+
+type Props = {
+    targetView: RHSState;
+    onNavigate: (view: RHSState) => void;
+    children: React.ReactNode;
+}
+
+const BackButton: React.FC<Props> = ({
+    targetView,
+    onNavigate,
+    children,
+}) => {
+    return (
+        <button
+            className='BackButton'
+            onClick={() => onNavigate(targetView)}
+        >
+            {'← '}
+            {children}
+        </button>
+    );
+};
+
+export default BackButton;

webapp/src/components/rhs/all_badges.scss

@@ -116,20 +116,6 @@
         gap: 4px;
     }
 
-    &__backButton {
-        background: none;
-        border: none;
-        padding: 0;
-        font-size: 12px;
-        color: var(--button-bg, #166de0);
-        cursor: pointer;
-        text-align: left;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
     &__filterTitle {
         font-size: 15px;
         font-weight: 600;

webapp/src/components/rhs/all_badges.tsx

@@ -13,6 +13,8 @@ import {RHSState} from '../../types/general';
 import {IMAGE_TYPE_EMOJI, RHS_STATE_DETAIL, RHS_STATE_TYPES} from '../../constants';
 import {isCreateBadgeModalVisible, getEditBadgeModalData} from '../../selectors';
 
+import BackButton from 'components/back_button/back_button';
+
 import AllBadgesRow from './all_badges_row';
 
 import './all_badges.scss';
@@ -93,16 +95,15 @@ const AllBadges: React.FC<Props> = ({filterTypeId, filterTypeName, actions}) =>
             {isFiltered && (
                 <div className='AllBadges__header'>
                     <div className='AllBadges__backHeader'>
-                        <button
+                        <BackButton
-                            className='AllBadges__backButton'
+                            targetView={RHS_STATE_TYPES}
-                            onClick={() => actions.setRHSView(RHS_STATE_TYPES)}
+                            onNavigate={actions.setRHSView}
                         >
-                            {'← '}
                             <FormattedMessage
                                 id='badges.rhs.back_to_types'
                                 defaultMessage='Назад к типам'
                             />
-                        </button>
+                        </BackButton>
                         <span className='AllBadges__filterTitle'>{filterTypeName}</span>
                     </div>
                 </div>

webapp/src/components/rhs/badge_details.scss

@@ -64,6 +64,10 @@
         }
     }
 
+     &__backHeader {
+      padding: 4px;
+    }
+
     &__editButton {
         position: absolute;
         top: 12px;

webapp/src/components/rhs/badge_details.tsx

@@ -8,11 +8,13 @@ import {BadgeDetails, BadgeID} from '../../types/badges';
 import Client from '../../client/api';
 
 import {RHSState} from '../../types/general';
-import {RHS_STATE_MY, RHS_STATE_OTHER} from '../../constants';
+import {RHS_STATE_MY, RHS_STATE_OTHER, RHS_STATE_TYPES} from '../../constants';
 import BadgeImage from '../utils/badge_image';
 
 import {markdown} from 'utils/markdown';
 
+import BackButton from '../../components/back_button/back_button';
+
 import RHSScrollbars from './rhs_scrollbars';
 import UserRow from './user_row';
 
@@ -124,6 +126,17 @@ class BadgeDetailsComponent extends React.PureComponent<Props, State> {
         });
         return (
             <div className='BadgeDetails'>
+                <div className='BadgeDetails__backHeader'>
+                    <BackButton
+                        targetView={RHS_STATE_TYPES}
+                        onNavigate={this.props.actions.setRHSView}
+                    >
+                        <FormattedMessage
+                            id='badges.rhs.back_to_achievements'
+                            defaultMessage='Назад к достижениям'
+                        />
+                    </BackButton>
+                </div>
                 <div className='badge-info'>
                     <span className='badge-icon'>
                         <BadgeImage