From 06f567f4462efded5488f066da7c89ea4bdf36b7 Mon Sep 17 00:00:00 2001
From: Philip Korsholm <88927411+pKorsholm@users.noreply.github.com>
Date: Tue, 7 Mar 2023 13:14:14 +0100
Subject: [PATCH] fix(admin-ui): table action gap (#3386)

* add gap in table actions

* add changeset

* Update .changeset/light-frogs-smoke.md

Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>

---------

Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>
Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
---
 .changeset/light-frogs-smoke.md               |  5 ++++
 .../src/components/molecules/table/index.tsx  | 30 +++++++++----------
 .../sales-channels-modal/available-screen.tsx | 11 +++----
 3 files changed, 25 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/light-frogs-smoke.md

diff --git a/.changeset/light-frogs-smoke.md b/.changeset/light-frogs-smoke.md
new file mode 100644
index 0000000000..0072f8917e
--- /dev/null
+++ b/.changeset/light-frogs-smoke.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+ fix(admin-ui): Add gap in table actions
diff --git a/packages/admin-ui/ui/src/components/molecules/table/index.tsx b/packages/admin-ui/ui/src/components/molecules/table/index.tsx
index a1fd0363b7..e6e681a4de 100644
--- a/packages/admin-ui/ui/src/components/molecules/table/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/table/index.tsx
@@ -1,13 +1,11 @@
-import clsx from "clsx"
-import React from "react"
-import { useNavigate } from "react-router-dom"
-import Spinner from "../../atoms/spinner"
-import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
-import ArrowRightIcon from "../../fundamentals/icons/arrow-right-icon"
-import SortingIcon from "../../fundamentals/icons/sorting-icon"
 import Actionables, { ActionType } from "../../molecules/actionables"
 import FilteringOptions, { FilteringOptionProps } from "./filtering-option"
+
+import React from "react"
+import SortingIcon from "../../fundamentals/icons/sorting-icon"
 import TableSearch from "./table-search"
+import clsx from "clsx"
+import { useNavigate } from "react-router-dom"
 
 type TableRowProps = React.HTMLAttributes<HTMLTableRowElement> & {
   forceDropdown?: boolean
@@ -73,9 +71,9 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
 
     return (
       <div className={`flex flex-col ${containerClassName}`}>
-        <div className="w-full flex justify-between mb-2">
+        <div className="mb-2 flex w-full justify-between">
           {filteringOptions ? (
-            <div className="flex mb-2 self-end">
+            <div className="mb-2 flex self-end">
               {Array.isArray(filteringOptions)
                 ? filteringOptions.map((fo) => <FilteringOptions {...fo} />)
                 : filteringOptions}
@@ -83,7 +81,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
           ) : (
             <span aria-hidden />
           )}
-          <div className="flex items-center">
+          <div className="gap-x-xsmall flex items-center">
             {tableActions && <div>{tableActions}</div>}
             {enableSearch && (
               <TableSearch
@@ -116,7 +114,7 @@ Table.Head = React.forwardRef<
   <thead
     ref={ref}
     className={clsx(
-      "whitespace-nowrap inter-small-semibold text-grey-50 border-t border-b border-grey-20",
+      "inter-small-semibold text-grey-50 border-grey-20 whitespace-nowrap border-t border-b",
       className
     )}
     {...props}
@@ -138,7 +136,7 @@ Table.HeadCell = React.forwardRef<
   HTMLTableCellElement,
   React.HTMLAttributes<HTMLTableCellElement>
 >(({ className, children, ...props }, ref) => (
-  <th ref={ref} className={clsx("text-left h-[40px]", className)} {...props}>
+  <th ref={ref} className={clsx("h-[40px] text-left", className)} {...props}>
     {children}
   </th>
 ))
@@ -159,9 +157,9 @@ Table.SortingHeadCell = React.forwardRef<
     ref
   ) => {
     return (
-      <th ref={ref} className={clsx("text-left py-2.5", className)} {...props}>
+      <th ref={ref} className={clsx("py-2.5 text-left", className)} {...props}>
         <div
-          className="flex items-center cursor-pointer select-none"
+          className="flex cursor-pointer select-none items-center"
           onClick={(e) => {
             e.preventDefault()
             if (!sortDirection) {
@@ -225,9 +223,9 @@ Table.Row = React.forwardRef<HTMLTableRowElement, TableRowProps>(
       <tr
         ref={ref}
         className={clsx(
-          "inter-small-regular border-t border-b border-grey-20 text-grey-90",
+          "inter-small-regular border-grey-20 text-grey-90 border-t border-b",
           className,
-          { "cursor-pointer hover:bg-grey-5": linkTo !== undefined }
+          { "hover:bg-grey-5 cursor-pointer": linkTo !== undefined }
         )}
         {...props}
         {...(linkTo && {
diff --git a/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/available-screen.tsx b/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/available-screen.tsx
index ad0881f9d5..5838a57734 100644
--- a/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/available-screen.tsx
+++ b/packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/available-screen.tsx
@@ -1,14 +1,15 @@
 import React, { useState } from "react"
-import { usePagination, useRowSelect, useTable } from "react-table"
-import Modal from "../../../../components/molecules/modal"
-import { useDebounce } from "../../../../hooks/use-debounce"
 import SalesChannelTable, {
   SalesChannelTableActions,
   useSalesChannelsTableColumns,
 } from "./table"
+import { usePagination, useRowSelect, useTable } from "react-table"
+
+import Modal from "../../../../components/molecules/modal"
+import { useDebounce } from "../../../../hooks/use-debounce"
 import { useSalesChannelsModal } from "./use-sales-channels-modal"
 
-const LIMIT = 15
+const LIMIT = 12
 
 const AvailableScreen = () => {
   const { source, onSave } = useSalesChannelsModal()
@@ -75,7 +76,7 @@ const AvailableScreen = () => {
           />
         }
         setSelectedRowIds={setSelectedRowIds}
-        limit={15}
+        limit={LIMIT}
         offset={offset}
         setOffset={setOffset}
         setQuery={setQuery}