Merge pull request #186 from VKCOM/di/change-header/QA-17029

Di/change header/qa 17029

Author: DaniilSmirnov

ui/public/locales/ru-RU/translation.json

@@ -30,7 +30,7 @@
   "Battery Temp": "Температура аккумулятора",
   "Browser": "Браузер",
   "Busy": "Занято",
-  "Busy Devices": "Используемые устройства",
+  "Busy Devices": "Используется",
   "Camera": "Камера",
   "Cancel": "Отменить",
   "Cannot access specified URL": "Невозможно открыть заданный URL",
@@ -262,7 +262,7 @@
   "Time": "Время",
   "Tip:": "Подсказка:",
   "Toggle Web/Native": "Переключить Web/Native",
-  "Total Devices": "Всего устройств",
+  "Total Devices": "Всего",
   "Try to reconnect": "Попробовать подключиться",
   "Type": "Тип",
   "Unauthorized": "Неавторизован",
@@ -274,7 +274,7 @@
   "Upload unknown error": "Неизвестная ошибка загрузки",
   "Uploaded file is not valid": "Загруженный файл не валиден",
   "Uploading...": "Загружается...",
-  "Usable Devices": "Доступные устройства",
+  "Usable Devices": "Доступно",
   "USB": "USB",
   "Usb speed": "Скорость USB",
   "Use": "Использовать",

ui/src/components/lib/statistic-card/statistic-card.tsx

@@ -52,7 +52,7 @@ export const StatisticCard = ({
     </ConditionalRender>
     <Spacing />
     <ConditionalRender conditions={[value !== undefined]}>
-      <Counter appearance={appearance} color={color} mode='primary' size='s'>
+      <Counter appearance={appearance} color={color} mode='primary' size='m'>
         {value}
       </Counter>
     </ConditionalRender>

ui/src/components/ui/device-statistics/device-statistics.tsx

@@ -34,7 +34,7 @@ export const DeviceStatistics = observer(() => {
       />
       <StatisticCard
         className={styles.deviceStatistics}
-        color='var(--vkui--color_accent_orange)'
+        color='var(--vkui--color_accent_violet)'
         icon={StatisticCardIcon.USERS_OUTLINE}
         text={t('Busy Devices').toUpperCase()}
         value={deviceListStore.busyDevicesCount}

ui/src/components/views/devices-page/devices-page.module.css

@@ -7,5 +7,5 @@
 }
 
 .displayedDevices {
-  margin: 0 15px 0 auto;
+  margin: 0 15px 0 0;
 }

ui/src/components/views/devices-page/devices-page.tsx

@@ -1,12 +1,11 @@
 import { observer } from 'mobx-react-lite'
 import { useTranslation } from 'react-i18next'
-import { View, Panel, Group, CustomScrollView, Header, Flex } from '@vkontakte/vkui'
+import { View, Panel, Group, CustomScrollView, Header, Flex, Counter } from '@vkontakte/vkui'
 
 import { DeviceTable } from '@/components/ui/device-table'
 import { SearchDevice } from '@/components/ui/search-device'
 import { DeviceStatistics } from '@/components/ui/device-statistics'
 import { TableColumnVisibility } from '@/components/ui/table-column-visibility'
-import { TitledValue } from '@/components/lib/titled-value'
 
 import { deviceTableState } from '@/store/device-table-state'
 
@@ -19,15 +18,16 @@ export const DevicesPage = observer(() => {
     <View activePanel='main'>
       <Panel className={styles.devicesPage} id='main'>
         <DeviceStatistics />
-        <Group header={<Header size='s'>{t('Devices')}</Header>}>
+        <Group
+          header={
+            <Header indicator={<Counter size='s'>{deviceTableState.filteredDeviceCount}</Counter>} size='s'>
+              {t('Devices')}
+            </Header>
+          }
+        >
           <Flex align='center'>
             <SearchDevice />
             <TableColumnVisibility />
-            <TitledValue
-              className={styles.displayedDevices}
-              title={t('Displayed')}
-              value={deviceTableState.filteredDeviceCount}
-            />
           </Flex>
           <CustomScrollView enableHorizontalScroll={true}>
             <DeviceTable />