twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-24 20:42:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: add dark mode version of Settings Object cover image (#3079)

Browse Source 
Fixes #3078
This commit is contained in:
Thaïs 2023-12-19 18:10:47 +01:00 committed by GitHub
parent 4637a92f09
commit 235b97fb56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
packages/twenty-front/src/modules/settings/data-model/assets/cover.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 154 KiB

8
packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx
View File

@ -8,11 +8,15 @@ import { Card } from '@/ui/layout/card/components/Card';
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/cover.png'; import DarkCoverImage from '../assets/cover-dark.png';
import LightCoverImage from '../assets/cover-light.png';
const StyledCoverImageContainer = styled(Card)` const StyledCoverImageContainer = styled(Card)`
align-items: center; align-items: center;
background-image: url(${CoverImage.toString()}); background-image: ${({ theme }) =>
theme.name === 'light'
? `url('${LightCoverImage.toString()}')`
: `url('${DarkCoverImage.toString()}')`};
background-size: cover; background-size: cover;
border-radius: ${({ theme }) => theme.border.radius.md}; border-radius: ${({ theme }) => theme.border.radius.md};
box-sizing: border-box; box-sizing: border-box;