diff --git a/web-ui/src/components/certifications/EarnedCertificationsTable.css b/web-ui/src/components/certifications/EarnedCertificationsTable.css index 6f42f758bf..c335115fc2 100644 --- a/web-ui/src/components/certifications/EarnedCertificationsTable.css +++ b/web-ui/src/components/certifications/EarnedCertificationsTable.css @@ -23,8 +23,7 @@ td, th { padding: 0.5rem; - text-align: center; - color: black; + color: var(--checkins-palette-text-primary); } th { @@ -37,11 +36,12 @@ } tr:nth-child(even) { - background-color: #eee; + background-color: var(--checkins-palette-background-default); + background-image: var(--checkins-palette-alternate-row-overlay); } tr:nth-child(odd) { - background-color: #ffffff; + background-color: var(--checkins-palette-background-default); } } diff --git a/web-ui/src/styles/variables.css b/web-ui/src/styles/variables.css index 0525fb2e77..2f51a3da0b 100644 --- a/web-ui/src/styles/variables.css +++ b/web-ui/src/styles/variables.css @@ -54,6 +54,7 @@ --checkins-palette-secondary-mainChannel: 240 184 125; --checkins-palette-background-paper: var(--white); --checkins-palette-background-default: #f5f5f5; + --checkins-palette-alternate-row-overlay: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); --checkins-palette-content-color: var(--checkins-palette-primary-menuItem); --checkins-palette-gray-light: var(--gray-light); --checkins-palette-gray-dark: var(--gray-dark); @@ -86,6 +87,7 @@ --checkins-palette-AppBar-darkBg: var(--checkins-palette-primary-main); --checkins-palette-background-paper: #121212; --checkins-palette-background-default: #121212; + --checkins-palette-alternate-row-overlay: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)); --checkins-palette-content-color: var(--white); --checkins-palette-gray-light: #e5e5e526; --checkins-palette-gray-dark: var(--gray);