From ac4d35c6c09a19e9e9167bd33e62ec7631b96e60 Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Wed, 16 Nov 2022 19:08:09 +0530
Subject: [PATCH] chore: alignment is fixed in header (#1723)

* chore: alignment is fixed
---
 .../src/container/ConfigDropdown/index.tsx    |  2 +-
 frontend/src/container/Header/index.tsx       | 21 +++++++++++++------
 frontend/src/container/Header/styles.ts       |  5 +++++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/frontend/src/container/ConfigDropdown/index.tsx b/frontend/src/container/ConfigDropdown/index.tsx
index 65993fc629..12992bf1a6 100644
--- a/frontend/src/container/ConfigDropdown/index.tsx
+++ b/frontend/src/container/ConfigDropdown/index.tsx
@@ -52,7 +52,7 @@ function DynamicConfigDropdown({
 		>
 			<Space align="center">
 				<Icon
-					style={{ fontSize: 26, color: 'white', paddingTop: 20, cursor: 'pointer' }}
+					style={{ fontSize: 26, color: 'white', paddingTop: 26, cursor: 'pointer' }}
 				/>
 				<DropDownIcon style={{ color: 'white' }} />
 			</Space>
diff --git a/frontend/src/container/Header/index.tsx b/frontend/src/container/Header/index.tsx
index 4f8bbca048..5deaa07bd2 100644
--- a/frontend/src/container/Header/index.tsx
+++ b/frontend/src/container/Header/index.tsx
@@ -29,7 +29,12 @@ import AppReducer from 'types/reducer/app';
 import CurrentOrganization from './CurrentOrganization';
 import ManageLicense from './ManageLicense';
 import SignedInAS from './SignedInAs';
-import { Container, LogoutContainer, ToggleButton } from './styles';
+import {
+	Container,
+	IconContainer,
+	LogoutContainer,
+	ToggleButton,
+} from './styles';
 
 function HeaderContainer({ toggleDarkMode }: Props): JSX.Element {
 	const { isDarkMode, user, currentVersion } = useSelector<AppState, AppReducer>(
@@ -98,10 +103,12 @@ function HeaderContainer({ toggleDarkMode }: Props): JSX.Element {
 		<Layout.Header>
 			<Container>
 				<NavLink to={ROUTES.APPLICATION}>
-					<img src={`/signoz.svg?currentVersion=${currentVersion}`} alt="SigNoz" />
-					<Typography.Title style={{ margin: 0, color: '#DBDBDB' }} level={4}>
-						SigNoz
-					</Typography.Title>
+					<Space align="center" direction="horizontal">
+						<img src={`/signoz.svg?currentVersion=${currentVersion}`} alt="SigNoz" />
+						<Typography.Title style={{ margin: 0, color: '#DBDBDB' }} level={4}>
+							SigNoz
+						</Typography.Title>
+					</Space>
 				</NavLink>
 
 				<Space style={{ height: '100%' }} align="center">
@@ -123,7 +130,9 @@ function HeaderContainer({ toggleDarkMode }: Props): JSX.Element {
 					>
 						<Space>
 							<Avatar shape="circle">{user?.name[0]}</Avatar>
-							{!isUserDropDownOpen ? <CaretDownFilled /> : <CaretUpFilled />}
+							<IconContainer>
+								{!isUserDropDownOpen ? <CaretDownFilled /> : <CaretUpFilled />}
+							</IconContainer>
 						</Space>
 					</Dropdown>
 				</Space>
diff --git a/frontend/src/container/Header/styles.ts b/frontend/src/container/Header/styles.ts
index 602634f356..01b90559cc 100644
--- a/frontend/src/container/Header/styles.ts
+++ b/frontend/src/container/Header/styles.ts
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 export const Container = styled.div`
 	display: flex;
 	justify-content: space-between;
+	height: 100%;
 `;
 
 export const AvatarContainer = styled.div`
@@ -61,3 +62,7 @@ export const ToggleButton = styled(Switch)<DarkModeProps>`
 		font-size: 1rem !important;
 	}
 `;
+
+export const IconContainer = styled.div`
+	color: white;
+`;