@tap-payments/os-micro-frontend-shared 0.1.358 → 0.1.359

package/build/components/TableCells/CustomCells/PayoutStatusCell/PayoutStatusCell.js

@@ -12,15 +12,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import camelCase from 'lodash/camelCase';
 import { useTranslation } from 'react-i18next';
+import { useTheme } from '@mui/material/styles';
 import Tooltip from '../../../Tooltip';
 import { TableCell } from '../../../TableCells';
 import { payoutStatusIcons } from './constant';
 import { StatusCellContainer, StatusIconWrapper, StatusIcon } from '../style';
 function PayoutStatusCell(_a) {
-    var { payoutStatus } = _a, props = __rest(_a, ["payoutStatus"]);
+    var { payoutStatus = 'PAID_OUT' } = _a, props = __rest(_a, ["payoutStatus"]);
     const { t } = useTranslation();
+    const theme = useTheme();
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StatusCellContainer, { children: _jsx(StatusIconWrapper, Object.assign({ className: "payout-status", style: {
                     visibility: 'visible',
-                } }, { children: payoutStatus && payoutStatusIcons[payoutStatus] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(payoutStatus)) }, { children: _jsx(StatusIcon, { src: payoutStatusIcons[payoutStatus], alt: "settled-icon" }) }))) })) }) })));
+                    width: '36px',
+                    borderRadius: '23.1px',
+                    backgroundColor: theme.palette.common.white,
+                    border: `1.029px solid ${theme.palette.divider}`,
+                } }, { children: payoutStatus && payoutStatusIcons[payoutStatus] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(payoutStatus)) }, { children: _jsx(StatusIcon, { src: payoutStatusIcons[payoutStatus], alt: "settled-icon", style: { width: '16px', height: '16px', objectFit: 'contain' } }) }))) })) }) })));
 }
 export default PayoutStatusCell;

package/build/components/TableCells/CustomCells/style.js

@@ -117,21 +117,19 @@ export const StatusCellContainer = styled('span')(({ theme }) => ({
     justifyContent: 'flex-start',
     gap: theme.spacing(1),
 }));
-export const StatusIconWrapper = styled('span')(({ theme }) => ({
-    width: '36px',
+export const StatusIconWrapper = styled('span')(() => ({
+    width: '24px',
     height: '24px',
-    borderRadius: '23.1px',
-    backgroundColor: theme.palette.common.white,
-    border: `1.029px solid ${theme.palette.divider}`,
+    borderRadius: '50%',
+    backgroundColor: 'transparent',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
 }));
 export const StatusIcon = styled('img')(() => ({
-    width: '16px',
-    height: '16px',
-    objectFit: 'contain',
+    width: '36px',
+    height: '24px',
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
     background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.358",
+  "version": "0.1.359",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",