Skip to content

Commit 874723e

Browse files
caieucaieu
committed
fix: live cards style
1 parent ede189e commit 874723e

5 files changed

Lines changed: 54 additions & 41 deletions

File tree

‎app/components/UI/Predict/components/PredictCryptoUpDownMarketCard/PredictCryptoUpDownMarketCard.tsx‎

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,8 @@ const CHART_REQUEST_DURATION_BY_RECURRENCE_MS: Record<string, number> = {
123123
};
124124
const PROGRESS_RING_SIZE = 54;
125125
const PROGRESS_RING_STROKE_WIDTH = 4;
126-
const PROGRESS_RING_RADIUS =
127-
(PROGRESS_RING_SIZE - PROGRESS_RING_STROKE_WIDTH) / 2;
128-
const PROGRESS_RING_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_RING_RADIUS;
126+
const COMPACT_PROGRESS_RING_SIZE = 40;
127+
const COMPACT_PROGRESS_RING_STROKE_WIDTH = 2;
129128
const CRYPTO_ACCENT_DEFAULT = 'rgb(245, 158, 11)';
130129
const CRYPTO_ACCENT_BY_SYMBOL: Record<string, string> = {
131130
BTC: 'rgb(247, 147, 26)',
@@ -814,49 +813,62 @@ const ProgressLogo = React.memo(
814813
progress,
815814
color,
816815
trackColor,
816+
compact,
817817
}: {
818818
imageUrl?: string;
819819
progress: number;
820820
color: string;
821821
trackColor: string;
822+
compact?: boolean;
822823
}) => {
823824
const tw = useTailwind();
824-
const strokeDashoffset = PROGRESS_RING_CIRCUMFERENCE * (1 - progress);
825+
const ringSize = compact ? COMPACT_PROGRESS_RING_SIZE : PROGRESS_RING_SIZE;
826+
const strokeWidth = compact
827+
? COMPACT_PROGRESS_RING_STROKE_WIDTH
828+
: PROGRESS_RING_STROKE_WIDTH;
829+
const radius = (ringSize - strokeWidth) / 2;
830+
const circumference = 2 * Math.PI * radius;
831+
const strokeDashoffset = circumference * (1 - progress);
825832

826833
return (
827-
<Box twClassName="h-[54px] w-[54px] items-center justify-center">
834+
<Box
835+
twClassName="items-center justify-center"
836+
style={tw.style({ width: ringSize, height: ringSize })}
837+
>
828838
<Box twClassName="absolute inset-0">
829839
<Svg
830-
width={PROGRESS_RING_SIZE}
831-
height={PROGRESS_RING_SIZE}
832-
viewBox={`0 0 ${PROGRESS_RING_SIZE} ${PROGRESS_RING_SIZE}`}
840+
width={ringSize}
841+
height={ringSize}
842+
viewBox={`0 0 ${ringSize} ${ringSize}`}
833843
>
834844
<Circle
835-
cx={PROGRESS_RING_SIZE / 2}
836-
cy={PROGRESS_RING_SIZE / 2}
837-
r={PROGRESS_RING_RADIUS}
845+
cx={ringSize / 2}
846+
cy={ringSize / 2}
847+
r={radius}
838848
stroke={trackColor}
839849
strokeOpacity={0.7}
840-
strokeWidth={PROGRESS_RING_STROKE_WIDTH}
850+
strokeWidth={strokeWidth}
841851
fill="transparent"
842852
/>
843853
<Circle
844-
cx={PROGRESS_RING_SIZE / 2}
845-
cy={PROGRESS_RING_SIZE / 2}
846-
r={PROGRESS_RING_RADIUS}
854+
cx={ringSize / 2}
855+
cy={ringSize / 2}
856+
r={radius}
847857
stroke={color}
848-
strokeWidth={PROGRESS_RING_STROKE_WIDTH}
849-
strokeDasharray={`${PROGRESS_RING_CIRCUMFERENCE} ${PROGRESS_RING_CIRCUMFERENCE}`}
858+
strokeWidth={strokeWidth}
859+
strokeDasharray={`${circumference} ${circumference}`}
850860
strokeDashoffset={strokeDashoffset}
851861
strokeLinecap="round"
852862
fill="transparent"
853-
transform={`rotate(-90 ${PROGRESS_RING_SIZE / 2} ${
854-
PROGRESS_RING_SIZE / 2
855-
})`}
863+
transform={`rotate(-90 ${ringSize / 2} ${ringSize / 2})`}
856864
/>
857865
</Svg>
858866
</Box>
859-
<Box twClassName="h-10 w-10 overflow-hidden rounded-full bg-default">
867+
<Box
868+
twClassName={`${
869+
compact ? 'h-8 w-8' : 'h-10 w-10'
870+
} overflow-hidden rounded-full bg-default`}
871+
>
860872
{imageUrl ? (
861873
<Image
862874
source={{ uri: imageUrl }}
@@ -905,6 +917,7 @@ const LiveStatus = React.memo(
905917
progress={progressRemaining}
906918
color={accentColor}
907919
trackColor={trackColor}
920+
compact={compact}
908921
/>
909922
);
910923

@@ -1354,9 +1367,15 @@ const PredictCryptoUpDownMarketCard: React.FC<
13541367
>
13551368
{cardTitle}
13561369
</Text>
1370+
<Text
1371+
variant={TextVariant.BodySm}
1372+
color={TextColor.TextAlternative}
1373+
>
1374+
Resets every {resetDuration}
1375+
</Text>
13571376
</Box>
13581377

1359-
<Box twClassName="w-full items-center gap-2">
1378+
<Box twClassName="w-full">
13601379
<OutcomeButtons
13611380
compact
13621381
upToken={upToken}
@@ -1366,12 +1385,6 @@ const PredictCryptoUpDownMarketCard: React.FC<
13661385
marketStatus={selectedMarket.status as PredictMarketStatus}
13671386
onBuyPress={handleBuyPress}
13681387
/>
1369-
<Text
1370-
variant={TextVariant.BodySm}
1371-
color={TextColor.TextAlternative}
1372-
>
1373-
Resets every {resetDuration}
1374-
</Text>
13751388
</Box>
13761389
</Box>
13771390
</Pressable>

‎app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -416,7 +416,7 @@ describe('PredictMarketSportCard', () => {
416416
{ state: initialState },
417417
);
418418

419-
expect(getByText('Live')).toBeOnTheScreen();
419+
expect(getByText('LIVE')).toBeOnTheScreen();
420420
expect(getByText('75’')).toBeOnTheScreen();
421421
expect(getByText('0')).toBeOnTheScreen();
422422
expect(getByText('1')).toBeOnTheScreen();

‎app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
285285

286286
return (
287287
<TouchableOpacity
288-
style={tw.style(isCarousel ? '' : 'my-[8px]')}
288+
style={tw.style(isCarousel ? 'h-full' : 'my-[8px]')}
289289
testID={testID}
290290
onPress={handleCardPress}
291291
activeOpacity={0.9}
@@ -306,9 +306,7 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
306306
</Box>
307307
)}
308308

309-
<Box
310-
twClassName={isCompact ? 'flex-1 p-3 justify-between' : 'p-4 gap-4'}
311-
>
309+
<Box twClassName={isCompact ? 'flex-1 p-3' : 'p-4 gap-4'}>
312310
<Text
313311
variant={TextVariant.HeadingSm}
314312
color={TextColor.TextDefault}
@@ -319,16 +317,18 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
319317
{market.title}
320318
</Text>
321319

322-
<PredictSportScoreboard
323-
game={game}
324-
compact={isCompact}
325-
testID={testID ? `${testID}-scoreboard` : undefined}
326-
/>
320+
<Box twClassName={isCompact ? 'flex-1 mt-3 justify-center' : ''}>
321+
<PredictSportScoreboard
322+
game={game}
323+
compact={isCompact}
324+
testID={testID ? `${testID}-scoreboard` : undefined}
325+
/>
326+
</Box>
327327

328328
{showBuyButtons && (
329329
<Box
330330
flexDirection={BoxFlexDirection.Row}
331-
twClassName="w-full gap-2"
331+
twClassName={`w-full gap-2 ${isCompact ? 'mt-1' : ''}`}
332332
>
333333
{buttonItems.map((item) => (
334334
<Box key={item.key} twClassName="flex-1">

‎app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ describe('PredictSportScoreboard', () => {
170170
/>,
171171
);
172172

173-
expect(getByText('Live')).toBeOnTheScreen();
173+
expect(getByText('LIVE')).toBeOnTheScreen();
174174
expect(getByText('25’')).toBeOnTheScreen();
175175
});
176176

‎app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ const PredictSportScoreboard: React.FC<PredictSportScoreboardProps> = ({
202202
fontWeight={FontWeight.Medium}
203203
color={TextColor.SuccessDefault}
204204
>
205-
Live
205+
LIVE
206206
</Text>
207207
<Box twClassName="w-3" />
208208
</Box>

0 commit comments

Comments
 (0)