fix: make brand text and icons pure white on blue background for better contrast, fix white page layout
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user