diff --git a/src/components/utils/PwaModal/PwaModal.scss b/src/components/utils/PwaModal/PwaModal.scss index 8fb3f572..95dc4c3f 100644 --- a/src/components/utils/PwaModal/PwaModal.scss +++ b/src/components/utils/PwaModal/PwaModal.scss @@ -1,5 +1,6 @@ .PwaModal { - padding: 3em; + padding: 3rem; + padding-bottom: 2rem; display: flex; flex-direction: column; text-align: center; @@ -47,4 +48,20 @@ display: inline-block; } } + + &__footer { + display: flex; + flex-direction: row; + align-items: center; + margin-top: 0.5rem; + + &__title { + color: var(--fg-color-2); + } + + &__link { + color: var(--accent-color-1); + text-decoration: none; + } + } } diff --git a/src/components/utils/PwaModal/index.tsx b/src/components/utils/PwaModal/index.tsx index 228fa721..7c7b02b6 100644 --- a/src/components/utils/PwaModal/index.tsx +++ b/src/components/utils/PwaModal/index.tsx @@ -1,13 +1,14 @@ import React from 'react' import { detect } from 'detect-browser' +import { Link } from 'react-router-dom' import BackgroundImage from '@/assets/IntroBackground.png' import AndroidShareIcon from '@/components/general/Icon/AndroidShare' import IShareIcon from '@/components/general/Icon/IShare' -import WalletConnectIcon from '@/components/general/Icon/WalletConnectIcon' import { Modal } from '@/components/general/Modal/Modal' import Text from '@/components/general/Text' +import { web3InboxURLs } from '@/constants/navigation' import { pwaModalService } from '@/utils/store' import './PwaModal.scss' @@ -40,7 +41,7 @@ export const getPlatformInstallText = () => { return 'Install App' case 'safari': case 'ios': - return 'Add to homescreen' + return 'Add to Home Screen' default: return 'Install' } @@ -70,6 +71,19 @@ export const PwaModal: React.FC = () => { {getMobilePlatformIcon()} and “{getPlatformInstallText()}” +
+ + Learn more at  + + + web3inbox.com + +
) diff --git a/src/pages/Login/Login.scss b/src/pages/Login/Login.scss index 5da556f3..2f164579 100644 --- a/src/pages/Login/Login.scss +++ b/src/pages/Login/Login.scss @@ -28,8 +28,10 @@ overflow-x: hidden; padding: 1rem 0.085em; display: flex; + flex-direction: column; justify-content: center; align-items: center; + gap: 4rem; @supports (height: 100dvh) { height: 100dvh; @@ -38,6 +40,21 @@ &__connect-button { min-width: fit-content; } + + &__footer { + display: flex; + flex-direction: column; + align-items: center; + + &__title { + color: var(--fg-color-2); + } + + &__link { + color: var(--accent-color-1); + text-decoration: none; + } + } } } diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index cc116359..ff35f411 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -1,13 +1,15 @@ import React, { useContext, useEffect } from 'react' import { useWeb3Modal } from '@web3modal/wagmi/react' -import { useLocation, useNavigate } from 'react-router-dom' +import { Link, useLocation, useNavigate } from 'react-router-dom' import Button from '@/components/general/Button' import IntroWallet from '@/components/general/Icon/IntroWallet' import IntroContent from '@/components/general/IntroContent' +import Text from '@/components/general/Text' import TransitionDiv from '@/components/general/TransitionDiv' import Sidebar from '@/components/layout/Sidebar' +import { web3InboxURLs } from '@/constants/navigation' import W3iContext from '@/contexts/W3iContext/context' import './Login.scss' @@ -55,6 +57,19 @@ const Login: React.FC = () => { } icon={} /> +
+ + Learn more at + + + web3inbox.com + +
)