From 4bdaa28fff32201ccbfb03d983892555e034af69 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Tue, 24 May 2022 18:40:13 +0300 Subject: [PATCH 01/10] create profile table item --- src/css/tailwind.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/css/tailwind.config.js b/src/css/tailwind.config.js index cb18732..5f9a059 100644 --- a/src/css/tailwind.config.js +++ b/src/css/tailwind.config.js @@ -20,6 +20,7 @@ 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' }], From 7ff6d08fc8310122d3b996606f87cd847d0e0890 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Tue, 24 May 2022 18:43:23 +0300 Subject: [PATCH 02/10] create profile table item --- src/images/profile-icon.svg | 10 +++ src/pages/digitalId/ProfileId.jsx | 23 ++++++ src/partials/digitalId/ProfileTableItem.jsx | 92 +++++++++++++++++++++ 3 files changed, 125 insertions(+) create mode 100644 src/images/profile-icon.svg create mode 100644 src/partials/digitalId/ProfileTableItem.jsx 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/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index bd1f75a..1155f1b 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -2,10 +2,20 @@ 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'; function Profile () { const [sidebarOpen, setSidebarOpen] = useState(false); + const data = { + id: '0', + image: ProfileIcon, + value: 'Passport', + property: 'Document type', + status: 'Stored' + }; + return (
{/* Sidebar */} @@ -24,6 +34,19 @@ function Profile () { {/* Title */}

Profile ✨

+ {/* Table */} + + + + +
diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx new file mode 100644 index 0000000..c94749a --- /dev/null +++ b/src/partials/digitalId/ProfileTableItem.jsx @@ -0,0 +1,92 @@ +import React, { useState } from 'react'; +import Avatar01 from '../../images/avatar-01.jpg'; +import Avatar02 from '../../images/avatar-02.jpg'; +import Avatar03 from '../../images/avatar-03.jpg'; + +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}
+
) + } + + +
+
+ Avatar + Avatar + Avatar + +
+
+ + + {/* Menu button */} +
+ +
+ + +
+ +
+ + + ); +} + +export default ProfileTableItem; From 1ab53990a1c4b5e06fd6365dbf15a7394af2769c Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 25 May 2022 01:30:58 +0300 Subject: [PATCH 03/10] add input --- src/pages/digitalId/ProfileId.jsx | 4 +- src/partials/digitalId/ProfileTableItem.jsx | 165 +++++++++++--------- 2 files changed, 93 insertions(+), 76 deletions(-) diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 1155f1b..4100a3f 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -35,8 +35,8 @@ function Profile () {

Profile ✨

{/* Table */} - - +
+ - - - - - - + + + + + - + + + + + + ); } From c44516a2f79e117934037526d1deb9548aaf82ad Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 25 May 2022 15:09:00 +0300 Subject: [PATCH 04/10] done validation bar --- src/css/tailwind.config.js | 1 + src/pages/digitalId/ProfileId.jsx | 2 +- src/partials/digitalId/ProfileTableItem.jsx | 89 ++++++++++++++++++--- 3 files changed, 80 insertions(+), 12 deletions(-) diff --git a/src/css/tailwind.config.js b/src/css/tailwind.config.js index 5f9a059..4d79d5f 100644 --- a/src/css/tailwind.config.js +++ b/src/css/tailwind.config.js @@ -25,6 +25,7 @@ module.exports = { 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/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 4100a3f..1703232 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -13,7 +13,7 @@ function Profile () { image: ProfileIcon, value: 'Passport', property: 'Document type', - status: 'Stored' + status: 'Progress' }; return ( diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx index 3f1ecb0..3ab2af0 100644 --- a/src/partials/digitalId/ProfileTableItem.jsx +++ b/src/partials/digitalId/ProfileTableItem.jsx @@ -8,8 +8,8 @@ function ProfileTableItem(props) { return ( <> - - + - - - - + From 6580c211ffba4c61607e80552405cdb34dccb80c Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 25 May 2022 15:40:45 +0300 Subject: [PATCH 05/10] add props --- src/pages/digitalId/ProfileId.jsx | 6 +++++- src/partials/digitalId/ProfileTableItem.jsx | 12 ++++++------ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 1703232..5a06620 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -13,7 +13,9 @@ function Profile () { image: ProfileIcon, value: 'Passport', property: 'Document type', - status: 'Progress' + status: 'Progress', + transactions: '0x7234ABC342342352345', + validatedData: '7234ABC342342352345' }; return ( @@ -44,6 +46,8 @@ function Profile () { value={data.value} property={data.property} status={data.status} + transactions={data.transactions} + validatedData={data.validatedData} />
-
- -
- 		-
-
- {props.property} -
-
-
{props.value}
-
{props.property}
-
-
- 		- {(props.status === 'Progress') ? ( -
-
{props.status}
-
) : - (props.status === 'Stored') ? ( -
-
{props.status}
-
) : - (props.status === 'Completed') ? ( -
-
{props.status}
-
) : ( -
-
{props.status}
-
) - } - 		-
-
- Avatar - Avatar - Avatar - -
-
- 		- {/* Menu button */} -
- -
- 		+ <> +
-
+ 		+
+
+ {props.property} +
+
+
{props.value}
+
{props.property}
+
+
+ 		+ {(props.status === 'Progress') ? ( +
+
{props.status}
+
) : + (props.status === 'Stored') ? ( +
+
{props.status}
+
) : + (props.status === 'Completed') ? ( +
+
{props.status}
+
) : ( +
+
{props.status}
+
) + } + 		+
+
+ Avatar + Avatar + Avatar + +
+
+ 		+ {/* Menu button */} +
+
+
+ +
+
+
+
+ + +
+ +
+
+
+
{props.property}
-
+
{props.value}
{props.property}
 + {(props.status === 'Progress') ? (
{props.status}
@@ -61,7 +61,7 @@ function ProfileTableItem(props) {
+ {/* Menu button */}
- + {/* Progress validation bar */} +
+
+
+

Today

+
+
+ +
diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx index 3ab2af0..19dee16 100644 --- a/src/partials/digitalId/ProfileTableItem.jsx +++ b/src/partials/digitalId/ProfileTableItem.jsx @@ -119,15 +119,15 @@ function ProfileTableItem(props) {

Validate by - 0x7324ABC342342352345 + {props.transactions}

- 0x7324ABC342342352345 + {props.transactions} Transactions ID
- 7324ABC342342352345 + {props.validatedData} Validated data
@@ -146,15 +146,15 @@ function ProfileTableItem(props) {

Validate by - 0x7324ABC342342352345 + {props.transactions}

- 0x7324ABC342342352345 + {props.transactions} Transactions ID
- 7324ABC342342352345 + {props.validatedData} Validated data
From 60194da89baf694d1adb97728513121359f54e54 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 25 May 2022 16:03:52 +0300 Subject: [PATCH 06/10] fix status chips --- src/partials/digitalId/ProfileTableItem.jsx | 36 +++++++++++---------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx index 19dee16..d00669d 100644 --- a/src/partials/digitalId/ProfileTableItem.jsx +++ b/src/partials/digitalId/ProfileTableItem.jsx @@ -18,7 +18,7 @@ function ProfileTableItem(props) {
-
+
{props.property}
@@ -29,22 +29,24 @@ function ProfileTableItem(props) {
- {(props.status === 'Progress') ? ( -
-
{props.status}
-
) : - (props.status === 'Stored') ? ( -
-
{props.status}
-
) : - (props.status === 'Completed') ? ( -
-
{props.status}
-
) : ( -
-
{props.status}
-
) - } +
+ {(props.status === 'Progress') ? ( +
+ {props.status} +
) : + (props.status === 'Stored') ? ( +
+ {props.status} +
) : + (props.status === 'Completed') ? ( +
+ {props.status} +
) : ( +
+ {props.status} +
) + } +
From fbafb94b2b3e64245804b954811d1d6f8d617d35 Mon Sep 17 00:00:00 2001 From: DwCay Date: Thu, 26 May 2022 00:29:58 +0300 Subject: [PATCH 07/10] Removing spaces --- .../GenerateOnboardingSvg/GenerateSvg.js | 10 ------ src/pages/Onboarding3.jsx | 3 +- src/pages/Onboarding4.jsx | 2 -- src/pages/digitalId/Validate.jsx | 34 +++++++++---------- src/pages/digitalId/ValidationLog.jsx | 34 +++++++++---------- 5 files changed, 35 insertions(+), 48 deletions(-) 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/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/Validate.jsx b/src/pages/digitalId/Validate.jsx index 5ef3b28..7fce233 100644 --- a/src/pages/digitalId/Validate.jsx +++ b/src/pages/digitalId/Validate.jsx @@ -7,29 +7,29 @@ function Validate () { const [sidebarOpen, setSidebarOpen] = useState(false); return ( -
- {/* Sidebar */} - +
+ {/* Sidebar */} + - {/* Content area */} -
- {/* Site header */} -
+ {/* Content area */} +
+ {/* Site header */} +
-
-
+
+
- {/* Page header */} -
- {/* Title */} -

Validate ✨

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

Validate ✨

+
-
-
+
+
-
) } -export default Validate; \ No newline at end of file +export default Validate; diff --git a/src/pages/digitalId/ValidationLog.jsx b/src/pages/digitalId/ValidationLog.jsx index ddcf0dc..a801002 100644 --- a/src/pages/digitalId/ValidationLog.jsx +++ b/src/pages/digitalId/ValidationLog.jsx @@ -7,29 +7,29 @@ function ValidationLog () { const [sidebarOpen, setSidebarOpen] = useState(false); return ( -
- {/* Sidebar */} - +
+ {/* Sidebar */} + - {/* Content area */} -
- {/* Site header */} -
+ {/* Content area */} +
+ {/* Site header */} +
-
-
+
+
- {/* Page header */} -
- {/* Title */} -

Validation log ✨

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

Validation log ✨

+
-
-
+
+
-
) } -export default ValidationLog; \ No newline at end of file +export default ValidationLog; From 5f1e8c55ff0bc3264f10a495e2c62f6bab779dcf Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Thu, 26 May 2022 12:29:12 +0300 Subject: [PATCH 08/10] fix validate prop --- src/pages/digitalId/ProfileId.jsx | 10 +- src/partials/digitalId/ProfileTableItem.jsx | 104 ++++++++------------ 2 files changed, 46 insertions(+), 68 deletions(-) diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx index 5a06620..75103fe 100644 --- a/src/pages/digitalId/ProfileId.jsx +++ b/src/pages/digitalId/ProfileId.jsx @@ -4,6 +4,9 @@ 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); @@ -14,8 +17,8 @@ function Profile () { value: 'Passport', property: 'Document type', status: 'Progress', - transactions: '0x7234ABC342342352345', - validatedData: '7234ABC342342352345' + transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], + avatars: [Avatar01, Avatar02, Avatar03] }; return ( @@ -47,13 +50,12 @@ function Profile () { property={data.property} status={data.status} transactions={data.transactions} - validatedData={data.validatedData} + avatars={data.avatars} />
-
) diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx index d00669d..5a17432 100644 --- a/src/partials/digitalId/ProfileTableItem.jsx +++ b/src/partials/digitalId/ProfileTableItem.jsx @@ -1,7 +1,4 @@ import React, { useState } from 'react'; -import Avatar01 from '../../images/avatar-01.jpg'; -import Avatar02 from '../../images/avatar-02.jpg'; -import Avatar03 from '../../images/avatar-03.jpg'; function ProfileTableItem(props) { const [descriptionOpen, setDescriptionOpen] = useState(false); @@ -9,7 +6,7 @@ function ProfileTableItem(props) { return ( <> - +
- +
{(props.status === 'Progress') ? (
@@ -51,9 +48,11 @@ function ProfileTableItem(props) {
- Avatar - Avatar - Avatar + {(props.avatars) ? ( + props.avatars.map((avatar, index) => ( + Avatar + )) + ): null}
- {/* Menu button */} + {/* Button */}
- +
+
) }