sort UI fixed and build working

src/components/ErrorBoundary/index.tsx

@@ -15,6 +15,7 @@ type ErrorHandlerFn = (error: Error, info: { componentStack: string }) => void;
 const ErrorBoundary: FC<ErrorBoundaryProps> = ({ children }) => {
 	const errorHandler: ErrorHandlerFn = (error, info) => {
 		// TODO: Send Errors to parseable maybe ?
+		console.error(error, info);
 	};
 
 	return (

src/components/Navbar/index.tsx

@@ -1,7 +1,6 @@
 import type { NavbarProps as MantineNavbarProps } from '@mantine/core';
 import { Navbar as MantineNavbar, NavLink, Select, Anchor, Card, Box, Modal, Text, Image } from '@mantine/core';
 import {
-	IconColumns,
 	IconZoomCode,
 	IconReportAnalytics,
 	IconCheck,
@@ -10,7 +9,6 @@ import {
 	IconHelpCircle,
 	IconLogout,
 	IconUser,
-	IconTransferIn,
 	IconBinaryTree2,
 	IconTableShortcut,
 	IconSettings,

src/pages/Logs/Column.tsx

@@ -1,7 +1,7 @@
 import { Log, SortOrder } from '@/@types/parseable/api/query';
-import { Box, Checkbox, Popover, Text, TextInput, Tooltip, UnstyledButton, px } from '@mantine/core';
+import { Box, Checkbox, Popover, TextInput, Tooltip, UnstyledButton, px } from '@mantine/core';
 import { type ChangeEvent, type FC, Fragment, useTransition, useRef, useCallback, useMemo } from 'react';
-import { IconFilter, IconSearch, IconSortAscending, IconSortDescending } from '@tabler/icons-react';
+import { IconDotsVertical, IconFilter, IconSearch, IconSortAscending, IconSortDescending } from '@tabler/icons-react';
 import useMountedState from '@/hooks/useMountedState';
 import { useTableColumnStyle } from './styles';
 import EmptyBox from '@/components/Empty';
@@ -15,51 +15,56 @@ import { useDisclosure } from '@mantine/hooks';
 type SortWidgetProps = {
 	setSortOrder: (order: SortOrder | null) => void;
 	fieldSortOrder: SortOrder | null;
-}
+};
 
 /**
  * Component that allows selecting sorting by a given field
  */
 const SortWidget: FC<SortWidgetProps> = (props) => {
 	const { setSortOrder, fieldSortOrder } = props;
 	const toggleAscending = () => {
-		setSortOrder(
-			fieldSortOrder === SortOrder.ASCENDING ?
-				null
-					:
-				SortOrder.ASCENDING
-		)
-	}
+		setSortOrder(fieldSortOrder === SortOrder.ASCENDING ? null : SortOrder.ASCENDING);
+	};
 	const toggleDescending = () => {
-		setSortOrder(
-			fieldSortOrder === SortOrder.DESCENDING ?
-				null
-					:
-				SortOrder.DESCENDING
-		)
-	}
+		setSortOrder(fieldSortOrder === SortOrder.DESCENDING ? null : SortOrder.DESCENDING);
+	};
+	const { classes } = useTableColumnStyle();
+	const { sortBtn ,sortBtnActive} = classes;
 
-	return <>
-		<IconSortAscending
-			cursor={'pointer'}
-			onClick={toggleAscending}
-			stroke={fieldSortOrder === SortOrder.ASCENDING ? 2 : 1}
-		/>
-		<IconSortDescending
-			cursor={'pointer'}
-			onClick={toggleDescending}
-			stroke={fieldSortOrder === SortOrder.DESCENDING ? 2 : 1}
-		/>
-	</>
-}
+	return (
+		<Box>
+			<Button
+				className={fieldSortOrder === SortOrder.ASCENDING ? sortBtnActive : sortBtn}
+				onClick={toggleAscending}
+				leftIcon={
+					<IconSortAscending
+					stroke={ fieldSortOrder === SortOrder.ASCENDING ? 2 : 1}
+					/>
+				}>
+				Sort by Ascending order
+			</Button>
+			<Button
+				className={fieldSortOrder === SortOrder.DESCENDING ? sortBtnActive : sortBtn}
+				onClick={toggleDescending}
+				leftIcon={
+					<IconSortDescending
+
+						stroke={fieldSortOrder === SortOrder.DESCENDING ? 2 : 1}
+					/>
+				}>
+				Sort by Descending order
+			</Button>
+		</Box>
+	);
+};
 
 type Column = {
 	columnName: string;
 	getColumnFilters: (columnName: string) => Log[number][] | null;
 	appliedFilter: (columnName: string) => string[];
 	applyFilter: (columnName: string, value: string[]) => void;
 	setSorting: (order: SortOrder | null) => void;
-	fieldSortOrder: SortOrder | null
+	fieldSortOrder: SortOrder | null;
 };
 
 const Column: FC<Column> = (props) => {
@@ -111,15 +116,15 @@ const Column: FC<Column> = (props) => {
 		return word.charAt(0).toUpperCase() + word.slice(1);
 	}
 	const { classes, cx } = useTableColumnStyle();
-	const { labelBtn, applyBtn, labelIcon, labelIconActive, searchInputStyle } = classes;
+	const { labelBtn, applyBtn, labelIcon, labelIconActive, searchInputStyle,filterText } = classes;
 
 	return (
 		<th>
 			<Popover position="bottom" withArrow withinPortal shadow="md" zIndex={1} onOpen={onOpen}>
 				<Popover.Target>
 					<UnstyledButton className={labelBtn}>
 						<span className="label">{capitalizeFirstLetter(columnName)}</span>
-						<IconFilter
+						<IconDotsVertical
 							stroke={filterActive ? 3 : 1.8}
 							size={px('1rem')}
 							className={cx(labelIcon, {
@@ -130,8 +135,9 @@ const Column: FC<Column> = (props) => {
 				</Popover.Target>
 				<Popover.Dropdown>
 					<Box>
-						<SortWidget setSortOrder={setSorting} fieldSortOrder={fieldSortOrder}/>
-						<Text mb="xs">Filter by values:</Text>
+						<SortWidget setSortOrder={setSorting} fieldSortOrder={fieldSortOrder} />
+						<Button className={filterText} leftIcon={<IconFilter stroke={1} />} >Filter by values:</Button>
+
 						<TextInput
 							className={searchInputStyle}
 							placeholder="Search"

src/pages/Logs/styles.tsx

@@ -234,10 +234,11 @@ export const useViewLogStyles = createStyles((theme) => {
 });
 
 export const useTableColumnStyle = createStyles((theme) => {
-	const { spacing, colors, fontSizes, other, primaryColor } = theme;
+	const { spacing, colors, fontSizes, other } = theme;
 	const { fontWeights, widths } = other;
 
-	const pColor = colors[primaryColor];
+	const pColor = colors.brandPrimary[0];
+	const sColor = colors.brandSecondary[0];
 
 	return {
 		labelBtn: {
@@ -263,12 +264,21 @@ export const useTableColumnStyle = createStyles((theme) => {
 		searchInputStyle: {
 			marginBottom: spacing.xs,
 		},
+		filterText:{
+			display: 'flex',
+			alignItems: 'center',
+			color: colors.gray[6],
+			padding: 0,
+			fontSize: fontSizes.sm,
+			fontWeight: fontWeights.normal,
+			cursor: 'default',
+		},
 
 		checkBoxStyle: {
 			height: 35,
 			paddingTop: spacing.xs,
 			paddingBottom: spacing.xxs,
-			fontWeight: fontWeights.medium,
+			fontWeight: fontWeights.normal,
 			overflow: 'hidden',
 			whiteSpace: 'nowrap',
 
@@ -277,18 +287,43 @@ export const useTableColumnStyle = createStyles((theme) => {
 			},
 
 			'&:hover': {
-				background: colors.gray[1],
+				background: colors.gray[0],
+				color: sColor,
 			},
 		},
 
 		applyBtn: {
 			marginTop: spacing.xs,
 			width: widths.full,
-			background: pColor[0],
+			background: pColor,
 
 			'&:hover': {
 				background: pColor[1],
 			},
 		},
+		sortBtn: {
+			display: 'flex',
+			alignItems: 'center',
+			color: colors.gray[6],
+			padding: 0,
+			fontSize: fontSizes.sm,
+			fontWeight: fontWeights.normal,
+			'&:hover': {
+				color: sColor,
+			},
+
+		},
+		sortBtnActive: {
+			display: 'flex',
+			alignItems: 'center',
+			color: pColor,
+			padding: 0,
+			fontSize: fontSizes.sm,
+			fontWeight: fontWeights.semibold,
+			'&:hover': {
+				color: sColor,
+			},
+
+		}
 	};
 });

src/pages/Stats/styles.tsx

@@ -1,23 +1,22 @@
-import { HEADER_HEIGHT, NAVBAR_WIDTH } from '@/constants/theme';
+import {  NAVBAR_WIDTH } from '@/constants/theme';
 import { createStyles } from '@mantine/core';
 export const useStatsStyles = createStyles((theme) => {
-	const { widths ,heights} = theme.other;
+	const { widths } = theme.other;
 	return {
 		container: {
+			flex: 1,
 			width: `calc(${widths.full} - ${NAVBAR_WIDTH}px)`,
+			// display: 'flex',
+			position: 'relative',
 		},
 	};
 });
 
 export const useStatusStyles = createStyles((theme) => {
-	const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme;
+	const { colors, other, spacing,fontSizes } = theme;
 
 	const { fontWeights, widths } = other;
 
-	const pColor = colors[primaryColor][2];
-
-	const defaultRadius = radius[theme.defaultRadius as string];
-
 	return {
 		container: {
 		},
@@ -61,7 +60,7 @@ export const useStatusStyles = createStyles((theme) => {
 	};
 });
 export const useStatCardStyles = createStyles((theme) => {
-	const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme;
+	const { colors, other, spacing, radius, primaryColor, fontSizes } = theme;
 
 	const { fontWeights, widths } = other;
 
@@ -107,13 +106,9 @@ export const useStatCardStyles = createStyles((theme) => {
 });
 
 export const useAlertsStyles = createStyles((theme) => {
-	const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme;
+	const { colors, other, spacing, fontSizes } = theme;
 
-	const { fontWeights, widths, heights ,sizing} = other;
-
-	const pColor = colors[primaryColor][2];
-
-	const defaultRadius = radius[theme.defaultRadius as string];
+	const { fontWeights, widths ,sizing} = other;
 
 	return {
 		container: {