From 57f809bafd5b9d2c939287e42a3d55bdd3ecaaa0 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Tue, 17 Dec 2024 12:12:57 +0000 Subject: [PATCH] chore: refactor detection of christmas theme --- .../modules/application/containers/App/styled.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts b/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts index 97bd38ee85..8c4428ea74 100644 --- a/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts +++ b/apps/cowswap-frontend/src/modules/application/containers/App/styled.ts @@ -14,6 +14,14 @@ import { CowSwapTheme, Media } from '@cowprotocol/ui' import * as CSS from 'csstype' import styled from 'styled-components/macro' +function isChristmasTheme(theme?: CowSwapTheme) { + if (!theme) { + return false + } + + return ['darkChristmas', 'lightChristmas'].includes(theme) +} + export const AppWrapper = styled.div>` display: flex; flex-flow: column; @@ -50,7 +58,7 @@ export const BodyWrapper = styled.div<{ customTheme?: CowSwapTheme }>` if (customTheme === 'darkHalloween') { backgroundImage = `url(${IMAGE_BACKGROUND_DARK_HALLOWEEN})` - } else if (customTheme === 'darkChristmas' || customTheme === 'lightChristmas') { + } else if (isChristmasTheme(customTheme)) { backgroundImage = theme.darkMode ? `url(${IMAGE_BACKGROUND_DARK_CHRISTMAS})` : `url(${IMAGE_BACKGROUND_LIGHT_CHRISTMAS})` @@ -75,7 +83,7 @@ export const BodyWrapper = styled.div<{ customTheme?: CowSwapTheme }>` `} ${({ customTheme, theme }) => - (customTheme === 'darkChristmas' || customTheme === 'lightChristmas') && + isChristmasTheme(customTheme) && ` background-image: url(${theme.darkMode ? IMAGE_BACKGROUND_DARK_CHRISTMAS_MEDIUM : IMAGE_BACKGROUND_LIGHT_CHRISTMAS_MEDIUM}); `} @@ -92,7 +100,7 @@ export const BodyWrapper = styled.div<{ customTheme?: CowSwapTheme }>` `} ${({ customTheme, theme }) => - (customTheme === 'darkChristmas' || customTheme === 'lightChristmas') && + isChristmasTheme(customTheme) && ` background-image: url(${theme.darkMode ? IMAGE_BACKGROUND_DARK_CHRISTMAS_SMALL : IMAGE_BACKGROUND_LIGHT_CHRISTMAS_SMALL}); `}