fix: make brand text and icons pure white on blue background for better contrast, fix white page layout

This commit is contained in:
2026-06-12 11:04:50 +02:00
parent 3d7a061858
commit b53ea82be8

View File

@@ -129,14 +129,7 @@ const styles = StyleSheet.create({
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
gap: 5, // Breathing room between tagline and icons gap: 6, // Harmonious spacing to icons
},
frontSeparator: {
width: '45mm', // Elegant partial-width divider
height: 1,
backgroundColor: COLORS.green,
marginBottom: 2, // Space before tagline
opacity: 0.8,
}, },
frontIconsGroup: { frontIconsGroup: {
flexDirection: 'row', flexDirection: 'row',
@@ -149,21 +142,18 @@ const styles = StyleSheet.create({
frontBrandIcon: { frontBrandIcon: {
width: 12, // Smaller for compact bar width: 12, // Smaller for compact bar
height: 12, height: 12,
opacity: 0.85,
}, },
frontBrandText: { frontBrandText: {
fontSize: 4, // Tiny but readable at 300dpi print fontSize: 4, // Tiny but readable at 300dpi print
color: COLORS.white, color: COLORS.white,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: 0.6, letterSpacing: 0.6,
opacity: 0.75,
}, },
frontTaglineBar: { frontTaglineBar: {
color: COLORS.green, color: COLORS.green,
fontSize: 5.5, // Smaller — supporting role, not headline fontSize: 7, // Larger — as requested
letterSpacing: 2, // Wide premium tracking letterSpacing: 0.5, // Harmonious tracking for mixed case
fontWeight: 'bold', fontWeight: 'bold',
textTransform: 'uppercase',
}, },
// -- WHITE PAGE (Vorderseite) -- // -- WHITE PAGE (Vorderseite) --
@@ -176,9 +166,9 @@ const styles = StyleSheet.create({
flexDirection: 'column', flexDirection: 'column',
}, },
backHeader: { backHeader: {
marginBottom: '5mm',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
marginBottom: '2mm', // Reduced to prevent vertical overflow
width: '100%', width: '100%',
}, },
backLogo: { backLogo: {
@@ -209,18 +199,17 @@ const styles = StyleSheet.create({
}, },
backBody: { backBody: {
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'column', // Fixed horizontal wrapping issue caused by absolute truck sibling
justifyContent: 'space-between', justifyContent: 'flex-start',
alignItems: 'flex-start', alignItems: 'flex-start',
width: '100%', width: '100%',
}, },
leftColumn: { leftColumn: {
flex: 1, width: '100%', // Take full width since right column is removed
flexDirection: 'column', flexDirection: 'column',
paddingRight: '4mm',
}, },
nameSection: { nameSection: {
marginBottom: '4mm', marginBottom: '1mm', // Reduced to prevent vertical overflow
}, },
nameText: { nameText: {
fontSize: 14, fontSize: 14,
@@ -243,6 +232,7 @@ const styles = StyleSheet.create({
contactRow: { contactRow: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
marginBottom: 2, // Reduced to prevent vertical overflow
}, },
iconWrapper: { iconWrapper: {
width: 12, width: 12,
@@ -639,7 +629,7 @@ export const IconHighVoltage = ({ style, color = 'white' }: { style: any; color?
style={{ fill: 'none', stroke: color, strokeWidth: '0.33px' }} style={{ fill: 'none', stroke: color, strokeWidth: '0.33px' }}
/> />
<Path <Path
d="M28.597,16.426c-0,-1.03 -0.837,-1.867 -1.868,-1.867c-1.03,0 -1.867,0.837 -1.867,1.867c0,1.031 0.837,1.868 1.867,1.868c1.031,-0 1.868,-0.837 1.868,-1.868Z" d="M28.597,16.426c-0,-1.03 -0.837,-1.868 -1.868,-1.867c-1.03,0 -1.867,0.837 -1.867,1.867c0,1.031 0.837,1.868 1.867,1.868c1.031,-0 1.868,-0.837 1.868,-1.868Z"
style={{ fill: 'none', stroke: color, strokeWidth: '0.33px' }} style={{ fill: 'none', stroke: color, strokeWidth: '0.33px' }}
/> />
<Path <Path
@@ -747,6 +737,7 @@ export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
<Page <Page
size={[258, 173]} size={[258, 173]}
style={[styles.pageBleed, isWhiteVariant && { backgroundColor: '#ffffff' }]} style={[styles.pageBleed, isWhiteVariant && { backgroundColor: '#ffffff' }]}
wrap={false}
> >
{withTruck && ( {withTruck && (
<View style={styles.truckWrapper}> <View style={styles.truckWrapper}>
@@ -758,11 +749,8 @@ export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
</View> </View>
)} )}
<View style={styles.frontFooterArea}> <View style={styles.frontFooterArea}>
<View
style={[styles.frontSeparator, isWhiteVariant && { backgroundColor: COLORS.darkGreen }]}
/>
<Text style={[styles.frontTaglineBar, isWhiteVariant && { color: COLORS.black }]}> <Text style={[styles.frontTaglineBar, isWhiteVariant && { color: COLORS.black }]}>
VON 0,6/1,0 KV BIS 64/110 KV Von 0,6/1,0 kV bis 64/110 kV
</Text> </Text>
<View style={styles.frontIconsGroup}> <View style={styles.frontIconsGroup}>
<View style={styles.frontBrandIconWrapper}> <View style={styles.frontBrandIconWrapper}>
@@ -826,7 +814,7 @@ export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({
</Page> </Page>
{/* VORDERSEITE (White page with contact info) */} {/* VORDERSEITE (White page with contact info) */}
<Page size={[258, 173]} style={styles.pageBleedBack}> <Page size={[258, 173]} style={styles.pageBleedBack} wrap={false}>
<View style={styles.backContainer}> <View style={styles.backContainer}>
<View style={styles.backHeader}> <View style={styles.backHeader}>
<VectorLogo <VectorLogo