feat: APP-305 update projects page color (#2504)

regen-network · Oct 18, 2024 · d6bdecb · d6bdecb
1 parent b883f3e
commit d6bdecb
Show file tree

Hide file tree

Showing 36 changed files with 561 additions and 206 deletions.
diff --git 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
@@ -24,7 +24,7 @@ export const PrefinanceTag = ({
 }) => (
  <div
  className={cn(
- 'bg-purple-gradient rounded-r-[5px] flex items-center justify-center px-10 py-[3px] text-grey-0 absolute top-30 left-0',
+ 'rounded-r-[5px] flex items-center justify-center px-10 py-[3px] absolute top-30 left-0 text-sc-tag-prefinance-text-icon bg-prefinance-tag',
  classNames.root,
  )}
  >

diff --git 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)<ButtonProps>(() => ({
+ 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
@@ -120,14 +120,22 @@ export const CreditPrice = ({
  }}
  >
  {isSoldOut && !isPrefinanceProject ? (
- <GradientBadge label={bodyTexts.soldOut} />
+ <GradientBadge
+ className="text-sc-button-text-icon-dark"
+ label={bodyTexts.soldOut}
+ variant={'green'}
+ />
  ) : (
  <>
  {purchaseInfo?.sellInfo?.creditsAvailable ??
  projectPrefinancing?.estimatedIssuance ??
  '0'}
  {isSoldOut && (
- <GradientBadge className="ml-5" label={bodyTexts.soldOut} />
+ <GradientBadge
+ className="ml-5"
+ label={bodyTexts.soldOut}
+ variant="green"
+ />
  )}
  </>
  )}

diff --git 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}
  </ContainedButton>
  ))}
- {(onButtonClick || isPrefinanceProject || offChain) &&
+ {(hasButton || isPrefinanceProject || offChain) &&
+ useProjectCardButton &&
  (isButtonDisabled && createPostTooltipText ? (
  <InfoTooltip
  arrow

diff --git a/web-components/src/components/cards/card.stories.tsx b/web-components/src/components/cards/card.stories.tsx
@@ -159,6 +159,30 @@ export const projectCard = (): JSX.Element => (
  purchaseDetailsTitles={projectCardPurchaseDetailsTitleMapping}
  buttons={projectCardButtonMapping}
  />
+
+ <ProjectCard
+ track={trackMock}
+ name="Coorong Project"
+ place={'Adelaide, South Australia, Australia'}
+ area={200}
+ comingSoon={false}
+ areaUnit="hectares"
+ imgSrc="/coorong.png"
+ tag="biodiversity"
+ onClick={onClick}
+ sx={{ maxWidth: 338, mr: 10, mb: 10 }}
+ projectPrefinancing={{
+ isPrefinanceProject: true,
+ price: '100',
+ estimatedIssuance: '200',
+ stripePaymentLink: 'https://stripe.com',
+ }}
+ draftText="Draft"
+ bodyTexts={projectCardBodyTextMapping}
+ purchaseDetailsTitles={projectCardPurchaseDetailsTitleMapping}
+ buttons={projectCardButtonMapping}
+ colorScheme="terrasos"
+ />
  </Box>
 );
 

diff --git 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
@@ -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
@@ -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
@@ -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}
  >
- <circle cx={25.5} cy={25} r={25} fill="currentColor" />
+ <circle
+ cx={25.5}
+ cy={25}
+ r={25}
+ fill={isDisabled ? 'currentColor' : 'url(#paint0_linear_2124_4005)'}
+ />
  <path
  fillRule="evenodd"
  clipRule="evenodd"
  d="M17.75 27a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25H29.9l-5.223-5.223a.25.25 0 0 1 0-.354l1.06-1.06a.25.25 0 0 1 .354 0l7.465 7.465a.25.25 0 0 1 .074.182.25.25 0 0 1-.074.182l-7.465 7.465a.25.25 0 0 1-.354 0l-1.06-1.06a.25.25 0 0 1 0-.354L29.92 27H17.75Z"
  fill="#fff"
  />
+ <linearGradient
+ id="paint0_linear_2124_4005"
+ x1="40.4762"
+ y1="9.04192e-07"
+ x2="15.3347"
+ y2="55.4228"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop stopColor="rgba(var(--sc-icon-credibility-100-blue-green-gradient-600) / 1)" />
+ <stop
+ offset="0.5"
+ stopColor="rgba(var(--sc-icon-credibility-100-blue-green-gradient-500) / 1)"
+ />
+ <stop
+ offset="1"
+ stopColor="rgba(var(--sc-icon-credibility-100-blue-green-gradient-400) / 1)"
+ />
+ </linearGradient>
  </SvgIcon>
  );
 }
diff --git 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}
  >
- <circle cx={25.5} cy={25} r={25} fill="currentColor" />
+ <circle
+ cx={25.5}
+ cy={25}
+ r={25}
+ fill={isDisabled ? 'currentColor' : 'url(#paint0_linear_2124_4006)'}
+ />
  <path
  fillRule="evenodd"
  clipRule="evenodd"
  d="M17.75 27a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25H29.9l-5.223-5.223a.25.25 0 0 1 0-.354l1.06-1.06a.25.25 0 0 1 .354 0l7.465 7.465a.25.25 0 0 1 .074.182.25.25 0 0 1-.074.182l-7.465 7.465a.25.25 0 0 1-.354 0l-1.06-1.06a.25.25 0 0 1 0-.354L29.92 27H17.75Z"
  fill="#fff"
  />
+ <linearGradient
+ id="paint0_linear_2124_4006"
+ x1="40.4762"
+ y1="9.04192e-07"
+ x2="15.3347"
+ y2="55.4228"
+ gradientUnits="userSpaceOnUse"
+ >
+ <stop stopColor="rgba(var(--sc-icon-credibility-100-blue-green-gradient-600) / 1)" />
+ <stop
+ offset="0.5"
+ stopColor="rgba(var(--sc-icon-credibility-100-blue-green-gradient-500) / 1)"
+ />
+ <stop
+ offset="1"
+ stopColor="rgba(var(--sc-icon-credibility-100-blue-green-gradient-400) / 1)"
+ />
+ </linearGradient>
  </SvgIcon>
  );
 }
diff --git 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}
  />
  <path
@@ -42,12 +44,29 @@ export default function ArrowSkipLeftIcon({
  y2={55.423}
  gradientUnits="userSpaceOnUse"
  >
- <stop stopColor={disabled ? 'currentColor' : '#527984'} />
+ <stop
+ stopColor={
+ disabled || !useGradient
+ ? 'currentColor'
+ : 'rgba(var(--sc-tag-prefinance-600) / 1)'
+ }
+ />
  <stop
  offset={0.5}
- stopColor={disabled ? 'currentColor' : '#79C6AA'}
+ stopColor={
+ disabled || !useGradient
+ ? 'currentColor'
+ : 'rgba(var(--sc-tag-prefinance-500) / 1)'
+ }
+ />
+ <stop
+ offset={1}
+ stopColor={
+ disabled || !useGradient
+ ? 'currentColor'
+ : 'rgba(var(--sc-tag-prefinance-400) / 1)'
+ }
  />
- <stop offset={1} stopColor={disabled ? 'currentColor' : '#C4DAB5'} />
  </linearGradient>
  </defs>
  </SvgIcon>

diff --git 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}
  />
  <path
@@ -38,12 +40,29 @@ export default function ArrowSkipRightIcon({
  y2={55.423}
  gradientUnits="userSpaceOnUse"
  >
- <stop stopColor={disabled ? 'currentColor' : '#527984'} />
+ <stop
+ stopColor={
+ disabled || !useGradient
+ ? 'currentColor'
+ : 'rgba(var(--sc-tag-prefinance-600) / 1)'
+ }
+ />
  <stop
  offset={0.5}
- stopColor={disabled ? 'currentColor' : '#79C6AA'}
+ stopColor={
+ disabled || !useGradient
+ ? 'currentColor'
+ : 'rgba(var(--sc-tag-prefinance-500) / 1)'
+ }
+ />
+ <stop
+ offset={1}
+ stopColor={
+ disabled || !useGradient
+ ? 'currentColor'
+ : 'rgba(var(--sc-tag-prefinance-400) / 1)'
+ }
  />
- <stop offset={1} stopColor={disabled ? 'currentColor' : '#C4DAB5'} />
  </linearGradient>
  </defs>
  </SvgIcon>