mirror of
https://github.com/selfxyz/self.git
synced 2026-02-19 02:24:25 -05:00
bebaebc872
* Refactor NFC scanner tests to use a global variable for platform OS, allowing dynamic switching between iOS and Android during tests. This change improves test isolation and avoids hoisting issues with jest.mock. * Triggering GitHub workflows * Add status animations and self logos * Update utilities and styles for statuses * Remove old LED implementation and occurences * Update Self QR Code with new design * Add status banner * Remove console and use QRcodeSteps in styles * Add ARIA and use Memo to prevent re-renders * Add refs for success and error callbacks * Use ref for self app in qrcode * Use selfapp ref consistently * Update connected state animtion * Skip 'parses Android response' test in nfcScanner --------- Co-authored-by: Justin Hernandez <justin.hernandez@self.xyz> Co-authored-by: Javier Cortejoso <javier.cortejoso@gmail.com>
69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
|
|
import { QRcodeSteps } from './utils.js';
|
|
|
|
const getBorderColor = (step: number): string => {
|
|
switch (step) {
|
|
case QRcodeSteps.DISCONNECTED:
|
|
case QRcodeSteps.WAITING_FOR_MOBILE:
|
|
return '#E2E8F0';
|
|
case QRcodeSteps.MOBILE_CONNECTED:
|
|
case QRcodeSteps.PROOF_GENERATION_STARTED:
|
|
case QRcodeSteps.PROOF_GENERATED:
|
|
return '#3B82F6';
|
|
case QRcodeSteps.PROOF_GENERATION_FAILED:
|
|
return '#EF4444';
|
|
case QRcodeSteps.PROOF_VERIFIED:
|
|
return '#01BFFF';
|
|
default:
|
|
return '#E2E8F0';
|
|
}
|
|
};
|
|
|
|
export const qrAnimationOverlayStyle = (imageSize: number): React.CSSProperties => ({
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: imageSize,
|
|
height: imageSize,
|
|
pointerEvents: 'none',
|
|
});
|
|
|
|
export const qrContainerStyle = (size: number): React.CSSProperties => ({
|
|
position: 'relative',
|
|
width: size,
|
|
height: size,
|
|
});
|
|
|
|
export const qrWrapperStyle = (step: number, showBorder: boolean = true): React.CSSProperties => ({
|
|
display: 'inline-flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: '6px',
|
|
padding: '3px',
|
|
borderRadius: '10px',
|
|
border: showBorder ? `6px solid ${getBorderColor(step)}` : 'none',
|
|
backgroundColor: '#FFF',
|
|
transition: 'border-color 0.3s ease',
|
|
});
|
|
|
|
export const statusBannerLogoStyle: React.CSSProperties = {
|
|
width: 28,
|
|
height: 28,
|
|
marginRight: 8,
|
|
};
|
|
|
|
export const statusBannerStyle = (qrSize: number): React.CSSProperties => ({
|
|
backgroundColor: '#000',
|
|
color: '#fff',
|
|
borderRadius: '5px',
|
|
width: qrSize,
|
|
fontWeight: '700',
|
|
fontSize: '18px',
|
|
height: '50px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
});
|