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
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:
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user