Merge pull request #195 from IN-CORE/release-1.11.0

Release 1.11.0

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+
+## [1.11.0] - 2024-04-30
+
+### Changed
+- New IN-CORE logo and color palette [#193](https://github.com/IN-CORE/incore-ui/issues/193)
+
 ## [1.10.0] - 2024-02-07
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "incore",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "The Interdependent Networked Community Resilience Modeling Environment (IN-CORE) has the capability of computing resiliency measures at the user-desired community level. The methodologies and algorithms have been developed by different research groups within the Center of Excellence.",
   "engines": {
     "npm": ">=3.10",

src/app.config.js

@@ -12,7 +12,7 @@ config["incoreDocUrl"] = `${hostname}/doc/incore/introduction.html`;
 config["incoreTutorialUrl"] = `${hostname}/doc/incore/tutorials.html`;
 config["incoreFAQUrl"] = `${hostname}/doc/incore/faq.html`;
 config["swaggerUrl"] = `${hostname}/doc/api/`;
-config["webVersion"] = "1.10.0";
+config["webVersion"] = "1.11.0";
 config["spaceServiceBase"] = `${hostname}/space/api/`;
 config["spaceService"] = `${hostname}/space/api/spaces`;
 config["dfr3ServiceBase"] = `${hostname}/dfr3/api/`;

src/components/App.jsx

@@ -26,10 +26,10 @@ global.__base = `${__dirname}/`;
 const theme = createMuiTheme({
 	palette: {
 		primary: {
-			main: "#18381b"
+			main: "#1B2D45"
 		},
 		secondary: {
-			main: "#e8a114"
+			main: "#8998AB"
 		},
 		third: {
 			main: "#333333"

src/components/DFR3Viewer.jsx

@@ -85,7 +85,7 @@ const styles = {
 	},
 	inlineButtons: {
 		display: "inline-block",
-		margin: "auto 5px"
+		margin: "auto 5px",
 	},
 	paperFooter: {
 		padding: theme.spacing(2),
@@ -1132,18 +1132,19 @@ class DFR3Viewer extends React.Component {
 															}
 															<CopyToClipboard text={this.state.selectedDFR3Curve.id}>
 																<Button
-																	color="secondary"
-																	variant="contained"
+																	color="primary"
+																	variant="outlined"
 																	className={classes.inlineButtons}
 																	size="small"
 																>
 																	Copy ID
 																</Button>
 															</CopyToClipboard>
 															<Button
-																color="secondary"
-																variant="contained"
+																color="primary"
+																variant="outlined"
 																className={classes.inlineButtons}
+																style={{float: "right", color: "red", borderColor: "red"}}
 																size="small"
 																onClick={() => {
 																	this.onClickDelete("curve");
@@ -1291,18 +1292,19 @@ class DFR3Viewer extends React.Component {
 													</Button>
 													<CopyToClipboard text={this.state.selectedMapping.id}>
 														<Button
-															color="secondary"
-															variant="contained"
+															color="primary"
+															variant="outlined"
 															className={classes.inlineButtons}
 															size="small"
 														>
 															Copy ID
 														</Button>
 													</CopyToClipboard>
 													<Button
-														color="secondary"
-														variant="contained"
+														color="primary"
+														variant="outlined"
 														className={classes.inlineButtons}
+														style={{float: "right", color: "red", borderColor: "red"}}
 														size="small"
 														onClick={() => {
 															this.onClickDelete("mapping");

src/components/DataViewer.jsx

@@ -86,7 +86,7 @@ const styles = {
 	},
 	inlineButtons: {
 		display: "inline-block",
-		margin: "auto 5px"
+		margin: "auto 5px",
 	},
 	paperFooter: {
 		padding: theme.spacing(2),
@@ -888,18 +888,19 @@ class DataViewer extends Component {
 													</Button>
 													<CopyToClipboard text={this.state.selectedDataset.id}>
 														<Button
-															color="secondary"
-															variant="contained"
+															color="primary"
+															variant="outlined"
 															className={classes.inlineButtons}
 															size="small"
 														>
 															Copy ID
 														</Button>
 													</CopyToClipboard>
 													<Button
-														color="secondary"
-														variant="contained"
+														color="primary"
+														variant="outlined"
 														className={classes.inlineButtons}
+														style={{float: "right", color: "red", borderColor: "red"}}
 														size="small"
 														onClick={this.onClickDelete}
 													>

src/components/HazardViewer.jsx

@@ -78,7 +78,7 @@ const styles = {
 	},
 	inlineButtons: {
 		display: "inline-block",
-		margin: "auto 5px"
+		margin: "auto 5px",
 	},
 	paperFooter: {
 		padding: theme.spacing(2),
@@ -678,18 +678,19 @@ class HazardViewer extends Component {
 														</Button>
 														<CopyToClipboard text={this.state.selectedHazard.id}>
 															<Button
-																color="secondary"
-																variant="contained"
+																color="primary"
+																variant="outlined"
 																className={classes.inlineButtons}
 																size="small"
 															>
 																Copy ID
 															</Button>
 														</CopyToClipboard>
 														<Button
-															color="secondary"
-															variant="contained"
+															color="primary"
+															variant="outlined"
 															className={classes.inlineButtons}
+															style={{float: "right", color: "red", borderColor: "red"}}
 															size="small"
 															onClick={this.onClickDelete}
 														>

src/components/HomePage.jsx

@@ -17,7 +17,6 @@ import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
 
 const styles = (theme) => ({
 	root: {
-		color: theme.palette.primary,
 		position: "relative",
 		alignItems: "center",
 		[theme.breakpoints.up("sm")]: {
@@ -26,11 +25,11 @@ const styles = (theme) => ({
 		}
 	},
 	container: {
-		marginTop: theme.spacing(3),
-		marginBottom: theme.spacing(10),
+		padding: "0 0",
 		display: "flex",
 		flexDirection: "column",
-		alignItems: "center"
+		alignItems: "center",
+		maxWidth:"100%"
 	},
 	backdrop: {
 		position: "absolute",
@@ -63,25 +62,21 @@ const styles = (theme) => ({
 		fontWeight: "bold",
 		color: theme.palette.primary
 	},
-	caption: {
-		marginTop: theme.spacing(2),
-		marginLeft: theme.spacing(10),
-		marginRight: theme.spacing(10),
-		fontWeight: "bold"
-	},
 	intro: {
-		margin: "1em auto 2em auto",
+		padding: "5% 20% 8% 20%",
 		textAlign: "left",
-		lineHeight: "1.5em"
+		lineHeight: "1.5em",
+		backgroundColor:"#ffffff"
 	},
-	h6: {
-		fontWeight: "bold",
+	caption: {
+		marginTop: theme.spacing(2),
 		marginBottom: theme.spacing(4),
-		textAlign: "left"
+		textAlign: "left",
+		fontWeight: "bold"
 	},
 	more: {
 		fontSize: "16px",
-		textAlign: "center",
+		textAlign: "left",
 		marginTop: theme.spacing(2)
 	},
 	connectWithUs: {
@@ -117,9 +112,8 @@ const styles = (theme) => ({
 		backgroundColor: "#ffffff"
 	},
 	link: {
-		color: theme.palette.secondary.main,
-		textDecoration: "none",
-		fontWeight: "bold"
+		color: theme.palette.primary.main,
+		textDecoration: "underline"
 	},
 	sectionContainers: {
 		marginTop: theme.spacing(15),
@@ -173,19 +167,22 @@ const styles = (theme) => ({
 		paddingTop: theme.spacing(0.5),
 		paddingBottom: theme.spacing(0.5)
 	},
+	versionBlock:{
+		marginTop: "5em"
+	},
 	infoBlock: {
-		"display": "flex",
-		"flexDirection": "column",
-		"justifyContent": "center",
-		"alignItems": "center",
-		"textAlign": "left",
-		"marginLeft": theme.spacing(4),
-		"fontSize": "16px",
-		"fontFamily": "Work Sans, sans-serif",
-		"fontWeight": "400",
-		"lineHeight": "1.5",
-		"letterSpacing": "0.00938em",
-
+		padding: "5% 5%",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		textAlign: "left",
+		marginLeft: theme.spacing(4),
+		fontSize: "16px",
+		fontFamily: "Work Sans, sans-serif",
+		fontWeight: "400",
+		lineHeight: "1.5",
+		letterSpacing: "0.00938em",
 		"& pre": {
 			backgroundColor: "#f5f5f5",
 			border: "1px solid #ddd",
@@ -323,12 +320,12 @@ class HomePage extends Component {
 				{/*header*/}
 				<section className={classes.root}>
 					<Container className={classes.container}>
-						<img src="/public/resilience-logo.png" />
-						<Typography color="inherit" align="center" variant="h5" className={classes.caption}>
-							{this.state.subTitle}
-						</Typography>
 						{/*Intro block*/}
 						<div className={classes.intro}>
+							<img src="/public/resilience-logo.png" style={{width:"40em", padding: "4em 0", display:"block", margin:"auto"}}/>
+							<Typography color="inherit" align="left" variant="h5" className={classes.caption}>
+								{this.state.subTitle}
+							</Typography>
 							<Typography variant="body1" color="inherit" className={classes.more}>
 								The{" "}
 								<Link href="https://www.nist.gov" className={classes.link} target="_blank">
@@ -365,7 +362,7 @@ class HomePage extends Component {
 							</Typography>
 						</div>
 						{/*Version Block*/}
-						<div>
+						<div className={classes.versionBlock}>
 							<div>
 								<Typography
 									variant="h5"

src/components/SemanticViewer.jsx

@@ -89,7 +89,7 @@ const styles = {
 	},
 	inlineButtons: {
 		display: "inline-block",
-		margin: "auto 5px"
+		margin: "auto 5px",
 	},
 	hide: {
 		display: "none"
@@ -580,17 +580,17 @@ class SemanticViewer extends Component {
 												</Button>
 												<CopyToClipboard text={this.state.selectedSemanticType["url"]}>
 													<Button
-														color="secondary"
-														variant="contained"
+														color="primary"
+														variant="outlined"
 														className={classes.inlineButtons}
 														size="small"
 													>
 														Copy Type
 													</Button>
 												</CopyToClipboard>
 												{/*<Button*/}
-												{/*	color="secondary"*/}
-												{/*	variant="contained"*/}
+												{/*	color="primary"*/}
+												{/*	variant="outlined"*/}
 												{/*	className={classes.inlineButtons}*/}
 												{/*	size="small"*/}
 												{/*	onClick={this.onClickDelete}*/}

src/components/children/Confirmation.jsx

@@ -18,8 +18,8 @@ function Confirmation(props) {
 					variant="contained"
 					size="small"
 					onClick={handleConfirmed}>{actionBtnName}</Button>
-				<Button color="secondary"
-					variant="contained"
+				<Button color="primary"
+					variant="outlined"
 					size="small"
 					onClick={handleCanceled}>Cancel</Button>
 			</DialogActions>

src/components/children/NestedInfoTable.jsx

@@ -6,7 +6,7 @@ import config from "../../app.config";
 const styles = {
 	inlineButtons: {
 		display: "inline-block",
-		margin: "auto 5px"
+		margin: "auto 5px",
 	},
 	rowHeaderCell: {
 		minWidth: "30%",
@@ -109,7 +109,7 @@ class NestedInfoTable extends React.Component {
 								<TableCell>
 									<a
 										href={`${config.semanticServiceType}/${data[key]}`}
-										style={{ color: "#e8a114" }}
+										style={{ color: "#8998AB" }}
 										target="_blank"
 										rel="noopener noreferrer"
 									>

src/components/config/ChartConfig.jsx

@@ -83,7 +83,7 @@ let pieChartConfig = {
 			},
 			colors: [
 				"#dadada",
-				"#18381b"
+				"#1B2D45"
 			],
 			states:{
 				hover:{

src/styles/customTheme.js

@@ -12,16 +12,16 @@ export default {
 	},
 	palette: {
 		spacing: spacing,
-		primary1Color: "#18381b",
+		primary1Color: "#1B2D45",
 		primary2Color: "#333333",
-		primary3Color: "#e8a114",
-		accent1Color: "#e8a114",
+		primary3Color: "#8998AB",
+		accent1Color: "#8998AB",
 		textColor: "#333333",
-		alternateTextColor: "#e8a114",
+		alternateTextColor: "#8998AB",
 		borderColor: grey300,
 		disabledColor: fade("#333333", 0.3),
 		pickerHeaderColor: cyan500,
 		clockCircleColor: fade("#333333", 0.07),
-		shadowColor: fullBlack,
+		shadowColor: fullBlack
 	},
 };