From 812c64f3977c72540fa205104b4d1e08f527d892 Mon Sep 17 00:00:00 2001
From: mirnawong1 <mirna.wong@fishtownanalytics.com>
Date: Thu, 25 Jan 2024 20:36:45 +0000
Subject: [PATCH] adjust colors and font size

---
 website/src/components/lifeCycle/index.js        | 16 ++++++++++++----
 .../src/components/lifeCycle/styles.module.css   |  3 ++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/website/src/components/lifeCycle/index.js b/website/src/components/lifeCycle/index.js
index f8be714887a..5603ac9ce20 100644
--- 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
index 2af04c66fc2..ba0b4c90b16 100644
--- 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 */
 }
 
+