fix: update datasource Step1 style

web/app/components/datasets/create/file-preview/index.module.css

@@ -1,6 +1,6 @@
 .filePreview {
     @apply flex flex-col border-l border-gray-200 shrink-0;
-    width: 528px;
+    width: 50%;
     background-color: #fcfcfd;
   }
   

web/app/components/datasets/create/step-one/index.module.css

@@ -2,7 +2,7 @@
   position: sticky;
   top: 0;
   left: 0;
-  padding: 42px 64px 12px;
+  padding: 42px 64px 12px 0;
   font-weight: 600;
   font-size: 18px;
   line-height: 28px;
@@ -14,7 +14,7 @@
 }
 
 .dataSourceItem {
-  @apply box-border relative shrink-0 flex items-center mr-3 p-3 h-14 bg-white rounded-xl cursor-pointer;
+  @apply box-border relative grow shrink-0 flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
   border: 0.5px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   font-weight: 500;
@@ -22,27 +22,32 @@
   line-height: 20px;
   color: #101828;
 }
+
 .dataSourceItem:hover {
   background-color: #f5f8ff;
   border: 0.5px solid #B2CCFF;
   box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
+
 .dataSourceItem.active {
   background-color: #f5f8ff;
   border: 1.5px solid #528BFF;
   box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
 }
+
 .dataSourceItem.disabled {
   background-color: #f9fafb;
   border: 0.5px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   cursor: default;
 }
+
 .dataSourceItem.disabled:hover {
   background-color: #f9fafb;
   border: 0.5px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
 }
+
 .comingTag {
   @apply flex justify-center items-center bg-white;
   position: absolute;
@@ -57,6 +62,7 @@
   line-height: 18px;
   color: #444CE7;
 }
+
 .datasetIcon {
   @apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
   background-color: #F5FAFF;
@@ -64,15 +70,18 @@
   background-size: 16px;
   border: 0.5px solid #D1E9FF;
 }
+
 .dataSourceItem:active .datasetIcon,
 .dataSourceItem:hover .datasetIcon {
   background-color: #F5F8FF;
   border: 0.5px solid #E0EAFF;
 }
+
 .datasetIcon.notion {
   background-image: url(../assets/notion.svg);
   background-size: 20px;
 }
+
 .datasetIcon.web {
   background-image: url(../assets/web.svg);
 }
@@ -119,6 +128,7 @@
   line-height: 24px;
   color: #374151;
 }
+
 .notionConnectionTip .title::after {
   content: '';
   position: absolute;
@@ -129,6 +139,7 @@
   background: center no-repeat url(../assets/Icon-3-dots.svg);
   background-size: contain;
 }
+
 .notionConnectionTip .tip {
   margin-bottom: 20px;
   font-style: normal;

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

@@ -127,16 +127,17 @@ const StepOne = ({
 
   return (
     <div className='flex w-full h-full'>
-      <div className='grow overflow-y-auto relative'>
+      <div className='w-1/2 overflow-y-auto relative'>
+        <div className='flex justify-end'>
+          <div className={classNames(s.form)}>
             {
               shouldShowDataSourceTypeList && (
                 <div className={classNames(s.stepHeader, 'text-text-secondary')}>{t('datasetCreation.steps.one')}</div>
               )
             }
-        <div className={classNames(s.form)}>
             {
               shouldShowDataSourceTypeList && (
-              <div className='flex items-center mb-8 flex-wrap gap-y-4'>
+                <div className='flex items-center mb-8 flex-wrap gap-4'>
                   <div
                     className={cn(
                       s.dataSourceItem,
@@ -283,6 +284,7 @@ const StepOne = ({
           </div>
           <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
         </div>
+      </div>
       {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
       {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
       {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}

web/app/components/datasets/create/stepper/index.tsx

@@ -19,7 +19,7 @@ export const Stepper: FC<StepperProps> = (props) => {
             activeIndex={activeIndex}
             index={index}
           />
-          {!isLast && <div className="w-4 h-px bg-text-quaternary" />}
+          {!isLast && <div className='w-4 h-px bg-divider-deep' />}
         </Fragment>
       )
     })}

web/app/components/datasets/create/stepper/step.tsx

@@ -21,27 +21,26 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
       isActive
         ? 'bg-state-accent-solid'
         : !isDisabled
-          ? 'border border-text-tertiary'
+          ? 'border border-text-quaternary'
           : 'border border-divider-deep',
     )}>
       <div className={classNames(
-        'text-center text-[10px] font-semibold uppercase leading-3',
+        'text-center system-2xs-semibold-uppercase',
         isActive
           ? 'text-text-primary-on-surface'
           : !isDisabled
             ? 'text-text-tertiary'
-            : 'text-text-tertiary opacity-30',
+            : 'text-text-quaternary',
       )}>
         {label}
       </div>
     </div>
-    <div className={classNames(
-      ' text-xs font-medium uppercase leading-none',
+    <div className={classNames('system-xs-medium-uppercase',
       isActive
-        ? 'text-text-accent'
+        ? 'text-text-accent system-xs-semibold-uppercase'
         : !isDisabled
           ? 'text-text-tertiary'
-          : 'text-text-tertiary opacity-30',
+          : 'text-text-quaternary',
     )}>{name}</div>
   </div>
 }

web/app/components/datasets/create/top-bar/index.tsx

@@ -18,10 +18,10 @@ const STEP_T_MAP: Record<number, string> = {
 export const Topbar: FC<TopbarProps> = (props) => {
   const { className, ...rest } = props
   const { t } = useTranslation()
-  return <div className={classNames('flex items-center justify-between relative border-b border-b-divider-subtle', className)}>
+  return <div className={classNames('flex h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
     <Link href={'/datasets'} className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
       <RiArrowLeftLine className='size-4 mr-2 text-text-primary' />
-      <p className="text-text-primary text-[13px] font-semibold uppercase leading-none">
+      <p className="text-text-primary system-sm-semibold-uppercase">
         {t('datasetCreation.steps.header.creation')}
       </p>
     </Link>

web/i18n/en-US/app.ts

@@ -98,7 +98,7 @@ const translation = {
   removeOriginal: 'Delete the original app',
   switchStart: 'Start switch',
   typeSelector: {
-    all: 'ALL Types',
+    all: 'All Types',
     chatbot: 'Chatbot',
     agent: 'Agent',
     workflow: 'Workflow',

web/i18n/en-US/dataset-creation.ts

@@ -4,9 +4,9 @@ const translation = {
       creation: 'Create Knowledge',
       update: 'Add data',
     },
-    one: 'Choose data source',
-    two: 'Text Preprocessing and Cleaning',
-    three: 'Execute and finish',
+    one: 'Data Source',
+    two: 'Document Processing',
+    three: 'Execute & Finish',
   },
   error: {
     unavailable: 'This Knowledge is not available',
@@ -190,6 +190,11 @@ const translation = {
     modelButtonConfirm: 'Confirm',
     modelButtonCancel: 'Cancel',
   },
+  otherDataSource: {
+    title: 'Connect to other data sources?',
+    description: 'Currently, Dify\'s knowledge base only has limited data sources. Contributing a data source to the Dify knowledge base is a fantastic way to help enhance the platform\'s flexibility and power for all users. Our contribution guide makes it easy to get started. Please click on the link below to learn more.',
+    learnMore: 'Learn more',
+  },
 }
 
 export default translation