th-314: * driver and truck tables (#318)

Co-authored-by: Alina Kupchyk <[email protected]>

Author: AlexVlaso

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

@@ -107,6 +107,10 @@
   cursor: pointer;
 }
 
+.spinnerWrapper {
+  height: 40vh;
+}
+
 @media (hover: hover) {
   .resizer {
     opacity: 0;

frontend/src/libs/components/table/table.tsx

@@ -27,7 +27,7 @@ type Properties<T> = {
   isLoading?: boolean;
   isTableEditable?: boolean;
   columns: ColumnDef<T>[];
-  emptyTableMessage?: JSX.Element;
+  emptyTableMessage?: string;
   pageSize: number;
   totalRow: number;
   pageIndex: number;
@@ -110,7 +110,9 @@ const Table = <T,>({
   return (
     <div className={styles.container}>
       {isLoading ? (
-        <Spinner />
+        <div className={styles.spinnerWrapper}>
+          <Spinner />
+        </div>
       ) : (
         <div className={styles.wrapper}>
           <table

frontend/src/pages/dashboard/components/tables/drivers-table/driver-table.tsx

@@ -59,12 +59,7 @@ const DriverTable: React.FC = () => {
     [dispatch, searchParameters, handleToggle],
   );
 
-  const message = (
-    <div>
-      There are no data here yet. Please,{' '}
-      <span className={styles.red}>add new driver</span>
-    </div>
-  );
+  const message = 'There are no data here yet. Please, add a driver';
 
   return (
     <div className={styles.container}>
@@ -73,7 +68,7 @@ const DriverTable: React.FC = () => {
           Company Drivers
         </h2>
         <Button
-          label="Add a Driver"
+          label="Add Driver"
           className={styles.btn}
           onClick={handleToggle}
         />

frontend/src/pages/dashboard/components/tables/drivers-table/styles.module.scss

@@ -27,7 +27,3 @@
 .formWrapper {
   width: 448px;
 }
-
-.red {
-  color: $red;
-}

frontend/src/pages/dashboard/components/tables/trucks-table/styles.module.scss

@@ -21,6 +21,7 @@
 .title {
   color: $blue-extra-dark;
   text-align: center;
+  text-transform: uppercase;
 }
 
 .formWrapper {

frontend/src/pages/dashboard/components/tables/trucks-table/trucks-table.tsx

@@ -71,22 +71,17 @@ const TruckTable: React.FC = () => {
     [dispatch, searchParameters, handleToggle],
   );
 
-  const message = (
-    <div>
-      There are no data here yet. Please,{' '}
-      <span className={styles.red}>add new driver</span>
-    </div>
-  );
+  const message = 'There are no data here yet. Please, add a truck';
 
   return (
     <>
       <div className={styles.container}>
         <div className={styles.header}>
-          <h2 className={getValidClassNames('uppercase', styles.title)}>
+          <h2 className={getValidClassNames('h3', styles.title)}>
             Company Trucks
           </h2>
           <Button
-            label="Add a truck"
+            label="Add Truck"
             className={styles.btn}
             onClick={handleToggle}
           />