Add some description to top of the mapping screens

apideck-libraries · Oct 6, 2023 · c2ec9d1 · c2ec9d1
1 parent fa91e68
commit c2ec9d1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/components/FieldMapping.tsx b/src/components/FieldMapping.tsx
@@ -55,7 +55,28 @@ const FieldMapping = ({ setShowFieldMapping, TopBarComponent }) => {
         }}
         hideOptions={true}
       />
-      <div className="h-full rounded-b-xl mt-4">
+      <div className="h-full rounded-b-xl mt-3">
+        <div className="text-center px-10">
+          <p className="text-sm text-gray-700 mb-4">
+            {selectedCustomMapping ? (
+              <span>
+                Select a source property from your{' '}
+                <span className="font-medium">{selectedConnection.name}</span>{' '}
+                data to the{' '}
+                <span className="font-medium">
+                  {selectedCustomMapping?.label}
+                </span>{' '}
+                field.
+              </span>
+            ) : (
+              <span>
+                Map properties from your{' '}
+                <span className="font-medium">{selectedConnection.name}</span>{' '}
+                data to one of the fields below.
+              </span>
+            )}
+          </p>
+        </div>
         {selectedCustomMapping && (
           <FieldMappingForm
             selectedCustomMapping={selectedCustomMapping}

diff --git a/src/components/FieldMappingForm.tsx b/src/components/FieldMappingForm.tsx
@@ -179,7 +179,7 @@ const FieldMappingForm = ({
     <div>
       <div className="bg-gray-50 p-5 border-t border-b border-gray-200 fade-in">
         <div className="mb-4">
-          <label className="block text-sm font-medium text-gray-600 mb-1.5 ml-[18px]">
+          <label className="block text-sm font-medium text-gray-600 mb-1.5 ml-[20px]">
             Source Field
           </label>
           <FieldSelector
@@ -225,7 +225,7 @@ const FieldMappingForm = ({
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-600 mb-1.5 ml-[18px]">
+          <label className="block text-sm font-medium text-gray-600 mb-1.5 ml-[20px]">
             Target Field
           </label>
           <div className="ring-1 ring-gray-200 rounded-2xl p-5 bg-white flex flex-col justify-between h-[145px]">