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',
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user