Feature/309 UI changes

src/accounts/module-index.tsx

@@ -11,6 +11,7 @@ const styles = {
     display: "flex",
     height: "100vh",
     justifyContent: "center",
+    maxWidth: "800px"
   },
 };
 

src/accounts/molecules/ShowQr.tsx

@@ -3,19 +3,34 @@ 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() && (
         <>
-          <TP>Scan the QR code with the {settings.config.appName} app</TP>
+        <TP className="app-text">
+            {app?.appName}{` `}
+            is using the Pangea identity system to improve your security and
+            privacy in their application 
+          </TP>
+          <TP className="learn-more">Learn more</TP>
+
           {!showQr && <TProgressCircle />}
           {showQr && <QRCode value={showQr}></QRCode>}
+          <TP className="bottom-scan-text">
+            Scan this QR code using your{" "}
+            <span className="app-link-color">{settings.config.appName}</span> to
+            continue your process of purchasing
+          </TP>
         </>
       )}
       {isMobile() && (
@@ -26,4 +41,4 @@ export default function QROrLoading({
       )}
     </>
   );
-}
+}

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;
 }

src/accounts/pages/DownloadApp.tsx

@@ -1,48 +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 (
-    <div className="container">
-      <TH3>{settings.config.appName}</TH3>
-      <TH4>
-        The easiest and safest way to access {settings.config.ecosystemName}{" "}
-        apps
-      </TH4>
-      <TP className="paragraph">
-        {settings.config.appName} is a self-sovereign identity digital wallet
-        that protects your security and privacy. &nbsp;
-        <TLink href={settings.config.links.readMoreDownload} target="_blank">
-          Learn more
-        </TLink>
+    <div
+      className="container"
+      style={{ justifyContent: isMobile ? "flex-start" : "center" }}
+    >
+      <div
+        style={{ display: "flex", alignItems: "center", marginBottom: "3rem" }}
+      >
+        <TImage src={settings.config.images.logo48} />
+        <TH3 style={{ marginLeft: "10px" }}>Pangea</TH3>
+      </div>
+      <TH3 style={{ marginTop: isMobile ? "3rem" : "" }}>
+        {settings.config.appName}
+      </TH3>
+      <p className="text-paragraph">
+        {appName ? `${appName} is using` : "This application uses"} the Pangea
+        identity system to improve your security and privacy in their
+        application
+      </p>
+      <TP className="learn-more" style={{ marginBottom: "0px" }}>
+        Learn more
       </TP>
+      {isMobile ? (
+        <p className="text-paragraph">
+          You will need to install United Citizen Wallet and create an account
+          to be able to complete your login
+        </p>
+      ) : (
+        <p className="text-paragraph">
+          You will need to install {settings.config.appName} and create an
+          account to be able to scan this QR code
+        </p>
+      )}
 
-      <TP className="margin-bottom paragraph">
-        It is open-source and maintained by the Tonomy Foundation.{" "}
-        <TLink href={settings.config.links.readMoreFoundation} target="_blank">
-          Learn more
-        </TLink>
-      </TP>
-      <div>
-        <a href={settings.config.links.appleStoreDownload}>
-          <img alt="Get it on Apple store" width="200px" src={appStoreImage} />
-        </a>
-      </div>
+      <div style={{ marginTop: "2rem", textAlign: "left" }}>
+        <div>
+          <a href={settings.config.links.appleStoreDownload}>
+            <img
+              alt="Get it on Apple store"
+              width="210px"
+              src={appStoreImage}
+            />
+          </a>
+        </div>
 
-      <div>
-        <a href={settings.config.links.playStoreDownload}>
-          <img alt="Get it on Google Play" width="230px" src={playStoreBadge} />
-        </a>
+        <div style={{ marginTop: "0.3rem" }}>
+          <a href={settings.config.links.playStoreDownload}>
+            <img
+              alt="Get it on Google Play"
+              width="210px"
+              src={playStoreBadge}
+            />
+          </a>
+        </div>
       </div>
+
       {payload && (
-        <TP>
+        <TP style={{ lineHeight: "26px", marginTop: "1.7rem" }}>
           Already have {settings.config.appName}?{" "}
           <TLink href={"/login?payload=" + payload}>Log in here</TLink>
         </TP>

src/accounts/pages/Login.css

@@ -23,4 +23,49 @@
 
 .margin-top {
     margin-top: 2rem;
+}
+
+.app-text{
+    line-height: 1.3;
+<<<<<<< Updated upstream
+    font-size: 20px;
+=======
+    font-size: 19px;
+>>>>>>> Stashed changes
+    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: 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;
 }

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`}
       />
-      <TH3>Login with {settings.config.appName}</TH3>
+      <TH2>Login with {settings.config.appName}</TH2>
       {(status === "connecting" || status === "app") && (
         <>{username && <TH4>{username}</TH4>}</>
       )}
@@ -458,7 +458,7 @@ export default function Login() {
           ...styles.detailContainer,
         }}
       >
-        {status === "qr" && <QROrLoading showQr={showQR} />}
+        {status === "qr" && <QROrLoading showQr={showQR} app={app} />}
 
         {status === "connecting" && (
           <>
@@ -495,9 +495,17 @@ export default function Login() {
         )}
       </div>
       {status === "qr" && (
+        <div>
         <TContainedButton onClick={() => navigation("/download")}>
-          {`Don't have ${settings.config.appName} yet?`}
+          {`Don't have ${settings.config.ecosystemName} yet?`}
         </TContainedButton>
+          <TContainedButton
+            className="get-assistance-btn"
+            onClick={() => navigation("/download")}
+          >
+            {`Get assistance`}
+       </TContainedButton>
+       </div>
       )}
       {(status === "connecting" || status === "app") && (
         <>

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",

src/index.css

@@ -43,4 +43,5 @@ code {
   font-weight: 500;
   cursor: pointer;
   transition: all .5s ease;
-}
+}
+