Restyle the node editor page

datajunction-ui/src/app/pages/AddEditNodePage/ColumnsSelect.jsx

@@ -86,7 +86,7 @@ export const ColumnsSelect = ({
       )}
       <span data-testid={`select-${fieldName}`}>
         <FormikSelect
-          className={isMulti ? 'MultiSelectInput' : 'SelectInput'}
+          className=""
           defaultValue={
             isMulti
               ? defaultValue.map(val => {

datajunction-ui/src/app/pages/AddEditNodePage/CustomMetadataField.jsx

@@ -130,7 +130,7 @@ export const CustomMetadataField = ({ value }) => {
             style={{
               margin: '0 0 23px 0',
               flex: 1,
-              fontSize: '150%',
+              fontSize: '110%',
               textAlign: 'left',
             }}
             onChange={(value, viewUpdate) => {

datajunction-ui/src/app/pages/AddEditNodePage/MetricMetadataFields.jsx

@@ -24,19 +24,10 @@ export const MetricMetadataFields = () => {
   }, [djClient]);
 
   return (
-    <div
-      style={{
-        borderRadius: '8px',
-        padding: '10px 10px 20px 10px',
-        margin: '32px 0',
-        background: '#f9f9f9',
-        width: 'max-content',
-        display: 'flex',
-      }}
-    >
-      <div style={{ margin: '15px 25px' }}>
+    <div className="MetricMetadataFields node-row">
+      <div className="NodeCreationInput NodeModeInput">
         <ErrorMessage name="metric_direction" component="span" />
-        <label htmlFor="MetricDirection">Metric Direction</label>
+        <label htmlFor="MetricDirection">Direction</label>
         <Field as="select" name="metric_direction" id="MetricDirection">
           <option value=""></option>
           {metricDirections.map(direction => (
@@ -46,9 +37,9 @@ export const MetricMetadataFields = () => {
           ))}
         </Field>
       </div>
-      <div style={{ margin: '15px 25px' }}>
+      <div className="NodeCreationInput NodeModeInput">
         <ErrorMessage name="metric_unit" component="span" />
-        <label htmlFor="MetricUnit">Metric Unit</label>
+        <label htmlFor="MetricUnit">Unit</label>
         <Field as="select" name="metric_unit" id="MetricUnit">
           <option value=""></option>
           {metricUnits.map(unit => (
@@ -58,7 +49,7 @@ export const MetricMetadataFields = () => {
           ))}
         </Field>
       </div>
-      <div style={{ margin: '15px 25px' }}>
+      <div className="NodeCreationInput NodeModeInput">
         <ErrorMessage name="significant_digits" component="span" />
         <label htmlFor="SignificantDigits">Significant Digits</label>
         <Field as="select" name="significant_digits" id="SignificantDigits">

datajunction-ui/src/app/pages/AddEditNodePage/NamespaceField.jsx

@@ -27,6 +27,7 @@ export const NamespaceField = ({ initialNamespace }) => {
       <ErrorMessage name="namespace" component="span" />
       <label htmlFor="namespace">Namespace *</label>
       <FormikSelect
+        className=""
         selectOptions={namespaces}
         formikFieldName="namespace"
         placeholder="Choose Namespace"

datajunction-ui/src/app/pages/AddEditNodePage/OwnersField.jsx

@@ -34,7 +34,7 @@ export const OwnersField = ({ defaultValue }) => {
       <label htmlFor="Owners">Owners</label>
       <span data-testid="select-owner">
         <FormikSelect
-          className="MultiSelectInput"
+          className=""
           defaultValue={
             defaultValue || [
               { value: currentUser.username, label: currentUser.username },

datajunction-ui/src/app/pages/AddEditNodePage/RequiredDimensionsSelect.jsx

@@ -9,7 +9,7 @@ import { FormikSelect } from './FormikSelect';
 export const RequiredDimensionsSelect = ({
   defaultValue,
   style,
-  className = 'MultiSelectInput',
+  className = '',
 }) => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 

datajunction-ui/src/app/pages/AddEditNodePage/TagsField.jsx

@@ -26,18 +26,15 @@ export const TagsField = ({ defaultValue }) => {
   }, [djClient]);
 
   return (
-    <div
-      className="TagsInput"
-      style={{ width: '25%', margin: '1rem 0 1rem 1.2rem' }}
-    >
+    <div className="TagsInput NodeCreationInput">
       <ErrorMessage name="tags" component="span" />
       <label htmlFor="tags">Tags</label>
       <span data-testid="select-tags">
         <FormikSelect
           isMulti={true}
           selectOptions={tags}
           formikFieldName="tags"
-          className="MultiSelectInput"
+          className=""
           placeholder="Choose Tags"
           defaultValue={defaultValue}
         />

datajunction-ui/src/app/pages/AddEditNodePage/UpstreamNodeField.jsx

@@ -47,7 +47,7 @@ export const UpstreamNodeField = ({ defaultValue }) => {
       </p>
       <span data-testid="select-upstream-node">
         <FormikSelect
-          className="SelectInput"
+          className=""
           defaultValue={defaultValue}
           selectOptions={availableNodes}
           formikFieldName="upstream_node"