finish styling fixes (+ zip file for testing) #19

pepfar-datim · Aug 27, 2019 · 8eba167 · 8eba167
1 parent 0049900
commit 8eba167
Show file tree

Hide file tree

Showing 16 changed files with 2,206 additions and 650 deletions.
diff --git a/new/mechanism-finder.zip b/new/mechanism-finder.zip
diff --git a/new/package-lock.json b/new/package-lock.json
diff --git a/new/package.json b/new/package.json
@@ -11,7 +11,9 @@
     "@material-ui/styles": "^4.1.1",
     "babel-jest": "24.7.1",
     "d2": "^31.8.0",
+    "d2-ui-components": "0.0.24",
     "file-saver": "^2.0.1",
+    "loglevel": "^1.6.3",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

diff --git a/new/public/manifest.webapp b/new/public/manifest.webapp
@@ -7,7 +7,7 @@
     }
   },
   "appType": "APP",
-  "name": "DATIM Mechanism Finder",
+  "name": "NEW DATIM Mechanism Finder",
   "version": "29.3.0",
   "description": "DATIM application to find a mechanism",
   "developer": {
@@ -16,6 +16,5 @@
   },
   "icons": {
     "48": "icon.png"
-  },
-  "manifest_generated_at": "Tue June 27 2019 11:39:07 GMT-0400 (Eastern Daylight Time)"
+  }
 }
diff --git a/new/src/colortheme.js b/new/src/colortheme.js
@@ -0,0 +1,48 @@
+import { blue500, blue700, blue100, orange500, grey100, darkBlack, white, grey500, grey400, cyan800,orange300 } from 'material-ui/styles/colors';
+import { fade } from 'material-ui/utils/colorManipulator';
+import Spacing from 'material-ui/styles/spacing';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+const theme = {
+    spacing: Spacing,
+    fontFamily: 'Roboto, sans-serif',
+    palette: {
+        primary1Color: blue500,
+        primary2Color: blue700,
+        primary3Color: blue100,
+        accent1Color: orange300,
+        accent2Color: grey100,
+        accent3Color: grey500,
+        textColor: darkBlack,
+        alternateTextColor: white,
+        canvasColor: white,
+        borderColor: grey400,
+        disabledColor: fade(darkBlack, 0.3),
+        pickerHeaderColor: cyan800,
+    },
+};
+
+function createAppTheme(style) {
+    return {
+        sideBar: {
+            backgroundColor: '#F3F3F3',
+            backgroundColorItem: 'transparent',
+            backgroundColorItemActive: style.palette.accent2Color,
+            textColor: style.palette.textColor,
+            textColorActive: '#276696',
+            borderStyle: '1px solid #e1e1e1',
+        },
+        forms: {
+            minWidth: 350,
+            maxWidth: 900,
+        },
+        formFields: {
+            secondaryColor: style.palette.accent4Color,
+        },
+    };
+}
+
+const muiTheme = getMuiTheme(theme);
+const appTheme = createAppTheme(muiTheme);
+
+export default Object.assign({}, muiTheme, appTheme);
diff --git a/new/src/components/CardTable.js b/new/src/components/CardTable.js
@@ -4,14 +4,11 @@ import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
+import Typography from "@material-ui/core/Typography";
 
-import { makeStyles } from "@material-ui/styles";
-
-const useStyles = makeStyles({
-	rowStyling: {
+const rowStyling = {
 		height: "30px"
 	}
-});
 
 function formatDate(date) {
 	if (typeof date === "string") {
@@ -20,82 +17,127 @@ function formatDate(date) {
 }
 
 function CardTable(props) {
-	const classes = useStyles();
 	return (
-		<Table>
+		<Table style={{whiteSpace: "pre-line"}}>
 			<TableBody>
 				<TableRow
-					className={classes.rowStyling}
+					style={rowStyling}
 					hover={true}
 					key={"name.row"}
 				>
-					<TableCell key="name.name">name</TableCell>
-					<TableCell key="name.value">{props.entity.name}</TableCell>
+					<TableCell key="name.name" style={{"width":"60px"}}>
+						<Typography variant="body1" gutterBottom>
+							name
+						</Typography>
+					</TableCell>
+					<TableCell key="name.value">
+						<Typography variant="body1" gutterBottom>
+							{props.entity.name}
+						</Typography>
+					</TableCell>
 				</TableRow>
 				<TableRow
-					className={classes.rowStyling}
+					style={rowStyling}
 					hover={true}
 					key={"code.row"}
 				>
-					<TableCell key="code.name">code</TableCell>
-					<TableCell key="code.value">{props.entity.code}</TableCell>
+					<TableCell key="code.name" style={{"width":"60px"}}>
+						<Typography variant="body1" gutterBottom>
+							code
+						</Typography>
+					</TableCell>
+					<TableCell key="code.value">
+						<Typography variant="body1" gutterBottom>
+							{props.entity.code}
+						</Typography>
+					</TableCell>
 				</TableRow>
 
 				<TableRow
-					className={classes.rowStyling}
+					style={rowStyling}
 					hover={true}
 					key={"lastUpdated.row"}
 				>
-					<TableCell key="lastUpdated.name">last updated</TableCell>
+					<TableCell key="lastUpdated.name" style={{"width":"62px"}}>
+						<Typography variant="body1" gutterBottom>
+							{"last\nupdated"}
+						</Typography>
+					</TableCell>
 					<TableCell key="lastUpdated.value">
-						{formatDate(props.entity.lastUpdated)}
+						<Typography variant="body1" gutterBottom>
+							{formatDate(props.entity.lastUpdated)}
+						</Typography>
 					</TableCell>
 				</TableRow>
 				{props.entityType !== "Mechanism" && (
 					<TableRow
-						className={classes.rowStyling}
+						style={rowStyling}
 						hover={true}
 						key={"created.row"}
 					>
-						<TableCell key="created.name">created</TableCell>
+						<TableCell key="created.name" style={{"width":"60px"}}>
+							<Typography variant="body1" gutterBottom>
+								created
+							</Typography>
+						</TableCell>
 						<TableCell key="created.value">
-							{formatDate(props.entity.created)}
+							<Typography variant="body1" gutterBottom>
+								{formatDate(props.entity.created)}
+							</Typography>
 						</TableCell>
 					</TableRow>
 				)}
 				{props.entityType === "Mechanism" && (
 					<TableRow
-						className={classes.rowStyling}
+						style={rowStyling}
 						hover={true}
 						key={"startDate.row"}
 					>
-						<TableCell key="startDate.name">start</TableCell>
+						<TableCell key="startDate.name" style={{"width":"60px"}}>
+							<Typography variant="body1" gutterBottom>
+								start date
+							</Typography>
+						</TableCell>
 						<TableCell key="startDate.value">
-							{formatDate(props.entity.startDate)}
+							<Typography variant="body1" gutterBottom noWrap>
+								{formatDate(props.entity.startDate)}
+							</Typography>
 						</TableCell>
 					</TableRow>
 				)}
 				{props.entityType === "Mechanism" && (
 					<TableRow
-						className={classes.rowStyling}
+						style={rowStyling}
 						hover={true}
 						key={"endDate.row"}
 					>
-						<TableCell key="endDate.name">end</TableCell>
-						<TableCell key="endDate.value">
-							{formatDate(props.entity.endDate)}
+						<TableCell key="end.name" style={{"width":"60px"}}>
+							<Typography variant="body1" gutterBottom inline>
+								end date
+							</Typography>
+						</TableCell>
+						<TableCell key="lastupdated.value">
+							<Typography variant="body1" gutterBottom>
+								{formatDate(props.entity.endDate)}
+							</Typography>
 						</TableCell>
 					</TableRow>
 				)}
 				{props.entityType === "Mechanism" && (
 					<TableRow
-						className={classes.rowStyling}
+						style={rowStyling}
 						hover={true}
 						key={"status.row"}
 					>
-						<TableCell key="activeStatus.name">active</TableCell>
+						<TableCell key="activeStatus.name" style={{"width":"60px"}}>
+							<Typography variant="body1" gutterBottom>
+								active
+							</Typography>
+						</TableCell>
 						<TableCell key="activeStatus.value">
-							{props.activeStatus}
+							<Typography variant="body1" gutterBottom>
+								{props.activeStatus}
+							</Typography>
 						</TableCell>
 					</TableRow>
 				)}

diff --git a/new/src/components/DataReactTable.js b/new/src/components/DataReactTable.js
@@ -5,15 +5,6 @@ import "react-table/react-table.css";
 
 import FoldableTableHOC from "react-table/lib/hoc/foldableTable";
 
-import { makeStyles } from "@material-ui/styles";
-
-const useStyles = makeStyles({
-	tableStyling: {
-		margin: "10px",
-		height: "calc(100% - 600px)"
-	}
-});
-
 const FoldableTable = FoldableTableHOC(ReactTable);
 
 function getData(array) {
@@ -23,6 +14,7 @@ function getData(array) {
 }
 
 function getColumns(columnRow, dataRow) {
+	var wideColumns = {"Legacy Partner Name": true, "IM": true};
 	for (let i = columnRow.length; i <= Object.keys(dataRow).length; i++) {
 		columnRow.push("undefined" + i);
 	}
@@ -34,21 +26,25 @@ function getColumns(columnRow, dataRow) {
 			Header: column,
 			accessor: column,
 			foldable: true,
-			style: { whiteSpace: "unset", wordWrap: "break" }
+			style: { whiteSpace: "unset", wordWrap: "break" },
+			width: "100"
 		};
+		if (wideColumns.hasOwnProperty(column)) {columnProperties.width = "200"}
 		columnsArray.push(columnProperties);
 		return columnsArray;
 	}, []);
 	return columns;
 }
 
 function DataReactTable(props) {
-	const classes = useStyles();
 	var definedColumns = getColumns(props.data[0], props.data[1]);
 	return (
 <div>
 		<FoldableTable
-			className={classes.tableStyling + ' -striped'}
+			style={{
+				margin: "10px",
+				height: "calc(100% - 600px)"
+			}}
 			data={getData(props.data)}
 			columns={definedColumns}
 			filterable={true}

diff --git a/new/src/components/EnvironmentSelector.js b/new/src/components/EnvironmentSelector.js
@@ -4,20 +4,15 @@ import Radio from "@material-ui/core/Radio";
 import RadioGroup from "@material-ui/core/RadioGroup";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 
-import { makeStyles } from '@material-ui/styles';
-
-const useStyles = makeStyles({
-  radioStyling: {
-    padding: '5px',
-    marginLeft: '10px',
-  }
-});
 
 function EnvironmentSelector(props) {
-	const classes = useStyles();
 	return (
 		<div>
-			<RadioGroup className={classes.radioStyling}
+			<RadioGroup 
+				style ={{
+					padding: '5px',
+					marginLeft: '10px'
+				}}
 				aria-label="environment"
 				name="environmentSelector"
 				value={props.environment}

diff --git a/new/src/components/FoundChip.js b/new/src/components/FoundChip.js
@@ -2,30 +2,22 @@ import React from "react";
 
 import Chip from "@material-ui/core/Chip";
 
-import { withStyles } from "@material-ui/styles";
+const theme = require('./theme.js');
 
-const styles = {
-	chipStyling: {
-		padding: "5px",
-		margin: "5px",
-		textAlign: "left",
-		backgroundColor: "#c8e6c9",
-	},
-	chipColors: {
-		okayColor: "#c8e6c9",
-		warningColor: "#ffcdd2"
-	}
-};
 
 function FoundChip(props) {
-	const { classes } = props;
+
 	return (
 		<Chip
-			className={classes.chipStyling}
+			className={styles.chipStyling}
 			style={{
+				padding: "5px",
+				margin: "5px",
+				textAlign: "left",
+				backgroundColor: "#c8e6c9",
 				backgroundColor: props.foundStatus
-					? styles.chipColors.okayColor
-					: styles.chipColors.warningColor
+					? theme.colors.okayColor
+					: theme.colors.warningColor
 			}}
 			label={
 				props.foundStatus

diff --git a/new/src/components/FoundSummary.js b/new/src/components/FoundSummary.js
@@ -2,27 +2,20 @@ import React from "react";
 
 import Chip from "@material-ui/core/Chip";
 
-import { useTheme } from "@material-ui/styles";
-import { makeStyles } from "@material-ui/styles";
+const theme = require('./theme.js');
 
-const useStyles = makeStyles(theme => ({
-	chipStyling: {
-		padding: "5px",
-		margin: theme.spacing,
-		textAlign: "left"
-	}
-}));
 
 function FoundChip(props) {
-	const classes = useStyles();
-	const theme = useTheme();
+
 	return (
 		<Chip
-			className={classes.chipStyling}
 			style={{
+				padding: "5px",
+				margin: theme.spacing.spacing,
+				textAlign: "left",				
 				backgroundColor: props.foundStatus
-					? theme.okayColor
-					: theme.warningColor
+					? theme.colors.okayColor
+					: theme.colors.warningColor
 			}}
 			label={
 				props.foundStatus