diff --git a/tailwind.common.js b/tailwind.common.js index 552e1bf5d4..f5a48d98eb 100644 --- a/tailwind.common.js +++ b/tailwind.common.js @@ -88,6 +88,10 @@ module.exports = { 'linear-gradient(179deg,#515D89 19.77%,#7DC9BF 114.05%,#FAEBD1 200.67%)', 'blue-green-gradient': 'linear-gradient(197deg, #7D9AA2 8.02%, #9AD3BE 43.42%, #D1E2C7 78.83%)', + 'prefinance-tag': + 'linear-gradient(179deg, rgba(var(--sc-tag-prefinance-600) / 1) 19.77%, rgba(var(--sc-tag-prefinance-500) / 1) 114.05%, rgba(var(--sc-tag-prefinance-400) / 1) 200.67%)', + 'credit-category': + 'linear-gradient(202deg, rgba(var(--sc-tag-credit-category-300) / 1) 14.67%, rgba(var(--sc-tag-credit-category-500) / 1) 97.14%)', }, boxShadow: { sm: '0px 4px 10px 0px rgba(0, 0, 0, 0.05)', diff --git a/web-components/src/components/PrefinanceTag/PrefinanceTag.tsx b/web-components/src/components/PrefinanceTag/PrefinanceTag.tsx index d35b3fe960..c033110a63 100644 --- a/web-components/src/components/PrefinanceTag/PrefinanceTag.tsx +++ b/web-components/src/components/PrefinanceTag/PrefinanceTag.tsx @@ -24,7 +24,7 @@ export const PrefinanceTag = ({ }) => (
diff --git a/web-components/src/components/buttons/OutlinedButton.tsx b/web-components/src/components/buttons/OutlinedButton.tsx index 08a81b2850..fed0b0f379 100644 --- a/web-components/src/components/buttons/OutlinedButton.tsx +++ b/web-components/src/components/buttons/OutlinedButton.tsx @@ -1,22 +1,26 @@ import { styled } from '@mui/material'; -import Button from '@mui/material/Button'; +import Button, { ButtonProps } from '@mui/material/Button'; -const OutlinedButton = styled(Button)(({ theme }) => ({ - color: theme.palette.secondary.main, - backgroundColor: theme.palette.primary.main, +const OutlinedButton = styled(Button)(() => ({ + color: 'rgba(var(--sc-button-text-icon-dark) / 1)', + backgroundColor: + 'rgba(var(--sc-button-surface-standard-secondary-default) / 1)', borderImageSlice: 1, - borderImageSource: 'linear-gradient(201.8deg, #4FB573, #B9E1C7)', + borderImageSource: + 'linear-gradient(201.8deg, rgba(var(--sc-gradient-lighter-gradient-500) / 1), rgba(var(--sc-gradient-lighter-gradient-300) / 1))', '&:hover': { - backgroundColor: theme.palette.secondary.light, - borderColor: theme.palette.secondary.light, + backgroundColor: + 'rgba(var(--sc-button-surface-standard-secondary-hover) / 1)', + color: 'rgba(var(--sc-button-text-icon-dark) / 1)', + borderColor: 'rgba(var(--sc-button-surface-standard-secondary-hover) / 1)', borderImageSource: 'none', }, '&:disabled': { - color: theme.palette.grey[100], - background: theme.palette.grey[50], + color: 'rgba(var(--sc-button-surface-standard-primary-disabled) / 1)', + background: + 'rgba(var(--sc-button-surface-standard-secondary-disabled) / 1)', borderImageSource: 'none', - borderColor: theme.palette.grey[100], + borderColor: 'rgba(var(--sc-button-outline-secondary-disabled) / 1)', }, })); - export default OutlinedButton as typeof Button; diff --git a/web-components/src/components/cards/ProjectCard/ProjectCard.CreditPrice.tsx b/web-components/src/components/cards/ProjectCard/ProjectCard.CreditPrice.tsx index 16383b0122..0551f935a8 100644 --- a/web-components/src/components/cards/ProjectCard/ProjectCard.CreditPrice.tsx +++ b/web-components/src/components/cards/ProjectCard/ProjectCard.CreditPrice.tsx @@ -120,14 +120,22 @@ export const CreditPrice = ({ }} > {isSoldOut && !isPrefinanceProject ? ( - + ) : ( <> {purchaseInfo?.sellInfo?.creditsAvailable ?? projectPrefinancing?.estimatedIssuance ?? '0'} {isSoldOut && ( - + )} )} diff --git a/web-components/src/components/cards/ProjectCard/ProjectCard.tsx b/web-components/src/components/cards/ProjectCard/ProjectCard.tsx index 50079aa88e..7b6354f6dd 100644 --- a/web-components/src/components/cards/ProjectCard/ProjectCard.tsx +++ b/web-components/src/components/cards/ProjectCard/ProjectCard.tsx @@ -66,6 +66,7 @@ export interface ProjectCardProps extends MediaCardProps { bodyTexts: ProjectCardBodyTextsMapping; purchaseDetailsTitles: ProjectCardTitlesMapping; buttons: ProjectCardButtonsMapping; + useProjectCardButton?: boolean; } export function ProjectCard({ @@ -103,6 +104,7 @@ export function ProjectCard({ bodyTexts, purchaseDetailsTitles, buttons, + useProjectCardButton = true, ...mediaCardProps }: ProjectCardProps): JSX.Element { const theme = useTheme(); @@ -325,7 +327,8 @@ export function ProjectCard({ {containedButton.text} ))} - {(onButtonClick || isPrefinanceProject || offChain) && + {(hasButton || isPrefinanceProject || offChain) && + useProjectCardButton && (isButtonDisabled && createPostTooltipText ? ( ( purchaseDetailsTitles={projectCardPurchaseDetailsTitleMapping} buttons={projectCardButtonMapping} /> + + ); diff --git a/web-components/src/components/gradient-badge/GradientBadge.stories.tsx b/web-components/src/components/gradient-badge/GradientBadge.stories.tsx index a18a0ae6dd..97d859a3ac 100644 --- a/web-components/src/components/gradient-badge/GradientBadge.stories.tsx +++ b/web-components/src/components/gradient-badge/GradientBadge.stories.tsx @@ -17,10 +17,4 @@ Default.args = { label: 'SOLD OUT', }; -Default.argTypes = { - variant: { - control: 'radio', - options: ['green'], - defaultValue: 'green', - }, -}; +Default.argTypes = {}; diff --git a/web-components/src/components/gradient-badge/GradientBadge.tsx b/web-components/src/components/gradient-badge/GradientBadge.tsx index 131a05db6d..0ec6d1d72e 100644 --- a/web-components/src/components/gradient-badge/GradientBadge.tsx +++ b/web-components/src/components/gradient-badge/GradientBadge.tsx @@ -33,7 +33,7 @@ const GradientBadge = ({ textTransform: 'uppercase', fontWeight: 800, fontFamily: headerFontFamily, - color: 'primary.main', + color: 'rgba(var(--sc-tag-prefinance-text-icon) / 1)', }, ...(Array.isArray(sx) ? sx : [sx]), ]} diff --git a/web-components/src/components/gradient-badge/GradientBadge.utils.ts b/web-components/src/components/gradient-badge/GradientBadge.utils.ts index c2328e6fee..aa5848d493 100644 --- a/web-components/src/components/gradient-badge/GradientBadge.utils.ts +++ b/web-components/src/components/gradient-badge/GradientBadge.utils.ts @@ -4,5 +4,6 @@ import { GradientBadgeVariant } from './GradientBadge.types'; export const GradientBadgeVariantMapping: { [key in GradientBadgeVariant]: string; } = { - green: 'linear-gradient(201.8deg, #4FB573 14.67%, #B9E1C7 97.14%)', + green: + 'linear-gradient(202deg, rgba(var(--sc-tag-credit-category-300) / 1) 14.67%, rgba(var(--sc-tag-credit-category-500) / 1) 97.14%)', }; diff --git a/web-components/src/components/icons/ArrowLeft.tsx b/web-components/src/components/icons/ArrowLeft.tsx index 8a8f533402..ffa6d40165 100644 --- a/web-components/src/components/icons/ArrowLeft.tsx +++ b/web-components/src/components/icons/ArrowLeft.tsx @@ -1,9 +1,12 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; -interface IconProps extends SvgIconProps {} +interface IconProps extends SvgIconProps { + isDisabled: boolean; +} export default function ArrowLeftIcon({ sx = [], + isDisabled, ...props }: IconProps): JSX.Element { return ( @@ -17,13 +20,36 @@ export default function ArrowLeftIcon({ ]} {...props} > - + + + + + + ); } diff --git a/web-components/src/components/icons/ArrowRight.tsx b/web-components/src/components/icons/ArrowRight.tsx index 178ec1d743..37bb372e46 100644 --- a/web-components/src/components/icons/ArrowRight.tsx +++ b/web-components/src/components/icons/ArrowRight.tsx @@ -1,9 +1,12 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; -interface IconProps extends SvgIconProps {} +interface IconProps extends SvgIconProps { + isDisabled: boolean; +} export default function ArrowRightIcon({ sx = [], + isDisabled, ...props }: IconProps): JSX.Element { return ( @@ -13,13 +16,36 @@ export default function ArrowRightIcon({ sx={[{ fill: 'none' }, ...(Array.isArray(sx) ? sx : [sx])]} {...props} > - + + + + + + ); } diff --git a/web-components/src/components/icons/ArrowSkipLeft.tsx b/web-components/src/components/icons/ArrowSkipLeft.tsx index f409c4d3a8..19ea7c1513 100644 --- a/web-components/src/components/icons/ArrowSkipLeft.tsx +++ b/web-components/src/components/icons/ArrowSkipLeft.tsx @@ -2,10 +2,12 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; interface IconProps extends SvgIconProps { disabled?: boolean; + useGradient?: boolean; } export default function ArrowSkipLeftIcon({ disabled, + useGradient = true, sx = [], ...props }: IconProps): JSX.Element { @@ -24,7 +26,7 @@ export default function ArrowSkipLeftIcon({ r={24} transform="matrix(-1 0 0 1 25.5 25)" fill="#fff" - stroke="url(#skipLeft)" + stroke={'url(#skipLeft)'} strokeWidth={2} /> - + + - diff --git a/web-components/src/components/icons/ArrowSkipRight.tsx b/web-components/src/components/icons/ArrowSkipRight.tsx index 4933102d3e..3529721735 100644 --- a/web-components/src/components/icons/ArrowSkipRight.tsx +++ b/web-components/src/components/icons/ArrowSkipRight.tsx @@ -2,10 +2,12 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; interface IconProps extends SvgIconProps { disabled?: boolean; + useGradient?: boolean; } export default function ArrowSkipRightIcon({ disabled, + useGradient = true, sx = [], ...props }: IconProps): JSX.Element { @@ -20,7 +22,7 @@ export default function ArrowSkipRightIcon({ r={24} transform="matrix(-1 0 0 1 25.5 25)" fill="#fff" - stroke="url(#skipRight)" + stroke={'url(#skipRight)'} strokeWidth={2} /> - + + - diff --git a/web-components/src/components/icons/social/InstagramIcon.tsx b/web-components/src/components/icons/social/InstagramIcon.tsx index 1eff018b3d..67e9d45460 100644 --- a/web-components/src/components/icons/social/InstagramIcon.tsx +++ b/web-components/src/components/icons/social/InstagramIcon.tsx @@ -1,28 +1,17 @@ -import React from 'react'; -import { Theme } from '@mui/material/styles'; import SvgIcon from '@mui/material/SvgIcon'; -import { makeStyles } from 'tss-react/mui'; +import { cn } from '../../../utils/styles/cn'; import withHoverColor, { Props } from '../withHoverColor'; -const useStyles = makeStyles()((theme: Theme) => ({ - root: { - width: theme.spacing(9.25), - height: theme.spacing(9.25), - }, -})); - function InstagramIcon({ className, color, onMouseEnter, onMouseLeave, }: Props): JSX.Element { - const { classes, cx } = useStyles(); - return ( ({ - root: { - width: theme.spacing(9.25), - height: theme.spacing(9.25), - }, -})); - function LinkedInIcon({ className, color, onMouseEnter, onMouseLeave, }: Props): JSX.Element { - const { classes, cx } = useStyles(); - return ( ({ root: { @@ -15,8 +17,16 @@ export const usePaginationStyles = makeStyles()(theme => ({ }, })); +const PaginationItemWrapper = ({ + ...props +}: PaginationItemProps & { + disableRipple: boolean; +}) => { + return ; +}; + export const StyledPaginationItem = withStyles( - PaginationItem, + PaginationItemWrapper, (theme: Theme, { disabled }) => ({ icon: { fontSize: pxToRem(40), @@ -44,7 +54,7 @@ export const StyledPaginationItem = withStyles( bottom: 0, width: '11px', height: '4px', - backgroundColor: theme.palette.secondary.main, + backgroundColor: 'rgba(var(--sc-tabs-tab-underline) / 1)', }, }, }), @@ -58,8 +68,11 @@ type GetArrowSkipStyleType = { export const getArrowSkipStyle = ({ theme, disabled, -}: GetArrowSkipStyleType): SxProps => - ({ +}: GetArrowSkipStyleType): SxProps => { + return { fontSize: pxToRem(50), - color: disabled ? theme.palette.grey[100] : theme.palette.secondary.main, - } as SxProps); + color: disabled + ? theme.palette.grey[100] + : 'rgba(var(--sc-button-text-icon-dark) / 1)', + } as SxProps; +}; diff --git a/web-components/src/components/pagination/Pagination.tsx b/web-components/src/components/pagination/Pagination.tsx index 8b67265778..60a7345555 100644 --- a/web-components/src/components/pagination/Pagination.tsx +++ b/web-components/src/components/pagination/Pagination.tsx @@ -6,6 +6,8 @@ import { } from '@mui/material'; import { Theme } from '../../theme/muiTheme'; +import { ColorScheme } from '../../theme/theme.types'; +import { cn } from '../../utils/styles/cn'; import ArrowLeftIcon from '../icons/ArrowLeft'; import ArrowRightIcon from '../icons/ArrowRight'; import ArrowSkipLeftIcon from '../icons/ArrowSkipLeft'; @@ -18,9 +20,15 @@ import { export interface Props extends PaginationProps { sx?: SxProps; + colorScheme: ColorScheme; } -const Pagination = ({ size, sx = [], ...props }: Props): JSX.Element => { +const Pagination = ({ + size, + sx = [], + colorScheme, + ...props +}: Props): JSX.Element => { const theme = useTheme(); const isSmall = size === 'small'; const { classes } = usePaginationStyles(); @@ -36,8 +44,12 @@ const Pagination = ({ size, sx = [], ...props }: Props): JSX.Element => { slots={{ first: () => ( ), last: () => ( @@ -47,10 +59,33 @@ const Pagination = ({ size, sx = [], ...props }: Props): JSX.Element => { theme, })} disabled={item.disabled} + useGradient={colorScheme === 'regen'} + /> + ), + previous: props => ( + + ), + next: props => ( + ), - previous: ArrowLeftIcon, - next: ArrowRightIcon, }} disableRipple {...item} diff --git a/web-components/src/components/tabs/IconTabs.tsx b/web-components/src/components/tabs/IconTabs.tsx index e63b73835e..c7fc21461a 100644 --- a/web-components/src/components/tabs/IconTabs.tsx +++ b/web-components/src/components/tabs/IconTabs.tsx @@ -38,29 +38,32 @@ interface IconTabsProps { const StyledTabs = styled(Tabs, { shouldForwardProp: prop => prop !== 'hideIndicator' && prop !== 'mobileFullWidth', -})( - ({ mobileFullWidth, theme, hideIndicator }) => ({ - '& .MuiTabs-flexContainer': { - display: 'block', +})< + TabsProps & { + mobileFullWidth: boolean; + hideIndicator: boolean; + } +>(({ mobileFullWidth, theme, hideIndicator }) => ({ + '& .MuiTabs-flexContainer': { + display: 'block', + }, + '& .MuiTabs-scroller': { + [theme.breakpoints.up('md')]: { + marginLeft: mobileFullWidth ? theme.spacing(-3) : 0, }, - '& .MuiTabs-scroller': { - [theme.breakpoints.up('md')]: { - marginLeft: mobileFullWidth ? theme.spacing(-3) : 0, - }, - [theme.breakpoints.down('md')]: { - paddingLeft: mobileFullWidth ? theme.spacing(7) : 0, - }, - [theme.breakpoints.down('sm')]: { - paddingLeft: mobileFullWidth ? theme.spacing(1) : 0, - }, + [theme.breakpoints.down('md')]: { + paddingLeft: mobileFullWidth ? theme.spacing(7) : 0, }, - '& .MuiTabs-indicator': { - display: hideIndicator && 'none', - backgroundColor: theme.palette.secondary.main, - height: '3px', + [theme.breakpoints.down('sm')]: { + paddingLeft: mobileFullWidth ? theme.spacing(1) : 0, }, - }), -); + }, + '& .MuiTabs-indicator': { + display: hideIndicator && 'none', + backgroundColor: 'rgba(var(--sc-tabs-tab-underline) / 1)', + height: '3px', + }, +})); const IconTabs: React.FC> = ({ activeTab = 0, diff --git a/web-components/src/theme/theme.types.ts b/web-components/src/theme/theme.types.ts new file mode 100644 index 0000000000..5526c1f3f5 --- /dev/null +++ b/web-components/src/theme/theme.types.ts @@ -0,0 +1 @@ +export type ColorScheme = 'regen' | 'terrasos'; diff --git a/web-marketplace/public/jpg/default-project2.jpg b/web-marketplace/public/jpg/default-project2.jpg new file mode 100644 index 0000000000..21a2bc107c Binary files /dev/null and b/web-marketplace/public/jpg/default-project2.jpg differ diff --git a/web-marketplace/src/clients/terrasos/Terrasos.tailwind.css b/web-marketplace/src/clients/terrasos/Terrasos.tailwind.css index 765dd5cc2b..eb8979699e 100644 --- a/web-marketplace/src/clients/terrasos/Terrasos.tailwind.css +++ b/web-marketplace/src/clients/terrasos/Terrasos.tailwind.css @@ -77,8 +77,8 @@ --bc-neutral-200: 239 239 239; --bc-neutral-100: 250 250 250; --bc-neutral-0: 255 255 255; - - /* alias.terrasos */ + + /* alias.terrasos */ --ac-error-500: var(--bc-red-500); --ac-error-400: var(--bc-red-400); --ac-success-500: var(--bc-green-500); @@ -141,7 +141,7 @@ --sc-button-surface-standard-secondary-disabled: var(--ac-neutral-100); --sc-button-surface-standard-secondary-default: var(--ac-neutral-0); --sc-button-surface-standard-primary-disabled: var(--ac-neutral-300); - --sc-button-surface-standard-secondary-hover: var(--ac-neutral-500); + --sc-button-surface-standard-secondary-hover: var(--ac-neutral-300); --sc-button-text-icon-prefinance: var(--ac-neutral-700); --sc-button-text-icon-disabled: var(--ac-neutral-300); --sc-button-text-icon-dark: var(--ac-neutral-700); @@ -231,93 +231,92 @@ --purple-200: 128 142 171; --purple-100: 86 104 143; - /* mapped terrasos dark */ --sc-tag-filter-inner-shadow: 255 255 255; - --sc-tag-filter-outer-shadow: 255 255 255; - --sc-checkbox-or-radio-selector-background-selected: var(--ac-neutral-600); - --sc-checkbox-or-radio-selector-stroke: var(--ac-neutral-500); - --sc-checkbox-or-radio-selector-background-default: var(--ac-neutral-700); - --sc-table-stroke: var(--ac-neutral-500); - --sc-table-surface-light: var(--ac-neutral-700); - --sc-table-surface-dark: var(--ac-neutral-600); - --sc-input-triangle-icon-disabled: var(--ac-neutral-300); - --sc-input-triangle-icon-default: var(--ac-primary-500); - --sc-input-background-disabled: var(--ac-neutral-500); - --sc-input-background-default: var(--ac-neutral-700); - --sc-tooltip-fill: var(--ac-neutral-700); - --sc-tooltip-outline: var(--ac-neutral-100); - --sc-tag-credit-category-text-icon: var(--ac-neutral-700); - --sc-tag-credit-category-500: var(--ac-primary-500); - --sc-tag-credit-category-300: var(--ac-primary-500); - --sc-tag-filter-stroke-selected: var(--ac-neutral-0); - --sc-tag-filter-stroke-unselected: var(--ac-neutral-400); - --sc-tag-filter-background-selected: var(--ac-neutral-500); - --sc-tag-filter-background-unselected: var(--ac-neutral-600); - --sc-tag-prefinance-text-icon: var(--ac-neutral-700); - --sc-tag-prefinance-600: var(--ac-primary-500); - --sc-tag-prefinance-500: var(--ac-primary-500); - --sc-tag-prefinance-400: var(--ac-primary-500); - --sc-tag-impact-text-icon: var(--ac-neutral-700); - --sc-tag-impact-background: var(--ac-primary-500); - --sc-tabs-tab-underline: var(--ac-primary-500); - --sc-button-outline-secondary-disabled: var(--ac-neutral-300); - --sc-button-surface-prefinance-600: var(--ac-neutral-700); - --sc-button-surface-prefinance-500: var(--ac-neutral-700); - --sc-button-surface-prefinance-400: var(--ac-neutral-700); - --sc-button-surface-standard-secondary-disabled: var(--ac-neutral-600); - --sc-button-surface-standard-secondary-default: var(--ac-neutral-700); - --sc-button-surface-standard-primary-disabled: var(--ac-neutral-500); - --sc-button-surface-standard-secondary-hover: var(--ac-neutral-200); - --sc-button-text-icon-prefinance: var(--ac-neutral-700); - --sc-button-text-icon-disabled: var(--ac-neutral-500); - --sc-button-text-icon-dark: var(--ac-neutral-0); - --sc-button-text-icon-light: var(--ac-neutral-700); - --sc-gradient-heavy-gradient-600: var(--ac-neutral-0); - --sc-gradient-heavy-gradient-500: var(--ac-neutral-0); - --sc-gradient-heavy-gradient-400: var(--ac-neutral-0); - --sc-gradient-lighter-gradient-500: var(--ac-neutral-0); - --sc-gradient-lighter-gradient-300: var(--ac-neutral-0); - --sc-icon-credibility-background: var(--ac-neutral-700); - --sc-icon-credibility-10-blue-green-gradient-600: var(--ac-primary-500); - --sc-icon-credibility-10-blue-green-gradient-500: var(--ac-primary-500); - --sc-icon-credibility-10-blue-green-gradient-400: var(--ac-primary-500); - --sc-icon-credibility-25-blue-green-gradient-600: var(--ac-primary-500); - --sc-icon-credibility-25-blue-green-gradient-500: var(--ac-primary-500); - --sc-icon-credibility-25-blue-green-gradient-400: var(--ac-primary-500); - --sc-icon-credibility-100-blue-green-gradient-600: var(--ac-neutral-0); - --sc-icon-credibility-100-blue-green-gradient-500: var(--ac-neutral-0); - --sc-icon-credibility-100-blue-green-gradient-400: var(--ac-neutral-0); - --sc-icon-sdg-background: var(--ac-neutral-700); - --sc-icon-sdg-stroke-shadow: var(--ac-neutral-500); - --sc-icon-sdg-header: var(--ac-neutral-100); - --sc-icon-sdg-number: var(--ac-neutral-0); - --sc-icon-sdg-600: var(--ac-neutral-500); - --sc-icon-sdg-500: var(--ac-neutral-500); - --sc-icon-sdg-400: var(--ac-neutral-500); - --sc-icon-ecosystem-600: var(--ac-primary-400); - --sc-icon-ecosystem-500: var(--ac-primary-400); - --sc-icon-ecosystem-400: var(--ac-primary-400); - --sc-icon-standard-shade: var(--ac-primary-500); - --sc-icon-standard-disabled: var(--ac-neutral-200); - --sc-icon-standard-background: var(--ac-neutral-500); - --sc-icon-standard-success: var(--ac-success-400); - --sc-icon-standard-error: var(--ac-error-400); - --sc-icon-standard-light: var(--ac-primary-300); - --sc-icon-standard-dark: var(--ac-primary-300); - --sc-card-credibility-diagonal-background: var(--ac-neutral-600); - --sc-card-standard-header-background: var(--ac-neutral-600); - --sc-card-standard-stroke: var(--ac-neutral-500); - --sc-card-standard-background: var(--ac-neutral-700); - --sc-surface-page-background-light: var(--ac-neutral-600); - --sc-surface-stroke: var(--ac-neutral-500); - --sc-surface-page-background-default: var(--ac-neutral-700); - --sc-text-over-image: var(--ac-neutral-0); - --sc-text-error: var(--ac-error-400); - --sc-text-disabled: var(--ac-neutral-300); - --sc-text-sub-header: var(--ac-neutral-300); - --sc-text-link: var(--ac-primary-500); - --sc-text-header: var(--ac-neutral-0); - --sc-text-paragraph: var(--ac-neutral-200); + --sc-tag-filter-outer-shadow: 255 255 255; + --sc-checkbox-or-radio-selector-background-selected: var(--ac-neutral-600); + --sc-checkbox-or-radio-selector-stroke: var(--ac-neutral-500); + --sc-checkbox-or-radio-selector-background-default: var(--ac-neutral-700); + --sc-table-stroke: var(--ac-neutral-500); + --sc-table-surface-light: var(--ac-neutral-700); + --sc-table-surface-dark: var(--ac-neutral-600); + --sc-input-triangle-icon-disabled: var(--ac-neutral-300); + --sc-input-triangle-icon-default: var(--ac-primary-500); + --sc-input-background-disabled: var(--ac-neutral-500); + --sc-input-background-default: var(--ac-neutral-700); + --sc-tooltip-fill: var(--ac-neutral-700); + --sc-tooltip-outline: var(--ac-neutral-100); + --sc-tag-credit-category-text-icon: var(--ac-neutral-700); + --sc-tag-credit-category-500: var(--ac-primary-500); + --sc-tag-credit-category-300: var(--ac-primary-500); + --sc-tag-filter-stroke-selected: var(--ac-neutral-0); + --sc-tag-filter-stroke-unselected: var(--ac-neutral-400); + --sc-tag-filter-background-selected: var(--ac-neutral-500); + --sc-tag-filter-background-unselected: var(--ac-neutral-600); + --sc-tag-prefinance-text-icon: var(--ac-neutral-700); + --sc-tag-prefinance-600: var(--ac-primary-500); + --sc-tag-prefinance-500: var(--ac-primary-500); + --sc-tag-prefinance-400: var(--ac-primary-500); + --sc-tag-impact-text-icon: var(--ac-neutral-700); + --sc-tag-impact-background: var(--ac-primary-500); + --sc-tabs-tab-underline: var(--ac-primary-500); + --sc-button-outline-secondary-disabled: var(--ac-neutral-300); + --sc-button-surface-prefinance-600: var(--ac-neutral-700); + --sc-button-surface-prefinance-500: var(--ac-neutral-700); + --sc-button-surface-prefinance-400: var(--ac-neutral-700); + --sc-button-surface-standard-secondary-disabled: var(--ac-neutral-600); + --sc-button-surface-standard-secondary-default: var(--ac-neutral-700); + --sc-button-surface-standard-primary-disabled: var(--ac-neutral-500); + --sc-button-surface-standard-secondary-hover: var(--ac-neutral-200); + --sc-button-text-icon-prefinance: var(--ac-neutral-700); + --sc-button-text-icon-disabled: var(--ac-neutral-500); + --sc-button-text-icon-dark: var(--ac-neutral-0); + --sc-button-text-icon-light: var(--ac-neutral-700); + --sc-gradient-heavy-gradient-600: var(--ac-neutral-0); + --sc-gradient-heavy-gradient-500: var(--ac-neutral-0); + --sc-gradient-heavy-gradient-400: var(--ac-neutral-0); + --sc-gradient-lighter-gradient-500: var(--ac-neutral-0); + --sc-gradient-lighter-gradient-300: var(--ac-neutral-0); + --sc-icon-credibility-background: var(--ac-neutral-700); + --sc-icon-credibility-10-blue-green-gradient-600: var(--ac-primary-500); + --sc-icon-credibility-10-blue-green-gradient-500: var(--ac-primary-500); + --sc-icon-credibility-10-blue-green-gradient-400: var(--ac-primary-500); + --sc-icon-credibility-25-blue-green-gradient-600: var(--ac-primary-500); + --sc-icon-credibility-25-blue-green-gradient-500: var(--ac-primary-500); + --sc-icon-credibility-25-blue-green-gradient-400: var(--ac-primary-500); + --sc-icon-credibility-100-blue-green-gradient-600: var(--ac-neutral-0); + --sc-icon-credibility-100-blue-green-gradient-500: var(--ac-neutral-0); + --sc-icon-credibility-100-blue-green-gradient-400: var(--ac-neutral-0); + --sc-icon-sdg-background: var(--ac-neutral-700); + --sc-icon-sdg-stroke-shadow: var(--ac-neutral-500); + --sc-icon-sdg-header: var(--ac-neutral-100); + --sc-icon-sdg-number: var(--ac-neutral-0); + --sc-icon-sdg-600: var(--ac-neutral-500); + --sc-icon-sdg-500: var(--ac-neutral-500); + --sc-icon-sdg-400: var(--ac-neutral-500); + --sc-icon-ecosystem-600: var(--ac-primary-400); + --sc-icon-ecosystem-500: var(--ac-primary-400); + --sc-icon-ecosystem-400: var(--ac-primary-400); + --sc-icon-standard-shade: var(--ac-primary-500); + --sc-icon-standard-disabled: var(--ac-neutral-200); + --sc-icon-standard-background: var(--ac-neutral-500); + --sc-icon-standard-success: var(--ac-success-400); + --sc-icon-standard-error: var(--ac-error-400); + --sc-icon-standard-light: var(--ac-primary-300); + --sc-icon-standard-dark: var(--ac-primary-300); + --sc-card-credibility-diagonal-background: var(--ac-neutral-600); + --sc-card-standard-header-background: var(--ac-neutral-600); + --sc-card-standard-stroke: var(--ac-neutral-500); + --sc-card-standard-background: var(--ac-neutral-700); + --sc-surface-page-background-light: var(--ac-neutral-600); + --sc-surface-stroke: var(--ac-neutral-500); + --sc-surface-page-background-default: var(--ac-neutral-700); + --sc-text-over-image: var(--ac-neutral-0); + --sc-text-error: var(--ac-error-400); + --sc-text-disabled: var(--ac-neutral-300); + --sc-text-sub-header: var(--ac-neutral-300); + --sc-text-link: var(--ac-primary-500); + --sc-text-header: var(--ac-neutral-0); + --sc-text-paragraph: var(--ac-neutral-200); } } diff --git a/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.TerrasosFooter.tsx b/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.TerrasosFooter.tsx new file mode 100644 index 0000000000..a61dd161a7 --- /dev/null +++ b/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.TerrasosFooter.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { useLingui } from '@lingui/react'; + +import TerrasosFooter from '../TerrasosFooter'; +import { terrasosFooterSocialItems } from '../TerrasosFooter/TerrasosFooter.constants'; +import { + TERRAOS_COPYRIGHT, + TERRAOS_POWERED_BY, +} from './RegistryLayout.constants'; + +const RegistryLayoutTerrasosFooter: React.FC> = + () => { + const { _ } = useLingui(); + + return ( + + ); + }; + +export { RegistryLayoutTerrasosFooter }; diff --git a/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.constants.ts b/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.constants.ts index b52a5c68ee..9792cf453d 100644 --- a/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.constants.ts +++ b/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.constants.ts @@ -23,3 +23,5 @@ export const KEPLR_WALLET_CONNECT_SUBTITLE = msg`Blockchain-based actions such a export const KEPLR_WALLET_CONNECT_LEARN_HOW_TEXT = msg`Learn how to `; export const SWITCH_WALLET_WARNING_MODAL_TITLE = msg`Please select the following wallet address in Keplr in order to proceed`; export const SWITCH_WALLET_WARNING_MODAL_MESSAGE = msg`The email address you are using to log in is associated with the above wallet address, so it must be the currently selected account in Keplr in order to continue.`; +export const TERRAOS_POWERED_BY = msg`Powered by`; +export const TERRAOS_COPYRIGHT = msg`Copyright © 2024 Terrasos | All rights reserved`; diff --git a/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.tsx b/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.tsx index 44bfb8a21f..600da9df64 100644 --- a/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.tsx +++ b/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Outlet } from 'react-router-dom'; +import { IS_TERRASOS } from 'lib/env'; + import { PageViewTracking } from 'components/molecules/PageViewTracking'; import { ScrollToTop } from '../../atoms'; @@ -15,6 +17,7 @@ import { RegistryLayoutHeader } from './RegistryLayout.Header'; import { RegistryLayoutProcessingModal } from './RegistryLayout.ProcessingModal'; import { RetryFailedFunctions } from './RegistryLayout.RetryFailedFunctions'; import { RegistryLayoutSwitchWalletModal } from './RegistryLayout.SwitchWalletModal'; +import { RegistryLayoutTerrasosFooter } from './RegistryLayout.TerrasosFooter'; import { RegistryLayoutTxErrorModal } from './RegistryLayout.TxErrorModal'; import { RegistryLayoutTxSuccessfulModal } from './RegistryLayout.TxSuccessfulModal'; @@ -23,7 +26,11 @@ const RegistryLayout: React.FC = () => { <> - + {IS_TERRASOS ? ( + + ) : ( + + )} diff --git a/web-marketplace/src/components/organisms/TerrasosFooter/Terrasos.types.ts b/web-marketplace/src/components/organisms/TerrasosFooter/Terrasos.types.ts new file mode 100644 index 0000000000..4457022013 --- /dev/null +++ b/web-marketplace/src/components/organisms/TerrasosFooter/Terrasos.types.ts @@ -0,0 +1,5 @@ +import { SocialItem } from 'web-components/src/components/share-section/ShareSection.types'; + +export type TerrasosSocialItem = SocialItem & { + className?: string; +}; diff --git a/web-marketplace/src/components/organisms/TerrasosFooter/TerrasosFooter.constants.ts b/web-marketplace/src/components/organisms/TerrasosFooter/TerrasosFooter.constants.ts new file mode 100644 index 0000000000..2e4118377c --- /dev/null +++ b/web-marketplace/src/components/organisms/TerrasosFooter/TerrasosFooter.constants.ts @@ -0,0 +1,32 @@ +/* eslint-disable lingui/no-unlocalized-strings */ +import InstagramIcon from 'web-components/src/components/icons/social/InstagramIcon'; +import LinkedInIcon from 'web-components/src/components/icons/social/LinkedInIcon'; +import TwitterIcon from 'web-components/src/components/icons/social/TwitterIcon'; +import YoutubeIcon from 'web-components/src/components/icons/social/YoutubeIcon'; + +import { TerrasosSocialItem } from './Terrasos.types'; + +export const terrasosFooterSocialItems: TerrasosSocialItem[] = [ + { + name: 'Twitter', + href: 'https://x.com/TerrasosCo', + Icon: TwitterIcon, + }, + { + name: 'LinkedIn', + href: 'https://www.linkedin.com/company/terrasos/', + Icon: LinkedInIcon, + className: 'p-[3px]', + }, + { + name: 'Instagram', + href: 'https://www.instagram.com/terrasos_co/', + Icon: InstagramIcon, + className: 'p-[3px]', + }, + { + name: 'YouTube', + href: 'https://www.youtube.com/channel/UCXMGrR3xfTDL2Z1CyMPURJg', + Icon: YoutubeIcon, + }, +]; diff --git a/web-marketplace/src/components/organisms/TerrasosFooter/TerrasosFooter.stories.tsx b/web-marketplace/src/components/organisms/TerrasosFooter/TerrasosFooter.stories.tsx new file mode 100644 index 0000000000..f7c846b932 --- /dev/null +++ b/web-marketplace/src/components/organisms/TerrasosFooter/TerrasosFooter.stories.tsx @@ -0,0 +1,21 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { TerrasosFooter } from './TerrasosFooter'; +import { terrasosFooterSocialItems } from './TerrasosFooter.constants'; + +export default { + title: 'Marketplace/Atoms/TerrasosFooter', + component: TerrasosFooter, +} as Meta; + +type Story = StoryObj; + +export const Basic: Story = { + render: args => , +}; + +Basic.args = { + poweredBy: 'Powered by', + copyright: 'Copyright © 2024 Terrasos | All rights reserved', + socialItems: terrasosFooterSocialItems, +}; diff --git a/web-marketplace/src/components/organisms/TerrasosFooter/TerrasosFooter.tsx b/web-marketplace/src/components/organisms/TerrasosFooter/TerrasosFooter.tsx new file mode 100644 index 0000000000..287fccb3be --- /dev/null +++ b/web-marketplace/src/components/organisms/TerrasosFooter/TerrasosFooter.tsx @@ -0,0 +1,58 @@ +import RegenIcon from 'web-components/src/components/icons/RegenIcon'; +import { cn } from 'web-components/src/utils/styles/cn'; + +import { Link } from 'components/atoms'; + +import { TerrasosSocialItem } from './Terrasos.types'; + +export interface Props { + poweredBy: string; + copyright: string; + socialItems: TerrasosSocialItem[]; + className?: string; +} + +export const TerrasosFooter = ({ + poweredBy, + copyright, + socialItems, + className, +}: Props): JSX.Element => { + return ( +
+
+ +
+ + {poweredBy} + + +
+ + + {copyright} + +
+ {socialItems.map(item => ( + + + + ))} +
+
+
+ ); +}; diff --git a/web-marketplace/src/components/organisms/TerrasosFooter/index.ts b/web-marketplace/src/components/organisms/TerrasosFooter/index.ts new file mode 100644 index 0000000000..83005bcff9 --- /dev/null +++ b/web-marketplace/src/components/organisms/TerrasosFooter/index.ts @@ -0,0 +1 @@ +export { TerrasosFooter as default } from './TerrasosFooter'; diff --git a/web-marketplace/src/lib/env.ts b/web-marketplace/src/lib/env.ts index a80ff588e3..4031774bbd 100644 --- a/web-marketplace/src/lib/env.ts +++ b/web-marketplace/src/lib/env.ts @@ -1,5 +1,7 @@ import { MARKETPLACE_CLIENT_TYPE } from 'clients/Clients.types'; +import { ColorScheme } from 'web-components/src/theme/theme.types'; + export const IS_DEV = import.meta.env.DEV; export const apiServerUrl = import.meta.env.VITE_API_URI; export const SKIPPED_CLASS_ID = import.meta.env.VITE_SKIPPED_CLASS_ID; @@ -16,3 +18,5 @@ export const DEFAULT_COMMUNITY_PROJECTS_FILTER = export const MARKETPLACE_CLIENT = (import.meta.env.VITE_MARKETPLACE_CLIENT ?? 'regen') as MARKETPLACE_CLIENT_TYPE; export const IS_TERRASOS = MARKETPLACE_CLIENT === 'terrasos'; +export const IS_REGEN = MARKETPLACE_CLIENT === 'regen'; +export const COLOR_SCHEME: ColorScheme = IS_TERRASOS ? 'terrasos' : 'regen'; diff --git a/web-marketplace/src/lib/i18n/locales/en.po b/web-marketplace/src/lib/i18n/locales/en.po index 025fd179b7..60f9b7ec27 100644 --- a/web-marketplace/src/lib/i18n/locales/en.po +++ b/web-marketplace/src/lib/i18n/locales/en.po @@ -1,6 +1,6 @@ msgid "" msgstr "" -"POT-Creation-Date: 2024-10-14 10:17+0200\n" +"POT-Creation-Date: 2024-10-16 09:16+0200\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" @@ -350,7 +350,7 @@ msgid "all profiles" msgstr "" #: src/components/organisms/RegistryLayout/RegistryLayout.config.tsx:41 -#: src/pages/Projects/Projects.tsx:73 +#: src/pages/Projects/Projects.tsx:74 msgid "All projects" msgstr "" @@ -901,7 +901,7 @@ msgstr "" msgid "Class ID: unique identifier of the credit class on Regen Ledger." msgstr "" -#: src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx:165 +#: src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx:180 msgid "Clear all" msgstr "" @@ -1009,6 +1009,10 @@ msgstr "" msgid "Copy link to project page" msgstr "" +#: src/components/organisms/RegistryLayout/RegistryLayout.constants.ts:27 +msgid "Copyright © 2024 Terrasos | All rights reserved" +msgstr "" + #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:546 #: src/lib/constants/shared.constants.tsx:58 #: src/lib/constants/shared.constants.tsx:157 @@ -2556,12 +2560,16 @@ msgstr "" msgid "Postal Code" msgstr "" +#: src/components/organisms/RegistryLayout/RegistryLayout.constants.ts:26 +msgid "Powered by" +msgstr "" + #: src/lib/constants/shared.constants.tsx:176 msgid "prefinance" msgstr "" #: src/components/organisms/RegistryLayout/RegistryLayout.config.tsx:49 -#: src/pages/Projects/Projects.tsx:83 +#: src/pages/Projects/Projects.tsx:84 msgid "Prefinance projects" msgstr "" @@ -2855,7 +2863,7 @@ msgstr "" msgid "Projects" msgstr "" -#: src/pages/Projects/Projects.tsx:126 +#: src/pages/Projects/Projects.tsx:127 msgid "projects tabs" msgstr "" @@ -3197,7 +3205,7 @@ msgstr "" msgid "Select a wallet" msgstr "" -#: src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx:143 +#: src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx:158 msgid "Select all" msgstr "" @@ -3373,7 +3381,7 @@ msgstr "" msgid "Sorry, your transaction was not successful." msgstr "" -#: src/pages/Projects/AllProjects/AllProjects.tsx:207 +#: src/pages/Projects/AllProjects/AllProjects.tsx:211 msgid "Sort by:" msgstr "" diff --git a/web-marketplace/src/lib/i18n/locales/es.po b/web-marketplace/src/lib/i18n/locales/es.po index be778bf139..d7e5db5820 100644 --- a/web-marketplace/src/lib/i18n/locales/es.po +++ b/web-marketplace/src/lib/i18n/locales/es.po @@ -1,6 +1,6 @@ msgid "" msgstr "" -"POT-Creation-Date: 2024-10-14 10:17+0200\n" +"POT-Creation-Date: 2024-10-16 09:16+0200\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" @@ -350,7 +350,7 @@ msgid "all profiles" msgstr "" #: src/components/organisms/RegistryLayout/RegistryLayout.config.tsx:41 -#: src/pages/Projects/Projects.tsx:73 +#: src/pages/Projects/Projects.tsx:74 msgid "All projects" msgstr "" @@ -901,7 +901,7 @@ msgstr "" msgid "Class ID: unique identifier of the credit class on Regen Ledger." msgstr "" -#: src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx:165 +#: src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx:180 msgid "Clear all" msgstr "" @@ -1009,6 +1009,10 @@ msgstr "" msgid "Copy link to project page" msgstr "" +#: src/components/organisms/RegistryLayout/RegistryLayout.constants.ts:27 +msgid "Copyright © 2024 Terrasos | All rights reserved" +msgstr "" + #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:546 #: src/lib/constants/shared.constants.tsx:58 #: src/lib/constants/shared.constants.tsx:157 @@ -2556,12 +2560,16 @@ msgstr "" msgid "Postal Code" msgstr "" +#: src/components/organisms/RegistryLayout/RegistryLayout.constants.ts:26 +msgid "Powered by" +msgstr "" + #: src/lib/constants/shared.constants.tsx:176 msgid "prefinance" msgstr "" #: src/components/organisms/RegistryLayout/RegistryLayout.config.tsx:49 -#: src/pages/Projects/Projects.tsx:83 +#: src/pages/Projects/Projects.tsx:84 msgid "Prefinance projects" msgstr "" @@ -2855,7 +2863,7 @@ msgstr "" msgid "Projects" msgstr "" -#: src/pages/Projects/Projects.tsx:126 +#: src/pages/Projects/Projects.tsx:127 msgid "projects tabs" msgstr "" @@ -3197,7 +3205,7 @@ msgstr "" msgid "Select a wallet" msgstr "" -#: src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx:143 +#: src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx:158 msgid "Select all" msgstr "" @@ -3373,7 +3381,7 @@ msgstr "" msgid "Sorry, your transaction was not successful." msgstr "" -#: src/pages/Projects/AllProjects/AllProjects.tsx:207 +#: src/pages/Projects/AllProjects/AllProjects.tsx:211 msgid "Sort by:" msgstr "" diff --git a/web-marketplace/src/lib/normalizers/projects/normalizeProjectsWithOrderData.ts b/web-marketplace/src/lib/normalizers/projects/normalizeProjectsWithOrderData.ts index 3d3c72c72f..d1674e5476 100644 --- a/web-marketplace/src/lib/normalizers/projects/normalizeProjectsWithOrderData.ts +++ b/web-marketplace/src/lib/normalizers/projects/normalizeProjectsWithOrderData.ts @@ -1,6 +1,7 @@ import { ProjectInfo } from '@regen-network/api/lib/generated/regen/ecocredit/v1/query'; import { AllCreditClassQuery } from 'generated/sanity-graphql'; +import { IS_TERRASOS } from 'lib/env'; import { ProjectWithOrderData } from 'pages/Projects/AllProjects/AllProjects.types'; import { @@ -38,10 +39,14 @@ export const normalizeProjectsWithOrderData = ({ creditClassIdOrUrl: project.classId ?? '', }); + const defaultProjectImage = IS_TERRASOS + ? '/jpg/default-project2.jpg' + : '/jpg/default-project.jpg'; + return { id: project.id, name: project.id, - imgSrc: '/jpg/default-project.jpg', + imgSrc: defaultProjectImage, place: project.jurisdiction, area: 0, areaUnit: '', diff --git a/web-marketplace/src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx b/web-marketplace/src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx index 2ede1b475b..cac851e948 100644 --- a/web-marketplace/src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx +++ b/web-marketplace/src/pages/Projects/AllProjects/AllProjects.SideFilter.tsx @@ -24,6 +24,7 @@ import { useCommunityProjectsAtom, } from 'lib/atoms/projects.atoms'; import { SEE_LESS, SEE_MORE } from 'lib/constants/shared.constants'; +import { COLOR_SCHEME, IS_TERRASOS } from 'lib/env'; import { useTracker } from 'lib/tracker/useTracker'; import { CommunityFilter } from './AllProjects.CommunityFilter'; @@ -80,9 +81,19 @@ export const SideFilter = ({ size="small" onClick={() => setIsOpen(true)} startIcon={ - + } - sx={[{ mr: 4 }, ...sxToArray(sx)]} + sx={[ + { + mr: 4, + }, + ...sxToArray(sx), + ]} > {_(SIDE_FILTERS_BUTTON)} diff --git a/web-marketplace/src/pages/Projects/AllProjects/AllProjects.tsx b/web-marketplace/src/pages/Projects/AllProjects/AllProjects.tsx index 5d43986140..19963e88df 100644 --- a/web-marketplace/src/pages/Projects/AllProjects/AllProjects.tsx +++ b/web-marketplace/src/pages/Projects/AllProjects/AllProjects.tsx @@ -30,7 +30,12 @@ import { getProjectCardButtonMapping, getProjectCardPurchaseDetailsTitleMapping, } from 'lib/constants/shared.constants'; -import { CREDIT_CLASS_FILTERS_TO_DESELECT, IS_TERRASOS } from 'lib/env'; +import { + COLOR_SCHEME, + CREDIT_CLASS_FILTERS_TO_DESELECT, + IS_REGEN, + IS_TERRASOS, +} from 'lib/env'; import { getAllSanityCreditClassesQuery } from 'lib/queries/react-query/sanity/getAllCreditClassesQuery/getAllCreditClassesQuery'; import { useTracker } from 'lib/tracker/useTracker'; @@ -233,10 +238,14 @@ export const AllProjects: React.FC> = () => { place={project?.place} area={project?.area} areaUnit={project?.areaUnit} - onButtonClick={() => { - setSelectedProject(project); - setIsBuyFlowStarted(true); - }} + onButtonClick={ + IS_TERRASOS + ? undefined + : () => { + setSelectedProject(project); + setIsBuyFlowStarted(true); + } + } purchaseInfo={project.purchaseInfo || {}} onClick={() => navigate(`/project/${project.id}`)} imageStorageBaseUrl={IMAGE_STORAGE_BASE_URL} @@ -253,6 +262,7 @@ export const AllProjects: React.FC> = () => { bodyTexts={bodyTexts} purchaseDetailsTitles={purchaseDetailsTitles} buttons={buttons} + useProjectCardButton={IS_REGEN} /> ); @@ -292,6 +302,7 @@ export const AllProjects: React.FC> = () => { page={Number(routePage)} onChange={(event, value) => navigate(`/projects/${value}`)} size={isMobile ? 'small' : 'large'} + colorScheme={COLOR_SCHEME} /> {config.buySellOrderFlow && ( diff --git a/web-marketplace/src/pages/Projects/Projects.tsx b/web-marketplace/src/pages/Projects/Projects.tsx index a20a6f9f35..bbbd5e5dfe 100644 --- a/web-marketplace/src/pages/Projects/Projects.tsx +++ b/web-marketplace/src/pages/Projects/Projects.tsx @@ -19,6 +19,7 @@ import { useCommunityProjectsAtom, } from 'lib/atoms/projects.atoms'; import { client as sanityClient } from 'lib/clients/sanity'; +import { IS_TERRASOS } from 'lib/env'; import { getAllHomePageQuery } from 'lib/queries/react-query/sanity/getAllHomePageQuery/getAllHomePageQuery'; import { Link } from 'components/atoms'; @@ -154,7 +155,7 @@ const Projects = (): JSX.Element => { />
- {gettingStartedResourcesSection && ( + {gettingStartedResourcesSection && !IS_TERRASOS && (