From 1cf97adf7d4d875c0a533bde4d22922044bcc435 Mon Sep 17 00:00:00 2001
From: Kartik Gupta <kartikgupta7267@gmail.com>
Date: Tue, 18 Jul 2023 16:31:28 +0530
Subject: [PATCH] UI changes

---
 src/components/Navbar/styles.tsx | 4 +---
 src/constants/theme.ts           | 2 +-
 src/pages/Logs/Column.tsx        | 8 ++++++--
 src/pages/Logs/styles.tsx        | 1 +
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Navbar/styles.tsx b/src/components/Navbar/styles.tsx
index 90115b2d..84fbcab1 100644
--- a/src/components/Navbar/styles.tsx
+++ b/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: {
diff --git a/src/constants/theme.ts b/src/constants/theme.ts
index 9276131b..f67c24e6 100644
--- a/src/constants/theme.ts
+++ b/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;
diff --git a/src/pages/Logs/Column.tsx b/src/pages/Logs/Column.tsx
index afe8afb0..fdfc004b 100644
--- a/src/pages/Logs/Column.tsx
+++ b/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} />
diff --git a/src/pages/Logs/styles.tsx b/src/pages/Logs/styles.tsx
index ca2b2b8b..93852be6 100644
--- a/src/pages/Logs/styles.tsx
+++ b/src/pages/Logs/styles.tsx
@@ -258,6 +258,7 @@ export const useTableColumnStyle = createStyles((theme) => {
 
 		labelIcon: {
 			color: colors.gray[5],
+			marginLeft:spacing.xs
 		},
 
 		labelIconActive: {