diff --git a/src/css/tailwind.config.js b/src/css/tailwind.config.js index cb18732..4d79d5f 100644 --- a/src/css/tailwind.config.js +++ b/src/css/tailwind.config.js @@ -20,10 +20,12 @@ module.exports = { inter: ['Inter', 'sans-serif'], }, fontSize: { + xxs: ['0.625rem', { lineHeight: '0.75' }], xs: ['0.75rem', { lineHeight: '1.5' }], sm: ['0.875rem', { lineHeight: '1.5715' }], base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }], lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }], + validateLg: ['1.125rem', { lineHeight: '1.875', letterSpacing: '-0.014em' }], xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }], '2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }], '3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }], diff --git a/src/images/GenerateOnboardingSvg/GenerateSvg.js b/src/images/GenerateOnboardingSvg/GenerateSvg.js index 1f07e4f..197f836 100644 --- a/src/images/GenerateOnboardingSvg/GenerateSvg.js +++ b/src/images/GenerateOnboardingSvg/GenerateSvg.js @@ -1,7 +1,5 @@ function createBlob(options) { - - let points = []; let slice = (Math.PI * 2) / options.numPoints; let startAngle = 0; @@ -16,7 +14,6 @@ function createBlob(options) { points.push(point); } - let size = points.length; let path = "M" + points[0].x + " " + points[0].y + " C"; @@ -38,8 +35,6 @@ function createBlob(options) { return path + "z"; } - - export var generateSvgAvatar = (function () { return function (seed, raw) { let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16); @@ -70,7 +65,6 @@ export var generateSvgAvatar = (function () { } - let ph = ""; let off = 4 + Number("0x"+pubKey.substring(0,1)); let rotate = 0; @@ -79,9 +73,6 @@ export var generateSvgAvatar = (function () { rotate = rotate + 360/off; } - - - var svg = [ '', '', @@ -98,7 +89,6 @@ export var generateSvgAvatar = (function () { '', '', ].join(''); - // document.getElementById("myImg").src = raw ? svg : 'data:image/svg+xml;base64,' + btoa(svg); return raw ? svg : 'data:image/svg+xml;base64,' + btoa(svg); }; diff --git a/src/images/profile-icon.svg b/src/images/profile-icon.svg new file mode 100644 index 0000000..e9bfe8a --- /dev/null +++ b/src/images/profile-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/pages/Onboarding3.jsx b/src/pages/Onboarding3.jsx index 77824d7..df73ef7 100644 --- a/src/pages/Onboarding3.jsx +++ b/src/pages/Onboarding3.jsx @@ -3,7 +3,6 @@ import { Link } from 'react-router-dom'; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import Logo from "../images/logo.png"; - function Onboarding3() { const arrayBadges = ['judge', 'jelly', 'wasp', 'true', 'clog', 'forward', 'talent', 'ozone', 'belive', 'fresh', 'bulk', 'hobby'] return ( @@ -77,7 +76,7 @@ function Onboarding3() { diff --git a/src/pages/Onboarding4.jsx b/src/pages/Onboarding4.jsx index 8fc3b0a..29c11fe 100644 --- a/src/pages/Onboarding4.jsx +++ b/src/pages/Onboarding4.jsx @@ -3,8 +3,6 @@ import { Link } from 'react-router-dom'; import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; import Logo from "../images/logo.png"; - - function Onboarding4() { return (
diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index bd1f75a..4d85496 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -2,31 +2,57 @@ import React, { useState } from 'react'; import Sidebar from '../../partials/Sidebar'; import Header from '../../partials/Header'; +import ProfileTableItem from '../../partials/digitalId/ProfileTableItem'; +import ProfileIcon from '../../images/profile-icon.svg'; +import Avatar01 from '../../images/avatar-01.jpg'; +import Avatar02 from '../../images/avatar-02.jpg'; +import Avatar03 from '../../images/avatar-03.jpg'; function Profile () { const [sidebarOpen, setSidebarOpen] = useState(false); + const data = { + id: '0', + image: ProfileIcon, + value: 'Passport', + property: 'Document type', + status: 'Progress', + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: [Avatar01, Avatar02, Avatar03] + }; + return (
{/* Sidebar */} - {/* Content area */}
{/* Site header */}
-
- {/* Page header */}
{/* Title */}

Profile ✨

+ {/* Table */} + + + + +
-
) diff --git a/src/pages/digitalId/Validate.jsx b/src/pages/digitalId/Validate.jsx index 4ca3300..13b05c0 100644 --- a/src/pages/digitalId/Validate.jsx +++ b/src/pages/digitalId/Validate.jsx @@ -62,62 +62,62 @@ function Validate () { ]; return ( -
- {/* Sidebar */} - +
+ {/* Sidebar */} + - {/* Content area */} -
- {/* Site header */} -
+ {/* Content area */} +
+ {/* Site header */} +
-
-
-
- {/* Page header */} -
- {/* Title */} -

0x28394710234192304719234

+
+
+
+ {/* Page header */} +
+ {/* Title */} +

0x28394710234192304719234

+
+ Explore -> +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ +
+

Digiatl ID validation log ✨

+
+ {validateItems.map(item => { + return + })}
- Explore -> -
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- -
-

Digiatl ID validation log ✨

-
- {validateItems.map(item => { - return - })}
-
- -
+ +
+ - ) } diff --git a/src/pages/digitalId/Verify.jsx b/src/pages/digitalId/Verify.jsx index 34cd9e4..1c799ab 100644 --- a/src/pages/digitalId/Verify.jsx +++ b/src/pages/digitalId/Verify.jsx @@ -10,15 +10,12 @@ function Verify () {
{/* Sidebar */} - {/* Content area */}
{/* Site header */}
-
- {/* Page header */}
{/* Title */} @@ -26,7 +23,6 @@ function Verify () {
-
) diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx new file mode 100644 index 0000000..5a17432 --- /dev/null +++ b/src/partials/digitalId/ProfileTableItem.jsx @@ -0,0 +1,154 @@ +import React, { useState } from 'react'; + +function ProfileTableItem(props) { + const [descriptionOpen, setDescriptionOpen] = useState(false); + + return ( + <> + + +
+ +
+ + +
+
+ {props.property} +
+
+
{props.value}
+
{props.property}
+
+
+ + +
+ {(props.status === 'Progress') ? ( +
+ {props.status} +
) : + (props.status === 'Stored') ? ( +
+ {props.status} +
) : + (props.status === 'Completed') ? ( +
+ {props.status} +
) : ( +
+ {props.status} +
) + } +
+ + +
+
+ {(props.avatars) ? ( + props.avatars.map((avatar, index) => ( + Avatar + )) + ): null} + +
+
+ + + {/* Button */} +
+ +
+ + +
+ +
+ + + + +
+
+ + +
+
+ Transaction + 0x12831823791203192418234841238468 +
+
+ {/* Progress validation bar */} +
+
+
+

Today

+
+
+ +
+
+
+ + + + ); +} + +export default ProfileTableItem;