Skip to content

Commit

Permalink
misc: restore list item icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@ansmonjol
ansmonjol committed Jan 6, 2025
1 parent 3fdf893 commit 9bdab19
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 44 deletions.
39 changes: 23 additions & 16 deletions src/pages/AddOnsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import styled from 'styled-components'
import { DeleteAddOnDialog, DeleteAddOnDialogRef } from '~/components/addOns/DeleteAddOnDialog'
import {
ActionItem,
Avatar,
ButtonLink,
Icon,
InfiniteScroll,
Table,
Typography,
Expand Down Expand Up @@ -116,22 +118,27 @@ const AddOnsList = () => {
minWidth: 200,
maxSpace: true,
content: ({ name, amountCents, amountCurrency }) => (
<>
<Typography color="textSecondary" variant="bodyHl" noWrap>
{name}
</Typography>
<Typography variant="caption" noWrap>
{translate('text_629728388c4d2300e2d3810b', {
amountWithCurrency: intlFormatNumber(
deserializeAmount(amountCents, amountCurrency) || 0,
{
currencyDisplay: 'symbol',
currency: amountCurrency,
},
),
})}
</Typography>
</>
<div className="flex items-center gap-3">
<Avatar size="big" variant="connector">
<Icon name="puzzle" color="dark" />
</Avatar>
<div>
<Typography color="textSecondary" variant="bodyHl" noWrap>
{name}
</Typography>
<Typography variant="caption" noWrap>
{translate('text_629728388c4d2300e2d3810b', {
amountWithCurrency: intlFormatNumber(
deserializeAmount(amountCents, amountCurrency) || 0,
{
currencyDisplay: 'symbol',
currency: amountCurrency,
},
),
})}
</Typography>
</div>
</div>
),
},
{
Expand Down
30 changes: 21 additions & 9 deletions src/pages/BillableMetricsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,14 @@ import {
DeleteBillableMetricDialog,
DeleteBillableMetricDialogRef,
} from '~/components/billableMetrics/DeleteBillableMetricDialog'
import { ButtonLink, InfiniteScroll, Table, Typography } from '~/components/designSystem'
import {
Avatar,
ButtonLink,
Icon,
InfiniteScroll,
Table,
Typography,
} from '~/components/designSystem'
import { SearchInput } from '~/components/SearchInput'
import { CREATE_BILLABLE_METRIC_ROUTE, UPDATE_BILLABLE_METRIC_ROUTE } from '~/core/router'
import { useBillableMetricsLazyQuery } from '~/generated/graphql'
Expand Down Expand Up @@ -104,14 +111,19 @@ const BillableMetricsList = () => {
minWidth: 200,
maxSpace: true,
content: ({ name, code }) => (
<>
<Typography color="textSecondary" variant="bodyHl" noWrap>
{name}
</Typography>
<Typography variant="caption" noWrap>
{code}
</Typography>
</>
<div className="flex items-center gap-3">
<Avatar size="big" variant="connector">
<Icon name="pulse" color="dark" />
</Avatar>
<div>
<Typography color="textSecondary" variant="bodyHl" noWrap>
{name}
</Typography>
<Typography variant="caption" noWrap>
{code}
</Typography>
</div>
</div>
),
},
{
Expand Down
19 changes: 13 additions & 6 deletions src/pages/CouponsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import {
TerminateCouponDialogRef,
} from '~/components/coupons/TerminateCouponDialog'
import {
Avatar,
ButtonLink,
Icon,
InfiniteScroll,
Status,
StatusProps,
Expand Down Expand Up @@ -145,12 +147,17 @@ const CouponsList = () => {
minWidth: 200,
maxSpace: true,
content: (coupon) => (
<>
<Typography color="textSecondary" variant="bodyHl" noWrap>
{coupon.name}
</Typography>
<CouponCaption coupon={coupon} variant="caption" />
</>
<div className="flex items-center gap-3">
<Avatar size="big" variant="connector">
<Icon name="coupon" color="dark" />
</Avatar>
<div>
<Typography color="textSecondary" variant="bodyHl" noWrap>
{coupon.name}
</Typography>
<CouponCaption coupon={coupon} variant="caption" />
</div>
</div>
),
},
{
Expand Down
23 changes: 18 additions & 5 deletions src/pages/CustomersList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import {
DeleteCustomerDialog,
DeleteCustomerDialogRef,
} from '~/components/customers/DeleteCustomerDialog'
import { Button, InfiniteScroll, Table, Typography } from '~/components/designSystem'
import { computeCustomerInitials } from '~/components/customers/utils'
import { Avatar, Button, InfiniteScroll, Table, Typography } from '~/components/designSystem'
import { PaymentProviderChip } from '~/components/PaymentProviderChip'
import { SearchInput } from '~/components/SearchInput'
import { CUSTOMER_DETAILS_ROUTE } from '~/core/router'
Expand Down Expand Up @@ -121,11 +122,22 @@ const CustomersList = () => {
{
key: 'displayName',
title: translate('text_624efab67eb2570101d117cc'),
content: ({ displayName }) => {
minWidth: 200,
content: (customer) => {
const customerInitials = computeCustomerInitials(customer)

return (
<Typography variant="bodyHl" color="textSecondary" noWrap>
{displayName || '-'}
</Typography>
<div className="flex items-center gap-3">
<Avatar
variant="user"
size="medium"
identifier={customer.displayName as string}
initials={customerInitials}
/>
<Typography variant="bodyHl" color="textSecondary" noWrap>
{customer.displayName || '-'}
</Typography>
</div>
)
},
},
Expand All @@ -134,6 +146,7 @@ const CustomersList = () => {
title: translate('text_6419c64eace749372fc72b27'),
content: ({ email }) => email || '-',
maxSpace: true,
minWidth: 200,
},
{
key: 'activeSubscriptionsCount',
Expand Down
28 changes: 20 additions & 8 deletions src/pages/PlansList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,14 @@ import { useRef } from 'react'
import { generatePath, useNavigate } from 'react-router-dom'
import styled from 'styled-components'

import { ButtonLink, InfiniteScroll, Table, Typography } from '~/components/designSystem'
import {
Avatar,
ButtonLink,
Icon,
InfiniteScroll,
Table,
Typography,
} from '~/components/designSystem'
import { DeletePlanDialog, DeletePlanDialogRef } from '~/components/plans/DeletePlanDialog'
import { SearchInput } from '~/components/SearchInput'
import { updateDuplicatePlanVar } from '~/core/apolloClient/reactiveVars/duplicatePlanVar'
Expand Down Expand Up @@ -115,13 +122,18 @@ const PlansList = () => {
maxSpace: true,
minWidth: 200,
content: ({ name, code }) => (
<div>
<Typography color="textSecondary" variant="bodyHl" noWrap>
{name}
</Typography>
<Typography variant="caption" noWrap>
{code}
</Typography>
<div className="flex items-center gap-3">
<Avatar size="big" variant="connector">
<Icon name="board" color="dark" />
</Avatar>
<div>
<Typography color="textSecondary" variant="bodyHl" noWrap>
{name}
</Typography>
<Typography variant="caption" noWrap>
{code}
</Typography>
</div>
</div>
),
},
Expand Down

0 comments on commit 9bdab19

Please sign in to comment.