AOT-Technologies · arun-s-aot · Jan 20, 2025 · Jan 16, 2025 · Jan 16, 2025 · Jan 17, 2025
diff --git a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx
@@ -49,7 +49,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
   onBlurDropDown
 }) => {
   const { t } = useTranslation();
-  const primaryColor = StyleServices.getCSSVariable('primary');
+  const primaryColor = StyleServices.getCSSVariable('--ff-primary');
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>(selectedOption || ''); 
   const [filteredItems, setFilteredItems] = useState<DropdownItem[]>([]);

diff --git a/forms-flow-components/src/components/CustomComponents/NoDataFound.tsx b/forms-flow-components/src/components/CustomComponents/NoDataFound.tsx
@@ -8,7 +8,7 @@ export const NoDataFound: React.FC = () => {
     <tbody className="no-data-body">
       <tr>
         <td colSpan={2} className="no-data-container">
-          <span className="no-data-text" data-testid="no-data-found">{t("Nothing is found. Please try again.")}</span>
+          <span className="no-data-text" data-testid="no-data-found">{t("Nothing is found based on your search query. Please try again.")}</span>
         </td>
       </tr>
     </tbody>

diff --git a/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx b/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx
@@ -22,7 +22,7 @@ export const ReusableProcessTableRow: React.FC<ProcessTableRowProps> = ({ item,
   return (
     <tr>
       <td className="w-25 text-ellipsis text-nowrap">
-        <span className="ms-4">{item.name}</span>
+        <span>{item.name}</span>
       </td>
       <td className="w-20 text-ellipsis text-nowrap">
         <span>{item.processKey}</span>

diff --git a/forms-flow-components/src/components/CustomComponents/TableFooter.tsx b/forms-flow-components/src/components/CustomComponents/TableFooter.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import Pagination from "react-js-pagination";
 import { Dropdown } from "react-bootstrap";
-import { DownArrowIcon } from "../SvgIcons/index";
-
+import { DownArrowIcon, AngleLeftIcon, AngleRightIcon } from "../SvgIcons/index";
+import { StyleServices } from "@formsflow/service";
 interface PageOption {
   value: number;
   text: string;
@@ -32,10 +32,10 @@ export const TableFooter: React.FC<TableFooterProps> = ({
     <tr>
       <td colSpan={3}>
         <div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
-          <span className="ms-2">
+          <span>
             {t("Showing")} {limit * activePage - (limit - 1)} {t("to")}&nbsp;
             {Math.min(limit * activePage, totalCount)} {t("of")}&nbsp;
-            {totalCount} {t("results")}
+            {totalCount}
           </span>
         </div>
       </td>
@@ -51,6 +51,12 @@ export const TableFooter: React.FC<TableFooterProps> = ({
                 itemClass="page-item"
                 linkClass="page-link"
                 onChange={handlePageChange}
+                prevPageText={
+                  <span><AngleLeftIcon onClick={() => {}}/></span>
+                }
+                nextPageText={
+                  <span><AngleRightIcon onClick={() => {}} /></span>
+                }
               />
             </div>
           </td>
@@ -66,6 +72,7 @@ export const TableFooter: React.FC<TableFooterProps> = ({
                     data-testid="page-limit-dropdown-toggle"
                   >
                     {limit}
+                    <DownArrowIcon />
                   </Dropdown.Toggle>
                   <Dropdown.Menu>
                     {pageOptions.map((option) => (
@@ -80,7 +87,6 @@ export const TableFooter: React.FC<TableFooterProps> = ({
                     ))}
                   </Dropdown.Menu>
                 </Dropdown>
-                <DownArrowIcon />
               </div>
             </div>
           </td>

diff --git a/forms-flow-components/src/components/SvgIcons/index.tsx b/forms-flow-components/src/components/SvgIcons/index.tsx
@@ -372,21 +372,20 @@ export const IButton = ({ color = grayColor, ...props }) => (
   </svg>
 );
 
-export const DownArrowIcon = ({ color = grayColor, ...props }) => (
+export const DownArrowIcon = ({ color = baseColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="10"
+    width="16"
     height="10"
-    viewBox="0 0 16 16"
-    fill={color}
+    viewBox="0 0 16 10"
+    fill="none"
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M1.64599 4.64604C1.69244 4.59948 1.74761 4.56253 1.80836 4.53733C1.86911 4.51212 1.93423 4.49915 1.99999 4.49915C2.06576 4.49915 2.13088 4.51212 2.19163 4.53733C2.25237 4.56253 2.30755 4.59948 2.35399 4.64604L7.99999 10.293L13.646 4.64604C13.6925 4.59955 13.7477 4.56267 13.8084 4.53752C13.8691 4.51236 13.9342 4.49941 14 4.49941C14.0657 4.49941 14.1308 4.51236 14.1916 4.53752C14.2523 4.56267 14.3075 4.59955 14.354 4.64604C14.4005 4.69253 14.4374 4.74772 14.4625 4.80846C14.4877 4.86919 14.5006 4.9343 14.5006 5.00004C14.5006 5.06578 14.4877 5.13088 14.4625 5.19162C14.4374 5.25236 14.4005 5.30755 14.354 5.35404L8.35399 11.354C8.30755 11.4006 8.25237 11.4375 8.19163 11.4628C8.13088 11.488 8.06576 11.5009 7.99999 11.5009C7.93423 11.5009 7.86911 11.488 7.80836 11.4628C7.74761 11.4375 7.69244 11.4006 7.64599 11.354L1.64599 5.35404C1.59943 5.30759 1.56249 5.25242 1.53728 5.19167C1.51207 5.13093 1.4991 5.06581 1.4991 5.00004C1.4991 4.93427 1.51207 4.86915 1.53728 4.80841C1.56249 4.74766 1.59943 4.69248 1.64599 4.64604Z"
-      fill="#000000"
-      stroke="#000000"
+      d="M1.49969 1.74976L8.00028 8.25034L14.5003 1.75034"
+      stroke={color}
       strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );
@@ -453,6 +452,26 @@ export const AngleRightIcon = ({ color = baseColor, onClick, ...props }) => (
   </svg>
 );
 
+export const AngleLeftIcon = ({ color = baseColor, onClick, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="15"
+    viewBox="0 0 10 15"
+    fill="none"
+    onClick={onClick}
+  >
+    <path
+      d="M8.2501 14.0005L1.74951 7.4999L8.24951 0.999901"
+      stroke={props.disabled ? grayColor : color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+
 export const UploadIcon = ({ color = baseColor, ...props }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -668,3 +687,20 @@ export const StarPremiumIcon = ({ color = baseColor,...props }) => (
   </svg>
 );
 
+export const SortIcon = ({ color = grayColor, ...props }) => (
+  <svg
+    width="12"
+    height="17"
+    viewBox="0 0 12 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 15.5L6 1.5M6 1.5L11 5.5M6 1.5L1 5.5"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/forms-flow-theme/scss/_button.scss b/forms-flow-theme/scss/_button.scss
@@ -473,15 +473,7 @@ $btn-font-weight: bold;
       min-width: $dropdown-btn-size !important;
       min-height: $dropdown-btn-size !important;
       margin: 0 !important;
-
-      &:hover,
-      &:active,
-      &:focus {
-        color: $black-color !important;
-        background-color: $gray-000 !important;
-        font-weight: $btn-font-weight;
-        outline: transparent !important;
-      }
+      gap: var(--spacer-075) !important;;
     }
 
     .dropdown-toggle {

diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss
@@ -124,7 +124,7 @@ select option:hover {
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-sm);
     line-height: var(--text-line-height);
-    padding: var(--spacer-050) var(--spacer-200) var(--spacer-050) var(--spacer-100) !important;
+    padding: var(--spacer-075) var(--spacer-100)  !important;
     height: 2.063rem;
 
 
@@ -140,6 +140,14 @@ select option:hover {
       border: 1px solid var(--ff-gray-800);
       background-color: var(--ff-gray-100) !important;
     }
+    &::placeholder {
+      color: var(--ff-gray-300) !important;
+      font-size: var(--font-size-sm) !important;
+      font-weight: var(--font-weight-sm);
+    }
+    &:focus::placeholder {
+      color: var(--ff-gray-300) !important;
+    }
   }
 
   .search-box-icon {

diff --git a/forms-flow-theme/scss/_table.scss b/forms-flow-theme/scss/_table.scss
@@ -8,7 +8,7 @@ $status-radius: 50%;
 
 .custom-tables-wrapper {
   height: auto;
-  max-height: calc(100vh - 6.8rem);
+  max-height: calc(100vh - 4rem);
   overflow-y: auto;
   overflow-x: hidden;
   border-radius: $tr-th-border-radius !important;
@@ -21,10 +21,9 @@ $status-radius: 50%;
   border-spacing: 0 !important;
   border-radius: var(--radius-0150) !important;
 
-  th,
   td {
     vertical-align: middle !important;
-    padding: var(--spacer-125) var(--spacer-150) !important;
+    padding: var(--spacer-050) var(--spacer-125) !important;
     font-size: var(--font-size-xs) !important;
   }
 
@@ -34,14 +33,16 @@ $status-radius: 50%;
     width: 100%;
     z-index: 2;
     background-color: var(--ff-white);
-
+    font-size: var(--font-size-xs) !important;
+    vertical-align: middle !important;
     // Table Header Styles
     th {
       width: $th-width;
       position: sticky;
       top: 0;
       z-index: $th-z-index-default;
       background-color: inherit;
+      padding: var(--spacer-100) var(--spacer-125) !important;
 
       &:first-child,
       &:last-child {
@@ -183,7 +184,6 @@ $status-radius: 50%;
   text-align: inherit;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   width: 100%;
 }
 .text-ellipsis {
@@ -208,3 +208,13 @@ $status-radius: 50%;
     }
   }
 }
+//table header sortIcon rotation
+.arrow-up {
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+
+.arrow-down {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}