diff --git a/IV-Portal-Cavendish/package-lock.json b/IV-Portal-Cavendish/package-lock.json index 5610b03066c3d71084df93f4c110062df65293cc..155da202592c5a9ccf648c16039f8eff65776011 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 5ebb7becd86d6b3eca8692b83277d826229f6670..3e43cd1fb678888d7d6d378eebc4237e7c9827d2 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 b5849455c1dc4e1a7f8fea97759d31136138c6b9..a4b7272609ab7c23879f568ae8be695eab0cd176 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 0000000000000000000000000000000000000000..3d9baf001a2b461e046b14b9180cc725d2c7c6c5 --- /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 9eb0223937542b0e3f14741cfd8bc17c693f1896..015843d139f9f5fc9092cd4fbceb6e95c054391f 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 441a4cb4a673915c27a1ddb413d76710c9a0433f..76678659b7ce80ac6879ed43227c6ba57768bda1 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 aef9dfbb90575477d7ccc043c28bbcf9adf75f37..28a02a1099ce6e11b0373d68d77124459f37a434 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 0000000000000000000000000000000000000000..3d9baf001a2b461e046b14b9180cc725d2c7c6c5 --- /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 5610b03066c3d71084df93f4c110062df65293cc..155da202592c5a9ccf648c16039f8eff65776011 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 5ebb7becd86d6b3eca8692b83277d826229f6670..3e43cd1fb678888d7d6d378eebc4237e7c9827d2 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 8db3e19d46e726db65aa0f56274d2a9459158a72..6f5ffe1d4eaacfada7211cf5dd433878ef5d95dd 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 0000000000000000000000000000000000000000..3d9baf001a2b461e046b14b9180cc725d2c7c6c5 --- /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%)"; +}