External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-17 15:36:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: alignment is fixed in header (#1723)

Browse Source 
* chore: alignment is fixed
This commit is contained in:
Palash Gupta 2022-11-16 19:08:09 +05:30 committed by GitHub
parent ad34c6e25f
commit ac4d35c6c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/container/ConfigDropdown/index.tsx
View File

@ -52,7 +52,7 @@ function DynamicConfigDropdown({
> >
<Space align="center"> <Space align="center">
<Icon <Icon
style={{ fontSize: 26, color: 'white', paddingTop: 20, cursor: 'pointer' }} style={{ fontSize: 26, color: 'white', paddingTop: 26, cursor: 'pointer' }}
/> />
<DropDownIcon style={{ color: 'white' }} /> <DropDownIcon style={{ color: 'white' }} />
</Space> </Space>

21
frontend/src/container/Header/index.tsx
View File

@ -29,7 +29,12 @@ import AppReducer from 'types/reducer/app';
import CurrentOrganization from './CurrentOrganization'; import CurrentOrganization from './CurrentOrganization';
import ManageLicense from './ManageLicense'; import ManageLicense from './ManageLicense';
import SignedInAS from './SignedInAs'; import SignedInAS from './SignedInAs';
import { Container, LogoutContainer, ToggleButton } from './styles'; import {
Container,
IconContainer,
LogoutContainer,
ToggleButton,
} from './styles';
function HeaderContainer({ toggleDarkMode }: Props): JSX.Element { function HeaderContainer({ toggleDarkMode }: Props): JSX.Element {
const { isDarkMode, user, currentVersion } = useSelector<AppState, AppReducer>( const { isDarkMode, user, currentVersion } = useSelector<AppState, AppReducer>(
@ -98,10 +103,12 @@ function HeaderContainer({ toggleDarkMode }: Props): JSX.Element {
<Layout.Header> <Layout.Header>
<Container> <Container>
<NavLink to={ROUTES.APPLICATION}> <NavLink to={ROUTES.APPLICATION}>
<img src={`/signoz.svg?currentVersion=${currentVersion}`} alt="SigNoz" /> <Space align="center" direction="horizontal">
<Typography.Title style={{ margin: 0, color: '#DBDBDB' }} level={4}> <img src={`/signoz.svg?currentVersion=${currentVersion}`} alt="SigNoz" />
SigNoz <Typography.Title style={{ margin: 0, color: '#DBDBDB' }} level={4}>
</Typography.Title> SigNoz
</Typography.Title>
</Space>
</NavLink> </NavLink>
<Space style={{ height: '100%' }} align="center"> <Space style={{ height: '100%' }} align="center">
@ -123,7 +130,9 @@ function HeaderContainer({ toggleDarkMode }: Props): JSX.Element {
> >
<Space> <Space>
<Avatar shape="circle">{user?.name[0]}</Avatar> <Avatar shape="circle">{user?.name[0]}</Avatar>
{!isUserDropDownOpen ? <CaretDownFilled /> : <CaretUpFilled />} <IconContainer>
{!isUserDropDownOpen ? <CaretDownFilled /> : <CaretUpFilled />}
</IconContainer>
</Space> </Space>
</Dropdown> </Dropdown>
</Space> </Space>

5
frontend/src/container/Header/styles.ts
View File

@ -4,6 +4,7 @@ import styled from 'styled-components';
export const Container = styled.div` export const Container = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 100%;
`; `;
export const AvatarContainer = styled.div` export const AvatarContainer = styled.div`
@ -61,3 +62,7 @@ export const ToggleButton = styled(Switch)<DarkModeProps>`
font-size: 1rem !important; font-size: 1rem !important;
} }
`; `;
export const IconContainer = styled.div`
color: white;
`;