React UI: Added button to reset color settings

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Special behaviour for attribute value ``__undefined__`` (invisibility, no shortcuts to be set in AAM)
 - Dialog window with some helpful information about using filters
 - Ability to display a bitmap in the new UI
+- Button to reset colors settings (brightness, saturation, contrast) in the new UI
 
 ### Changed
 -

cvat-ui/src/components/settings-page/player-settings.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import { Row, Col } from 'antd/lib/grid';
 import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
+import Button from 'antd/lib/button';
 import Slider from 'antd/lib/slider';
 import Select from 'antd/lib/select';
 import InputNumber from 'antd/lib/input-number';
@@ -16,6 +17,7 @@ import { clamp } from 'utils/math';
 import { BackJumpIcon, ForwardJumpIcon } from 'icons';
 import { FrameSpeed, GridColor } from 'reducers/interfaces';
 
+
 interface Props {
     frameStep: number;
     frameSpeed: FrameSpeed;
@@ -263,6 +265,19 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                     />
                 </Col>
             </Row>
+            <Row className='cvat-player-reset-color-settings'>
+                <Col>
+                    <Button
+                        onClick={() => {
+                            onChangeBrightnessLevel(100);
+                            onChangeContrastLevel(100);
+                            onChangeSaturationLevel(100);
+                        }}
+                    >
+                        Reset color settings
+                    </Button>
+                </Col>
+            </Row>
         </div>
     );
 }

cvat-ui/src/components/settings-page/styles.scss

@@ -5,6 +5,9 @@
 @import '../../base.scss';
 
 .cvat-settings-page {
+    height: 90%;
+    overflow-y: auto;
+
     > div:nth-child(1) {
         margin-top: 30px;
         margin-bottom: 10px;
@@ -73,12 +76,19 @@
     width: 90px;
 }
 
+.cvat-player-reset-color-settings,
 .cvat-player-settings-brightness,
 .cvat-player-settings-contrast,
 .cvat-player-settings-saturation {
     width: 40%;
 }
 
+.cvat-player-reset-color-settings {
+    > .ant-col {
+        text-align: center;
+    }
+}
+
 .cvat-settings-page-back-button {
     width: 100px;
     margin-top: 15px;