change style and rename file names

src/webportal/src/plugins/job-submission/components/App.jsx

@@ -32,7 +32,7 @@ import {Parameters} from './Parameters';
 import {getFormClassNames} from './formStyle';
 import {initTheme} from '../../../app/components/theme';
 import {JobBasicInfo} from '../models/jobBasicInfo';
-import {SubmissionSection} from './SubmissionSection';
+import {SubmissionSection} from './submissionSection';
 import {TaskRoles} from './TaskRoles';
 import {Job} from '../models/job';
 import t from '../../../app/components/tachyons.scss';

src/webportal/src/plugins/job-submission/components/BasicSection.jsx

@@ -24,8 +24,8 @@
  */
 
 import React, {useState} from 'react';
-import {getId, Label, Stack, Text, Icon} from 'office-ui-fabric-react';
-import {FormSection} from './FormPage';
+import {getId, Label, Stack, Text, Icon, StackItem} from 'office-ui-fabric-react';
+import {FormSection} from './formPage';
 import {getFormPageSytle, getFormBasicSectionStyle} from './formStyle';
 import PropTypes from 'prop-types';
 
@@ -49,20 +49,24 @@ export const BasicSection = (props) => {
 
   return (
     <FormSection>
-      <Stack styles={formPageStyle.formFirstColumn}>
-        <Stack horizontal gap='s2' wrap>
-          <Stack horizontal gap='s2'>
+      <StackItem styles={formPageStyle.formFirstColumn}>
+        <Stack horizontal gap='s2' wrap verticalAlign='center'>
+          <StackItem>
             <Icon iconName={iconName} styles={basicSectionStyle.icon} onClick={onOpenItem}/>
+          </StackItem>
+          <StackItem>
             <Label htmlFor={textFieldId} styles={basicSectionStyle.label}>{sectionLabel}</Label>
-          </Stack>
-          <Stack verticalAlign='center'>
+          </StackItem>
+          <StackItem>
             { sectionOptional && <Text styles={basicSectionStyle.optionalText}>Optional</Text>}
-          </Stack>
+          </StackItem>
         </Stack>
-      </Stack>
-      <Stack styles={formPageStyle.formSecondColunm} gap='m'>
-        {(!sectionOptional || isSectionOn) && children}
-      </Stack>
+      </StackItem>
+      <StackItem styles={formPageStyle.formSecondColunm}>
+        <Stack gap='m'>
+          {(!sectionOptional || isSectionOn) && children}
+        </Stack>
+      </StackItem>
     </FormSection>
   );
 };

src/webportal/src/plugins/job-submission/components/CompletionSection.jsx

@@ -26,11 +26,11 @@
 import React from 'react';
 import {Stack} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
-import {BasicSection} from './BasicSection';
+import {BasicSection} from './basicSection';
 import {Completion} from '../models/completion';
-import {CSpinButton} from './CustomizedComponents';
+import {CSpinButton} from './customizedComponents';
 import {getCompletionSectionStyle} from './formStyle';
-import {FormShortSection} from './FormPage';
+import {FormShortSection} from './formPage';
 
 const completionSectionStyle = getCompletionSectionStyle();
 

src/webportal/src/plugins/job-submission/components/ContainerSizeSection.jsx

@@ -26,11 +26,11 @@
 import React from 'react';
 import {getTheme, Toggle, Stack} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
-import {BasicSection} from './BasicSection';
+import {BasicSection} from './basicSection';
 import {ContainerSize} from '../models/containerSize';
-import {CSpinButton} from './CustomizedComponents';
+import {CSpinButton} from './customizedComponents';
 import {getContainerSizeStyle} from './formStyle';
-import {FormShortSection} from './FormPage';
+import {FormShortSection} from './formPage';
 
 const {spacing} = getTheme();
 const containerSizeStyle = getContainerSizeStyle();

src/webportal/src/plugins/job-submission/components/DeploymentSection.jsx

@@ -25,7 +25,7 @@
 
 import React from 'react';
 import {TextField} from 'office-ui-fabric-react';
-import {BasicSection} from './BasicSection';
+import {BasicSection} from './basicSection';
 import PropTypes from 'prop-types';
 import {Deployment} from '../models/deployment';
 

src/webportal/src/plugins/job-submission/components/DockerSection.jsx

@@ -27,8 +27,8 @@ import React from 'react';
 import {TextField, DefaultButton, Stack, getId} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 import {DockerInfo} from '../models/dockerInfo';
-import {BasicSection} from './BasicSection';
-import {FormShortSection} from './FormPage';
+import {BasicSection} from './basicSection';
+import {FormShortSection} from './formPage';
 
 export const DockerSection = (props) => {
   const {onValueChange, value} = props;

src/webportal/src/plugins/job-submission/components/FormSpinButton.jsx

@@ -24,10 +24,10 @@
  */
 
 import React from 'react';
-import {BasicSection} from './BasicSection';
+import {BasicSection} from './basicSection';
 import PropTypes from 'prop-types';
-import {CSpinButton} from './CustomizedComponents';
-import {FormShortSection} from './FormPage';
+import {CSpinButton} from './customizedComponents';
+import {FormShortSection} from './formPage';
 
 export const FormSpinButton = (props) => {
   const {sectionLabel, sectionOptional, onChange, value, shortStyle} = props;

src/webportal/src/plugins/job-submission/components/FormTextField.jsx

@@ -26,8 +26,8 @@
 import React from 'react';
 import {TextField, getId} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
-import {BasicSection} from './BasicSection';
-import {FormShortSection} from './FormPage';
+import {BasicSection} from './basicSection';
+import {FormShortSection} from './formPage';
 
 export const FormTextField = (props) => {
   const {sectionLabel, onBlur, sectionOptional, shortStyle} = props;

src/webportal/src/plugins/job-submission/components/JobInformation.jsx

@@ -24,13 +24,13 @@
  */
 
 import React from 'react';
-import {FormTextField} from './FormTextField';
-import {FormPage} from './FormPage';
+import {FormTextField} from './formTextField';
+import {FormPage} from './formPage';
 import {Text} from 'office-ui-fabric-react';
-import {FormSpinButton} from './FormSpinButton';
+import {FormSpinButton} from './formSpinButton';
 import PropTypes from 'prop-types';
 import {JobBasicInfo} from '../models/jobBasicInfo';
-import {VirtualCluster} from './VirtualCluster';
+import {VirtualCluster} from './virtualCluster';
 
 export const JobInformation= (props) => {
   const {jobInformation, onChange} = props;

src/webportal/src/plugins/job-submission/components/Parameters.jsx

@@ -27,7 +27,7 @@ import React, {useState} from 'react';
 import {getParameterStyle} from './formStyle';
 import {Text, DetailsList, CheckboxVisibility, Stack, ActionButton} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
-import {KeyValueList} from './KeyValueList';
+import {KeyValueList} from './keyValueList';
 import {JobParameter} from '../models/jobParameter';
 
 const parameterStyle = getParameterStyle();

src/webportal/src/plugins/job-submission/components/PortsList.jsx

@@ -27,8 +27,8 @@ import React from 'react';
 import {KeyValueList} from './KeyValueList';
 import PropTypes from 'prop-types';
 import {Port} from '../models/port';
-import {BasicSection} from './BasicSection';
-import {FormShortSection} from './FormPage';
+import {BasicSection} from './basicSection';
+import {FormShortSection} from './formPage';
 
 export const PortsList = (props) => {
   const {onChange, ports} = props;

src/webportal/src/plugins/job-submission/components/TabFormContent.jsx

@@ -25,15 +25,15 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {FormTextField} from './FormTextField';
-import {DockerSection} from './DockerSection';
-import {PortsList} from './PortsList';
-import {FormPage} from './FormPage';
+import {FormTextField} from './formTextField';
+import {DockerSection} from './dockerSection';
+import {PortsList} from './portsList';
+import {FormPage} from './formPage';
 import {JobTaskRole} from '../models/jobTaskRole';
-import {CompletionSection} from './CompletionSection';
-import {DeploymentSection} from './DeploymentSection';
-import {FormSpinButton} from './FormSpinButton';
-import {ContainerSizeSection} from './ContainerSizeSection';
+import {CompletionSection} from './completionSection';
+import {DeploymentSection} from './deploymentSection';
+import {FormSpinButton} from './formSpinButton';
+import {ContainerSizeSection} from './containerSizeSection';
 
 export const TabFormContent = (props) => {
   const {jobTaskRole, onContentChange} = props;

src/webportal/src/plugins/job-submission/components/TaskRoles.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {TabForm} from './TabForm';
-import {TabFormContent} from './TabFormContent';
+import {TabForm} from './tabForm';
+import {TabFormContent} from './tabFormContent';
 import {JobTaskRole} from '../models/jobTaskRole';
 import PropTypes from 'prop-types';
 

src/webportal/src/plugins/job-submission/components/VirtualCluster.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {BasicSection} from './BasicSection';
+import {BasicSection} from './basicSection';
 import {Dropdown} from 'office-ui-fabric-react';
-import {FormShortSection} from './FormPage';
+import {FormShortSection} from './formPage';
 
 export const VirtualCluster = () => {
   return (

src/webportal/src/plugins/job-submission/components/formStyle.js

@@ -83,7 +83,7 @@ export const getFormPageSytle = () => {
     },
     formFirstColumn: {
       root: {
-        width: '20%',
+        width: '18%',
       },
     },
     formSecondColunm: {
@@ -112,6 +112,7 @@ export const getFormBasicSectionStyle = (optional) => {
       root: {
         fontSize: FontSizes.icon,
         fontWeight: FontWeights.semibold,
+        padding: '0px',
       },
     },
     optionalText: {