Main

src/FlexibleTable/FlexibleTable.jsx

@@ -43,7 +43,8 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 
 		bodyBackground,
 		multipleBodyBackground,
-		bodyBackgroundOdd,
+		bodyBackgroundEven,
+		bodyTextColorEven,
 		bodyTextColor,
 		bodyTextAlign,
 		bodyFontWeight,
@@ -235,13 +236,13 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 				</PanelBody>
 				<PanelBody title={__('Body appearance', 'flexible-invoices-core')}>
 					<ColorSelector
-						label={__('Text Color', 'flexible-invoices-core')}
+						label={__('Text color', 'flexible-invoices-core')}
 						value={bodyTextColor}
 						enableAlpha={false}
 						onChange={(value) => setAttributes({bodyTextColor: value})}
 					/>
 					<ColorSelector
-						label={__('Background Color', 'flexible-invoices-core')}
+						label={__('Background color', 'flexible-invoices-core')}
 						value={bodyBackground}
 						enableAlpha={false}
 						onChange={(value) => setAttributes({bodyBackground: value})}
@@ -253,11 +254,23 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						onChange={(newValue) => setAttributes({multipleBodyBackground: newValue})}
 					/>
 
-					{multipleBodyBackground ? <ColorSelector
-						label={__('Background color (odd rows)', 'flexible-invoices-core')}
-						value={bodyBackgroundOdd}
-						onChange={(value) => setAttributes({bodyBackgroundOdd: value})}
-					/> : ''}
+					{multipleBodyBackground ?
+						<>
+							<ColorSelector
+						label={__('Background color (even rows)', 'flexible-invoices-core')}
+						value={bodyBackgroundEven}
+						onChange={(value) => setAttributes({bodyBackgroundEven: value})}
+					/>
+						<ColorSelector
+							label={__('Text color (even rows)', 'flexible-invoices-core')}
+							value={bodyTextColorEven}
+							enableAlpha={false}
+							onChange={(value) => setAttributes({bodyTextColorEven: value})}
+						/>
+						</>
+						: ''
+
+					}
 
 					<NumberWithUnit
 						label={__('Font size', 'flexible-invoices-core')}
@@ -372,9 +385,9 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 					</thead>
 					<tbody className={"fitb-item-table-body"}>
 
-					{Array.from({length: 2}).map((_, index) => (
+					{Array.from({length: 2}).map((_, trIndex) => (
 						<tr className={"fitb-item-table-row"} style={{
-							background: (multipleBodyBackground && index === 1) ? bodyBackgroundOdd : bodyBackground,
+							background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground,
 							borderStyle: "solid",
 							borderColor: bodyBorderRowColor,
 							borderTopWidth: bodyBorderRowWidthTop,
@@ -398,7 +411,7 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 											key={index}
 											value={row}
 											style={{
-												color: bodyTextColor,
+												color: (multipleBodyBackground && trIndex === 1) ? bodyTextColorEven : bodyTextColor,
 												textAlign: bodyTextAlign,
 												fontStyle: bodyFontStyle,
 												fontSize: bodyFontSize,