yellow

Author: javanang

ksqLight/src/App.js

@@ -38,7 +38,7 @@ function App() {
       ...(mode === 'light' ?
         {
           background: {
-            default: "#f9fafb",
+            default: "#fbfaff",
           },
           chartColor: {
             background: "#FFFFFF",
@@ -52,6 +52,10 @@ function App() {
             background2: "#FFFFFF",
             background3: "#FFFFFF",
             background4: "#FFFFFF",
+            iconColor1: "#04724D",
+            iconColor2: "#FFC300",
+            iconColor3: "#540C97",
+            iconColor4: "#C48EF6",
             // textColor1: "#061B64",
             // textColor2: "#04297A",
             // textColor3: "#7A4F01",

ksqLight/src/components/Homepage.js

@@ -4,29 +4,29 @@ import LineChart from "./LineChart.js";
 
 export const Homepage = ({ showQueries, showMessages, showErrors, metricsState }) => {
   const queriesCharts = [
-    ["runningQueries", "Number of Running Queries"],
-    ["createdQueries", "Number of Created Queries"],
-    ["numPersistentQueries", "Number of Persistent Queries"],
-    ["numIdleQueries", "Number of Idle Queries"],
-    ["rebalancingQueries", "Number of Rebalancing Queries"],
-    ["numActiveQueries", "Number of Active Queries"],
-    ["notRunningQueries", "Number of Not Running Queries"],
-    ["pendingShutdownQueries", "Number of Pending Shutdown Queries"],
+    ["runningQueries", "Running Queries"],
+    ["createdQueries", "Created Queries"],
+    ["numPersistentQueries", "Persistent Queries"],
+    ["numIdleQueries", "Idle Queries"],
+    ["rebalancingQueries", "Rebalancing Queries"],
+    ["numActiveQueries", "Active Queries"],
+    ["notRunningQueries", "Not Running Queries"],
+    ["pendingShutdownQueries", "Pending Shutdown Queries"],
   ];
 
   const messagesCharts = [
-    ["messagesConsumedTotal", "Number of Messages Consumed"],
-    ["messagesProducedPerSec", "Number of Messages Produced Per Second"],
-    ["messagesConsumedPerSec", "Number of Messages Consumed Per Second"],
-    ["messagesConsumedMin", "Number of Messages Consumed Min"],
-    ["messagesConsumedMax", "Number of Messages Consumed Max"],
-    ["messagesConsumedAvg", "Number of Messages Consumed Average"],
+    ["messagesConsumedTotal", "Messages Consumed"],
+    ["messagesProducedPerSec", "Messages Produced Per Second"],
+    ["messagesConsumedPerSec", "Messages Consumed Per Second"],
+    ["messagesConsumedMin", "Messages Consumed Min"],
+    ["messagesConsumedMax", "Messages Consumed Max"],
+    ["messagesConsumedAvg", "Messages Consumed Average"],
   ];
 
   const errorCharts = [
     ["errorRate", "Error Rate"],
-    ["errorQueries", "Number of Error Queries"],
-    ["pendingErrorQueries", "Number of Pending Error Queries"],
+    ["errorQueries", "Error Queries"],
+    ["pendingErrorQueries", "Pending Error Queries"],
   ]
 
   return (

ksqLight/src/components/LineChart.js

@@ -58,8 +58,8 @@ export default function LineChart({ metric, description, metricsState }) {
 
     // define gradient for background
     const gradient = ctx.createLinearGradient(0, 0, 0, 400);
-    gradient.addColorStop(0, 'rgba(78, 67, 118, 1)');
-    gradient.addColorStop(1, 'rgba(43, 88, 118, 0.3)')
+    gradient.addColorStop(0, 'rgba(255, 207, 112, 1)');
+    gradient.addColorStop(1, 'rgba(255, 194, 67, 0.3)')
 
     // define chart configuration
     const config = {
@@ -69,7 +69,7 @@ export default function LineChart({ metric, description, metricsState }) {
           data: initialData,
           // data: [{x: new Date(), y: '0'}],
           // data: [],           // empty at the beginning,
-          borderColor: 'rgba(78, 67, 118, 0.3)',
+          borderColor: 'rgba(255, 194, 67, 0.3)',
           pointRadius: 0,
           hitRadius: 30,
           hoverRadius: 5,

ksqLight/src/components/MetricCard.js

@@ -22,6 +22,7 @@ export const MetricCard = ({ type, index }) => {
   const bgColor = ["cardColor.background1", "cardColor.background2", "cardColor.background3", "cardColor.background4"];
   const textColor = ["cardColor.textColor1", "cardColor.textColor2", "cardColor.textColor3", "cardColor.textColor4"];
   const bgImage = ["cardColor.iconBg1", "cardColor.iconBg2", "cardColor.iconBg3", "cardColor.iconBg4"];
+  const iconColor = ["cardColor.iconColor1", "cardColor.iconColor2", "cardColor.iconColor3", "cardColor.iconColor4"];
 
   console.log(data);
   const flipCard = () => {
@@ -49,7 +50,8 @@ export const MetricCard = ({ type, index }) => {
         <IconButton
           size="small"
           // style={{ width: "2.9rem", height: "2.9rem" }}
-          sx={{ borderRadius: '50%' }}
+          
+          sx={{ borderRadius: '50%', color: iconColor[index] }}
           onClick={() => console.log('')} // placeholder for flipping card
         >
           {index === 0 && <MonitorHeartIcon />}
@@ -62,7 +64,7 @@ export const MetricCard = ({ type, index }) => {
             {metricType[index]}</Typography>
         </Box>
       </Box>
-      <Typography variant='h3' sx={{ fontSize: '1.8rem'}}>
+      <Typography variant='h3' sx={{ fontSize: '1.8rem', pt: 1}}>
         {index === 0 && (data ? 'Running' : 'Down')}
         {index === 1 && (data !== null ? data : 'N/A')}
         {index === 2 && (data !== null ? data : 'N/A')}