feat: unify the gap between elements in every table (#291)

Related issue - #288. Our elements in every table are not consistent. This PR fixes this issue. (close #288)
instill-ai · Oct 3, 2022 · e743820 · e743820
1 parent 76a6f99
commit e743820
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
diff --git a/src/components/ui/TableCells/ConnectionTypeCell/ConnectionTypeCell.tsx b/src/components/ui/TableCells/ConnectionTypeCell/ConnectionTypeCell.tsx
@@ -23,7 +23,7 @@ const ConnectionTypeCell = ({
     return (
       <CellBase padding={padding}>
         <div className={cn("py-2.5", width)}>
-          <div className="flex flex-row gap-x-2.5">
+          <div className="flex flex-row gap-x-[5px]">
             <Image
               className="my-auto"
               src={
@@ -33,8 +33,8 @@ const ConnectionTypeCell = ({
                   ? `/icons/airbyte/${connectorDefinition.connector_definition.icon}`
                   : `/icons/instill/${connectorDefinition.connector_definition.icon}`
               }
-              width={32}
-              height={32}
+              width={30}
+              height={30}
               layout="fixed"
             />
             <p

diff --git a/src/components/ui/TableCells/InstanceCell/InstanceCell.tsx b/src/components/ui/TableCells/InstanceCell/InstanceCell.tsx
@@ -83,9 +83,9 @@ const InstanceCell: FC<InstanceCellProps> = ({
               "gap-y-3": instances.length > 0,
             })}
           >
-            <div className="flex flex-row gap-x-3">
+            <div className="flex flex-row gap-x-[5px]">
               {icon}
-              <p className="text-instillGrey90 text-instill-body">
+              <p className="my-auto text-instillGrey90 text-instill-body">
                 {instances ? instances.length : 0}
               </p>
             </div>

diff --git a/src/components/ui/TableCells/ModeCell/ModeCell.tsx b/src/components/ui/TableCells/ModeCell/ModeCell.tsx
@@ -46,7 +46,7 @@ const ModeCell: FC<ModeCellProps> = ({ width, mode, padding }) => {
 
   return (
     <CellBase padding={padding}>
-      <div className={cn("flex gap-x-2 mr-auto", width)}>
+      <div className={cn("flex gap-x-[5px] mr-auto", width)}>
         {modeIcon}
         <p className="text-instillGrey90 text-instill-body">
           {mode === "MODE_ASYNC" ? "Async" : "Sync"}

diff --git a/src/components/ui/TableCells/ModelDefinitionCell/ModelDefinitionCell.tsx b/src/components/ui/TableCells/ModelDefinitionCell/ModelDefinitionCell.tsx
@@ -82,7 +82,7 @@ const ModelDefintionCell: FC<ModelDefintionCellProps> = ({
 
   return (
     <CellBase padding={padding}>
-      <div className={cn("flex flex-row gap-x-2", width)}>
+      <div className={cn("flex flex-row gap-x-[5px]", width)}>
         {definitionIcon}
         <p className="my-auto flex text-instillGrey90 text-instill-body">
           {definitionLabel}

diff --git a/src/components/ui/TableCells/ModelsCell/ModelsCell.tsx b/src/components/ui/TableCells/ModelsCell/ModelsCell.tsx
@@ -41,8 +41,8 @@ const ModelsCell: FC<ModelsCellProps> = ({
           <div key={key} className="flex flex-col gap-y-2">
             <div className="flex flex-row gap-x-1">
               <ModelInstanceIcon
-                width="w-5"
-                height="h-5"
+                width="w-[30px]"
+                height="h-[30px]"
                 color="fill-black"
                 position="my-auto"
               />