Улучшены стили страницы мониторинга

src/pages/Telemetry/TelemetryView/index.jsx

@@ -6,7 +6,7 @@ import { useWell } from '@asb/context'
 import { makeDateSorter } from '@components/Table'
 import { D3MonitoringCharts } from '@components/d3/monitoring'
 import LoaderPortal from '@components/LoaderPortal'
-import { Grid, GridItem, Flex } from '@components/Grid'
+import { Grid, GridItem } from '@components/Grid'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { PeriodPicker, defaultPeriod } from '@components/selectors/PeriodPicker'
 import { formatDate, hasPermission, wrapPrivateComponent } from '@utils'
@@ -31,6 +31,7 @@ import MomentStabPicDisabled from '@images/DempherOff.png'
 import SpinPicEnabled from '@images/SpinEnabled.png'
 import SpinPicDisabled from '@images/SpinDisabled.png'
 
+import '@styles/monitoring.less'
 import '@styles/message.css'
 
 const { Option } = Select
@@ -253,14 +254,14 @@ const TelemetryView = memo(() => {
     <LoaderPortal show={showLoader}>
       <Grid style={{ gridTemplateColumns: 'auto repeat(6, 1fr)' }}>
         <GridItem col={'1'} row={'1'} colSpan={'8'} style={{ marginBottom: '0.5rem' }}>
-          <Flex>
+          <div className={'page-top'}>
             <ModeDisplay data={dataSaub} />
-            <div style={{ marginLeft: '1rem' }}>
+            <div>
               Интервал:&nbsp;
               <PeriodPicker onChange={setChartInterval} />
             </div>
             <Button onClick={() => chartMethods?.setSettingsVisible(true)}>Настроить графики</Button>
-            <div style={{ marginLeft: '1rem' }}>
+            <div>
               Статус:&nbsp;
               <Select value={well.idState ?? 0} onChange={onStatusChanged} disabled={!hasPermission('Well.edit')}>
                 <Option value={0} disabled hidden>Неизвестно</Option>
@@ -268,14 +269,16 @@ const TelemetryView = memo(() => {
                 <Option value={2}>Завершено</Option>
               </Select>
             </div>
-            <Setpoints style={{ marginLeft: '1rem' }} />
+            <Setpoints />
             <span style={{ flexGrow: 20 }}>&nbsp;</span>
             <WirelineRunOut />
-            <img src={isTorqueStabEnabled(dataSpin) ? MomentStabPicEnabled : MomentStabPicDisabled} style={{ marginRight: '15px' }} alt={'TorqueMaster'} />
-            <img src={isSpinEnabled(dataSpin) ? SpinPicEnabled : SpinPicDisabled} style={{ marginRight: '15px' }} alt={'SpinMaster'} />
-            <h2 style={{ marginBottom: 0, marginRight: '15px', fontWeight: 'bold', color: isMseEnabled(dataSaub) ? 'green' : 'lightgrey' }}>MSE</h2>
+            <div className={'icons'}>
+              <img src={isTorqueStabEnabled(dataSpin) ? MomentStabPicEnabled : MomentStabPicDisabled} alt={'TorqueMaster'} />
+              <img src={isSpinEnabled(dataSpin) ? SpinPicEnabled : SpinPicDisabled} alt={'SpinMaster'} />
+              <h2 style={{ marginBottom: 0, fontWeight: 'bold', color: isMseEnabled(dataSaub) ? 'green' : 'lightgrey' }}>MSE</h2>
+            </div>
             <UserOfWell data={dataSaub} />
-          </Flex>
+          </div>
         </GridItem>
         <GridItem col={'1'} row={'2'} rowSpan={'3'} style={{ minWidth: '260px', width: '0.142fr' }}>
           <CustomColumn data={dataSaub} />

src/styles/monitoring.less

@@ -0,0 +1,17 @@
+.page-top {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -5px;
+
+    & > * {
+        margin: 5px;
+    }
+
+    & > .icons {
+        display: flex;
+
+        & > * {
+            margin-left: 15px;
+        }
+    }
+}