diff --git a/src/App.css b/src/App.css
index 74b5e053450a48a6bdb4d71aad648e7af821975c..c99e511199952981f90a6c55a70aea224d533123 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,600,600i,700");
+
.App {
text-align: center;
}
diff --git a/src/Theme.js b/src/Theme.js
index 993a3d92667ff6b2b9d2eedabdd1d7f071a8174c..a09822c9a7da688d5c8a3ea1877248d64406fef0 100644
--- a/src/Theme.js
+++ b/src/Theme.js
@@ -1,10 +1,12 @@
-import { deepPurple } from "@material-ui/core/colors";
import { createMuiTheme } from "@material-ui/core/styles";
export const theme = createMuiTheme({
palette: {
primary: {
- main: deepPurple[500]
+ main: "#0099dc"
+ },
+ secondary: {
+ main: "#0000ff"
},
status: {
ok: '#4caf50',
@@ -12,6 +14,23 @@ export const theme = createMuiTheme({
neutral: '#000',
progress: '#ffc107',
},
- }
+ },
+ typography: {
+ fontFamily: "Segoe UI Regular",
+ h1: {
+ fontFamily: 'Titillium Web, sans-serif',
+ fontSize: 24,
+ },
+ h5: {
+ fontFamily: "Segoe UI",
+ fontSize: 16,
+ fontWeight: 600,
+ },
+ overline: {
+ fontFamily: "Segoe UI",
+ fontSize: 16,
+ fontWeight: 600,
+ },
+ },
});
diff --git a/src/components/IOC/IOCIcons.js b/src/components/IOC/IOCIcons.js
index acde52857f65d016ff546752cb35933f48b9773d..1a6c68766b543107215fae73bb8385b875ebe3e7 100644
--- a/src/components/IOC/IOCIcons.js
+++ b/src/components/IOC/IOCIcons.js
@@ -6,20 +6,6 @@ export function IOCStatusIcon({ ioc }) {
const theme = useTheme();
- // const statusBulbColors = {
- // "ok": theme.palette.success.light,
- // "down": theme.palette.text.disabled,
- // "unreachable": theme.palette.secondary.light,
- // "undeployed": theme.palette.text.disabled,
- // };
-
- // const statusBulbIcons = {
- // "ok": <Brightness1 />,
- // "down": <Brightness1 />,
- // "unreachable": <ErrorOutline />,
- // "undeployed": <RadioButtonUnchecked />,
- // }
-
const statusBulbColors = {
true: theme.palette.status.ok,
false: theme.palette.status.fail,
diff --git a/src/components/common/KeyValueTable/KeyValueTable.js b/src/components/common/KeyValueTable/KeyValueTable.js
index 77da022903d1a459d708fe0edc0195c90475e13a..56a27a383dcd3e36afaefb20921a178043b4a4b8 100644
--- a/src/components/common/KeyValueTable/KeyValueTable.js
+++ b/src/components/common/KeyValueTable/KeyValueTable.js
@@ -33,7 +33,7 @@ export function KeyValueTable({ obj, variant="overline" }) {
{
(variant === "overline") &&
<Typography variant="overline">
- <strong>{key}</strong>
+ {key}
</Typography>
}
{
diff --git a/src/components/common/SearchBoxFilter/SearchBoxFilter.js b/src/components/common/SearchBoxFilter/SearchBoxFilter.js
index a9e94c13c4223d7e88cd6ed306f10268f969c02d..89b4c700b98a38b3b5f06b636f38f83bdd11d74d 100644
--- a/src/components/common/SearchBoxFilter/SearchBoxFilter.js
+++ b/src/components/common/SearchBoxFilter/SearchBoxFilter.js
@@ -1,26 +1,17 @@
import React, { useState, useEffect } from "react";
-import { Container, List, ListItem, Paper, TextField } from "@material-ui/core";
+import { Container, List, ListItem, Paper, TextField, makeStyles } from "@material-ui/core";
import { useTypingTimer } from "./TypingTimer";
+const useStyles = makeStyles((theme) => ({
+ searchText: {
+ fontFamily: "Segoe UI",
+ },
+}));
+
export function SearchBoxFilter({ items, filter, render }) {
+ const classes = useStyles();
const [filteredItems, setFilteredItems] = useState(items);
const [search, searchKeyPress] = useTypingTimer();
- // const [typingTimer, setTypingTimer] = useState();
- // const [search, setSearch] = useState("");
- // const doneTypingInterval = 250; //ms
-
- // const searchKeyPress = (event) => {
- // const { target, key } = event;
- // clearTimeout(typingTimer);
- // if (key === "Enter") {
- // setSearch(target.value);
- // return;
- // }
- // else {
- // const timer = setTimeout(() => setSearch(target.value), doneTypingInterval);
- // setTypingTimer(timer);
- // }
- // }
const filterItems = () => {
const f = filter(search);
@@ -32,7 +23,7 @@ export function SearchBoxFilter({ items, filter, render }) {
return (
<Container>
- <TextField fullWidth variant="outlined" label="search" onKeyUp={searchKeyPress} />
+ <TextField className={classes.searchText} fullWidth variant="outlined" label="search" onKeyUp={searchKeyPress} />
<div> </div>
{render(filteredItems)}
</Container>
diff --git a/src/components/common/table/CustomTable.css b/src/components/common/table/CustomTable.css
index a0bef588020360cd25a23ba0e6c05fbea8d53bf0..bff814137f35e0849701a48e321b7379ebc5d674 100644
--- a/src/components/common/table/CustomTable.css
+++ b/src/components/common/table/CustomTable.css
@@ -26,4 +26,16 @@
.ccce-custom-table .p-ccce-custom-table .p-datatable-scrollable-header, .ccce-custom-table .p-ccce-custom-table .p-datatable-thead > tr > th {
background: #e8e9ea;
+}
+
+.ccce-custom-table .p-ccce-custom-table .p-column-title {
+ font-family: 'Segoe UI';
+}
+
+.ccce-custom-table .p-ccce-custom-table .p-datatable-tbody {
+ font-family: 'Segoe UI Regular';
+}
+
+.ccce-custom-table .p-ccce-custom-table .p-paginator {
+ font-family: 'Segoe UI Regular';
}
\ No newline at end of file
diff --git a/src/components/host/HostIcons.js b/src/components/host/HostIcons.js
index 9f41cc2d0297dd1f408297f814569cbb56392eb4..786f1691a5349780e981456ca504712929fc8aa3 100644
--- a/src/components/host/HostIcons.js
+++ b/src/components/host/HostIcons.js
@@ -6,23 +6,9 @@ export function HostStatusIcon({ host }) {
const theme = useTheme();
- // const statusBulbColors = {
- // "ok": theme.palette.success.light,
- // "down": theme.palette.text.disabled,
- // "unreachable": theme.palette.secondary.light,
- // "undeployed": theme.palette.text.disabled,
- // };
-
- // const statusBulbIcons = {
- // "ok": <Brightness1 />,
- // "down": <Brightness1 />,
- // "unreachable": <ErrorOutline />,
- // "undeployed": <RadioButtonUnchecked />,
- // }
-
const statusBulbColors = {
- "available": theme.palette.success.light,
- "unreachable": theme.palette.secondary.light,
+ "available": theme.palette.status.ok,
+ "unreachable": theme.palette.status.fail,
null: theme.palette.text.disabled,
};
diff --git a/src/components/navigation/GlobalAppBar/GlobalAppBar.js b/src/components/navigation/GlobalAppBar/GlobalAppBar.js
index 3b5b2984b083210b1c5dceb772807a953fc448b2..4e2319f4c2ba23dc9ea5acff847d61291db8cdff 100644
--- a/src/components/navigation/GlobalAppBar/GlobalAppBar.js
+++ b/src/components/navigation/GlobalAppBar/GlobalAppBar.js
@@ -96,7 +96,7 @@ export function ButtonAppBar({ homeUrl, homeClick, title, button, profileButton,
<IconButton edge="start" component={Link} to={homeUrl} onClick={homeClick} className={classes.menuButton} color="inherit" aria-label="menu">
<Home />
</IconButton>
- <Typography variant="h6" className={classes.title} noWrap>
+ <Typography variant="h1" className={classes.title} noWrap>
{title}
</Typography>
{button}
@@ -127,7 +127,7 @@ function MenuListItem({ selectedUrl, handleListItemClick, url, icon, text, toolt
<ListItem button component={Link} to={url} selected={currentUrl.endsWith(url)}
onClick={(event) => handleListItemClick(event, url)}>
<ListItemIcon className={classes.menuIcon}>{icon}</ListItemIcon>
- <ListItemText primary={text} />
+ <ListItemText primary={text} primaryTypographyProps={{variant: "h5"}}/>
</ListItem>
</Tooltip>
);
@@ -184,7 +184,7 @@ export function ProfileMenu() {
<ListItemIcon>
<LockOpen fontSize="small" />
</ListItemIcon>
- <ListItemText primary="Logout" />
+ <ListItemText primary="Logout" primaryTypographyProps={{variant: "h5"}} />
</StyledMenuItem>
</StyledMenu>
</>
diff --git a/src/index.css b/src/index.css
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..454cef245208c46209840d22df82897741ed8b40 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,7 +2,7 @@ body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
+ sans-serif, 'Titillium Web', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
diff --git a/src/views/IOC/IOCDetailsView.js b/src/views/IOC/IOCDetailsView.js
index ac71354815a44bf1a2b90eb957a3cbc4e2e850e9..680bfe0d83a643ef90378719b3fddfce1b6aa987 100644
--- a/src/views/IOC/IOCDetailsView.js
+++ b/src/views/IOC/IOCDetailsView.js
@@ -1,4 +1,4 @@
-import { Container, Grid, Paper, Tab, Tabs } from "@material-ui/core";
+import { Container, Grid, Paper, Tab, Tabs, Typography } from "@material-ui/core";
import React, { useEffect, useState } from "react";
import { useCreateDeployment, useIOC } from "../../api/SwaggerApi";
import { IOCLiveStatus } from "../../components/IOC/IOCLiveStatus";
@@ -41,8 +41,8 @@ export function IOCDetailsView({ match }) {
indicatorColor="primary"
textColor="primary"
>
- {ioc && ioc.activeDeployment && <Tab label="Live Status" value="Live Status" />}
- {ioc && <Tab label="Configuration" value="Configuration" />}
+ {ioc && ioc.activeDeployment && <Tab label={<Typography variant="h5">Live Status</Typography>} value="Live Status" />}
+ {ioc && <Tab label={<Typography variant="h5">Configuration</Typography>} value="Configuration" />}
</Tabs>
</Grid>
</Grid>
diff --git a/src/views/deployments/DeploymentsView.js b/src/views/deployments/DeploymentsView.js
index 62fbc8988753f389944dfbe6cea85b72744c2b42..0bb79a1a55292a64b8f83164de5d2912f98f1c88 100644
--- a/src/views/deployments/DeploymentsView.js
+++ b/src/views/deployments/DeploymentsView.js
@@ -1,6 +1,6 @@
import React, { useContext, useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
-import {Paper, Container, Grid, FormControlLabel, Switch, Hidden } from '@material-ui/core';
+import {Paper, Container, Grid, FormControlLabel, Switch, Hidden, Typography } from '@material-ui/core';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { SearchableDeploymentsTable } from "../../components/deployments/DeploymentsTable";
@@ -80,16 +80,16 @@ export function DeploymentsView() {
onChange={handleTabChange}
indicatorColor="primary"
textColor="primary">
- <Tab label="All" />
- <Tab label="Running" />
- <Tab label="Finished" />
- <Tab label="Scheduled" />
+ <Tab label={<Typography variant="h5">All</Typography>} />
+ <Tab label={<Typography variant="h5">Running</Typography>} />
+ <Tab label={<Typography variant="h5">Finished</Typography>} />
+ <Tab label={<Typography variant="h5">Scheduled</Typography>} />
</Tabs>
</Grid>
<Grid item xs={8} md={2}>
<FormControlLabel className={classes.formControl}
control={<Switch checked={ownOnly} onChange={handleChangeOwn} />}
- label="My deployments"
+ label={<Typography variant="h5">My deployments</Typography>}
/>
</Grid>
<Grid item xs={12} md={12}>