feat: Add the workspace logo on Twenty logo on the invited route (#1136)

* Add the workspace logo on Twenty logo on the invited route

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

* Add minor refactors

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

* Refactor the invite logic

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>
This commit is contained in:
gitstart-twenty
2023-08-10 06:00:07 +08:00
committed by GitHub
parent b49c857dc5
commit 7dcbc56e69
8 changed files with 163 additions and 12 deletions

View File

@ -1,6 +1,10 @@
import styled from '@emotion/styled';
type Props = React.ComponentProps<'div'>;
import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
type Props = React.ComponentProps<'div'> & {
workspaceLogo?: string | null;
};
const StyledLogo = styled.div`
height: 48px;
@ -12,12 +16,29 @@ const StyledLogo = styled.div`
width: 100%;
}
position: relative;
width: 48px;
`;
export function Logo(props: Props) {
type StyledWorkspaceLogoProps = {
logo?: string | null;
};
const StyledWorkspaceLogo = styled.div<StyledWorkspaceLogoProps>`
background: url(${(props) => props.logo});
background-size: cover;
border-radius: ${({ theme }) => theme.border.radius.xs};
bottom: ${({ theme }) => `-${theme.spacing(3)}`};
height: ${({ theme }) => theme.spacing(6)};
position: absolute;
right: ${({ theme }) => `-${theme.spacing(3)}`};
width: ${({ theme }) => theme.spacing(6)};
`;
export function Logo({ workspaceLogo, ...props }: Props) {
return (
<StyledLogo {...props}>
<StyledWorkspaceLogo logo={getImageAbsoluteURIOrBase64(workspaceLogo)} />
<img src="/icons/android/android-launchericon-192-192.png" alt="logo" />
</StyledLogo>
);