From d21dac4a2e7d10ceb84800cf4d3338abe511d95d Mon Sep 17 00:00:00 2001 From: karthikdurai Date: Tue, 6 Aug 2024 16:23:08 +0530 Subject: [PATCH 01/29] create new wallet branding component --- package-lock.json | 244 +++++++++++++-- package.json | 1 + src/assets/black-haze-icon.svg | 7 + src/assets/white-mist-icon.svg | 7 + .../app-configure/general/AppBrandingNew.vue | 15 + .../app-configure/general/WalletBranding.vue | 290 ++++++++++++++++++ src/router/index.ts | 2 +- 7 files changed, 533 insertions(+), 33 deletions(-) create mode 100644 src/assets/black-haze-icon.svg create mode 100644 src/assets/white-mist-icon.svg create mode 100644 src/components/app-configure/general/AppBrandingNew.vue create mode 100644 src/components/app-configure/general/WalletBranding.vue diff --git a/package-lock.json b/package-lock.json index 9e4b0d14..2e96ca73 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "moment": "^2.29.1", "pinia": "^2.0.17", "postcss-custom-media": "^8.0.0", + "postcss-html": "^1.7.0", "postcss-media-variables": "^2.0.1", "punycode": "^2.1.1", "v-wave": "^1.3.1", @@ -6056,6 +6057,75 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/htmlparser2": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", + "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==", + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.0.1", + "entities": "^4.4.0" + } + }, + "node_modules/htmlparser2/node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/htmlparser2/node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/htmlparser2/node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/htmlparser2/node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/http-signature": { "version": "1.3.6", "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz", @@ -8459,6 +8529,25 @@ "postcss": "^8.2.15" } }, + "node_modules/postcss-html": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.7.0.tgz", + "integrity": "sha512-MfcMpSUIaR/nNgeVS8AyvyDugXlADjN9AcV7e5rDfrF1wduIAGSkL4q2+wgrZgA3sHVAHLDO9FuauHhZYW2nBw==", + "dependencies": { + "htmlparser2": "^8.0.0", + "js-tokens": "^9.0.0", + "postcss": "^8.4.0", + "postcss-safe-parser": "^6.0.0" + }, + "engines": { + "node": "^12 || >=14" + } + }, + "node_modules/postcss-html/node_modules/js-tokens": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz", + "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==" + }, "node_modules/postcss-import": { "version": "14.1.0", "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", @@ -8850,7 +8939,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==", - "dev": true, "engines": { "node": ">=12.0" }, @@ -10804,7 +10892,7 @@ "version": "4.6.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz", "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==", - "dev": true, + "devOptional": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -12336,12 +12424,14 @@ "@headlessui/vue": { "version": "1.7.16", "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.16.tgz", - "integrity": "sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==" + "integrity": "sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==", + "requires": {} }, "@heroicons/vue": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.18.tgz", - "integrity": "sha512-BcTC9nq2TkwNSfQuqo96J7ehx4etezypc2YeTq7KsXWxrcrerhkgjLrxGRBnStN0wrXo0Gv4BInybqz5uBG6Cw==" + "integrity": "sha512-BcTC9nq2TkwNSfQuqo96J7ehx4etezypc2YeTq7KsXWxrcrerhkgjLrxGRBnStN0wrXo0Gv4BInybqz5uBG6Cw==", + "requires": {} }, "@humanwhocodes/config-array": { "version": "0.9.5", @@ -12897,7 +12987,8 @@ "version": "1.10.2", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz", "integrity": "sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==", - "dev": true + "dev": true, + "requires": {} }, "@vitejs/plugin-vue-jsx": { "version": "1.3.10", @@ -13120,13 +13211,15 @@ "version": "2.0.0-rc.21", "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-rc.21.tgz", "integrity": "sha512-wIJR4e/jISBKVKfiod3DV32BlDsoD744WVCuCaGtaSKvhvTL9gI5vl2AYSy00V51YaM8dCOFi3zcpCON8G1WqA==", - "dev": true + "dev": true, + "requires": {} }, "@vue/tsconfig": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.1.3.tgz", "integrity": "sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==", - "dev": true + "dev": true, + "requires": {} }, "acorn": { "version": "8.8.1", @@ -13138,7 +13231,8 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "aes-js": { "version": "3.0.0", @@ -13911,7 +14005,8 @@ "css-declaration-sorter": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz", - "integrity": "sha512-Ufadglr88ZLsrvS11gjeu/40Lw74D9Am/Jpr3LlYm5Q4ZP5KdlUhG+6u2EjyXeZcxmZ2h1ebCKngDjolpeLHpg==" + "integrity": "sha512-Ufadglr88ZLsrvS11gjeu/40Lw74D9Am/Jpr3LlYm5Q4ZP5KdlUhG+6u2EjyXeZcxmZ2h1ebCKngDjolpeLHpg==", + "requires": {} }, "css-functions-list": { "version": "3.0.1", @@ -14006,7 +14101,8 @@ "cssnano-utils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz", - "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==" + "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==", + "requires": {} }, "csso": { "version": "4.2.0", @@ -14864,7 +14960,8 @@ "version": "8.5.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz", "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==", - "dev": true + "dev": true, + "requires": {} }, "eslint-import-resolver-node": { "version": "0.3.6", @@ -15774,6 +15871,52 @@ "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==", "dev": true }, + "htmlparser2": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", + "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==", + "requires": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.0.1", + "entities": "^4.4.0" + }, + "dependencies": { + "dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "requires": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + } + }, + "domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "requires": { + "domelementtype": "^2.3.0" + } + }, + "domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "requires": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + } + }, + "entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==" + } + } + }, "http-signature": { "version": "1.3.6", "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz", @@ -16092,7 +16235,8 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", + "requires": {} }, "isstream": { "version": "0.1.2", @@ -17408,7 +17552,8 @@ "vue-demi": { "version": "0.13.6", "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz", - "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==" + "integrity": "sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==", + "requires": {} } } }, @@ -17459,27 +17604,50 @@ "postcss-custom-media": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz", - "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==" + "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==", + "requires": {} }, "postcss-discard-comments": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.1.tgz", - "integrity": "sha512-5JscyFmvkUxz/5/+TB3QTTT9Gi9jHkcn8dcmmuN68JQcv3aQg4y88yEHHhwFB52l/NkaJ43O0dbksGMAo49nfQ==" + "integrity": "sha512-5JscyFmvkUxz/5/+TB3QTTT9Gi9jHkcn8dcmmuN68JQcv3aQg4y88yEHHhwFB52l/NkaJ43O0dbksGMAo49nfQ==", + "requires": {} }, "postcss-discard-duplicates": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz", - "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==" + "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==", + "requires": {} }, "postcss-discard-empty": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz", - "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==" + "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==", + "requires": {} }, "postcss-discard-overridden": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz", - "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==" + "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==", + "requires": {} + }, + "postcss-html": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.7.0.tgz", + "integrity": "sha512-MfcMpSUIaR/nNgeVS8AyvyDugXlADjN9AcV7e5rDfrF1wduIAGSkL4q2+wgrZgA3sHVAHLDO9FuauHhZYW2nBw==", + "requires": { + "htmlparser2": "^8.0.0", + "js-tokens": "^9.0.0", + "postcss": "^8.4.0", + "postcss-safe-parser": "^6.0.0" + }, + "dependencies": { + "js-tokens": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz", + "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==" + } + } }, "postcss-import": { "version": "14.1.0", @@ -17610,7 +17778,8 @@ "postcss-normalize-charset": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", - "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==" + "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==", + "requires": {} }, "postcss-normalize-display-values": { "version": "5.1.0", @@ -17714,13 +17883,14 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==", - "dev": true + "requires": {} }, "postcss-scss": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.4.tgz", "integrity": "sha512-aBBbVyzA8b3hUL0MGrpydxxXKXFZc5Eqva0Q3V9qsBOLEMsjb6w49WfpsoWzpEgcqJGW4t7Rio8WXVU9Gd8vWg==", - "dev": true + "dev": true, + "requires": {} }, "postcss-selector-parser": { "version": "6.0.11", @@ -17735,7 +17905,8 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-7.0.1.tgz", "integrity": "sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==", - "dev": true + "dev": true, + "requires": {} }, "postcss-svgo": { "version": "5.1.0", @@ -18108,7 +18279,8 @@ "ws": { "version": "8.17.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz", - "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==" + "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==", + "requires": {} } } }, @@ -18566,13 +18738,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/stylelint-config-html/-/stylelint-config-html-1.0.0.tgz", "integrity": "sha512-rKQUUWDpaYC7ybsS6tLxddjn6DxhjSIXybElSmcTyVQj3ExhmU3q+l41ktrlwHRyY0M5SkTkZiwngvYPYmsgSQ==", - "dev": true + "dev": true, + "requires": {} }, "stylelint-config-prettier": { "version": "9.0.3", "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz", "integrity": "sha512-5n9gUDp/n5tTMCq1GLqSpA30w2sqWITSSEiAWQlpxkKGAUbjcemQ0nbkRvRUa0B1LgD3+hCvdL7B1eTxy1QHJg==", - "dev": true + "dev": true, + "requires": {} }, "stylelint-config-prettier-scss": { "version": "0.0.1", @@ -18596,7 +18770,8 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz", "integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==", - "dev": true + "dev": true, + "requires": {} }, "stylelint-config-recommended-scss": { "version": "5.0.2", @@ -19122,7 +19297,7 @@ "version": "4.6.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz", "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==", - "dev": true + "devOptional": true }, "uc.micro": { "version": "1.0.6", @@ -19194,7 +19369,8 @@ "v-wave": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/v-wave/-/v-wave-1.4.0.tgz", - "integrity": "sha512-NKjgCE9XNa86zibBDPmvwvxrq3U9YChCBWTbVWyCFG4ScaKaWQGbwi6j2kJBDgS/iHafFGQQkNalBUj30wIHFA==" + "integrity": "sha512-NKjgCE9XNa86zibBDPmvwvxrq3U9YChCBWTbVWyCFG4ScaKaWQGbwi6j2kJBDgS/iHafFGQQkNalBUj30wIHFA==", + "requires": {} }, "v8-compile-cache": { "version": "2.3.0", @@ -19324,7 +19500,8 @@ "vue-gtag": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-2.0.1.tgz", - "integrity": "sha512-aM4A58FVL0wV2ptYi+xzAjeg+pQVRyUcfBc5UkXAwQrR4t3WBhor50Izp2I+3Oo7+l+vWJ7u78DGcNzReb8S/A==" + "integrity": "sha512-aM4A58FVL0wV2ptYi+xzAjeg+pQVRyUcfBc5UkXAwQrR4t3WBhor50Izp2I+3Oo7+l+vWJ7u78DGcNzReb8S/A==", + "requires": {} }, "vue-router": { "version": "4.0.14", @@ -19346,12 +19523,14 @@ "vue3-carousel": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.2.9.tgz", - "integrity": "sha512-JSU3rjWNfMq6uLjO7mD0/qQL7EsD0qyGUhSw/1F9ir7ObhdcJdRxbiAGIx+iyxR3v0Zoec5JrQdxSmn4ItKVrw==" + "integrity": "sha512-JSU3rjWNfMq6uLjO7mD0/qQL7EsD0qyGUhSw/1F9ir7ObhdcJdRxbiAGIx+iyxR3v0Zoec5JrQdxSmn4ItKVrw==", + "requires": {} }, "vue3-circle-progress": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/vue3-circle-progress/-/vue3-circle-progress-1.0.7.tgz", - "integrity": "sha512-Z916xKQhuEcaOvwIfCFUX9r/gPUNd40G2aJbROcRtotm5FE4dZPP4S4iDEISexE9XMF813swkdc5VzCdFxfE8g==" + "integrity": "sha512-Z916xKQhuEcaOvwIfCFUX9r/gPUNd40G2aJbROcRtotm5FE4dZPP4S4iDEISexE9XMF813swkdc5VzCdFxfE8g==", + "requires": {} }, "vue3-popper": { "version": "1.5.0", @@ -19496,7 +19675,8 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "requires": {} }, "y18n": { "version": "5.0.8", diff --git a/package.json b/package.json index ac2d9c45..6bc7f54c 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "moment": "^2.29.1", "pinia": "^2.0.17", "postcss-custom-media": "^8.0.0", + "postcss-html": "^1.7.0", "postcss-media-variables": "^2.0.1", "punycode": "^2.1.1", "v-wave": "^1.3.1", diff --git a/src/assets/black-haze-icon.svg b/src/assets/black-haze-icon.svg new file mode 100644 index 00000000..f7bd6054 --- /dev/null +++ b/src/assets/black-haze-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/white-mist-icon.svg b/src/assets/white-mist-icon.svg new file mode 100644 index 00000000..5358d7f2 --- /dev/null +++ b/src/assets/white-mist-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/app-configure/general/AppBrandingNew.vue b/src/components/app-configure/general/AppBrandingNew.vue new file mode 100644 index 00000000..7d0f2ab1 --- /dev/null +++ b/src/components/app-configure/general/AppBrandingNew.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/components/app-configure/general/WalletBranding.vue b/src/components/app-configure/general/WalletBranding.vue new file mode 100644 index 00000000..f1620a03 --- /dev/null +++ b/src/components/app-configure/general/WalletBranding.vue @@ -0,0 +1,290 @@ + + + diff --git a/src/router/index.ts b/src/router/index.ts index 3d1f46fb..3d91dded 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -22,7 +22,7 @@ const AuthSettings = () => import('@/components/app-configure/auth/AuthSettings.vue') const WebWallet = () => import('@/components/app-configure/auth/WebWallet.vue') const AppBranding = () => - import('@/components/app-configure/general/AppBranding.vue') + import('@/components/app-configure/general/AppBrandingNew.vue') const AppKeyspace = () => import('@/components/app-configure/AppKeyspace.vue') const AppChainManagement = () => import('@/pages/AppChainManagement.vue') const AppGasless = () => import('@/pages/AppGasless.vue') From 31f0589b92d3e9035493e250a911a21dde965653 Mon Sep 17 00:00:00 2001 From: karthikdurai Date: Wed, 7 Aug 2024 12:13:22 +0530 Subject: [PATCH 02/29] add preview for login modal --- .../app-configure/general/WalletBranding.vue | 197 ++++++++++++++---- 1 file changed, 151 insertions(+), 46 deletions(-) diff --git a/src/components/app-configure/general/WalletBranding.vue b/src/components/app-configure/general/WalletBranding.vue index f1620a03..cd0dbb25 100644 --- a/src/components/app-configure/general/WalletBranding.vue +++ b/src/components/app-configure/general/WalletBranding.vue @@ -7,6 +7,7 @@ const selectedFontPairing = ref('Nohemi + Inter') const selectedFontSize = ref(14) const selectedFontColor = ref('#1D2A31') const selectedRadius = ref('M') +const showPreviewOf = ref('wallet') const accentColors = [ '#1862E8', @@ -230,61 +231,165 @@ const cancelConfiguration = () => { -
+

Preview

-
-
-
- xyz company + + +
+
+
+
+
+ xyz company +
+
+ +
+
+
+
+ Total Balance: + 552156560.642827 ETH +
+
+ + +
+
+
+

Assets

+
+ XAR + 0 ETH +
+
+ Ethereum + 552156560.642827 ETH +
+
-
- + + +
+
+
+ Logo +

Welcome

+

+ We’ll email you a login link for a password-free sign in. +

+ + +

or continue with

+
+ + + + +
+

+ Powered by arcana +

+
+
-
-
- Total Balance: - 552156560.642827 ETH -
-
- - -
-
-
-

Assets

-
- XAR - 0 ETH -
-
- Ethereum - 552156560.642827 ETH + Login Modal +
+ + From 6c52fd947b2a5790e73bab11a12e6f4297620452 Mon Sep 17 00:00:00 2001 From: karthikdurai Date: Wed, 7 Aug 2024 12:34:56 +0530 Subject: [PATCH 03/29] add color picker and save n cancel button --- .../app-configure/general/WalletBranding.vue | 44 +++++++++++++------ 1 file changed, 30 insertions(+), 14 deletions(-) diff --git a/src/components/app-configure/general/WalletBranding.vue b/src/components/app-configure/general/WalletBranding.vue index cd0dbb25..b729113a 100644 --- a/src/components/app-configure/general/WalletBranding.vue +++ b/src/components/app-configure/general/WalletBranding.vue @@ -8,6 +8,7 @@ const selectedFontSize = ref(14) const selectedFontColor = ref('#1D2A31') const selectedRadius = ref('M') const showPreviewOf = ref('wallet') +const showColorPicker = ref(false) const accentColors = [ '#1862E8', @@ -103,6 +104,20 @@ const cancelConfiguration = () => { class="w-8 h-8 rounded-full cursor-pointer" @click="selectedColor = color" >
+
+ + +
@@ -213,20 +228,21 @@ const cancelConfiguration = () => { - -
- - +
+
+
+ Cancel +
+
+ Save +
+
From d6bb85d98b31d07d9d9ead56c3fc02c69358b884 Mon Sep 17 00:00:00 2001 From: karthikdurai Date: Thu, 8 Aug 2024 08:24:24 +0530 Subject: [PATCH 04/29] create emailer branding ui --- .../app-configure/general/EmailerBranding.vue | 245 ++++++++++++++++++ 1 file changed, 245 insertions(+) create mode 100644 src/components/app-configure/general/EmailerBranding.vue diff --git a/src/components/app-configure/general/EmailerBranding.vue b/src/components/app-configure/general/EmailerBranding.vue new file mode 100644 index 00000000..be6ac2ed --- /dev/null +++ b/src/components/app-configure/general/EmailerBranding.vue @@ -0,0 +1,245 @@ + + + From a5a593782dbd12ee387d18fa5bd8c8e64913b7dc Mon Sep 17 00:00:00 2001 From: karthikdurai Date: Thu, 8 Aug 2024 08:24:37 +0530 Subject: [PATCH 05/29] fix UI --- src/assets/iconography/arrow-down.svg | 9 + .../app-configure/general/WalletBranding.vue | 423 ++++++++++-------- 2 files changed, 248 insertions(+), 184 deletions(-) create mode 100644 src/assets/iconography/arrow-down.svg diff --git a/src/assets/iconography/arrow-down.svg b/src/assets/iconography/arrow-down.svg new file mode 100644 index 00000000..683414ce --- /dev/null +++ b/src/assets/iconography/arrow-down.svg @@ -0,0 +1,9 @@ + + + diff --git a/src/components/app-configure/general/WalletBranding.vue b/src/components/app-configure/general/WalletBranding.vue index b729113a..a226c874 100644 --- a/src/components/app-configure/general/WalletBranding.vue +++ b/src/components/app-configure/general/WalletBranding.vue @@ -22,7 +22,9 @@ const accentColors = [ '#FFFFFF', '#000000', ] -const radii = ['S', 'M', 'L', 'XL'] +const radii = ['-', 'S', 'M', 'L', 'XL'] +const fontColors = ['#1D2A31', '#464646', '#151515'] +const fonts = ['Nohemi + Inter', 'Syne + Onest', 'Nunito + PT Sans'] const themeClass = (theme) => theme === selectedTheme.value @@ -34,7 +36,7 @@ const fontSizeClass = (size) => const radiusClass = (radius) => radius === selectedRadius.value - ? 'border-2 border-blue-500' + ? 'border-2 border-[#FF4E9F]' : 'border-2 border-transparent' const updateLogo = (type, event) => { @@ -52,195 +54,269 @@ const cancelConfiguration = () => { console.log('Cancelling configuration...') // Cancel configuration logic here } + +const clickLogoUpload = (id) => { + document.getElementById(id).click() +} - - From 6089ee8c4eaf9903da45d5643fad827912f04e8f Mon Sep 17 00:00:00 2001 From: karthikdurai Date: Thu, 8 Aug 2024 08:24:51 +0530 Subject: [PATCH 06/29] add emailer UI and toggle btn --- .../app-configure/general/AppBrandingNew.vue | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/src/components/app-configure/general/AppBrandingNew.vue b/src/components/app-configure/general/AppBrandingNew.vue index 7d0f2ab1..63988359 100644 --- a/src/components/app-configure/general/AppBrandingNew.vue +++ b/src/components/app-configure/general/AppBrandingNew.vue @@ -1,5 +1,15 @@ From 2cb2bbd368ae113c65a6e93c24ad9f39559d3890 Mon Sep 17 00:00:00 2001 From: karthikdurai Date: Thu, 8 Aug 2024 08:54:47 +0530 Subject: [PATCH 07/29] ui logic fixes --- .../app-configure/general/AppBrandingNew.vue | 1 - .../app-configure/general/WalletBranding.vue | 52 +++++++++++++++---- 2 files changed, 42 insertions(+), 11 deletions(-) diff --git a/src/components/app-configure/general/AppBrandingNew.vue b/src/components/app-configure/general/AppBrandingNew.vue index 63988359..d8c11b43 100644 --- a/src/components/app-configure/general/AppBrandingNew.vue +++ b/src/components/app-configure/general/AppBrandingNew.vue @@ -7,7 +7,6 @@ import WalletBranding from '@/components/app-configure/general/WalletBranding.vu const activeTab = ref('wallet') function isActiveTab(tab) { - console.log(tab, activeTab.value === tab, 'activeTab.value === tab') return activeTab.value === tab } diff --git a/src/components/app-configure/general/WalletBranding.vue b/src/components/app-configure/general/WalletBranding.vue index a226c874..77e4eef5 100644 --- a/src/components/app-configure/general/WalletBranding.vue +++ b/src/components/app-configure/general/WalletBranding.vue @@ -8,7 +8,6 @@ const selectedFontSize = ref(14) const selectedFontColor = ref('#1D2A31') const selectedRadius = ref('M') const showPreviewOf = ref('wallet') -const showColorPicker = ref(false) const accentColors = [ '#1862E8', @@ -58,6 +57,25 @@ const cancelConfiguration = () => { const clickLogoUpload = (id) => { document.getElementById(id).click() } + +const onColorPickerClick = () => { + document.getElementById('color-picker').click() +} + +const getRadius = (radius) => { + switch (radius) { + case 'S': + return '4px' + case 'M': + return '8px' + case 'L': + return '12px' + case 'XL': + return '16px' + default: + return '0px' + } +}