style: sleek full-width address footer and smaller QR code
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 17s
Build & Deploy / 🧪 QA (push) Successful in 1m48s
Build & Deploy / 🏗️ Build (push) Successful in 2m59s
Build & Deploy / 🚀 Deploy (push) Successful in 21s
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s

This commit is contained in:
2026-06-11 17:07:33 +02:00
parent adafe8ac02
commit 702313e42c

View File

@@ -143,10 +143,9 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
padding: '8mm', padding: '8mm',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-between',
}, },
backHeader: { backHeader: {
marginBottom: 'auto', marginBottom: '8mm',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
width: '100%', width: '100%',
@@ -180,35 +179,34 @@ const styles = StyleSheet.create({
backBody: { backBody: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'flex-end', alignItems: 'flex-start',
width: '100%', width: '100%',
}, },
leftColumn: { leftColumn: {
flex: 1, flex: 1,
flexDirection: 'column', flexDirection: 'column',
paddingRight: '4mm', paddingRight: '4mm',
paddingBottom: '2mm',
}, },
nameSection: { nameSection: {
marginBottom: '5mm', marginBottom: '6mm',
}, },
nameText: { nameText: {
fontSize: 16, fontSize: 14,
fontWeight: 'bold', fontWeight: 'bold',
color: COLORS.neutralDark, color: COLORS.neutralDark,
marginBottom: 2, marginBottom: 3,
letterSpacing: -0.2, letterSpacing: -0.2,
}, },
roleText: { roleText: {
fontSize: 7.5, fontSize: 7.5,
fontWeight: 'bold', fontWeight: 'bold',
color: COLORS.primary, color: COLORS.primary,
letterSpacing: 0.4, letterSpacing: 0.8,
textTransform: 'uppercase', textTransform: 'uppercase',
}, },
contactSection: { contactSection: {
flexDirection: 'column', flexDirection: 'column',
gap: 5, gap: 6,
}, },
contactRow: { contactRow: {
flexDirection: 'row', flexDirection: 'row',
@@ -220,7 +218,7 @@ const styles = StyleSheet.create({
alignItems: 'flex-start', alignItems: 'flex-start',
}, },
contactText: { contactText: {
fontSize: 9, fontSize: 8.5,
color: COLORS.neutralDark, color: COLORS.neutralDark,
fontWeight: 'normal', fontWeight: 'normal',
paddingTop: 1, paddingTop: 1,
@@ -228,28 +226,48 @@ const styles = StyleSheet.create({
rightColumn: { rightColumn: {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'flex-end', alignItems: 'flex-end',
justifyContent: 'flex-end', justifyContent: 'flex-start',
paddingTop: 2,
}, },
// Ultra Minimalist QR Area // Ultra Minimalist QR Area
qrContainer: { qrContainer: {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
gap: 4, gap: 3,
}, },
qrCodeWrapper: { qrCodeWrapper: {
width: '15mm', width: '12mm',
height: '15mm', height: '12mm',
}, },
qrCode: { qrCode: {
width: '100%', width: '100%',
height: '100%', height: '100%',
}, },
qrLabel: { qrLabel: {
fontSize: 5, fontSize: 4.5,
color: COLORS.neutralDark, // Subtle grey instead of loud blue color: COLORS.neutralDark, // Subtle grey instead of loud blue
fontWeight: 'bold', fontWeight: 'bold',
letterSpacing: 1.2, letterSpacing: 1.2,
}, },
addressFooter: {
position: 'absolute',
bottom: '5mm',
left: '8mm',
right: '8mm',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderTop: `0.5pt solid ${COLORS.grayText}`,
paddingTop: '2.5mm',
opacity: 0.8,
},
addressFooterText: {
fontSize: 5.5,
color: COLORS.neutralDark,
letterSpacing: 1.5,
textTransform: 'uppercase',
fontWeight: 'bold',
},
}); });
// SVG Icons // SVG Icons
@@ -736,12 +754,6 @@ export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
</View> </View>
<View style={styles.contactSection}> <View style={styles.contactSection}>
<View style={styles.contactRow}>
<View style={styles.iconWrapper}>
<LocationIcon />
</View>
<Text style={styles.contactText}>Raiffeisenstraße 22, 73630 Remshalden</Text>
</View>
<View style={styles.contactRow}> <View style={styles.contactRow}>
<View style={styles.iconWrapper}> <View style={styles.iconWrapper}>
<PhoneIcon /> <PhoneIcon />
@@ -773,6 +785,12 @@ export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
</View> </View>
</View> </View>
</View> </View>
<View style={styles.addressFooter}>
<Text style={styles.addressFooterText}>
KLZ Vertriebs GmbH Raiffeisenstraße 22 73630 Remshalden
</Text>
</View>
</Page> </Page>
</Document> </Document>
); );