From 55111a5dca8dfe5934ab0d6d18aa1104437d0362 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Fri, 17 Jan 2025 10:02:34 +0300 Subject: [PATCH 1/2] Shared: Components: CampaignsBanner: rewritten to scss --- ....styled.ts => CampaignsBanner.module.scss} | 79 ++++++++------- .../campaigns-banner/CampaignsBanner.tsx | 95 +++++++++++-------- 2 files changed, 96 insertions(+), 78 deletions(-) rename packages/shared/components/campaigns-banner/{CampaignsBanner.styled.ts => CampaignsBanner.module.scss} (70%) diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts b/packages/shared/components/campaigns-banner/CampaignsBanner.module.scss similarity index 70% rename from packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts rename to packages/shared/components/campaigns-banner/CampaignsBanner.module.scss index 4c07d0fff28..476b1348d6d 100644 --- a/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts +++ b/packages/shared/components/campaigns-banner/CampaignsBanner.module.scss @@ -24,15 +24,11 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import styled from "styled-components"; -import { globalColors } from "../../themes"; -import { tablet, mobile } from "../../utils/device"; -import { injectDefaultTheme } from "../../utils"; - -const BannerWrapper = styled.div.attrs(injectDefaultTheme)<{ - background?: string; - borderColor?: string; -}>` +@import "../../styles/variables/index.scss"; +@import "../../styles/variables/_colors.scss"; +@import "../../styles/_mixins.scss"; + +.wrapper { overflow: hidden; position: relative; min-height: 142px; @@ -40,40 +36,41 @@ const BannerWrapper = styled.div.attrs(injectDefaultTheme)<{ &::before { content: ""; - background-image: url(${(props) => props.background}); + background-image: var(--campaign-background); background-size: 100%; background-repeat: no-repeat; background-position: 0% 100%; - position: absolute; z-index: -1000; inset: 0px; - border-radius: 4px; - border: 1px solid ${(props) => props.borderColor}; + border: 1px solid var(--campaign-border-color); + } - ${({ theme }) => - theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"} + [dir="rtl"] & { + &::before { + transform: scaleX(-1); + } } - @media ${mobile} { + @include mobile { min-height: 132px; max-height: 132px; } - .close-icon { + .closeIcon { + cursor: pointer; position: absolute; inset-inline-end: 14px; - top: 18px; path { - fill: ${globalColors.gray}; + fill: $gray; } } -`; +} -const BannerContent = styled.div` +.content { padding: 16px 14px; display: flex; flex-direction: column; @@ -83,49 +80,53 @@ const BannerContent = styled.div` max-width: 167px; } - @media ${tablet} { + @include tablet { .header { max-width: 180px; } } - @media ${mobile} { + @include mobile { .header { max-width: 75%; } - max-width: 75%; } -`; +} -const BannerButton = styled.button<{ - buttonColor?: string; - buttonTextColor?: string; -}>` +.button { cursor: pointer; width: fit-content; padding: 4px 12px; border-radius: 32px; border: none; - background: ${(props) => props.buttonColor}; font-size: 12px; font-weight: 700; text-align: center; - color: ${(props) => props.buttonTextColor}; -`; + background: var(--campaign-button-background-color); + color: var(--campaign-button-color); -const BannerIcon = styled.div` + svg { + width: 16px; + height: 16px; + } +} + +.icon { width: 100px; height: 80px; z-index: -1; position: absolute; bottom: 1px; - inset-inline-end: 1px; - ${({ theme }) => - theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"} - @media ${mobile} { + [dir="rtl"] & { + .icon { + transform: scaleX(-1); + } + } + + @include mobile { width: 140px; height: 112px; @@ -134,6 +135,4 @@ const BannerIcon = styled.div` height: 112px; } } -`; - -export { BannerWrapper, BannerContent, BannerButton, BannerIcon }; +} diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx index f8cb0f7e553..7660482af8e 100644 --- a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx +++ b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx @@ -28,17 +28,13 @@ import CrossReactSvg from "PUBLIC_DIR/images/icons/12/cross.react.svg?url"; import React from "react"; import { ReactSVG } from "react-svg"; +import classNames from "classnames"; import { Text as TextComponent } from "../text"; -import { Link as LinkComponent } from "../link"; +import { Link as LinkComponent, LinkType } from "../link"; import { IconButton } from "../icon-button"; -import { - BannerWrapper, - BannerContent, - BannerButton, - BannerIcon, -} from "./CampaignsBanner.styled"; +import styles from "./CampaignsBanner.module.scss"; import { CampaignsBannerProps } from "./CampaignsBanner.types"; import useFitText from "./useFitText"; @@ -66,20 +62,30 @@ const CampaignsBanner = (props: CampaignsBannerProps) => { body?.fontSize, ); + const wrapperStyle = { + "--campaign-background": `url(${campaignBackground})`, + "--campaign-border-color": borderColor, + } as React.CSSProperties; + + const buttonStyle = { + "--campaign-button-background-color": action?.backgroundColor, + "--campaign-button-color": action?.color, + } as React.CSSProperties; + return ( - - +
{hasTitle ? ( {Header} @@ -88,53 +94,66 @@ const CampaignsBanner = (props: CampaignsBannerProps) => {
{hasBodyText ? ( {SubHeader} ) : null} {hasText ? ( {Text} ) : null}
{isButton ? ( - onAction(action?.type, Link)} + ) : ( onAction(action?.type, Link)} + color={action?.color ?? globalColors.black} + type={LinkType.action} isHovered + onClick={() => onAction(action?.type, Link)} > - {ButtonLabel} + + {ButtonLabel} + )} - + + {campaignIcon ? ( + + ) : null} +
- - - - + ); }; From d92f5487249ae681edabdab2a8fbab8d8c39d7fc Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 20 Jan 2025 10:09:47 +0300 Subject: [PATCH 2/2] Shared: Components: CampaignsBanner: delete useless --- packages/shared/components/campaigns-banner/CampaignsBanner.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx index 7660482af8e..8241a7b2373 100644 --- a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx +++ b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx @@ -28,7 +28,6 @@ import CrossReactSvg from "PUBLIC_DIR/images/icons/12/cross.react.svg?url"; import React from "react"; import { ReactSVG } from "react-svg"; -import classNames from "classnames"; import { Text as TextComponent } from "../text"; import { Link as LinkComponent, LinkType } from "../link";