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