Merge pull request #1574 from opencv/dk/layout-fixes

React UI: Layout styles fixes
cvat-ai · May 22, 2020 · 2d1b73c · 2d1b73c
2 parents 4c60350 + faa3a2e
commit 2d1b73c
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 deletions.
diff --git a/cvat-ui/src/components/create-task-page/styles.scss b/cvat-ui/src/components/create-task-page/styles.scss
@@ -8,7 +8,8 @@
     text-align: center;
     padding-top: 40px;
     overflow-y: auto;
-    height: 90%;
+    height: 100%;
+    padding-bottom: 40px;
 
     > div > span {
         font-size: 36px;

diff --git a/cvat-ui/src/components/register-page/register-form.tsx b/cvat-ui/src/components/register-page/register-form.tsx
@@ -12,6 +12,7 @@ import Checkbox from 'antd/lib/checkbox';
 import patterns from 'utils/validation-patterns';
 
 import { UserAgreement } from 'reducers/interfaces'
+import { Row, Col } from 'antd/lib/grid';
 
 export interface UserConfirmation {
     name: string;
@@ -107,9 +108,9 @@ class RegisterFormComponent extends React.PureComponent<RegisterFormProps> {
         form.validateFields((error, values): void => {
             if (!error) {
                 values.confirmations = []
-                
+
                 for (const userAgreement of userAgreements) {
-                    
+
                     values.confirmations.push({
                         name: userAgreement.name,
                         value: values[userAgreement.name]
@@ -289,8 +290,14 @@ class RegisterFormComponent extends React.PureComponent<RegisterFormProps> {
 
         return (
             <Form onSubmit={this.handleSubmit} className='login-form'>
-                {this.renderFirstNameField()}
-                {this.renderLastNameField()}
+                <Row gutter={8}>
+                    <Col span={12}>
+                        {this.renderFirstNameField()}
+                    </Col>
+                    <Col span={12}>
+                        {this.renderLastNameField()}
+                    </Col>
+                </Row>
                 {this.renderUsernameField()}
                 {this.renderEmailField()}
                 {this.renderPasswordField()}

diff --git a/cvat-ui/src/components/register-page/register-page.tsx b/cvat-ui/src/components/register-page/register-page.tsx
@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: MIT
 
+import './styles.scss';
 import React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { Link, withRouter } from 'react-router-dom';
@@ -29,8 +30,8 @@ function RegisterPageComponent(
         xs: { span: 14 },
         sm: { span: 14 },
         md: { span: 10 },
-        lg: { span: 4 },
-        xl: { span: 4 },
+        lg: { span: 6 },
+        xl: { span: 5 },
     };
 
     const {

diff --git a/cvat-ui/src/components/register-page/styles.scss b/cvat-ui/src/components/register-page/styles.scss
@@ -0,0 +1,7 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+.ant-form-item {
+    margin-bottom: 12px;
+}
diff --git a/cvat-ui/src/components/settings-page/styles.scss b/cvat-ui/src/components/settings-page/styles.scss
@@ -5,8 +5,9 @@
 @import '../../base.scss';
 
 .cvat-settings-page {
-    height: 90%;
+    height: 100%;
     overflow-y: auto;
+    padding-bottom: 15px;
 
     > div:nth-child(1) {
         margin-top: 30px;

diff --git a/cvat-ui/src/components/tasks-page/top-bar.tsx b/cvat-ui/src/components/tasks-page/top-bar.tsx
@@ -52,6 +52,7 @@ function TopBarComponent(props: VisibleTopBarProps & RouteComponentProps): JSX.E
                         onClick={
                             (): void => history.push('/tasks/create')
                         }
+                        icon='plus'
                     >
                          Create new task
                     </Button>