refactor(auth, layouts): enhance UI components for improved aesthetics and usability

- Updated SignIn and Profile components with new background styles and layout adjustments for a more modern look.
- Refined button styles in GoogleSigninButton and SigninWithPassword for better user interaction feedback.
- Enhanced InputGroup and Select components with improved styling and error handling for a more consistent user experience.
- Adjusted Sidebar and Header components for better responsiveness and visual appeal.
- Implemented spotlight effect in UserInfo dropdown for a more engaging user interface.

src/components/Tables/notification-history/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { EyeIcon } from "@/assets/icons";
 import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
-import { ShowcaseSection } from "@/components/Layouts/showcase-section";
 import IsVisible from "@/components/ui/IsVisible";
 import Pagination from "@/components/ui/pagination";
 import Status from "@/components/ui/Status";
@@ -15,11 +14,16 @@ import {
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
-import { getPaginatedRowNumber, truncateString, unixToDate } from "@/utils/shared";
+import {
+  getPaginatedRowNumber,
+  truncateString,
+  unixToDate,
+} from "@/utils/shared";
 import { Tooltip } from "react-tooltip";
 
 import Boolean from "@/components/ui/Boolean";
 import ListHeader from "@/components/ui/ListHeader";
+import ListWrapper from "@/components/ui/ListWrapper";
 import Modal from "@/components/ui/modal";
 import NotificationHistoryListFilters from "./NotificationHistoryListFilters";
 import useNotificationHistoryTablePresenter from "./useNotificationHistoryTablePresenter";
@@ -46,7 +50,7 @@ const NotificationHistoryTable = () => {
 
   return (
     <>
-      <ShowcaseSection className="flex flex-col">
+      <ListWrapper>
         <ListHeader
           createButtonText="Create notification"
           onFilter={() => setIsFilterModalOpen(true)}
@@ -55,56 +59,57 @@ const NotificationHistoryTable = () => {
           <TableHeader>
             <TableRow>
               {columns.map((column) => (
-                <TableHead colSpan={100} key={column}>
+                <TableHead key={column}>
                   {column}
                 </TableHead>
               ))}
             </TableRow>
           </TableHeader>
-          {isLoading && <TableSkeleton column={columns.length} />}
+          {isLoading && (
+            <TableSkeleton column={columns.length} cellColSpan={1} />
+          )}
           <TableBody>
             <EmptyListWrapper
               list={notificationHistory ?? []}
               columns={columns}
               emptyMessage="No notifications were found"
-              isLoading={isLoading}
             >
               {(notificationHistory ?? []).map((item, index) => (
                 <TableRow key={item.id}>
-                  <TableCell colSpan={100}>
+                  <TableCell>
                     {getPaginatedRowNumber({
                       index,
                       page: metadata?.page,
                       limit: metadata?.limit,
                     })}
                   </TableCell>
-                  <TableCell colSpan={100}>{item.title}</TableCell>
-                  <TableCell colSpan={100}>{item.event_type}</TableCell>
-                  <TableCell colSpan={100}>
+                  <TableCell>{item.title}</TableCell>
+                  <TableCell>{item.event_type}</TableCell>
+                  <TableCell>
                     {unixToDate({
                       hasTime: true,
                       unix: item.created_at,
                     })}
                   </TableCell>
-                  <TableCell colSpan={100}>
+                  <TableCell>
                     {item.recipient?.full_name}
                   </TableCell>
-                  <TableCell colSpan={100} className="truncate">
+                  <TableCell className="truncate">
                     {truncateString(item.message, 20, 20)}
                   </TableCell>
-                  <TableCell className="capitalize" colSpan={100}>
+                  <TableCell className="capitalize">
                     {item.priority}
                   </TableCell>
-                  <TableCell className="capitalize" colSpan={100}>
+                  <TableCell className="capitalize">
                     {item.type}
                   </TableCell>
-                  <TableCell className="capitalize" colSpan={100}>
+                  <TableCell className="capitalize">
                     <Boolean value={item.seen} />
                   </TableCell>
-                  <TableCell colSpan={100}>
+                  <TableCell>
                     <Status status={item.status}>{item.status}</Status>
                   </TableCell>
-                  <TableCell colSpan={100}>
+                  <TableCell>
                     <button
                       data-tooltip-id="details"
                       data-tooltip-content="Details"
@@ -131,7 +136,7 @@ const NotificationHistoryTable = () => {
             currentPage={metadata?.page ? metadata?.page - 1 : 0}
             totalPages={metadata?.pages ?? 1}
             onPageChange={(e) => {
-              setParams((currentParams) => ({
+              setParams((currentParams: Record<string, any>) => ({
                 ...currentParams,
                 offset: e.selected * (metadata?.limit ?? 10),
                 limit: metadata?.limit ?? 10,
@@ -139,7 +144,7 @@ const NotificationHistoryTable = () => {
             }}
           />
         </IsVisible>
-      </ShowcaseSection>
+      </ListWrapper>
       <Modal
         isOpen={isFilterModalOpen}
         onClose={() => setIsFilterModalOpen(false)}