listing table styles update

AOT-Technologies · Jan 16, 2025 · f1dffdc · f1dffdc
1 parent 83c9b54
commit f1dffdc
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 15 deletions.
diff --git a/forms-flow-web/src/components/CustomComponents/SortableHeader.js b/forms-flow-web/src/components/CustomComponents/SortableHeader.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation  } from "react-i18next";
+import { SortIcon } from "@formsflow/components";
+import { StyleServices } from "@formsflow/service";
 
 const SortableHeader = ({ columnKey, title, currentSort, handleSort,className = "" }) => {
     const { t } = useTranslation();
@@ -11,6 +13,7 @@ const SortableHeader = ({ columnKey, title, currentSort, handleSort,className =
         handleSort(columnKey);
         }
     };
+    const grayColor = StyleServices.getCSSVariable('--ff-gray-400');
     return (
       <button
         className={`button-as-div ${className}`}
@@ -21,13 +24,8 @@ const SortableHeader = ({ columnKey, title, currentSort, handleSort,className =
         aria-label={`${title}-header-btn`}
       >
         <span className="mt-1">{t(title)}</span>
-        <span>
-        <i
-          data-testid={`${columnKey}-${sortedOrder}-sort-icon`}
-          className={`fa fa-arrow-${sortedOrder === "asc" ? "up" : "down"} sort-icon fs-16 ms-2`}
-          data-toggle="tooltip"
-          title={t(sortedOrder === "asc" ? "Ascending" : "Descending")}
-        ></i>
+        <span className={sortedOrder === "asc" ? "arrow-up" : "arrow-down"}>
+        <SortIcon color={grayColor}/>
       </span>
       </button>
     );

diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -117,7 +117,7 @@ function FormTable() {
                    title="Form Name"
                    currentSort={currentFormSort}
                    handleSort={handleSort}
-                   className="ms-4"
+                   className="gap-2"
                   />
                   </th>
                   <th className="w-30" scope="col">{t("Description")}</th>
@@ -127,21 +127,24 @@ function FormTable() {
                   title="Last Edited"
                   currentSort={currentFormSort}
                   handleSort={handleSort}
+                  className="gap-2"
                   />
                   </th>
                   <th className="w-13" scope="col">
                   <SortableHeader 
                     columnKey="visibility"
                     title="Visibility"
                     currentSort={currentFormSort}
-                    handleSort={handleSort} />
+                    handleSort={handleSort} 
+                    className="gap-2"/>                
                   </th>
                   <th className="w-12" scope="col" colSpan="4">
                     <SortableHeader 
                     columnKey="status"
                     title="Status"
                     currentSort={currentFormSort}
-                    handleSort={handleSort} />
+                    handleSort={handleSort} 
+                    className="gap-2"/>
                   </th>
                   <th className="w-12" colSpan="4" aria-label="Search Forms by form title"></th>
                 </tr>
@@ -156,7 +159,7 @@ function FormTable() {
                       <tr key={index}>
                         <td className="w-20">
                           <div className="d-flex">
-                            <span className="ms-4 text-container">{e.title}</span>
+                            <span className="text-container">{e.title}</span>
                           </div>
                         </td>
                         <td className="w-30 cursor-pointer">
@@ -177,7 +180,7 @@ function FormTable() {
                             {e.status === "active" ? t("Live") : t("Draft")}
                           </span>
                         </td>
-                        <td className="w-12">
+                        <td className="w-12 text-end">
                         {(createDesigns || viewDesigns) && (
                           <CustomButton
                             variant="secondary"

diff --git a/forms-flow-web/src/components/Modeler/DecisionTable.js b/forms-flow-web/src/components/Modeler/DecisionTable.js
@@ -181,7 +181,7 @@ const DecisionTable = React.memo(() => {
                         title="Name"
                         currentSort={currentDmnSort}
                         handleSort={handleSort}
-                        className="ms-4"
+                        className="gap-2"
                       />
                     </th>
                     <th className="w-20" scope="col">
@@ -190,6 +190,7 @@ const DecisionTable = React.memo(() => {
                         title="ID"
                         currentSort={currentDmnSort}
                         handleSort={handleSort}
+                        className="gap-2"
                       />
                     </th>
                     <th className="w-15" scope="col">
@@ -198,6 +199,7 @@ const DecisionTable = React.memo(() => {
                         title="Last Edited"
                         currentSort={currentDmnSort}
                         handleSort={handleSort}
+                        className="gap-2"
                       />
                     </th>
                     <th className="w-15" scope="col">
@@ -206,6 +208,7 @@ const DecisionTable = React.memo(() => {
                         title="Status"
                         currentSort={currentDmnSort}
                         handleSort={handleSort}
+                        className="gap-2"
                       />
                     </th>
                     <th className="w-25" colSpan="4" aria-label="edit bpmn button "></th>

diff --git a/forms-flow-web/src/components/Modeler/SubFlowTable.js b/forms-flow-web/src/components/Modeler/SubFlowTable.js
@@ -166,7 +166,7 @@ const SubFlow = React.memo(() => {
       <LoadingOverlay active={isLoading} spinner text={t("Loading...")}>
         <div className="min-height-400 pt-3">
           <div className="custom-tables-wrapper">
-            <table className="table custom-tables table-responsive-sm">
+            <table className="table custom-tables table-responsive-sm mb-4">
               <thead className="table-header">
                 <tr>
                   <th className="w-25" scope="col">
@@ -175,7 +175,7 @@ const SubFlow = React.memo(() => {
                       title="Name"
                       currentSort={currentBpmnSort}
                       handleSort={handleSort}
-                      className="ms-4"
+                      className="gap-2"
                     />
                   </th>
                   <th className="w-20" scope="col">
@@ -184,6 +184,7 @@ const SubFlow = React.memo(() => {
                       title="ID"
                       currentSort={currentBpmnSort}
                       handleSort={handleSort}
+                      className="gap-2"
                     />
                   </th>
                   <th className="w-15" scope="col">
@@ -192,6 +193,7 @@ const SubFlow = React.memo(() => {
                       title="Last Edited"
                       currentSort={currentBpmnSort}
                       handleSort={handleSort}
+                      className="gap-2"
                     />
                   </th>
                   <th className="w-15" scope="col">
@@ -200,6 +202,7 @@ const SubFlow = React.memo(() => {
                       title="Status"
                       currentSort={currentBpmnSort}
                       handleSort={handleSort}
+                      className="gap-2"
                     />
                   </th>
                   <th className="w-25" colSpan="4" aria-label="edit bpmn button "></th>