UI changes

src/components/Navbar/styles.tsx

@@ -48,7 +48,6 @@ export const useNavbarStyles = createStyles((theme) => {
 			'& input': {
 				border: `${sizing.px} ${colors.gray[2]} solid`,
 				borderRadius: defaultRadius,
-				padding: 24,
 			},
 			'.mantine-Select-item[data-selected="true"]': {
 				background: pColor,
@@ -61,7 +60,7 @@ export const useNavbarStyles = createStyles((theme) => {
 
 		}
 		,lowerContainer: {
-			marginBottom:"84px"
+			marginBottom:"50px"
 		},
 		actionBtn: {
 			paddingLeft:"24px", 
@@ -76,7 +75,6 @@ export const useNavbarStyles = createStyles((theme) => {
 			paddingLeft:"24px", 
 			height:"56px",
 			color: theme.colors.gray[6],
-			background: theme.colors.gray[0],	
 		},
 
 		helpTitle: {

src/constants/theme.ts

@@ -1,3 +1,3 @@
-export const HEADER_HEIGHT = 50;
+export const HEADER_HEIGHT = 70;
 export const NAVBAR_WIDTH = 200;
 export const APP_MIN_WIDTH = 650;

src/pages/Logs/Column.tsx

@@ -64,7 +64,9 @@ const Column: FC<Column> = (props) => {
 
 	const filterActive = useMemo(() => Boolean(appliedFilter(columnName)?.length), [selectedFilters]);
 	const canApply = useMemo(() => !compare(selectedFilters, appliedFilter(columnName)), [selectedFilters]);
-
+	function capitalizeFirstLetter(word:string) {
+		return word.charAt(0).toUpperCase() + word.slice(1);
+	}
 	const { classes, cx } = useTableColumnStyle();
 	const { labelBtn, applyBtn, labelIcon, labelIconActive, searchInputStyle } = classes;
 
@@ -73,7 +75,7 @@ const Column: FC<Column> = (props) => {
 			<Popover position="bottom" withArrow withinPortal shadow="md" zIndex={1} onOpen={onOpen}>
 				<Popover.Target>
 					<UnstyledButton className={labelBtn}>
-						<span className="label">{columnName}</span>
+						<span className="label">{capitalizeFirstLetter(columnName)}</span>
 						<IconFilter
 							stroke={filterActive ? 3 : 1.8}
 							size={px('1rem')}
@@ -158,6 +160,8 @@ const CheckboxRow: FC<CheckboxRowProps> = (props) => {
 			style={{
 				whiteSpace: 'pre-wrap',
 				maxWidth: 250,
+				color:"black",
+				backgroundColor:"white"
 			}}>
 			<div onMouseOver={open} onMouseOut={close}>
 				<Checkbox value={value} label={parseLogData(label, columnName)} className={checkBoxStyle} />

src/pages/Logs/styles.tsx

@@ -258,6 +258,7 @@ export const useTableColumnStyle = createStyles((theme) => {
 
 		labelIcon: {
 			color: colors.gray[5],
+			marginLeft:spacing.xs
 		},
 
 		labelIconActive: {