gitstart-app[bot]
1dfeba39eb
This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7532](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7532). --- ### Description Migrate: - Card - CardContent - CardFooter - CardHeader ### Demo Card in Storybook  ###### Fixes twentyhq/private-issues#86 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { Card, FloatingButton, IconEye } from 'twenty-ui';
|
|
|
|
import { SettingsPath } from '@/types/SettingsPath';
|
|
import DarkCoverImage from '../../assets/cover-dark.png';
|
|
import LightCoverImage from '../../assets/cover-light.png';
|
|
|
|
const StyledCoverImageContainer = styled(Card)`
|
|
align-items: center;
|
|
background-image: ${({ theme }) =>
|
|
theme.name === 'light'
|
|
? `url('${LightCoverImage.toString()}')`
|
|
: `url('${DarkCoverImage.toString()}')`};
|
|
background-size: cover;
|
|
border-radius: ${({ theme }) => theme.border.radius.md};
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
height: 153px;
|
|
justify-content: center;
|
|
position: relative;
|
|
margin-bottom: ${({ theme }) => theme.spacing(8)};
|
|
`;
|
|
|
|
const StyledButtonContainer = styled.div`
|
|
padding-top: ${({ theme }) => theme.spacing(5)};
|
|
`;
|
|
export const SettingsObjectCoverImage = () => {
|
|
return (
|
|
<StyledCoverImageContainer>
|
|
<StyledButtonContainer>
|
|
<FloatingButton
|
|
Icon={IconEye}
|
|
title="Visualize"
|
|
size="small"
|
|
to={'/settings/' + SettingsPath.ObjectOverview}
|
|
/>
|
|
</StyledButtonContainer>
|
|
</StyledCoverImageContainer>
|
|
);
|
|
};
|