From b2e399abc083d2261e0fce3e6d6c39bd53e857be Mon Sep 17 00:00:00 2001
From: pshdev0 <pshdev0@gmail.com>
Date: Sat, 19 Aug 2023 19:03:32 +0100
Subject: [PATCH] updated credential-card ui elements
---
IV-Portal-Cavendish/package-lock.json | 17 +++++++++
IV-Portal-Cavendish/package.json | 1 +
IV-Portal-Cavendish/src/App.js | 47 ++++++++++++++++--------
IV-Portal-Cavendish/src/grad.js | 10 ++++++
IV-Portal-Franklin/package-lock.json | 17 +++++++++
IV-Portal-Franklin/package.json | 1 +
IV-Portal-Franklin/src/App.js | 50 +++++++++++++++++++-------
IV-Portal-Franklin/src/grad.js | 10 ++++++
IV-Portal-Thoday/package-lock.json | 17 +++++++++
IV-Portal-Thoday/package.json | 1 +
IV-Portal-Thoday/src/App.js | 52 +++++++++++++++++++--------
IV-Portal-Thoday/src/grad.js | 10 ++++++
12 files changed, 192 insertions(+), 41 deletions(-)
create mode 100644 IV-Portal-Cavendish/src/grad.js
create mode 100644 IV-Portal-Franklin/src/grad.js
create mode 100644 IV-Portal-Thoday/src/grad.js
diff --git a/IV-Portal-Cavendish/package-lock.json b/IV-Portal-Cavendish/package-lock.json
index 5610b0306..155da2025 100644
--- a/IV-Portal-Cavendish/package-lock.json
+++ b/IV-Portal-Cavendish/package-lock.json
@@ -23,6 +23,7 @@
"react-dropzone": "^11.5.1",
"react-scripts": "5.0.0",
"react-use-measure": "^2.1.1",
+ "rgb-hex": "^4.0.1",
"web-vitals": "^2.1.4"
}
},
@@ -13944,6 +13945,17 @@
"node": ">=0.10.0"
}
},
+ "node_modules/rgb-hex": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+ "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ==",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -26300,6 +26312,11 @@
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
},
+ "rgb-hex": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+ "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ=="
+ },
"rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
diff --git a/IV-Portal-Cavendish/package.json b/IV-Portal-Cavendish/package.json
index 5ebb7becd..3e43cd1fb 100644
--- a/IV-Portal-Cavendish/package.json
+++ b/IV-Portal-Cavendish/package.json
@@ -18,6 +18,7 @@
"react-dropzone": "^11.5.1",
"react-scripts": "5.0.0",
"react-use-measure": "^2.1.1",
+ "rgb-hex": "^4.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
diff --git a/IV-Portal-Cavendish/src/App.js b/IV-Portal-Cavendish/src/App.js
index b5849455c..a4b727260 100644
--- a/IV-Portal-Cavendish/src/App.js
+++ b/IV-Portal-Cavendish/src/App.js
@@ -21,6 +21,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { Chip } from '@mui/material';
import InfoIcon from '@mui/icons-material/Info';
+import grad from './grad';
const env = new Env();
@@ -88,19 +89,37 @@ export default function App() {
const done = state === "done";
return (
- <Box m={3}>
- <Card style={{ background: 'lightblue' }}>
- <CardContent>
- <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
- Credential Application
- </Typography>
- <Typography sx={{ mb: 1.5 }} color="text.secondary">{legalName}</Typography>
- <Typography variant="body2">
- Username: {userName} <br />
- Employer: {employer} <br />
- Instagram: {instagramHandle}
- </Typography>
- </CardContent>
+ <Box m={3} borderRadius={4}
+ sx={{
+ width: 420,
+ height: 180,
+ background: grad(137, 189, 238),
+ '&:hover': {
+ backgroundColor: 'white',
+ opacity: [1.0, 1.0, 1.0],
+ },
+ }}
+ >
+ <Box m={1}>
+ <Stack direction="row">
+ <Stack>
+ <Box m={1}>
+ <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+ Credential Application
+ </Typography>
+ </Box>
+ <Box m={1}>
+ <Typography sx={{ mb: 0.5 }} color="text.secondary">{legalName}</Typography>
+ </Box>
+ </Stack>
+ <Box ml={5} mt={1}>
+ <Typography variant="body2">
+ Username: {userName} <br />
+ Employer: {employer} <br />
+ Instagram: {instagramHandle}
+ </Typography>
+ </Box>
+ </Stack>
<CardActions>
{proposal_received && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<InfoIcon style={{ color: 'green' }} />} label="New application"></Chip>}
{proposal_received && <Button size="small" onClick={() => sendOffer(cred_ex_id)}>Send Offer</Button>}
@@ -119,7 +138,7 @@ export default function App() {
{credential_issued && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Credential issued successfully"></Chip>}
{done && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Credential issued successfully"></Chip>}
</CardActions>
- </Card >
+ </Box>
</Box>);
}
diff --git a/IV-Portal-Cavendish/src/grad.js b/IV-Portal-Cavendish/src/grad.js
new file mode 100644
index 000000000..3d9baf001
--- /dev/null
+++ b/IV-Portal-Cavendish/src/grad.js
@@ -0,0 +1,10 @@
+import rgb from 'rgb-hex';
+
+export default function grad(r, g, b) {
+ if (!r) {
+ r = 189;
+ g = 189;
+ b = 189;
+ }
+ return "linear-gradient(to bottom, #" + rgb(r, g, b) + " 45%, #" + rgb(0.9 * r, 0.9 * g, 0.9 * b) + " 45%)";
+}
diff --git a/IV-Portal-Franklin/package-lock.json b/IV-Portal-Franklin/package-lock.json
index 9eb022393..015843d13 100644
--- a/IV-Portal-Franklin/package-lock.json
+++ b/IV-Portal-Franklin/package-lock.json
@@ -25,6 +25,7 @@
"react-dropzone": "^11.5.1",
"react-scripts": "5.0.0",
"react-use-measure": "^2.1.1",
+ "rgb-hex": "^4.0.1",
"web-vitals": "^2.1.4"
}
},
@@ -13956,6 +13957,17 @@
"node": ">=0.10.0"
}
},
+ "node_modules/rgb-hex": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+ "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ==",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -26322,6 +26334,11 @@
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
},
+ "rgb-hex": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+ "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ=="
+ },
"rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
diff --git a/IV-Portal-Franklin/package.json b/IV-Portal-Franklin/package.json
index 441a4cb4a..76678659b 100644
--- a/IV-Portal-Franklin/package.json
+++ b/IV-Portal-Franklin/package.json
@@ -20,6 +20,7 @@
"react-dropzone": "^11.5.1",
"react-scripts": "5.0.0",
"react-use-measure": "^2.1.1",
+ "rgb-hex": "^4.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
diff --git a/IV-Portal-Franklin/src/App.js b/IV-Portal-Franklin/src/App.js
index aef9dfbb9..28a02a109 100644
--- a/IV-Portal-Franklin/src/App.js
+++ b/IV-Portal-Franklin/src/App.js
@@ -30,6 +30,7 @@ import * as SSIFileServerHelper from 'ssi-lib/FileServerHelper';
import { ImageListItem } from '@mui/material';
import * as Certs from 'ssi-lib/Certificates';
+import grad from "./grad"
const env = new Env();
@@ -285,28 +286,51 @@ export default function App() {
// }
return (
- <Box m={3}>
- <Card style={{ background: 'lightblue' }}>
- {image_url &&
- <CardMedia
- component="img"
- height="140"
- image={image_url}
- alt="unknown image"
- />}
- <CardContent>
+ <Box m={3} borderRadius={4}
+ sx={{
+ width: 420,
+ height: 400,
+ background: grad(137, 189, 238),
+ '&:hover': {
+ backgroundColor: 'white',
+ opacity: [1.0, 1.0, 1.0],
+ },
+ }}
+ >
+ <Box m={1}>
+ <Stack mb={3}>
+ <Box mt={1}>
+ {image_url &&
+ <CardMedia
+ component="img"
+ height="140"
+ image={image_url}
+ alt="unknown image"
+ style={{
+ borderRadius: '3%',
+ }}
+ />}
+ </Box>
<Typography sx={{ fontSize: 24 }} color="text.secondary" gutterBottom>
{presentation ? "Presentation" : (credential ? "Credential Request" : "Unknown")}
</Typography>
<Typography variant="body2">
Geolocation: {geolocation} <br />
- Image Hash: {imgHash} <br />
+ </Typography>
+ <Typography variant="body2">
+ Image Hash: {imgHash?.substring(0, 30)}... <br />
+ </Typography>
+ <Typography variant="body2">
Timestamp: {imgTimestamp} <br />
+ </Typography>
+ <Typography variant="body2">
URL: {imgUrl} <br />
+ </Typography>
+ <Typography variant="body2">
Mac Address: {macAddress} <br />
</Typography>
- </CardContent>
- </Card >
+ </Stack>
+ </Box>
</Box>);
}
diff --git a/IV-Portal-Franklin/src/grad.js b/IV-Portal-Franklin/src/grad.js
new file mode 100644
index 000000000..3d9baf001
--- /dev/null
+++ b/IV-Portal-Franklin/src/grad.js
@@ -0,0 +1,10 @@
+import rgb from 'rgb-hex';
+
+export default function grad(r, g, b) {
+ if (!r) {
+ r = 189;
+ g = 189;
+ b = 189;
+ }
+ return "linear-gradient(to bottom, #" + rgb(r, g, b) + " 45%, #" + rgb(0.9 * r, 0.9 * g, 0.9 * b) + " 45%)";
+}
diff --git a/IV-Portal-Thoday/package-lock.json b/IV-Portal-Thoday/package-lock.json
index 5610b0306..155da2025 100644
--- a/IV-Portal-Thoday/package-lock.json
+++ b/IV-Portal-Thoday/package-lock.json
@@ -23,6 +23,7 @@
"react-dropzone": "^11.5.1",
"react-scripts": "5.0.0",
"react-use-measure": "^2.1.1",
+ "rgb-hex": "^4.0.1",
"web-vitals": "^2.1.4"
}
},
@@ -13944,6 +13945,17 @@
"node": ">=0.10.0"
}
},
+ "node_modules/rgb-hex": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+ "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ==",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -26300,6 +26312,11 @@
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
},
+ "rgb-hex": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+ "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ=="
+ },
"rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
diff --git a/IV-Portal-Thoday/package.json b/IV-Portal-Thoday/package.json
index 5ebb7becd..3e43cd1fb 100644
--- a/IV-Portal-Thoday/package.json
+++ b/IV-Portal-Thoday/package.json
@@ -18,6 +18,7 @@
"react-dropzone": "^11.5.1",
"react-scripts": "5.0.0",
"react-use-measure": "^2.1.1",
+ "rgb-hex": "^4.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
diff --git a/IV-Portal-Thoday/src/App.js b/IV-Portal-Thoday/src/App.js
index 8db3e19d4..6f5ffe1d4 100644
--- a/IV-Portal-Thoday/src/App.js
+++ b/IV-Portal-Thoday/src/App.js
@@ -24,6 +24,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { Chip } from '@mui/material';
import InfoIcon from '@mui/icons-material/Info';
+import grad from './grad';
const env = new Env();
@@ -155,27 +156,50 @@ export default function App() {
}
return (
- <Box m={3}>
- <Card style={{ background: 'lightblue' }}>
- {image_url &&
- <CardMedia
- component="img"
- height="140"
- image={image_url}
- alt="unknown image"
- />}
- <CardContent>
- <Typography sx={{ fontSize: 24 }} color="text.secondary" gutterBottom>
+ <Box m={3} borderRadius={4}
+ sx={{
+ width: 420,
+ height: 400,
+ background: grad(137, 189, 238),
+ '&:hover': {
+ backgroundColor: 'white',
+ opacity: [1.0, 1.0, 1.0],
+ },
+ }}
+ >
+ <Box m={1}>
+ <Stack mb={3}>
+ <Box mt={1}>
+ {image_url &&
+ <CardMedia mt={2}
+ component="img"
+ height="140"
+ image={image_url}
+ alt="unknown image"
+ style={{
+ borderRadius: '3%',
+ }}
+ />}
+ </Box>
+ <Typography mb={2} sx={{ fontSize: 24 }} color="text.secondary" gutterBottom>
{presentation ? "Presentation" : (credential ? "Credential Request" : "Unknown")}
</Typography>
<Typography variant="body2">
Geolocation: {geolocation} <br />
- Image Hash: {imgHash} <br />
+ </Typography>
+ <Typography variant="body2">
+ Image Hash: {imgHash?.substring(0, 30)}... <br />
+ </Typography>
+ <Typography variant="body2">
Timestamp: {imgTimestamp} <br />
+ </Typography>
+ <Typography variant="body2">
URL: {imgUrl} <br />
+ </Typography>
+ <Typography variant="body2">
Mac Address: {macAddress} <br />
</Typography>
- </CardContent>
+ </Stack>
<CardActions>
{presentation && proposal_received && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<InfoIcon style={{ color: 'green' }} />} label="New Presentation"></Chip>}
{presentation && proposal_received && <Button size="small" onClick={
@@ -214,7 +238,7 @@ export default function App() {
{credential_issued && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Credential issued successfully"></Chip>}
{done && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Credential issued successfully"></Chip>}
</CardActions>
- </Card >
+ </Box>
</Box>);
}
diff --git a/IV-Portal-Thoday/src/grad.js b/IV-Portal-Thoday/src/grad.js
new file mode 100644
index 000000000..3d9baf001
--- /dev/null
+++ b/IV-Portal-Thoday/src/grad.js
@@ -0,0 +1,10 @@
+import rgb from 'rgb-hex';
+
+export default function grad(r, g, b) {
+ if (!r) {
+ r = 189;
+ g = 189;
+ b = 189;
+ }
+ return "linear-gradient(to bottom, #" + rgb(r, g, b) + " 45%, #" + rgb(0.9 * r, 0.9 * g, 0.9 * b) + " 45%)";
+}
--
GitLab