Skip to content

Commit 95d5e6d

Browse files
javanangjavanang
committed
first theme
1 parent ff8fe8d commit 95d5e6d

File tree

4 files changed

+54
-41
lines changed

4 files changed

+54
-41
lines changed

‎ksqLight/src/App.js

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,34 @@ function App() {
4141
default: "#f9fafb",
4242
},
4343
chartColor: {
44-
background: "#FFFFFF"
44+
background: "#FFFFFF",
4545
},
4646
cardColor: {
47-
background1: "rgb(209, 233, 252)",
48-
background2: "rgb(208, 242, 255)",
49-
background3: "rgb(255, 247, 205)",
50-
background4: "rgb(255, 231, 217)",
47+
// background1: "rgb(209, 233, 252)",
48+
// background2: "rgb(208, 242, 255)",
49+
// background3: "rgb(255, 247, 205)",
50+
// background4: "rgb(255, 231, 217)",
51+
background1: "#FFFFFF",
52+
background2: "#FFFFFF",
53+
background3: "#FFFFFF",
54+
background4: "#FFFFFF",
55+
// textColor1: "#061B64",
56+
// textColor2: "#04297A",
57+
// textColor3: "#7A4F01",
58+
// textColor4: "#7A0C2E",
5159
}
5260
}
5361
:
5462
{
55-
63+
chartColor: {
64+
background: "#1A1A1A"
65+
},
66+
cardColor: {
67+
background1: "#1A1A1A",
68+
background2: "#1A1A1A",
69+
background3: "#1A1A1A",
70+
background4: "#1A1A1A",
71+
}
5672
})
5773
},
5874
});
@@ -64,7 +80,7 @@ function App() {
6480
</Grid>
6581
)
6682
});
67-
console.log(metricsState);
83+
6884
return (
6985
!metricsState.prometheusURL ?
7086
<ThemeProvider theme={theme}>
@@ -92,7 +108,7 @@ function App() {
92108
display: 'flex',
93109
flexDirection: 'column'
94110
}}>
95-
<Grid container columnSpacing={10} sx={{ p: 3, justifyContents: "center", alignItems: "center" }}>
111+
<Grid container columnSpacing={4} sx={{pt: 3, pb: 3, pr: "2em", justifyContents: "center", alignItems: "center" }}>
96112
{serverCards}
97113
</Grid>
98114
<Grid container justifyContent="center" alignItems="center" sx={{ pr: "2em" }}>

‎ksqLight/src/components/LineChart.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ export default function LineChart({ metric, description, metricsState }) {
5858

5959
// define gradient for background
6060
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
61-
gradient.addColorStop(0, 'rgba(58, 123, 213, 1)');
62-
gradient.addColorStop(1, 'rgba(0, 210, 255, 0.3)')
61+
gradient.addColorStop(0, 'rgba(78, 67, 118, 1)');
62+
gradient.addColorStop(1, 'rgba(43, 88, 118, 0.3)')
6363

6464
// define chart configuration
6565
const config = {
@@ -69,7 +69,7 @@ export default function LineChart({ metric, description, metricsState }) {
6969
data: initialData,
7070
// data: [{x: new Date(), y: '0'}],
7171
// data: [], // empty at the beginning,
72-
borderColor: 'rgba(58, 123, 213, 1)',
72+
borderColor: 'rgba(78, 67, 118, 0.3)',
7373
pointRadius: 0,
7474
hitRadius: 30,
7575
hoverRadius: 5,
@@ -135,7 +135,7 @@ export default function LineChart({ metric, description, metricsState }) {
135135
beginAtZero: true,
136136
ticks: {
137137
// display: false,
138-
color: "#999",
138+
// color: "#999",
139139
stepSize: 5
140140
}
141141
}
@@ -147,7 +147,7 @@ export default function LineChart({ metric, description, metricsState }) {
147147
},
148148
title: {
149149
fontFamily: 'Raleway',
150-
color: '#666',
150+
// color: '#999',
151151
display: true,
152152
text: description,
153153
},
@@ -167,7 +167,7 @@ export default function LineChart({ metric, description, metricsState }) {
167167

168168
return (
169169
<Grid item xs={3} md={3} lg={3}>
170-
<CardContent sx={{ bgcolor: "white", boxShadow: 1, borderRadius: '16px' }}>
170+
<CardContent sx={{ bgcolor:"chartColor.background", boxShadow: 1, borderRadius: '16px' }}>
171171
<canvas id={metric} width="100%" height="100%"></canvas>
172172
</CardContent>
173173
</Grid>

‎ksqLight/src/components/MetricCard.js

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
InMemoryCache,
55
gql,
66
} from "@apollo/client";
7-
import { Typography, CardContent, IconButton } from "@mui/material";
7+
import { Typography, CardContent, IconButton, Box } from "@mui/material";
88
import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
99
import ErrorIcon from '@mui/icons-material/Error';
1010
import BugReportIcon from '@mui/icons-material/BugReport';
@@ -19,15 +19,11 @@ export const MetricCard = ({ type, index }) => {
1919
const [data, setData] = useState(null);
2020

2121
const metricType = ["Liveness Indicator", "Error Rate", "Error Queries", "Bytes Consumed"];
22-
const iconColor = ["rgb(6, 27, 100)", "rgb(4, 41, 122)", "rgb(122, 79, 1)", "rgb(122, 12, 46)"];
2322
const bgColor = ["cardColor.background1", "cardColor.background2", "cardColor.background3", "cardColor.background4"];
24-
const textColor = ["#061B64", "#04297A", "#7A4F01", "#7A0C2E"];
25-
const bgImage = [`linear-gradient(135deg, rgba(16, 57, 150, 0) 0%, rgba(16, 57, 150, 0.24) 100%)`,
26-
`linear-gradient(135deg, rgba(12, 83, 183, 0) 0%, rgba(12, 83, 183, 0.24) 100%)`,
27-
`linear-gradient(135deg, rgba(183, 129, 3, 0) 0%, rgba(183, 129, 3, 0.24) 100%)`,
28-
`linear-gradient(135deg, rgba(183, 33, 54, 0) 0%, rgba(183, 33, 54, 0.24) 100%)`];
29-
23+
const textColor = ["cardColor.textColor1", "cardColor.textColor2", "cardColor.textColor3", "cardColor.textColor4"];
24+
const bgImage = ["cardColor.iconBg1", "cardColor.iconBg2", "cardColor.iconBg3", "cardColor.iconBg4"];
3025

26+
console.log(data);
3127
const flipCard = () => {
3228
// supposed to flip liveness card here
3329
}
@@ -48,29 +44,30 @@ export const MetricCard = ({ type, index }) => {
4844

4945
return (
5046
<CardContent
51-
sx={{ display: 'flex', justifyContent: "center", alignItems: "center", flexDirection: "column", bgcolor: bgColor[index], boxShadow: 0, borderRadius: '16px' }}>
52-
<IconButton
53-
size="small"
54-
style={{ width: "2.9rem", height: "2.9rem", backgroundImage: bgImage[index] }}
55-
sx={{ color: iconColor[index], borderRadius: '50%' }}
56-
onClick={() => console.log('')} // placeholder for flipping card
57-
>
58-
{index === 0 && <MonitorHeartIcon />}
59-
{index === 1 && <ErrorIcon />}
60-
{index === 2 && <BugReportIcon />}
61-
{index === 3 && <DataThresholdingIcon />}
62-
</IconButton>
63-
64-
<Typography variant='h3' sx={{ textAlign: 'center', pt: '1.2rem', fontWeight: 700, lineHeight: 1.5, fontSize: '1.8rem', color: textColor[index] }}>
47+
sx={{ display: 'flex', justifyContent: "center", alignItems: "center", flexDirection: "column", bgcolor: bgColor[index], boxShadow: 1, borderRadius: '16px' }}>
48+
<Box width="100%" sx={{ display: 'flex', flexDirection: "row", justifyContent: "flex-start", alignItems: "center" }}>
49+
<IconButton
50+
size="small"
51+
// style={{ width: "2.9rem", height: "2.9rem" }}
52+
sx={{ borderRadius: '50%' }}
53+
onClick={() => console.log('')} // placeholder for flipping card
54+
>
55+
{index === 0 && <MonitorHeartIcon />}
56+
{index === 1 && <ErrorIcon />}
57+
{index === 2 && <BugReportIcon />}
58+
{index === 3 && <DataThresholdingIcon />}
59+
</IconButton>
60+
<Box>
61+
<Typography variant='h6' sx={{ verticalAlign: 'center', fontSize: '0.96rem', opacity: 0.72, color: textColor[index] }}>
62+
{metricType[index]}</Typography>
63+
</Box>
64+
</Box>
65+
<Typography variant='h3' sx={{ fontSize: '1.8rem'}}>
6566
{index === 0 && (data ? 'Running' : 'Down')}
6667
{index === 1 && (data !== null ? data : 'N/A')}
6768
{index === 2 && (data !== null ? data : 'N/A')}
6869
{index === 3 && (data !== null ? data : 'N/A')}
6970
</Typography>
70-
71-
<Typography variant='h6' sx={{ fontWeight: 600, lineHeight: 1.5, fontSize: '0.96rem', opacity: 0.72, color: textColor[index] }}>
72-
{metricType[index]}</Typography>
73-
7471
</CardContent >
7572

7673
)

‎ksqLight/src/components/SettingsSidebar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ export const SettingsSidebar = ({ showSettings, setShowSettings, metricsState, s
339339
</Grid>
340340
<Stack direction="row" spacing={2} sx={{mt: "1.5em"}}>
341341
<Button variant="contained" type="submit">Submit</Button>
342-
<Button color='secondary' variant="contained" onClick={() => setShowSettings(!showSettings)}>Cancel</Button>
342+
<Button color='secondary' variant="outlined" onClick={() => setShowSettings(!showSettings)}>Cancel</Button>
343343
</Stack>
344344
{showSubmissionConfirmation && <Typography variant="h8" sx={{color: "forestgreen", mt: "1em"}}>Settings Saved!</Typography>}
345345
</Grid>

0 commit comments

Comments
 (0)