Zebra stripe printing rows for visual separation

src/components/CardRow/CardRow.jsx

@@ -66,12 +66,13 @@ function CardRow({ card }) {
           }}>
             <span>Code</span><span>Set</span><span>Rarity</span><span>Owned</span>
           </div>
-          {card.printings.map(printing => (
+          {card.printings.map((printing, i) => (
             <PrintingRow
               key={`${card.id}-${printing.set_id}-${printing.rarity_id}`}
               card_id={card.id}
               printing={printing}
               cols={PRINTING_COLS}
+              zebra={i % 2 === 1}
             />
           ))}
         </div>

src/components/PrintingRow/PrintingRow.jsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 import { CardContext } from '../../store/CardContext';
 import { updateCardAmount } from '../../services/api';
 
-function PrintingRow({ card_id, printing, cols }) {
+function PrintingRow({ card_id, printing, cols, zebra }) {
   const { ownedAmounts, updateAmount } = useContext(CardContext);
   const [loading, setLoading] = useState(false);
 
@@ -27,6 +27,7 @@ function PrintingRow({ card_id, printing, cols }) {
       display: 'grid', gridTemplateColumns: cols,
       gap: '8px', padding: '7px 16px 7px 32px',
       alignItems: 'center', opacity: loading ? 0.5 : 1,
+      background: zebra ? '#1c1c1c' : '#161616',
     }}>
       <span style={{ fontFamily: 'monospace', fontSize: '11px', color: '#555' }}>
         {printing.set_code}