From 445585be5047542306d922699b5805f87103bb30 Mon Sep 17 00:00:00 2001 From: Will Gardiner Date: Sun, 20 Oct 2024 15:30:48 -0700 Subject: [PATCH] APP-306: update colors for project pages (#2506) --- .eslintrc.js | 1 + .../atoms/CardRibbon/CardRibbon.tsx | 2 +- .../components/buttons/ContainedButton.tsx | 2 +- .../src/components/buttons/PrevNextButton.tsx | 2 +- .../cards/CredibilityCard/CredibilityCard.tsx | 21 ++++++++- .../CredibilityCard/CredibilityCard.types.ts | 1 + .../CredibilityCard/CredibilityCard.utils.ts | 2 +- .../ProjectImpactCard/ProjectImpactCard.tsx | 35 +++++++++----- .../src/components/icons/GreenPinIcon.tsx | 4 +- .../components/icons/OutlinedCheckIcon.tsx | 46 ++++++++++++++++--- .../icons/utils/SvgColorOverride.tsx | 19 ++++++-- .../organisms/ImpactTags/ImpactTags.tsx | 3 ++ .../organisms/ProjectTags/ProjectTags.tsx | 23 +++++++++- web-components/src/utils/isString.ts | 3 ++ .../DetailsSection/DetailsSection.tsx | 4 ++ .../ProjectTopSection/ProjectTopSection.tsx | 4 +- .../SellOrdersActionsBar.tsx | 7 ++- .../ProjectDetails.DataStream.Post.tsx | 8 +++- .../ProjectDetails/ProjectDetails.tsx | 3 +- 19 files changed, 155 insertions(+), 35 deletions(-) create mode 100644 web-components/src/utils/isString.ts diff --git a/.eslintrc.js b/.eslintrc.js index f074a16c40..50306bca87 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -25,6 +25,7 @@ module.exports = { 'classes', 'classNames', 'previewClassName', + 'color', ], ignoreProperty: [ 'border', diff --git a/web-components/src/components/atoms/CardRibbon/CardRibbon.tsx b/web-components/src/components/atoms/CardRibbon/CardRibbon.tsx index 1fe732f06a..29dd743308 100644 --- a/web-components/src/components/atoms/CardRibbon/CardRibbon.tsx +++ b/web-components/src/components/atoms/CardRibbon/CardRibbon.tsx @@ -28,7 +28,7 @@ const CardRibbon = ({ sx={[ { background: - 'linear-gradient(201.8deg, #4FB573 14.67%, #B9E1C7 97.14%)', + 'linear-gradient(201.8deg, rgba(var(--sc-tag-credit-category-500) / 1) 14.67%, rgba(var(--sc-tag-credit-category-300) / 1) 97.14%)', py: { xs: 1.25, sm: 2.5 }, px: { xs: 5 }, width: 'fit-content', diff --git a/web-components/src/components/buttons/ContainedButton.tsx b/web-components/src/components/buttons/ContainedButton.tsx index bdb72aea67..9051cbd620 100644 --- a/web-components/src/components/buttons/ContainedButton.tsx +++ b/web-components/src/components/buttons/ContainedButton.tsx @@ -3,7 +3,7 @@ import { styled } from '@mui/material'; import Button from '@mui/material/Button'; const gradient = - 'linear-gradient(204.4deg, #527984 5.94%, #79C6AA 51.92%, #C4DAB5 97.89%)'; + 'linear-gradient(204.4deg, rgba(var(--sc-gradient-heavy-gradient-600)) 5.94%, rgba(var(--sc-gradient-heavy-gradient-500)) 51.92%, rgba(var(--sc-gradient-heavy-gradient-400)) 97.89%)'; const ContainedButton = styled(Button)(({ theme }) => { return { diff --git a/web-components/src/components/buttons/PrevNextButton.tsx b/web-components/src/components/buttons/PrevNextButton.tsx index d306615813..b8f705eeab 100644 --- a/web-components/src/components/buttons/PrevNextButton.tsx +++ b/web-components/src/components/buttons/PrevNextButton.tsx @@ -36,7 +36,7 @@ const getBorderColor = ( ? // eslint-disable-next-line lingui/no-unlocalized-strings `linear-gradient(${disabledColor}, ${disabledColor})` : // eslint-disable-next-line lingui/no-unlocalized-strings - 'linear-gradient(204.4deg, #527984 5.94%, #79C6AA 51.92%, #C4DAB5 97.89%)'; + 'linear-gradient(204.4deg, rgba(var(--sc-gradient-heavy-gradient-600)) 5.94%, rgba(var(--sc-gradient-heavy-gradient-500)) 51.92%, rgba(var(--sc-gradient-heavy-gradient-400)) 97.89%)' }; const getBackgroundColor = ( diff --git a/web-components/src/components/cards/CredibilityCard/CredibilityCard.tsx b/web-components/src/components/cards/CredibilityCard/CredibilityCard.tsx index 201859af2b..f49745bf7d 100644 --- a/web-components/src/components/cards/CredibilityCard/CredibilityCard.tsx +++ b/web-components/src/components/cards/CredibilityCard/CredibilityCard.tsx @@ -1,7 +1,10 @@ import { Box } from '@mui/material'; +import { IS_REGEN } from 'lib/env'; +import isString from '../../../utils/isString'; import { BlockContent } from '../../block-content'; import OutlinedCheckIcon from '../../icons/OutlinedCheckIcon'; +import SvgColorOverride from '../../icons/utils/SvgColorOverride'; import { Body, Title } from '../../typography'; import Card from '../Card'; import { CredibilityCardProps } from './CredibilityCard.types'; @@ -13,6 +16,7 @@ export const CredibilityCard: React.FC = ({ descriptionRaw, icon, claims, + overrideIconColor = false, }) => ( = ({ }, }} > - {icon && ( + {icon && isString(icon) && overrideIconColor ? ( + + ) : ( diff --git a/web-components/src/components/cards/CredibilityCard/CredibilityCard.types.ts b/web-components/src/components/cards/CredibilityCard/CredibilityCard.types.ts index e08597b58e..82dde9e033 100644 --- a/web-components/src/components/cards/CredibilityCard/CredibilityCard.types.ts +++ b/web-components/src/components/cards/CredibilityCard/CredibilityCard.types.ts @@ -6,4 +6,5 @@ export type CredibilityCardProps = { descriptionRaw: SanityBlockContent; icon?: string | null; claims: Array<{ description: string }>; + overrideIconColor?: boolean; }; diff --git a/web-components/src/components/cards/CredibilityCard/CredibilityCard.utils.ts b/web-components/src/components/cards/CredibilityCard/CredibilityCard.utils.ts index 8ae855105f..02a4308e4a 100644 --- a/web-components/src/components/cards/CredibilityCard/CredibilityCard.utils.ts +++ b/web-components/src/components/cards/CredibilityCard/CredibilityCard.utils.ts @@ -1,5 +1,5 @@ export const getBackground = (index: number, value: number) => { const percentage = `${Math.min(100, 55 + index * value)}%`; // eslint-disable-next-line lingui/no-unlocalized-strings - return `linear-gradient(-8deg, #F1F7F6 ${percentage}, transparent ${percentage})`; + return `linear-gradient(-8deg, rgba(var(--sc-card-credibility-diagonal-background) / 1) ${percentage}, transparent ${percentage})`; }; diff --git a/web-components/src/components/cards/ProjectImpactCard/ProjectImpactCard.tsx b/web-components/src/components/cards/ProjectImpactCard/ProjectImpactCard.tsx index a9fcb7be7e..813bde7a2f 100644 --- a/web-components/src/components/cards/ProjectImpactCard/ProjectImpactCard.tsx +++ b/web-components/src/components/cards/ProjectImpactCard/ProjectImpactCard.tsx @@ -1,7 +1,9 @@ import { Box, Grid, SxProps, Theme } from '@mui/material'; +import { IS_REGEN } from 'lib/env'; import { ImageType } from '../../../types/shared/imageType'; import { sxToArray } from '../../../utils/mui/sxToArray'; +import SvgColorOverride from '../../icons/utils/SvgColorOverride'; import { Image } from '../../image'; import { Body, Label, Title } from '../../typography'; import Card from '../Card'; @@ -68,14 +70,13 @@ export default function ProjectImpactCard({ top: [15, 25], left: 0, width: 'fit-content', - backgroundColor: 'secondary.main', - color: 'primary.main', borderRadius: '0px 2px 2px 0px', p: 1.25, pl: 2.5, }, ...sxToArray(labelSx), ]} + className="text-sc-tag-prefinance-text-icon bg-sc-tag-impact-background" > {label} @@ -100,15 +101,27 @@ export default function ProjectImpactCard({ {sdgs.map(sdg => ( - + {IS_REGEN ? ( + + ) : ( + + )} ))} diff --git a/web-components/src/components/icons/GreenPinIcon.tsx b/web-components/src/components/icons/GreenPinIcon.tsx index 05c4278108..60667d5364 100644 --- a/web-components/src/components/icons/GreenPinIcon.tsx +++ b/web-components/src/components/icons/GreenPinIcon.tsx @@ -7,12 +7,12 @@ export const GreenPinIcon = (props: React.SVGProps) => ( cy="45.5114" rx="9.99124" ry="3.57954" - fill="#D2D5D9" fillOpacity="0.3" + style={{ fill: 'rgba(var(--ac-neutral-400, #d2d5d9))' }} /> diff --git a/web-components/src/components/icons/OutlinedCheckIcon.tsx b/web-components/src/components/icons/OutlinedCheckIcon.tsx index 8e32985e94..a5fa025357 100644 --- a/web-components/src/components/icons/OutlinedCheckIcon.tsx +++ b/web-components/src/components/icons/OutlinedCheckIcon.tsx @@ -58,9 +58,26 @@ export default function OutlinedCheckIcon({ y2="19.2302" gradientUnits="userSpaceOnUse" > - - - + + + - - - + + + diff --git a/web-components/src/components/icons/utils/SvgColorOverride.tsx b/web-components/src/components/icons/utils/SvgColorOverride.tsx index 6e8ea16c1f..d7fc3aa395 100644 --- a/web-components/src/components/icons/utils/SvgColorOverride.tsx +++ b/web-components/src/components/icons/utils/SvgColorOverride.tsx @@ -1,28 +1,39 @@ import { useMemo } from 'react'; import { SvgIcon, SxProps } from '@mui/material'; -export default function SvgThemeWrapper({ +export default function SvgColorOverride({ src, sx, color, + filterIntensity = 10, + alt, + className, }: { src: string; sx?: SxProps; color: string; + filterIntensity?: number; + alt?: string; + className?: string; }) { const maskId = useMemo(() => `mask_${Math.random()}`, []); return ( - + - + ); } diff --git a/web-components/src/components/organisms/ImpactTags/ImpactTags.tsx b/web-components/src/components/organisms/ImpactTags/ImpactTags.tsx index 6c4af79c3d..cc89e08d2d 100644 --- a/web-components/src/components/organisms/ImpactTags/ImpactTags.tsx +++ b/web-components/src/components/organisms/ImpactTags/ImpactTags.tsx @@ -22,6 +22,7 @@ export interface Props { ecosystemLabel: string; seeMoreText: string; seeLessText: string; + overrideIconColor?: boolean; } const ImpactTags = ({ @@ -33,6 +34,7 @@ const ImpactTags = ({ ecosystemLabel, seeMoreText, seeLessText, + overrideIconColor = false, }: Props) => { const isImpactCollapsed = impact.length > DEFAULT_COLLAPSED_ITEMS; return ( @@ -74,6 +76,7 @@ const ImpactTags = ({ }} activitiesLabel={activitiesLabel} ecosystemLabel={ecosystemLabel} + overrideIconColor={overrideIconColor} /> )} diff --git a/web-components/src/components/organisms/ProjectTags/ProjectTags.tsx b/web-components/src/components/organisms/ProjectTags/ProjectTags.tsx index b5a0f8efc7..5800dc6863 100644 --- a/web-components/src/components/organisms/ProjectTags/ProjectTags.tsx +++ b/web-components/src/components/organisms/ProjectTags/ProjectTags.tsx @@ -4,7 +4,11 @@ import { ProjectTag } from '../../../components/molecules/ProjectTag/ProjectTag' import { Label } from '../../../components/typography'; import { Theme } from '../../../theme/muiTheme'; import { sxToArray } from '../../../utils/mui/sxToArray'; -import { ProjectTagType } from '../../molecules/ProjectTag/ProjectTag.types'; +import SvgColorOverride from '../../icons/utils/SvgColorOverride'; +import { + isImageType, + ProjectTagType, +} from '../../molecules/ProjectTag/ProjectTag.types'; export interface Props { activities?: ProjectTagType[]; @@ -12,6 +16,7 @@ export interface Props { sx?: SxProps; activitiesLabel?: string; ecosystemLabel: string; + overrideIconColor?: boolean; } const ProjectTags = ({ @@ -20,6 +25,7 @@ const ProjectTags = ({ sx = [], activitiesLabel, ecosystemLabel, + overrideIconColor = false, }: Props): JSX.Element => { const hasActivities = activities.length > 0; const hasManyActivities = activities.length > 1; @@ -85,7 +91,20 @@ const ProjectTags = ({ > {ecosystems.map(ecosystem => ( + ) : ( + ecosystem.icon + ), + }} key={ecosystem.name} sx={{ mb: hasManyEcosystems ? { xs: 2.5, sm: 3.75 } : 0, diff --git a/web-components/src/utils/isString.ts b/web-components/src/utils/isString.ts new file mode 100644 index 0000000000..6ef213830b --- /dev/null +++ b/web-components/src/utils/isString.ts @@ -0,0 +1,3 @@ +export default function isString(value: unknown): value is string { + return typeof value === 'string'; +} \ No newline at end of file diff --git a/web-marketplace/src/components/organisms/DetailsSection/DetailsSection.tsx b/web-marketplace/src/components/organisms/DetailsSection/DetailsSection.tsx index 9c58a56a22..fe4ef46dfb 100644 --- a/web-marketplace/src/components/organisms/DetailsSection/DetailsSection.tsx +++ b/web-marketplace/src/components/organisms/DetailsSection/DetailsSection.tsx @@ -9,6 +9,8 @@ import ResponsiveSlider from 'web-components/src/components/sliders/ResponsiveSl import { Body, Label, Title } from 'web-components/src/components/typography'; import { headerFontFamily, Theme } from 'web-components/src/theme/muiTheme'; +import { IS_REGEN } from 'lib/env'; + import { DetailsSectionButton } from './DetailsSection.Button'; import { CREDIT, @@ -91,6 +93,7 @@ export const DetailsSection: React.FC< item sx={{ background: + // TODO: get design system colors for this gradient 'linear-gradient(206deg, #7D9AA2 0%, #9AD3BE 50%, #D1E2C7 100%)', '-webkit-background-clip': 'text', '-webkit-text-fill-color': 'transparent', @@ -132,6 +135,7 @@ export const DetailsSection: React.FC< title={card?.credibilityCard?.title as string} descriptionRaw={card?.credibilityCard?.descriptionRaw} icon={card?.credibilityCard?.icon?.asset?.url} + overrideIconColor={!IS_REGEN} claims={ card?.claims?.map(claim => ({ description: claim?.description as string, diff --git a/web-marketplace/src/components/organisms/ProjectTopSection/ProjectTopSection.tsx b/web-marketplace/src/components/organisms/ProjectTopSection/ProjectTopSection.tsx index 43d59cccb6..4bb89bf437 100644 --- a/web-marketplace/src/components/organisms/ProjectTopSection/ProjectTopSection.tsx +++ b/web-marketplace/src/components/organisms/ProjectTopSection/ProjectTopSection.tsx @@ -21,6 +21,7 @@ import { SEE_MORE, } from 'lib/constants/shared.constants'; import { CreditClassMetadataLD } from 'lib/db/types/json-ld'; +import { IS_REGEN } from 'lib/env'; import { getCreditTypeQuery } from 'lib/queries/react-query/ecocredit/getCreditTypeQuery/getCreditTypeQuery'; import { getAllCreditCertificationQuery } from 'lib/queries/react-query/sanity/getAllCreditCertificationQuery/getAllCreditCertificationQuery'; import { getAllCreditTypeQuery } from 'lib/queries/react-query/sanity/getAllCreditTypeQuery/getAllCreditTypeQuery'; @@ -307,6 +308,7 @@ function ProjectTopSection({ impact={[...impact]} activitiesLabel={_(PROJECT_ACTIVITY_LABEL)} ecosystemLabel={_(ECOSYSTEM_LABEL)} + overrideIconColor={!IS_REGEN} /> {ratingsAndCertificationsData && ( )} - {otcCard && ( + {otcCard && IS_REGEN && ( diff --git a/web-marketplace/src/components/organisms/SellOrdersActionsBar/SellOrdersActionsBar.tsx b/web-marketplace/src/components/organisms/SellOrdersActionsBar/SellOrdersActionsBar.tsx index 867128e54e..37b39e9571 100644 --- a/web-marketplace/src/components/organisms/SellOrdersActionsBar/SellOrdersActionsBar.tsx +++ b/web-marketplace/src/components/organisms/SellOrdersActionsBar/SellOrdersActionsBar.tsx @@ -202,7 +202,12 @@ export const SellOrdersActionsBar = ({ onBuyButtonClick(); }} disabled={isBuyButtonDisabled} - sx={{ height: '100%' }} + sx={{ + height: '100%', + backgroundImage: + 'linear-gradient(197deg, rgba(var(--sc-gradient-lighter-gradient-500) / 1) 14.67%, rgba(var(--sc-gradient-lighter-gradient-300) / 1) 97.14%)', + + }} > {isMobile ? _(msg`BUY`) : _(msg`BUY CREDITS`)} diff --git a/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.DataStream.Post.tsx b/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.DataStream.Post.tsx index 3db991f498..05cdbab45d 100644 --- a/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.DataStream.Post.tsx +++ b/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.DataStream.Post.tsx @@ -179,7 +179,13 @@ export const DataStreamPost = ({ index === postsLength - 1 ? 'pb-35' : '' }`} > -
+
diff --git a/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.tsx b/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.tsx index a97fe772c3..8d610939d7 100644 --- a/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.tsx +++ b/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.tsx @@ -30,6 +30,7 @@ import { CreditClassMetadataLD, } from 'lib/db/types/json-ld'; import { getBatchesTotal } from 'lib/ecocredit/api'; +import { IS_REGEN } from 'lib/env'; import { getProjectQuery } from 'lib/queries/react-query/ecocredit/getProjectQuery/getProjectQuery'; import { getGeocodingQuery } from 'lib/queries/react-query/mapbox/getGeocodingQuery/getGeocodingQuery'; import { getMetadataQuery } from 'lib/queries/react-query/registry-server/getMetadataQuery/getMetadataQuery'; @@ -553,7 +554,7 @@ function ProjectDetails(): JSX.Element { - {gettingStartedResourcesSection && ( + {gettingStartedResourcesSection && IS_REGEN && (