chore: align design token

web/app/components/datasets/create/step-two/index.tsx

@@ -666,7 +666,7 @@ const StepTwo = ({
                 }
               >
                 <div className='space-y-4'>
-                  <div className='flex gap-2'>
+                  <div className='flex gap-3'>
                     <DelimiterInput
                       value={segmentIdentifier}
                       onChange={e => setSegmentIdentifier(e.target.value)}
@@ -775,11 +775,11 @@ const StepTwo = ({
                     />
                   </div>
 
-                  <div className='space-y-2'>
+                  <div className='space-y-4'>
                     <TextLabel>
                       {t('datasetCreation.stepTwo.childChunkForRetrieval')}
                     </TextLabel>
-                    <div className='flex gap-2 mt-2'>
+                    <div className='flex gap-3 mt-2'>
                       <DelimiterInput
                         value={parentChildConfig.child.delimiter}
                         onChange={e => setParentChildConfig({
@@ -803,10 +803,11 @@ const StepTwo = ({
                       />
                     </div>
 
+                    <div className='space-y-2'>
                       <TextLabel>
                         {t('datasetCreation.stepTwo.rules')}
                       </TextLabel>
-                    <div className='space-y-2'>
+                      <div className='space-y-2 mt-2'>
                         {rules.map(rule => (
                           <div key={rule.id} className={s.ruleItem} onClick={() => {
                             ruleChangeHandle(rule.id)
@@ -820,6 +821,7 @@ const StepTwo = ({
                       </div>
                     </div>
                   </div>
+                </div>
               </OptionCard>
             </div>
           </div>

web/app/components/datasets/create/step-two/option-card.tsx

@@ -75,7 +75,7 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
     />
     {/** Body */}
     {isActive && <div className='p-3'>{children}
-      {actions && <div className='flex gap-2 mt-3'>
+      {actions && <div className='flex gap-2 mt-4'>
         {actions}
       </div>}
     </div>}