Skip to content

Commit

Permalink
fix (#4973)
Browse files Browse the repository at this point in the history
  • Loading branch information
benisgold committed Jul 27, 2023
1 parent 5cedcf7 commit afe451f
Show file tree
Hide file tree
Showing 8 changed files with 28 additions and 31 deletions.
Binary file removed src/assets/offerMask.png
Binary file not shown.
Binary file removed src/assets/[email protected]
Binary file not shown.
Binary file removed src/assets/[email protected]
Binary file not shown.
Binary file removed src/assets/offerRowMask.png
Binary file not shown.
Binary file removed src/assets/[email protected]
Binary file not shown.
Binary file removed src/assets/[email protected]
Binary file not shown.
37 changes: 18 additions & 19 deletions src/components/cards/NFTOffersCard/Offer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,32 +26,31 @@ import Routes from '@/navigation/routesNames';
import { analyticsV2 } from '@/analytics';
import { useTheme } from '@/theme';
import { CardSize } from '@/components/unique-token/CardSize';
import { deviceUtils } from '@/utils';
// import { deviceUtils } from '@/utils';
import * as i18n from '@/languages';
import { useRecoilValue } from 'recoil';
import { nftOffersSortAtom } from '@/components/nft-offers/SortMenu';
import { View } from 'react-native';
import OfferMask from '@/assets/offerMask.png';
import { Source } from 'react-native-fast-image';
import Svg, { Path } from 'react-native-svg';

const TWO_HOURS_MS = 2 * 60 * 60 * 1000;
export const CELL_HORIZONTAL_PADDING = 7;
const CONTAINER_HORIZONTAL_PADDING = 20;
export const NFT_IMAGE_SIZE =
(deviceUtils.dimensions.width -
CONTAINER_HORIZONTAL_PADDING * 2 -
2 * CELL_HORIZONTAL_PADDING * 3) /
4;
// const CONTAINER_HORIZONTAL_PADDING = 20;
// have to remove this bc it svg mask doesn't scale with it
// export const NFT_IMAGE_SIZE =
// (deviceUtils.dimensions.width -
// CONTAINER_HORIZONTAL_PADDING * 2 -
// 2 * CELL_HORIZONTAL_PADDING * 3) /
// 4;
export const NFT_IMAGE_SIZE = 78;

const Mask = () => (
<ImgixImage
size={NFT_IMAGE_SIZE}
source={OfferMask as Source}
style={{
width: NFT_IMAGE_SIZE,
height: NFT_IMAGE_SIZE,
}}
/>
<Svg width="78" height="78" viewBox="0 0 78 78">
<Path
d="M77.9991 17.5233C77.9978 16.7078 77.9972 16.3001 77.9385 16.0639C77.7232 15.1985 77.3429 14.8188 76.4771 14.605C76.2409 14.5466 75.6569 14.5466 74.4887 14.5466V14.5466C68.3941 14.5466 63.4534 9.60592 63.4534 3.51125V3.51125C63.4534 2.34314 63.4534 1.75909 63.395 1.52285C63.1812 0.657103 62.8015 0.276763 61.936 0.0615435C61.6999 0.00281707 61.2922 0.00216367 60.4767 0.000856855C59.942 0 59.3837 0 58.8 0H19.2C12.4794 0 9.11905 0 6.55211 1.30792C4.29417 2.4584 2.4584 4.29417 1.30792 6.55211C0 9.11905 0 12.4794 0 19.2V58.8C0 65.5206 0 68.8809 1.30792 71.4479C2.4584 73.7058 4.29417 75.5416 6.55211 76.6921C9.11905 78 12.4794 78 19.2 78H58.8C65.5206 78 68.8809 78 71.4479 76.6921C73.7058 75.5416 75.5416 73.7058 76.6921 71.4479C78 68.8809 78 65.5206 78 58.8V19.2C78 18.6163 78 18.058 77.9991 17.5233Z"
fill="black"
/>
</Svg>
);

export const FakeOffer = () => {
Expand Down Expand Up @@ -207,8 +206,8 @@ export const Offer = ({ offer }: { offer: NftOffer }) => {
style={{
width: 19,
height: 19,
right: -6,
top: -6,
right: -5.5,
top: -5.5,
zIndex: 1,
position: 'absolute',
alignItems: 'center',
Expand Down
22 changes: 10 additions & 12 deletions src/screens/NFTOffersSheet/OfferRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,23 +28,21 @@ import { analyticsV2 } from '@/analytics';
import { useTheme } from '@/theme';
import { CardSize } from '@/components/unique-token/CardSize';
import { View } from 'react-native';
import OfferRowMask from '@/assets/offerRowMask.png';
import { Source } from 'react-native-fast-image';
import Svg, { Path } from 'react-native-svg';

const NFT_SIZE = 50;
const MARKETPLACE_ORB_SIZE = 18;
const COIN_ICON_SIZE = 16;

const Mask = () => (
<ImgixImage
size={NFT_SIZE}
source={OfferRowMask as Source}
style={{
width: NFT_SIZE,
height: NFT_SIZE,
}}
/>
<Svg width="50" height="50" viewBox="0 0 50 50" fill="none">
<Path
d="M4 34C10.6274 34 16 39.3726 16 46C16 46.062 15.9995 46.1238 15.9986 46.1856C15.9774 47.5824 15.9668 48.2808 16.0568 48.5786C16.2869 49.3399 16.606 49.6639 17.3638 49.9055C17.6602 50 18.1735 50 19.2 50H30.8C37.5206 50 40.8809 50 43.4479 48.6921C45.7058 47.5416 47.5416 45.7058 48.6921 43.4479C50 40.8809 50 37.5206 50 30.8V19.2C50 12.4794 50 9.11905 48.6921 6.55211C47.5416 4.29417 45.7058 2.4584 43.4479 1.30792C40.8809 0 37.5206 0 30.8 0H19.2C12.4794 0 9.11905 0 6.55211 1.30792C4.29417 2.4584 2.4584 4.29417 1.30792 6.55211C0 9.11905 0 12.4794 0 19.2V30.8C0 31.8265 0 32.3398 0.0945007 32.6362C0.336104 33.394 0.660065 33.7131 1.42144 33.9432C1.71925 34.0332 2.41764 34.0226 3.81443 34.0014C3.87617 34.0005 3.93803 34 4 34Z"
fill="black"
/>
</Svg>
);

export const FakeOfferRow = () => {
const { isDarkMode } = useTheme();
return (
Expand Down Expand Up @@ -200,8 +198,8 @@ export const OfferRow = ({ offer }: { offer: NftOffer }) => {
width: MARKETPLACE_ORB_SIZE,
height: MARKETPLACE_ORB_SIZE,
borderRadius: MARKETPLACE_ORB_SIZE / 2,
left: -4,
bottom: -4,
left: -5,
bottom: -5,
backgroundColor: bgColor,
position: 'absolute',
}}
Expand Down

0 comments on commit afe451f

Please sign in to comment.