style: small layout updates

regen-network · Sep 26, 2024 · a6b6ece · a6b6ece
1 parent bd3fa20
commit a6b6ece
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 53 deletions.
diff --git a/web-marketplace/src/components/organisms/Order/Order.Credits.tsx b/web-marketplace/src/components/organisms/Order/Order.Credits.tsx
@@ -34,14 +34,18 @@ export const OrderCredits = ({
  <SupCurrencyAndAmount
  price={+price}
  currencyCode={denom}
- className="mr-10"
+ className="mr-10 text-base"
  />
- <DenomIconWithCurrency currency={denom} />
+ <DenomIconWithCurrency currency={denom} className="mt-5" />
  </div>
  }
  />
- <OrderSummaryRow title={_(msg`# credits`)} value={credits} />
- <hr className="w-full inline-block border-solid border-0 border-b-[1px] border-grey-300" />
+ <OrderSummaryRow
+ title={_(msg`# credits`)}
+ titleClassName="mt-[6px]"
+ value={<span className="text-base">{credits}</span>}
+ />
+ <hr className="w-full inline-block border-solid border-0 border-b-[1px] border-grey-300 mb-10" />
  <OrderSummaryRow
  title={_(msg`total price`)}
  value={
@@ -51,7 +55,7 @@ export const OrderCredits = ({
  currencyCode={denom}
  className="mr-10 text-lg pb-5"
  />
- <DenomIconWithCurrency currency={denom} />
+ <DenomIconWithCurrency currency={denom} className="mt-5" />
  </div>
  }
  className="flex items-baseline"

diff --git a/web-marketplace/src/components/organisms/Order/Order.Label.tsx b/web-marketplace/src/components/organisms/Order/Order.Label.tsx
@@ -31,11 +31,11 @@ const labelConfig: LabelConfig = {
  [ORDER_STATUS.delivered]: {
  variant: 'success' as InfoLabelVariant,
  label: CREDITS_DELIVERED,
- labelColor: 'text-brand-400',
+ labelColor: 'text-brand-500',
  icon: (
  <ArrowDownIcon
  sx={theme => ({
- color: theme.palette.secondary.main,
+ color: theme.palette.green?.dark,
  display: 'flex',
  alignItems: 'center',
  })}
@@ -70,7 +70,7 @@ export const OrderLabel = ({
  variant={variant}
  label={_(label)}
  sx={{ padding: '6px 10px', borderRadius: '50px' }}
- labelClassName={`${labelColor} text-xs font-extrabold`}
+ labelClassName={`${labelColor} text-xs font-bold`}
  icon={icon}
  wrapperClassName={wrapperClassName}
  />

diff --git a/web-marketplace/src/components/organisms/Order/Order.PaymentInfo.tsx b/web-marketplace/src/components/organisms/Order/Order.PaymentInfo.tsx
@@ -13,8 +13,8 @@ export const OrderPaymentInfo = ({
  title,
  data,
 }: OrderSummarySectionProps) => {
- const { nameOnCard, denom, cardInfo } = data as PaymentInfoData;
- const isCardPayment = nameOnCard && cardInfo && denom === 'usd';
+ const { nameOnCard, denom, cardLast4 } = data as PaymentInfoData;
+ const isCardPayment = nameOnCard && cardLast4 && denom === 'usd';
  const { _ } = useLingui();
  return (
  <section className="flex gap-20">
@@ -32,9 +32,9 @@ export const OrderPaymentInfo = ({
  <OrderSummaryRow
  title={_(msg`card info`)}
  value={
- <p>
- {_(msg`Visa ending in`)} {cardInfo}
- </p>
+ <span>
+ {_(msg`Visa ending in`)} {cardLast4}
+ </span>
  }
  className="flex items-center"
  />

diff --git a/web-marketplace/src/components/organisms/Order/Order.RetirementInfo.tsx b/web-marketplace/src/components/organisms/Order/Order.RetirementInfo.tsx
@@ -29,7 +29,7 @@ export const OrderRetirementInfo = ({
  {isTradable ? (
  <OrderSummaryRow
  title={_(msg`Tradable Credits`)}
- value={tradableCredits}
+ value={<span className="italic">{tradableCredits}</span>}
  clampDescription={false}
  />
  ) : (

diff --git a/web-marketplace/src/components/organisms/Order/Order.SummaryRow.tsx b/web-marketplace/src/components/organisms/Order/Order.SummaryRow.tsx
@@ -5,17 +5,19 @@ export const OrderSummaryRow = ({
  value,
  className = '',
  clampDescription = true,
+ titleClassName = '',
 }: {
  title: string | JSX.Element;
  value: string | boolean | null | JSX.Element;
  className?: string;
  clampDescription?: boolean;
+ titleClassName?: string;
 }) => {
  return (
  <div className={`grid grid-cols-[105px_auto] mb-10 ${className}`}>
  <Title
  variant="h6"
- className="text-grey-400 text-xs font-extrabold font-['Lato'] uppercase tracking-[1px] mt-[3px]"
+ className={`text-grey-400 text-xs font-extrabold font-['Lato'] uppercase tracking-[1px] mt-[3px] ${titleClassName}`}
  >
  {title}
  </Title>

diff --git a/web-marketplace/src/components/organisms/Order/Order.constants.ts b/web-marketplace/src/components/organisms/Order/Order.constants.ts
@@ -6,4 +6,4 @@ export const ORDER_STATUS = {
 } as const;
 
 export const CREDITS_DELIVERED = msg`Credits delivered`;
-export const CREDITS_ISSUANCE_PENDING = msg`credits issuance pending`;
+export const CREDITS_ISSUANCE_PENDING = msg`Credits issuance pending`;
diff --git a/web-marketplace/src/components/organisms/Order/Order.mock.tsx b/web-marketplace/src/components/organisms/Order/Order.mock.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable lingui/no-unlocalized-strings */
 import { BlockchainIcon } from 'web-components/src/components/icons/BlockchainIcon';
 import CertifiedDocumentIcon from 'web-components/src/components/icons/CertifiedDocumentIcon';
-import CurrentCreditsIcon from 'web-components/src/components/icons/CurrentCreditsIcon';
+import CreditsIcon from 'web-components/src/components/icons/CreditsIcon';
 import { PaymentInfoIcon } from 'web-components/src/components/icons/PaymentInfoIcon';
 
 import { OrderSummarySectionProps } from './Order.types';
@@ -28,7 +28,7 @@ export const blockchainDetails: OrderSummarySectionProps = {
 };
 
 export const credits: OrderSummarySectionProps = {
- icon: <CurrentCreditsIcon width="18" height="18" className="text-grey-500" />,
+ icon: <CreditsIcon fontSize="medium" className="text-grey-500" />,
  title: 'Credits',
  data: {
  credits: '2',
@@ -43,6 +43,6 @@ export const paymentInfo: OrderSummarySectionProps = {
  data: {
  denom: 'usd',
  nameOnCard: 'Steph Green',
- cardInfo: '1234',
+ cardLast4: '1234',
  },
 };
diff --git a/web-marketplace/src/components/organisms/Order/Order.stories.tsx b/web-marketplace/src/components/organisms/Order/Order.stories.tsx
@@ -141,6 +141,13 @@ TradableOrder.args = {
  },
  order: {
  ...args.order,
+ credits: {
+ ...args.order.credits,
+ data: {
+ ...args.order.credits.data,
+ denom: 'usdc',
+ },
+ },
  retirementInfo: {
  ...args.order.retirementInfo,
  data: {
@@ -149,5 +156,12 @@ TradableOrder.args = {
  'Credits were purchased in a tradable format and were not retired',
  },
  },
+ paymentInfo: {
+ ...args.order.paymentInfo,
+ data: {
+ ...args.order.paymentInfo.data,
+ denom: 'usdc',
+ },
+ },
  },
 };
diff --git a/web-marketplace/src/components/organisms/Order/Order.test.tsx b/web-marketplace/src/components/organisms/Order/Order.test.tsx
@@ -220,7 +220,7 @@ describe('Order Component', () => {
  data: {
  ...mockOrderData.order.paymentInfo.data,
  nameOnCard: 'John Doe',
- cardInfo: '1234',
+ cardLast4: '1234',
  denom: 'usd',
  },
  },

diff --git a/web-marketplace/src/components/organisms/Order/Order.tsx b/web-marketplace/src/components/organisms/Order/Order.tsx
@@ -12,17 +12,18 @@ import {
 import OutlinedButton from 'web-components/src/components/buttons/OutlinedButton';
 import Card from 'web-components/src/components/cards/Card';
 import CertifiedDocumentIcon from 'web-components/src/components/icons/CertifiedDocumentIcon';
-import ReceiptIcon from 'web-components/src/components/icons/ReceiptIcon';
+// import ReceiptIcon from 'web-components/src/components/icons/ReceiptIcon';
 import { Image } from 'web-components/src/components/image';
 import ProjectPlaceInfo from 'web-components/src/components/place/ProjectPlaceInfo';
 import { PrefinanceTag } from 'web-components/src/components/PrefinanceTag/PrefinanceTag';
 import { Title } from 'web-components/src/components/typography';
 
+import { getProjectCardBodyTextMapping } from 'lib/constants/shared.constants';
+
 import { ORDER_STATUS } from './Order.constants';
 import { OrderLabel } from './Order.Label';
 import { OrderSummary } from './Order.Summary';
 import { OrderDataProps, RetirementInfoData } from './Order.types';
-import { getProjectCardBodyTextMapping } from 'lib/constants/shared.constants';
 
 export const Order = (orderData: OrderDataProps) => {
  const theme = useTheme();
@@ -74,7 +75,11 @@ export const Order = (orderData: OrderDataProps) => {
  classNames={{ root: 'z-50 absolute top-10' }}
  />
  )}
- <Image className="z-40" src={project.imageSrc} width={1560} />
+ <Image
+ className="z-40 w-full h-auto max-w-full max-h-full object-contain"
+ src={project.imageSrc}
+ width={1560}
+ />
  </Avatar>
  ) : (
  <></>

diff --git a/web-marketplace/src/pages/Orders/Orders.tsx b/web-marketplace/src/pages/Orders/Orders.tsx
@@ -75,37 +75,35 @@ export const Orders = () => {
  ];
 
  return (
- <div className="bg-grey-100">
- <div className="flex flex-col justify-start items-center lg:items-start lg:flex-row lg:justify-evenly max-w-[1140px] mx-auto p-10 lg:py-50 lg:px-15 min-h-screen">
- <ProfileEditNav
- section={section}
- onNavClick={onNavClick}
- className={cn(
- 'flex-col lg:flex w-full lg:w-fit md:mr-50',
- section ? 'hidden' : 'flex',
- )}
- />
- <Flex
- sx={{
- flexDirection: 'column',
- alignItems: 'center',
- }}
- className="w-full lg:w-[950px]"
- >
- <Flex justifyContent="space-between" className="mb-25 w-full">
- <Title variant="h3">
- <Trans>My Orders</Trans>
- </Title>
- </Flex>
- <WithLoader isLoading={false} sx={{ mx: 'auto' }}>
- <div className="w-full py-40 px-10 md:py-50 md:px-40 rounded-md border border-grey-200 bg-grey-0">
- {orders.map((order, index) => (
- <Order key={`${order.project.name}-${index}`} {...order} />
- ))}
- </div>
- </WithLoader>
+ <div className="flex flex-col justify-start items-center lg:items-start lg:flex-row lg:justify-evenly max-w-[1140px] mx-auto p-10 lg:py-50 lg:px-15 min-h-screen">
+ <ProfileEditNav
+ section={section}
+ onNavClick={onNavClick}
+ className={cn(
+ 'flex-col lg:flex w-full lg:w-fit md:mr-50',
+ section ? 'hidden' : 'flex',
+ )}
+ />
+ <Flex
+ sx={{
+ flexDirection: 'column',
+ alignItems: 'center',
+ }}
+ className="w-full lg:w-[950px]"
+ >
+ <Flex justifyContent="space-between" className="mb-25 w-full">
+ <Title variant="h3">
+ <Trans>My Orders</Trans>
+ </Title>
  </Flex>
- </div>
+ <WithLoader isLoading={false} sx={{ mx: 'auto' }}>
+ <div className="w-full rounded-md border border-grey-200 bg-grey-0">
+ {orders.map((order, index) => (
+ <Order key={`${order.project.name}-${index}`} {...order} />
+ ))}
+ </div>
+ </WithLoader>
+ </Flex>
  </div>
  );
 };