th-249: Redesign UI table (#262)

* th-249: * update table styles

* th-249: * update pagination and dropdown styles

* th-249: + edit&delete icon and ability to sort columns

* th-249: * changed props name

* th-249: + add manualSorting parameter

* th-249: + add helper for checking icon cell

* th-249: * refactored table and helper

* th-249: * splits table.tsx into different files

* th-249: - removes unused props

* th-249: * changed types and types' names

Author: h0wter

frontend/src/assets/css/fonts.scss

@@ -1,13 +1,13 @@
 @font-face {
   font-weight: 400;
   font-family: "Plus Jakarta Sans";
-  src: url("fonts/plusjakartasans-regular.woff2");
+  src: url("/fonts/plusjakartasans-regular.woff2");
 }
 
 @font-face {
   font-weight: 600;
   font-family: "Plus Jakarta Sans";
-  src: url("fonts/plusjakartasans-semibold.woff2");
+  src: url("/fonts/plusjakartasans-semibold.woff2");
 }
 
 @font-face {
@@ -19,5 +19,5 @@
 @font-face {
   font-weight: 800;
   font-family: "Plus Jakarta Sans";
-  src: url("fonts/plusjakartasans-extrabold.woff2");
+  src: url("/fonts/plusjakartasans-extrabold.woff2");
 }

frontend/src/assets/css/vars.scss

@@ -5,9 +5,11 @@ $white: #ffffff;
 $red-light: #ff437b;
 $red: #ee2a64;
 $red-dark: #d51a52;
+$white-blue: #adc2ff;
 $blue-light: #527efe;
 $blue: #507ceb;
 $blue-dark: #3563e9;
+$blue-extra-dark: #000b6a;
 $black-blue: #1a202c;
 $grey-extra-light: #ebf3ff;
 $grey-border: #e7eef6;

frontend/src/libs/components/button/button.tsx

@@ -7,7 +7,7 @@ import styles from './styles.module.scss';
 
 type Properties = {
   className?: Parameters<typeof getValidClassNames>[0];
-  label: string;
+  label: string | number;
   type?: 'button' | 'submit';
   size?: 'sm' | 'md';
   variant?: 'contained' | 'outlined' | 'text';

frontend/src/libs/components/dropdown/dropdown.tsx

@@ -28,24 +28,44 @@ type Properties<T extends FieldValues> = {
   placeholder?: string;
   field?: ControllerRenderProps<T, FieldPath<T>>;
   className?: string;
+  isCustomValueContainer?: boolean;
 };
 
-const getClassNames = (
-  isMenuOpen: boolean,
-): ClassNamesConfig<SelectOption, false, GroupBase<SelectOption>> => ({
-  container: () => styles.container,
-  control: () => styles.control,
-  option: () => styles.option,
-  menu: () => styles.singleValue,
-  placeholder: () => styles.placeholder,
-  singleValue: () => styles.singleValue,
-  valueContainer: () => styles.valueContainer,
-  dropdownIndicator: () =>
-    isMenuOpen
-      ? getValidClassNames(styles.dropdownIndicator, styles.upside)
-      : styles.dropdownIndicator,
-  indicatorSeparator: () => styles.indicatorSeparator,
-});
+type GetClassNamesArguments = {
+  isMenuOpen: boolean;
+  isCustomValueContainer: boolean;
+};
+
+const getClassNames = ({
+  isMenuOpen,
+  isCustomValueContainer,
+}: GetClassNamesArguments): ClassNamesConfig<
+  SelectOption,
+  false,
+  GroupBase<SelectOption>
+> => {
+  const commonStylesConfig: ClassNamesConfig<
+    SelectOption,
+    false,
+    GroupBase<SelectOption>
+  > = {
+    container: () => styles.container,
+    control: () => styles.control,
+    option: () => styles.option,
+    menu: () => styles.singleValue,
+    placeholder: () => styles.placeholder,
+    singleValue: () => styles.singleValue,
+    dropdownIndicator: () =>
+      isMenuOpen
+        ? getValidClassNames(styles.dropdownIndicator, styles.upside)
+        : styles.dropdownIndicator,
+    indicatorSeparator: () => styles.indicatorSeparator,
+  };
+
+  return isCustomValueContainer
+    ? commonStylesConfig
+    : { ...commonStylesConfig, valueContainer: () => styles.valueContainer };
+};
 
 const Dropdown = <T extends FieldValues>({
   options,
@@ -56,6 +76,7 @@ const Dropdown = <T extends FieldValues>({
   onChange,
   className,
   placeholder,
+  isCustomValueContainer = false,
 }: Properties<T>): JSX.Element => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -68,8 +89,8 @@ const Dropdown = <T extends FieldValues>({
   }, []);
 
   const classNamesConfig = useMemo(
-    () => getClassNames(isMenuOpen),
-    [isMenuOpen],
+    () => getClassNames({ isMenuOpen, isCustomValueContainer }),
+    [isMenuOpen, isCustomValueContainer],
   );
 
   const findOptionByValue = (

frontend/src/libs/components/icon/maps/icon-name-to-svg.map.ts

@@ -6,6 +6,7 @@ import {
   faCheck,
   faChevronDown,
   faChevronLeft,
+  faChevronUp,
   faClockRotateLeft,
   faCloudUploadAlt,
   faEye,
@@ -14,9 +15,11 @@ import {
   faListUl,
   faLocationDot,
   faMap,
+  faPen,
   faPlus,
   faRightFromBracket,
   faStar,
+  faTrashCan,
   faTruckPickup,
   faUserPen,
   faUsers,
@@ -32,6 +35,8 @@ const iconNameToSvg: Record<ValueOf<typeof IconName>, IconDefinition> = {
   [IconName.CARET_DOWN]: faCaretDown,
   [IconName.CHEVRON_DOWN]: faChevronDown,
   [IconName.CHEVRON_LEFT]: faChevronLeft,
+  [IconName.CHEVRON_UP]: faChevronUp,
+  [IconName.EDIT]: faPen,
   [IconName.GEAR]: faGear,
   [IconName.STAR]: faStar,
   [IconName.LOCATION_DOT]: faLocationDot,
@@ -45,6 +50,7 @@ const iconNameToSvg: Record<ValueOf<typeof IconName>, IconDefinition> = {
   [IconName.CLOCK_ROTATE_LEFT]: faClockRotateLeft,
   [IconName.USER_PEN]: faUserPen,
   [IconName.RIGHT_FROM_BRACKET]: faRightFromBracket,
+  [IconName.TRASH]: faTrashCan,
   [IconName.TRUCK]: faTruckPickup,
   [IconName.USERS]: faUsers,
   [IconName.XMARK]: faXmark,

frontend/src/libs/components/pagination/pagination.tsx

@@ -1,6 +1,5 @@
 import { type SingleValue } from 'react-select';
 
-import { getValidClassNames } from '~/libs/helpers/helpers.js';
 import { useCallback } from '~/libs/hooks/hooks.js';
 import { type SelectOption } from '~/libs/types/select-option.type.js';
 
@@ -81,15 +80,13 @@ const Pagination: React.FC<Properties> = ({
       const buttons: JSX.Element[] = [];
 
       for (let index = startIndex; index <= endIndex; index++) {
-        const buttonClass = getValidClassNames(styles.btn, {
-          [styles.active]: index === pageIndex,
-        });
         buttons.push(
           <Button
-            className={buttonClass}
-            onClick={handlePageClick}
             key={index}
+            className={styles.btn}
             label={`${convertToNumber(index)}`}
+            variant={index === pageIndex ? 'outlined' : 'text'}
+            onClick={handlePageClick}
           ></Button>,
         );
       }
@@ -122,17 +119,41 @@ const Pagination: React.FC<Properties> = ({
     <div className={styles.container}>
       <div className={styles.pagination}>
         <Button
+          className={styles['text-btn']}
           label="Prev"
           size="sm"
+          variant="text"
           onClick={handlePreviousClick}
           isDisabled={isFirstPage}
         />
-        {isHiddenFirstPage ? <div className={styles.dots}>...</div> : null}
+        {isHiddenFirstPage && (
+          <>
+            <Button
+              className={styles.btn}
+              label="1"
+              variant="text"
+              onClick={handlePageClick}
+            ></Button>
+            <div className={styles.dots}>...</div>
+          </>
+        )}
         {showButtons()}
-        {isHiddenLastPage ? <div className={styles.dots}>...</div> : null}
+        {isHiddenLastPage && (
+          <>
+            <div className={styles.dots}>...</div>
+            <Button
+              className={styles.btn}
+              label={pageCount}
+              variant="text"
+              onClick={handlePageClick}
+            ></Button>
+          </>
+        )}
         <Button
+          className={styles['text-btn']}
           label="Next"
           size="sm"
+          variant="text"
           onClick={handleNextClick}
           isDisabled={isLastPage}
         />
@@ -143,6 +164,7 @@ const Pagination: React.FC<Properties> = ({
           <Dropdown
             options={createOptions([5, 10, 20, 50, 100])}
             defaultValue={createOption(pageSize)}
+            isCustomValueContainer
             onChange={handleChangePageSize}
           />
         </div>

frontend/src/libs/components/pagination/styles.module.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 20px;
+  gap: 25px;
   margin-top: 20px;
 }
 
@@ -14,27 +14,62 @@
 }
 
 .dots {
+  display: flex;
+  align-items: center;
   margin: 0 5px;
-  color: $red-dark;
+  color: $blue-extra-dark;
   font-size: 22px;
+  cursor: default;
+  user-select: none;
+}
+
+.btn,
+.text-btn {
+  color: $blue-extra-dark;
 }
 
 .btn {
   min-width: 22px;
   margin: 1px;
-  padding: 5px;
-  color: $red-dark;
-  background-color: $white;
-  border: 1px solid $red-dark;
+  padding: 8px 12px;
+  border-width: 1px;
+  border-color: $blue-extra-dark;
+
+  &:hover {
+    color: $blue-extra-dark;
+    border-color: $blue-extra-dark;
+  }
+
+  &:focus {
+    color: $blue-extra-dark;
+    border-color: $blue-extra-dark;
+  }
 }
 
-.active {
-  color: white;
-  background-color: $red;
+.text-btn {
+  margin-inline: 12px;
+  text-transform: capitalize;
+
+  &:hover,
+  &:focus {
+    color: $blue-extra-dark;
+  }
+
+  &:disabled {
+    color: $grey;
+
+    &:hover {
+      color: $grey;
+    }
+  }
 }
 
 .size {
-  color: $red-dark;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: $white-blue;
+  font-weight: 700;
 }
 
 .select {
@@ -44,3 +79,10 @@
   border-radius: 4px;
   outline: none;
 }
+
+.dropdown {
+  padding-inline: 5px;
+  text-align: center;
+  border: 1px solid $grey-light;
+  border-radius: 8px;
+}

frontend/src/libs/components/table/libs/components/components.ts

@@ -0,0 +1,2 @@
+export { Tbody } from './tbody.js';
+export { Thead } from './thead.js';