front: apply style

Author: kmer2016

front/src/applications/stdcm/components/STDCMAllowances.tsx

@@ -29,14 +29,14 @@ import { ALLOWANCE_UNITS_KEYS } from './OldAllowances/allowancesConsts';
 //       <div className="row">
 //         <div className="col-6">
 //           <div>{t('allowances:gridMarginBeforeAfter')}</div>
-//          <div className="row">
-//            <div className="col-6">
-//              <StdcmSingleAllowance typeKey="gridMarginBefore" isCondensed />
-//            </div>
-//            <div className="col-6">
-//              <StdcmSingleAllowance typeKey="gridMarginAfter" isCondensed />
-//            </div>
-//          </div>
+//           <div className="row">
+//             <div className="col-6">
+//               <StdcmSingleAllowance typeKey="gridMarginBefore" isCondensed />
+//             </div>
+//             <div className="col-6">
+//               <StdcmSingleAllowance typeKey="gridMarginAfter" isCondensed />
+//             </div>
+//           </div>
 //         </div>
 //         <div className="col-6">
 //           <div>{t('allowances:standardAllowance')}</div>
@@ -78,36 +78,48 @@ const STDCMAllowances = () => {
   };
 
   return (
-    <div>
-      <InputSNCF
-        id="standardAllowanceTypeGridMarginBefore"
-        type="text"
-        value={gridMarginBefore}
-        unit={ALLOWANCE_UNITS_KEYS.time}
-        condensed
-        onChange={(e) => dispatch(updateGridMarginBefore(+e.target.value || 0))}
-        sm
-        noMargin
-      />
-      <InputSNCF
-        id="standardAllowanceTypeGridMarginAfter"
-        type="text"
-        value={gridMarginAfter}
-        unit={ALLOWANCE_UNITS_KEYS.time}
-        condensed
-        onChange={(e) => dispatch(updateGridMarginAfter(+e.target.value || 0))}
-        sm
-        noMargin
-      />
-      <InputGroupSNCF
-        id="standardAllowanceTypeSelect"
-        options={standardAllowanceTypes}
-        handleType={onchangeType}
-        value={stdcmStandardAllowance?.value || 0}
-        type={stdcmStandardAllowance?.type || ''}
-        condensed
-        sm
-      />
+    <div className="row osrd-config-item mb-2 osrd-config-item-container">
+      <div className="col-6">
+        <label htmlFor="gridMarginBeforeAfter">{t('allowances:gridMarginBeforeAfter')}</label>
+        <div id="gridMarginBeforeAfter" className="row">
+          <div className="col-6">
+            <InputSNCF
+              id="standardAllowanceTypeGridMarginBefore"
+              type="text"
+              value={gridMarginBefore}
+              unit={ALLOWANCE_UNITS_KEYS.time}
+              condensed
+              onChange={(e) => dispatch(updateGridMarginBefore(+e.target.value || 0))}
+              sm
+              noMargin
+            />
+          </div>
+          <div className="col-6">
+            <InputSNCF
+              id="standardAllowanceTypeGridMarginAfter"
+              type="text"
+              value={gridMarginAfter}
+              unit={ALLOWANCE_UNITS_KEYS.time}
+              condensed
+              onChange={(e) => dispatch(updateGridMarginAfter(+e.target.value || 0))}
+              sm
+              noMargin
+            />
+          </div>
+        </div>
+      </div>
+      <div className="col-6">
+        <label htmlFor="standardAllowanceTypeSelect">{t('allowances:standardAllowance')}</label>
+        <InputGroupSNCF
+          id="standardAllowanceTypeSelect"
+          options={standardAllowanceTypes}
+          handleType={onchangeType}
+          value={stdcmStandardAllowance?.value || 0}
+          type={stdcmStandardAllowance?.type || ''}
+          condensed
+          sm
+        />
+      </div>
     </div>
   );
 };