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

fix: remove blank space below Object Settings cover image (#2285)

Browse Source 
Fixes #2280
This commit is contained in:
Thaïs
2023-10-30 19:22:23 +01:00
committed by GitHub
parent d30ed496e9
commit 3cdbe4f16e
3 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
front/src/modules/settings/data-model/assets/build-your-business-logic.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 119 KiB

BIN
front/src/modules/settings/data-model/assets/cover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

23
front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx
View File

@ -7,21 +7,26 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { AnimatedFadeOut } from '@/ui/utilities/animation/components/AnimatedFadeOut'; import { AnimatedFadeOut } from '@/ui/utilities/animation/components/AnimatedFadeOut';
import { cookieStorage } from '~/utils/cookie-storage'; import { cookieStorage } from '~/utils/cookie-storage';
import CoverImage from '../assets/build-your-business-logic.jpg'; import CoverImage from '../assets/cover.png';
const StyledCoverImageContainer = styled.div` const StyledCoverImageContainer = styled.div`
align-items: center;
background-image: url(${CoverImage.toString()});
background-size: cover;
border: 1px solid ${({ theme }) => theme.border.color.medium}; border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md}; border-radius: ${({ theme }) => theme.border.radius.md};
min-height: 158px; box-sizing: border-box;
overflow: hidden; display: flex;
height: 153px;
justify-content: center;
position: relative; position: relative;
width: 100%;
`; `;
const StyledCoverImage = styled.img` const StyledTitle = styled.span`
height: 100%; color: ${({ theme }) => theme.font.color.tertiary};
object-fit: cover; font-size: ${({ theme }) => theme.font.size.sm};
width: 100%; font-weight: ${({ theme }) => theme.font.weight.medium};
padding-top: ${({ theme }) => theme.spacing(5)};
`; `;
const StyledLighIconButton = styled(LightIconButton)` const StyledLighIconButton = styled(LightIconButton)`
@ -43,7 +48,7 @@ export const SettingsObjectCoverImage = () => {
marginBottom={theme.spacing(8)} marginBottom={theme.spacing(8)}
> >
<StyledCoverImageContainer> <StyledCoverImageContainer>
<StyledCoverImage src={CoverImage} alt="Build your business logic" /> <StyledTitle>Build your business logic</StyledTitle>
<StyledLighIconButton <StyledLighIconButton
Icon={IconX} Icon={IconX}
accent="tertiary" accent="tertiary"