admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(front): improve logo component (#8720)

Browse Source
This commit is contained in:
Antoine Moreaux
2024-11-27 19:26:45 +01:00
committed by GitHub
parent 3ad1113173
commit 2fab2266d5
3 changed files with 43 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/twenty-front/src/modules/auth/components/Logo.tsx
View File

@ -3,65 +3,62 @@ import styled from '@emotion/styled';
import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
type LogoProps = {
workspaceLogo?: string | null;
primaryLogo?: string | null;
secondaryLogo?: string | null;
};
const StyledContainer = styled.div`
height: 48px;
height: ${({ theme }) => theme.spacing(12)};
margin-bottom: ${({ theme }) => theme.spacing(4)};
margin-top: ${({ theme }) => theme.spacing(4)};
position: relative;
width: 48px;
width: ${({ theme }) => theme.spacing(12)};
`;
const StyledTwentyLogo = styled.img`
const StyledSecondaryLogo = styled.img`
border-radius: ${({ theme }) => theme.border.radius.xs};
height: 24px;
width: 24px;
height: ${({ theme }) => theme.spacing(6)};
width: ${({ theme }) => theme.spacing(6)};
`;
const StyledTwentyLogoContainer = styled.div`
const StyledSecondaryLogoContainer = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.primary};
border-radius: ${({ theme }) => theme.border.radius.sm};
bottom: ${({ theme }) => `-${theme.spacing(3)}`};
display: flex;
height: 28px;
height: ${({ theme }) => theme.spacing(7)};
justify-content: center;
position: absolute;
right: ${({ theme }) => `-${theme.spacing(3)}`};
width: 28px;
width: ${({ theme }) => theme.spacing(7)};
`;
type StyledMainLogoProps = {
logo?: string | null;
};
const StyledMainLogo = styled.div<StyledMainLogoProps>`
background: url(${(props) => props.logo});
const StyledPrimaryLogo = styled.div<{ src: string }>`
background: url(${(props) => props.src});
background-size: cover;
height: 100%;
width: 100%;
`;
export const Logo = ({ workspaceLogo }: LogoProps) => {
if (!workspaceLogo) {
return (
<StyledContainer>
<StyledMainLogo logo="/icons/android/android-launchericon-192-192.png" />
</StyledContainer>
);
}
export const Logo = (props: LogoProps) => {
const defaultPrimaryLogoUrl = `${window.location.origin}/icons/android/android-launchericon-192-192.png`;
const primaryLogoUrl = getImageAbsoluteURI(
props.primaryLogo ?? defaultPrimaryLogoUrl,
);
const secondaryLogoUrl = getImageAbsoluteURI(props.secondaryLogo);
return (
<StyledContainer>
<StyledMainLogo logo={getImageAbsoluteURI(workspaceLogo)} />
<StyledTwentyLogoContainer>
<StyledTwentyLogo src="/icons/android/android-launchericon-192-192.png" />
</StyledTwentyLogoContainer>
<StyledPrimaryLogo src={primaryLogoUrl} />
{secondaryLogoUrl && (
<StyledSecondaryLogoContainer>
<StyledSecondaryLogo src={secondaryLogoUrl} />
</StyledSecondaryLogoContainer>
)}
</StyledContainer>
);
};