From eda07515833a4c1c721f303b9b29ac83631f127a Mon Sep 17 00:00:00 2001 From: sadiabbasi Date: Wed, 4 Dec 2024 23:41:00 +0300 Subject: [PATCH 1/2] working in UI changes --- src/accounts/module-index.tsx | 1 + src/accounts/molecules/ShowQr.tsx | 16 +++++++++++++- src/accounts/pages/Login.css | 28 ++++++++++++++++++++++++ src/accounts/pages/Login.tsx | 8 +++---- src/common/config/config.production.json | 2 +- src/index.css | 3 ++- 6 files changed, 51 insertions(+), 7 deletions(-) diff --git a/src/accounts/module-index.tsx b/src/accounts/module-index.tsx index ce81571a..1c64018d 100644 --- a/src/accounts/module-index.tsx +++ b/src/accounts/module-index.tsx @@ -11,6 +11,7 @@ const styles = { display: "flex", height: "100vh", justifyContent: "center", + maxWidth: "800px" }, }; diff --git a/src/accounts/molecules/ShowQr.tsx b/src/accounts/molecules/ShowQr.tsx index ccb84f68..9dc1def6 100644 --- a/src/accounts/molecules/ShowQr.tsx +++ b/src/accounts/molecules/ShowQr.tsx @@ -3,19 +3,33 @@ import TProgressCircle from "../../common/atoms/TProgressCircle"; import { TP } from "../../common/atoms/THeadings"; import { isMobile } from "../utils/IsMobile"; import settings from "../../common/settings"; +import { App } from "@tonomy/tonomy-id-sdk"; export default function QROrLoading({ showQr, + app, }: { showQr: string | undefined; + app: App | undefined; }) { return ( <> {!isMobile() && ( <> - Scan the QR code with the {settings.config.appName} app + + {app?.appName}{` `} + is using the Pangea identity system to improve your security and + privacy in their application + + Learn more + {!showQr && } {showQr && } + + Scan this QR code using your{" "} + {settings.config.appName} to + continue your process of purchasing + )} {isMobile() && ( diff --git a/src/accounts/pages/Login.css b/src/accounts/pages/Login.css index e0e49bce..5928c143 100644 --- a/src/accounts/pages/Login.css +++ b/src/accounts/pages/Login.css @@ -23,4 +23,32 @@ .margin-top { margin-top: 2rem; +} + +.app-text{ + line-height: 1.3; + font-size: 20px; + padding: 0rem 3.7rem; + letter-spacing: 0.03rem; +} + +.learn-more { + color: #4CAF50; + line-height: 1.3; + font-size: 19px; + margin-bottom: 2rem; + +} + +.bottom-scan-text { + margin-top: 1rem; + line-height: 1.3; + font-size: 20px; + padding: 0rem 6.5rem; + letter-spacing: 0.03rem; +} + +.app-link-color{ + color: #4CAF50; + } \ No newline at end of file diff --git a/src/accounts/pages/Login.tsx b/src/accounts/pages/Login.tsx index 6e381cff..7f5f1f27 100644 --- a/src/accounts/pages/Login.tsx +++ b/src/accounts/pages/Login.tsx @@ -27,7 +27,7 @@ import { RequestsManager, ResponsesManager, } from "@tonomy/tonomy-id-sdk"; -import { TH3, TH4, TP } from "../../common/atoms/THeadings"; +import { TH2, TH3, TH4, TP } from "../../common/atoms/THeadings"; import TImage from "../../common/atoms/TImage"; import TProgressCircle from "../../common/atoms/TProgressCircle"; import settings from "../../common/settings"; @@ -448,7 +448,7 @@ export default function Login() { src={settings.config.images.logo48} alt={`${settings.config.appName} Logo`} /> - Login with {settings.config.appName} + Login with {settings.config.appName} {(status === "connecting" || status === "app") && ( <>{username && {username}} )} @@ -458,7 +458,7 @@ export default function Login() { ...styles.detailContainer, }} > - {status === "qr" && } + {status === "qr" && } {status === "connecting" && ( <> @@ -496,7 +496,7 @@ export default function Login() { {status === "qr" && ( navigation("/download")}> - {`Don't have ${settings.config.appName} yet?`} + {`Don't have ${settings.config.ecosystemName} yet?`} )} {(status === "connecting" || status === "app") && ( diff --git a/src/common/config/config.production.json b/src/common/config/config.production.json index 9a1fabdd..003c7531 100644 --- a/src/common/config/config.production.json +++ b/src/common/config/config.production.json @@ -2,7 +2,7 @@ "themeFile": "theme.pangea.css", "appLogoUrl": "/favicon.png", "appName": "United Citizens Wallet", - "ecosystemName": "Pangea", + "ecosystemName": "UCW", "appSlogan": "For a Better Tomorrow", "images": { "logo48": "/pangea/favicon.png", diff --git a/src/index.css b/src/index.css index 61420014..3b034c38 100644 --- a/src/index.css +++ b/src/index.css @@ -43,4 +43,5 @@ code { font-weight: 500; cursor: pointer; transition: all .5s ease; -} \ No newline at end of file +} + From c68570d2ecfc98f27478020a25fb6d647d41bf98 Mon Sep 17 00:00:00 2001 From: sadiabbasi Date: Fri, 6 Dec 2024 15:28:17 +0300 Subject: [PATCH 2/2] worked on download screen changes --- src/accounts/molecules/ShowQr.tsx | 3 +- src/accounts/pages/DownloadApp.css | 11 +++- src/accounts/pages/DownloadApp.tsx | 93 ++++++++++++++++++++---------- src/accounts/pages/Login.css | 19 +++++- src/accounts/pages/Login.tsx | 8 +++ 5 files changed, 100 insertions(+), 34 deletions(-) diff --git a/src/accounts/molecules/ShowQr.tsx b/src/accounts/molecules/ShowQr.tsx index 9dc1def6..590f8fd3 100644 --- a/src/accounts/molecules/ShowQr.tsx +++ b/src/accounts/molecules/ShowQr.tsx @@ -12,6 +12,7 @@ export default function QROrLoading({ showQr: string | undefined; app: App | undefined; }) { + return ( <> {!isMobile() && ( @@ -40,4 +41,4 @@ export default function QROrLoading({ )} ); -} +} \ No newline at end of file diff --git a/src/accounts/pages/DownloadApp.css b/src/accounts/pages/DownloadApp.css index 81ec903a..f99a88d0 100644 --- a/src/accounts/pages/DownloadApp.css +++ b/src/accounts/pages/DownloadApp.css @@ -2,9 +2,10 @@ display: flex; justify-content: center; flex-direction: column; - align-items: center; + align-items: flex-start; /* gap: 1rem; */ - text-align: center; + text-align: left; + margin-top: 1rem; } .paragraph { @@ -18,4 +19,10 @@ .icon { display: block; +} + +.text-paragraph{ + line-height: 22px; + font-size: 18px; + margin-top: 1.2rem; } \ No newline at end of file diff --git a/src/accounts/pages/DownloadApp.tsx b/src/accounts/pages/DownloadApp.tsx index afc6015b..cb5510d9 100644 --- a/src/accounts/pages/DownloadApp.tsx +++ b/src/accounts/pages/DownloadApp.tsx @@ -1,47 +1,80 @@ import React from "react"; import { TLink } from "../../common/atoms/TLink"; -import { TH4, TH3, TP } from "../../common/atoms/THeadings"; -import appStoreImage from "../assets/app-store.svg"; +import { TH3, TP } from "../../common/atoms/THeadings"; +import appStoreImage from "../assets/applestore.png"; import "./DownloadApp.css"; import settings from "../../common/settings"; -import playStoreBadge from "../assets/google-play-badge.png"; +import playStoreBadge from "../assets/googleplay.png"; +import TImage from "../../common/atoms/TImage"; + +const isMobileDevice = () => { + return /Mobi|Android/i.test(navigator.userAgent); +}; export default function DownloadApp() { const payload = localStorage.getItem("loginPayload"); + const isMobile = isMobileDevice(); + const params = new URLSearchParams(window.location.search); + const appName = params.get("app"); return ( -
- {settings.config.appName} - - The easiest and safest way to access {settings.config.appName} apps - - - {settings.config.appName} is a self-sovereign identity digital wallet - that protects your security and privacy.   - - Learn more - +
+
+ + Pangea +
+ + {settings.config.appName} + +

+ {appName ? `${appName} is using` : "This application uses"} the Pangea + identity system to improve your security and privacy in their + application +

+ + Learn more + {isMobile ? ( +

+ You will need to install United Citizen Wallet and create an account + to be able to complete your login +

+ ) : ( +

+ You will need to install {settings.config.appName} and create an + account to be able to scan this QR code +

+ )} - - It is open-source and maintained by the Tonomy Foundation.{" "} - - Learn more - - -
- - Get it on Apple store - -
+
+
+ + Get it on Apple store + +
-
- - Get it on Google Play - +
+ + Get it on Google Play + +
+ {payload && ( - + Already have {settings.config.appName}?{" "} Log in here diff --git a/src/accounts/pages/Login.css b/src/accounts/pages/Login.css index 5928c143..cb979647 100644 --- a/src/accounts/pages/Login.css +++ b/src/accounts/pages/Login.css @@ -27,7 +27,11 @@ .app-text{ line-height: 1.3; +<<<<<<< Updated upstream font-size: 20px; +======= + font-size: 19px; +>>>>>>> Stashed changes padding: 0rem 3.7rem; letter-spacing: 0.03rem; } @@ -43,12 +47,25 @@ .bottom-scan-text { margin-top: 1rem; line-height: 1.3; - font-size: 20px; + font-size: 19px; padding: 0rem 6.5rem; letter-spacing: 0.03rem; } .app-link-color{ color: #4CAF50; +} +.get-assistance-btn{ + margin-left: 1rem; + color: var(--primary); + background-color: var(--white); + border-radius: 0.6rem; + padding: .5rem 1.5rem; + border-color: var(--primary); + font-size: 1rem; + box-shadow: rgba(0, 0, 0, 0.288) 1px 1px 10px ; + font-weight: 500; + cursor: pointer; + transition: all .5s ease; } \ No newline at end of file diff --git a/src/accounts/pages/Login.tsx b/src/accounts/pages/Login.tsx index 7f5f1f27..84b31d76 100644 --- a/src/accounts/pages/Login.tsx +++ b/src/accounts/pages/Login.tsx @@ -495,9 +495,17 @@ export default function Login() { )}
{status === "qr" && ( +
navigation("/download")}> {`Don't have ${settings.config.ecosystemName} yet?`} + navigation("/download")} + > + {`Get assistance`} + +
)} {(status === "connecting" || status === "app") && ( <>