Some style adjustments (#4162)

getredash · Sep 22, 2019 · df4d9cf · df4d9cf
1 parent 70e563c
commit df4d9cf
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/client/app/components/dynamic-form/DynamicForm.jsx b/client/app/components/dynamic-form/DynamicForm.jsx
@@ -245,7 +245,7 @@ class DynamicForm extends React.Component {
     const submitProps = {
       type: 'primary',
       htmlType: 'submit',
-      className: 'w-100',
+      className: 'w-100 m-t-20',
       disabled: this.state.isSubmitting,
       loading: this.state.isSubmitting,
     };
@@ -259,22 +259,20 @@ class DynamicForm extends React.Component {
       <Form id={id} className="dynamic-form" layout="vertical" onSubmit={this.handleSubmit}>
         {this.renderFields(regularFields)}
         {!isEmpty(advancedFields) && (
-          <>
+          <div className="extra-options">
             <Button
               type="dashed"
               block
-              className="extra-options-button m-t-30 m-b-10"
+              className="extra-options-button"
               onClick={() => this.setState({ showExtraOptions: !showExtraOptions })}
             >
               Additional Settings
               <i className={cx('fa m-l-5', { 'fa-caret-up': showExtraOptions, 'fa-caret-down': !showExtraOptions })} />
             </Button>
-            <Collapse collapsed={!showExtraOptions}>
-              <div className="m-t-15">
-                {this.renderFields(advancedFields)}
-              </div>
+            <Collapse collapsed={!showExtraOptions} className="extra-options-content">
+              {this.renderFields(advancedFields)}
             </Collapse>
-          </>
+          </div>
         )}
         {saveButton && <Button {...submitProps}>{saveText}</Button>}
         {this.renderActions()}

diff --git a/client/app/components/dynamic-form/DynamicForm.less b/client/app/components/dynamic-form/DynamicForm.less
@@ -1,6 +1,10 @@
 @import '~@/assets/less/ant';
 
 .dynamic-form{
+  .extra-options {
+    margin: 25px 0 10px;
+  }
+
   .extra-options-button {
     &, &:focus, &:hover {
       height: 40px;
@@ -14,4 +18,12 @@
       background-color: fade(@btn-danger-bg, 15%);
     }
   }
+
+  .extra-options-content {
+    margin-top: 15px;
+
+    .ant-form-item:last-of-type {
+      margin-bottom: 0 !important;
+    }
+  }
 }