feat(tables): implement new UI (#565)

* feat: inline blocked and review with icon * refactor(tables): use transparent color for hover transitions * feat(Table): change default theme
checkmarble · Oct 22, 2024 · 30f5dc8 · 30f5dc8
1 parent 48336e1
commit 30f5dc8
Show file tree

Hide file tree

Showing 20 changed files with 53 additions and 54 deletions.
diff --git a/packages/app-builder/src/components/Cases/CasesList.tsx b/packages/app-builder/src/components/Cases/CasesList.tsx
@@ -96,7 +96,7 @@ export function CasesList({
           return (
             <Table.Row
               key={row.id}
-              className={clsx('hover:bg-grey-02 cursor-pointer')}
+              className={clsx('hover:bg-purple-05 cursor-pointer')}
               row={row}
               onClick={() => {
                 navigate(

diff --git a/packages/app-builder/src/components/Data/TableDetails.tsx b/packages/app-builder/src/components/Data/TableDetails.tsx
@@ -128,7 +128,7 @@ export function TableDetails({ tableModel, dataModel }: TableDetailsProps) {
                   />
                   <Icon
                     icon="edit"
-                    className="text-grey-00 group-hover:text-grey-100 relative size-6 bg-transparent transition-colors ease-in-out"
+                    className="group-hover:text-grey-100 relative size-6 text-transparent transition-colors ease-in-out"
                   />
                 </div>
               </EditTable>
@@ -281,7 +281,7 @@ function TableDetailFields({
                   field={cell.row.original}
                   linksToThisTable={linksToThisTable}
                 >
-                  <div className="text-grey-00 group-hover:text-grey-100 group-hover:bg-grey-02 group-hover:border-grey-50 group-hover:hover:bg-grey-05 group-hover:active:bg-grey-10 relative cursor-pointer rounded border bg-transparent p-2 transition-colors ease-in-out">
+                  <div className="group-hover:text-grey-100 group-hover:bg-grey-02 group-hover:border-grey-50 group-hover:hover:bg-grey-05 group-hover:active:bg-grey-10 relative cursor-pointer rounded border p-2 text-transparent transition-colors ease-in-out">
                     <Icon icon="edit" className="size-6" />
                   </div>
                 </EditField>
@@ -308,7 +308,11 @@ function TableDetailFields({
       <Table.Header headerGroups={table.getHeaderGroups()} />
       <Table.Body {...getBodyProps()}>
         {rows.map((row) => (
-          <Table.Row key={row.id} className="mb-4 break-words" row={row} />
+          <Table.Row
+            key={row.id}
+            className="group mb-4 break-words"
+            row={row}
+          />
         ))}
       </Table.Body>
     </Table.Container>

diff --git a/packages/app-builder/src/components/Decisions/DecisionsList.tsx b/packages/app-builder/src/components/Decisions/DecisionsList.tsx
@@ -299,7 +299,7 @@ export function DecisionsList({
             <Table.Row
               key={row.id}
               tabIndex={0}
-              className={clsx('hover:bg-grey-02 relative cursor-pointer')}
+              className={clsx('hover:bg-purple-05 relative cursor-pointer')}
               row={row}
             />
           );

diff --git a/packages/app-builder/src/components/Decisions/OutcomeAndReviewStatus.tsx b/packages/app-builder/src/components/Decisions/OutcomeAndReviewStatus.tsx
@@ -3,6 +3,8 @@ import { type Outcome as TOutcome } from '@app-builder/models/outcome';
 import clsx from 'clsx';
 import * as React from 'react';
 import * as R from 'remeda';
+import { Tooltip } from 'ui-design-system';
+import { Icon } from 'ui-icons';
 
 import { OutcomeTag, useOutcomes } from './OutcomeTag';
 import { ReviewStatusTag, useReviewStatuses } from './ReviewStatusTag';
@@ -63,27 +65,23 @@ export function OutcomeAndReviewStatus({
   }
 
   return (
-    <div className={clsx('relative flex flex-col gap-2', className)}>
-      <OutcomeTag
-        className="opacity-20"
+    <div className={clsx('relative flex flex-row gap-2', className)}>
+      <Tooltip.Default
+        content={
+          <OutcomeTag border="square" size="big" outcome="block_and_review" />
+        }
+      >
+        <div className="bg-orange-10 flex size-8 shrink-0 items-center justify-center rounded">
+          <Icon icon="policy" className="size-6 text-orange-100" />
+        </div>
+      </Tooltip.Default>
+      <span className="text-s text-grey-25 self-center font-semibold">→</span>
+      <ReviewStatusTag
         border="square"
         size="big"
-        outcome={outcome}
+        reviewStatus={reviewStatus}
+        className="w-full"
       />
-      <svg
-        className="text-grey-25 absolute -left-4 h-full w-4"
-        viewBox="0 0 16 72"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M 16 18 h-2 q -6 0 -6 6 v 26 q0 6 6 6 h2 l-3 3 l3 -3 l-3 -3 l3 3"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-      </svg>
-      <ReviewStatusTag border="square" size="big" reviewStatus={reviewStatus} />
     </div>
   );
 }
diff --git a/packages/app-builder/src/components/ScheduledExecutions/ScheduledExecutionsList.tsx b/packages/app-builder/src/components/ScheduledExecutions/ScheduledExecutionsList.tsx
@@ -142,7 +142,7 @@ export function ScheduledExecutionsList({
           return (
             <Table.Row
               key={row.id}
-              className={clsx('hover:bg-grey-02 cursor-pointer')}
+              className={clsx('hover:bg-purple-05 cursor-pointer')}
               row={row}
             />
           );

diff --git a/packages/app-builder/src/components/TransferAlerts/AlertsList.tsx b/packages/app-builder/src/components/TransferAlerts/AlertsList.tsx
@@ -213,7 +213,7 @@ function AlertsListTable({
               key={row.id}
               tabIndex={0}
               className={clsx(
-                'hover:bg-grey-02 relative cursor-pointer',
+                'hover:bg-purple-05 relative cursor-pointer',
                 bgClassName,
               )}
               row={row}

diff --git a/packages/app-builder/src/components/Transfers/TransfersList.tsx b/packages/app-builder/src/components/Transfers/TransfersList.tsx
@@ -87,7 +87,7 @@ export function TransfersList({ className, transfers }: TransfersListProps) {
             <Table.Row
               key={row.id}
               tabIndex={0}
-              className={clsx('hover:bg-grey-02 relative cursor-pointer')}
+              className={clsx('hover:bg-purple-05 relative cursor-pointer')}
               row={row}
             />
           );

diff --git a/packages/app-builder/src/routes/_builder+/lists+/$listId.tsx b/packages/app-builder/src/routes/_builder+/lists+/$listId.tsx
@@ -82,7 +82,7 @@ export default function Lists() {
                   value={value}
                 >
                   <button
-                    className="text-grey-00 group-hover:text-grey-100 transition-colors duration-200 ease-in-out"
+                    className="group-hover:text-grey-100 text-transparent transition-colors duration-200 ease-in-out"
                     name="delete"
                     tabIndex={-1}
                   >

diff --git a/packages/app-builder/src/routes/_builder+/lists+/_index.tsx b/packages/app-builder/src/routes/_builder+/lists+/_index.tsx
@@ -100,7 +100,7 @@ export default function ListsPage() {
                 {rows.map((row) => (
                   <Table.Row
                     key={row.id}
-                    className="hover:bg-grey-02 cursor-pointer"
+                    className="hover:bg-purple-05 cursor-pointer"
                     row={row}
                     onClick={() => {
                       navigate(

diff --git a/...ilder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules.tsx b/...ilder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules.tsx
@@ -248,7 +248,7 @@ export default function Rules() {
             rows.map((row) => (
               <Table.Row
                 key={row.id}
-                className="hover:bg-grey-02 cursor-pointer"
+                className="hover:bg-purple-05 cursor-pointer"
                 row={row}
                 onClick={() => {
                   navigate(`./${fromUUID(row.original.id)}`);

diff --git a/packages/app-builder/src/routes/_builder+/settings+/api-keys.tsx b/packages/app-builder/src/routes/_builder+/settings+/api-keys.tsx
@@ -93,7 +93,7 @@ export default function ApiKeys() {
               size: 100,
               cell: ({ cell }) => {
                 return (
-                  <div className="text-grey-00 group-hover:text-grey-100 flex gap-2">
+                  <div className="group-hover:text-grey-100 flex gap-2 text-transparent">
                     <DeleteApiKey apiKey={cell.row.original} />
                   </div>
                 );
@@ -129,7 +129,7 @@ export default function ApiKeys() {
                     <Table.Row
                       key={row.id}
                       tabIndex={0}
-                      className={clsx('hover:bg-grey-02')}
+                      className={clsx('hover:bg-purple-05 group')}
                       row={row}
                     />
                   );

diff --git a/packages/app-builder/src/routes/_builder+/settings+/inboxes.$inboxId.tsx b/packages/app-builder/src/routes/_builder+/settings+/inboxes.$inboxId.tsx
@@ -100,7 +100,7 @@ export default function Inbox() {
               size: 100,
               cell: ({ cell }) => {
                 return (
-                  <div className="text-grey-00 group-hover:text-grey-100 flex gap-2">
+                  <div className="group-hover:text-grey-100 flex gap-2 text-transparent">
                     {isEditInboxUserAvailable ? (
                       <UpdateInboxUser
                         inboxUser={cell.row.original}
@@ -189,7 +189,9 @@ export default function Inbox() {
                     <Table.Row
                       key={row.id}
                       tabIndex={0}
-                      className={clsx('hover:bg-grey-02 cursor-pointer')}
+                      className={clsx(
+                        'hover:bg-purple-05 group cursor-pointer',
+                      )}
                       row={row}
                     />
                   );

diff --git a/packages/app-builder/src/routes/_builder+/settings+/inboxes._index.tsx b/packages/app-builder/src/routes/_builder+/settings+/inboxes._index.tsx
@@ -102,7 +102,7 @@ export default function Inboxes() {
                     <Table.Row
                       key={row.id}
                       tabIndex={0}
-                      className={clsx('hover:bg-grey-02 cursor-pointer')}
+                      className={clsx('hover:bg-purple-05 cursor-pointer')}
                       row={row}
                       onClick={() => {
                         navigate(

diff --git a/packages/app-builder/src/routes/_builder+/settings+/tags.tsx b/packages/app-builder/src/routes/_builder+/settings+/tags.tsx
@@ -73,7 +73,7 @@ export default function Tags() {
               size: 100,
               cell: ({ cell }) => {
                 return (
-                  <div className="text-grey-00 group-hover:text-grey-100 flex gap-2">
+                  <div className="group-hover:text-grey-100 flex gap-2 text-transparent">
                     {isEditTagAvailable ? (
                       <UpdateTag tag={cell.row.original} />
                     ) : null}
@@ -114,7 +114,7 @@ export default function Tags() {
                     <Table.Row
                       key={row.id}
                       tabIndex={0}
-                      className={clsx('hover:bg-grey-02')}
+                      className={clsx('hover:bg-purple-05 group')}
                       row={row}
                     />
                   );

diff --git a/packages/app-builder/src/routes/_builder+/settings+/users.tsx b/packages/app-builder/src/routes/_builder+/settings+/users.tsx
@@ -113,7 +113,7 @@ export default function Users() {
               size: 50,
               cell: ({ cell }) => {
                 return (
-                  <div className="text-grey-00 group-hover:text-grey-100 flex gap-2">
+                  <div className="group-hover:text-grey-100 flex gap-2 text-transparent">
                     {isEditUserAvailable ? (
                       <UpdateUser
                         user={cell.row.original}
@@ -169,7 +169,7 @@ export default function Users() {
                     <Table.Row
                       key={row.id}
                       tabIndex={0}
-                      className={clsx('hover:bg-grey-02')}
+                      className={clsx('hover:bg-purple-05 group')}
                       row={row}
                     />
                   );

diff --git a/packages/app-builder/src/routes/_builder+/settings+/webhooks.tsx b/packages/app-builder/src/routes/_builder+/settings+/webhooks.tsx
@@ -139,9 +139,7 @@ export default function Webhooks() {
                     <Table.Row
                       key={row.id}
                       tabIndex={0}
-                      className={clsx(
-                        'hover:bg-grey-02 relative cursor-pointer',
-                      )}
+                      className={clsx('hover:bg-purple-05 cursor-pointer')}
                       row={row}
                     />
                   );

diff --git a/packages/app-builder/src/routes/_builder+/workflows+/_index.tsx b/packages/app-builder/src/routes/_builder+/workflows+/_index.tsx
@@ -217,7 +217,7 @@ export default function WorkflowsPage() {
                         <Table.Row
                           key={row.id}
                           tabIndex={0}
-                          className="hover:bg-grey-02 relative cursor-pointer"
+                          className="hover:bg-purple-05 cursor-pointer"
                           row={row}
                         />
                       );

diff --git a/packages/ui-design-system/src/Table/Table.tsx b/packages/ui-design-system/src/Table/Table.tsx
@@ -50,7 +50,7 @@ function TableTH<TData extends RowData, TValue>({
       colSpan={header.colSpan}
       style={{ width: header.getSize() }}
       className={clsx(
-        'bg-grey-02 border-grey-10 relative h-12 w-full border-b border-r px-4 last:border-r-0',
+        'border-grey-10 bg-grey-00 relative h-12 w-full border-b border-r px-4 last:border-r-0',
         {
           'cursor-pointer select-none': header.column.getCanSort(),
         },
@@ -258,24 +258,21 @@ function Row<TData extends RowData>({
 }: Omit<React.ComponentProps<'tr'>, 'children'> & { row: Row<TData> }) {
   return (
     // Scale-100 is a hack to bypass relative bug on <tr /> for Safari https://bugs.webkit.org/show_bug.cgi?id=240961
-    <tr className={clsx('group relative h-16 scale-100', className)} {...props}>
+    <tr
+      className={clsx('even:bg-grey-02 relative h-12 scale-100', className)}
+      {...props}
+    >
       {row.getVisibleCells().map((cell) => {
         const context = cell.getContext();
         if (context.column.id === internalRowLink) {
           return (
-            <td
-              key={cell.id}
-              className="border-grey-10 border-b group-last:border-b-0"
-            >
+            <td key={cell.id}>
               {flexRender(cell.column.columnDef.cell, context)}
             </td>
           );
         }
         return (
-          <td
-            key={cell.id}
-            className="border-grey-10 text-s w-full border-b px-4 font-normal group-last:border-b-0"
-          >
+          <td key={cell.id} className="text-s w-full px-4 font-normal">
             {flexRender(cell.column.columnDef.cell, context)}
           </td>
         );

diff --git a/packages/ui-icons/src/generated/icons-svg-sprite.svg b/packages/ui-icons/src/generated/icons-svg-sprite.svg
diff --git a/packages/ui-icons/svgs/icons/policy.svg b/packages/ui-icons/svgs/icons/policy.svg