adjust colors and font size

dbt-labs · Jan 25, 2024 · 812c64f · 812c64f
1 parent b352cf4
commit 812c64f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/website/src/components/lifeCycle/index.js b/website/src/components/lifeCycle/index.js
@@ -2,15 +2,22 @@ import React from 'react'
 import styles from './styles.module.css';
 
 const statusColors = {
-  enterprise: '#727d91',
-  team: '#727d91',
-  developer: '#727d91',
+  enterprise: '#f3f4f6',
+  team: '#f3f4f6',
+  developer: '#f3f4f6',
   new: '#047377',
   beta: '#047377',
   ga: '#047377',
   'public preview': '#047377',
 };
 
+const fontColors = {
+    enterprise: '#000000',
+    team: '#000000', 
+    developer: '#000000', 
+    // lifecycle statuses use the css determined font color (white)
+  };
+
 export default function Lifecycle(props) {
   // Check if props.status is an array or a single value
   const statuses = Array.isArray(props.status) ? props.status : [props.status];
@@ -19,7 +26,8 @@ export default function Lifecycle(props) {
     <>
       {statuses.map((status, index) => {
         const style = {
-          backgroundColor: props.backgroundColor || statusColors[status] || '#047377' // Default to teal if no match
+          backgroundColor: props.backgroundColor || statusColors[status] || '#047377', // default to teal if no match
+          color: fontColors[status] || '#fff' // default font color if no matc
         };
 
         return (

diff --git a/website/src/components/lifeCycle/styles.module.css b/website/src/components/lifeCycle/styles.module.css
@@ -1,7 +1,7 @@
 .lifecycle {
     background-color: #047377; /* Default teal background */
     color: #fff; /* Light text color for contrast */
-    font-size: 0.78rem; /* Using rem so font size is relative to root */
+    font-size: 0.8rem; /* Using rem so font size is relative to root */
     padding: 1px 8px; /* Adjust padding for a more pill-like shape */
     border-radius: 16px; /* Larger border-radius for rounded edges */
     margin-left: 8px; /* Margin to separate from the header text */
@@ -12,3 +12,4 @@
     line-height: 1.6; /* Adjust line height for vertical alignment */
 }
 
+