From 543a031f64b0a4d8b2a3466d9d6781e9086a0f62 Mon Sep 17 00:00:00 2001
From: Danny Cho <hj.danny.cho@gmail.com>
Date: Fri, 19 Jan 2024 17:50:43 +1300
Subject: [PATCH] feat: minor css style, wording update on landing page

---
 .../frontend/src/components/common/Footer.js  |  8 +++++++
 .../src/components/landing/GuestLanding.js    | 20 +++++------------
 .../components/landing/GuestLanding.styles.js | 22 ++++++++++++++++++-
 .../components/navigation/DesktopContainer.js |  1 -
 .../src/components/navigation/NavigationV2.js |  5 +++--
 .../frontend/src/translations/en.global.json  |  3 +--
 6 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/common/Footer.js b/packages/frontend/src/components/common/Footer.js
index 39243c776d..05c50de8be 100644
--- a/packages/frontend/src/components/common/Footer.js
+++ b/packages/frontend/src/components/common/Footer.js
@@ -93,6 +93,14 @@ const InnerContainer = styled.div`
     margin: 0 auto;
     justify-content: space-between;
     align-items: center;
+
+    @media(max-width: 1352px) {
+        padding: 0 64px;
+    }
+
+    @media(max-width: 991px) {
+        padding: 0 24px;
+    }
 `;
 
 const Footer = () => {
diff --git a/packages/frontend/src/components/landing/GuestLanding.js b/packages/frontend/src/components/landing/GuestLanding.js
index 20cef340aa..7f647ee50d 100644
--- a/packages/frontend/src/components/landing/GuestLanding.js
+++ b/packages/frontend/src/components/landing/GuestLanding.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { Translate } from 'react-localize-redux';
-import {useSelector} from 'react-redux';
 
 import HereWalletIcon from '../../images/wallet-icons/here-wallet-icon.png';
 import MeteorWalletIcon from '../../images/wallet-icons/meteor-wallet-icon.png';
@@ -8,7 +7,6 @@ import NearWalletIcon from '../../images/wallet-icons/near-wallet-icon.png';
 import NightlyWalletIcon from '../../images/wallet-icons/nightly-wallet-icon.png';
 import SenderWalletIcon from '../../images/wallet-icons/sender-wallet-icon.png';
 import WellDoneWalletIcon from '../../images/wallet-icons/welldone-wallet-icon.png';
-import {selectAvailableAccounts} from '../../redux/slices/availableAccounts';
 import FormButton from '../common/FormButton';
 import { WalletSelectorGetAWallet } from '../common/wallet_selector/WalletSelectorGetAWallet';
 import NavigationWrapperV2 from '../navigation/NavigationWrapperV2';
@@ -25,7 +23,6 @@ import {
 } from './GuestLanding.styles';
 
 export function GuestLanding({ history, accountFound, onTransfer  }) {
-    const availableAccounts = useSelector(selectAvailableAccounts);
 
     const [walletSelectorModal, setWalletSelectorModal] = useState();
     const [showModal, setShowModal] = useState();
@@ -158,7 +155,7 @@ export function GuestLanding({ history, accountFound, onTransfer  }) {
                     </InfoSection>
                     <CardsSection>
                         <CardContainer>
-                            <SingleCard href='https://app.mynearwallet.com' target='_blank' onClick={() => {
+                            <SingleCard href='https://mynearwallet.com' target='_blank' onClick={() => {
                                 recordWalletMigrationEvent('click', { element: { type: 'link', description: 'MyNearWallet Wallet' }});
                             }}>
                                 <img src={NearWalletIcon} alt="near-wallet-icon" />
@@ -193,7 +190,9 @@ export function GuestLanding({ history, accountFound, onTransfer  }) {
                                 <h3>Nightly Wallet</h3>
                                 <p><Translate id="landing.wallet.nightly" /></p>
                             </SingleCard>
-                            <SingleCard href="https://welldonestudio.io/">
+                            <SingleCard href="https://welldonestudio.io/" target="_blank"  onClick={() => {
+                                recordWalletMigrationEvent('click', { element: { type: 'link', description: 'WELLDONE Wallet' }});
+                            }}>
                                 <img src={WellDoneWalletIcon} alt="wellDone-wallet-icon" />
                                 <h3>WELLDONE Wallet</h3>
                                 <p><Translate id="landing.wallet.wellDone" /></p>
@@ -208,16 +207,7 @@ export function GuestLanding({ history, accountFound, onTransfer  }) {
                         <TransferSectionWrapper>
                             <div>
                                 <h4>
-                                    {availableAccounts.length === 1 ? (
-                                        <Translate id="landing.transfer.titleSingular"
-                                            data={{ accountCount: availableAccounts.length }}
-                                        />
-                                    ) : (
-                                        <Translate
-                                            id="landing.transfer.titlePlural"
-                                            data={{ accountCount: availableAccounts.length }}
-                                        />
-                                    )}
+                                    <Translate id="landing.transfer.title" />
                                 </h4>
                                 <p><Translate id="landing.transfer.description" /></p>
                             </div>
diff --git a/packages/frontend/src/components/landing/GuestLanding.styles.js b/packages/frontend/src/components/landing/GuestLanding.styles.js
index ac6fd70222..036b4dbeda 100644
--- a/packages/frontend/src/components/landing/GuestLanding.styles.js
+++ b/packages/frontend/src/components/landing/GuestLanding.styles.js
@@ -9,6 +9,14 @@ export const StyledContainer = styled.div`
         max-width: 1224px;
         position: relative;
 
+        @media (max-width: 1352px) {
+            padding: 0 64px;
+        }
+
+        @media (max-width: 991px) {
+            padding: 0 24px;
+        }
+
         @media (max-width: 767px) {
             margin: 0;
             overflow: hidden;
@@ -229,6 +237,13 @@ export const DefaultContainer = styled.div`
     max-width: 1224px;
     margin: 0 auto;
     position: relative;
+    @media (max-width: 1352px) {
+        padding: 0 64px;
+    }
+
+    @media (max-width: 991px) {
+        padding: 0 24px;
+    }
 `;
 
 export const FlexBox = styled.div`
@@ -300,8 +315,13 @@ export const SecondaryText = styled.p`
 `;
 
 export const FormButtonContainer = styled.div`
-    min-width: 500px;
     text-align: right;
+    min-width: 500px;
+
+    @media(max-width: 1352px) {
+        min-width: 300px;
+    }
+
     @media(max-width: 768px) {
         min-width: 100%;
     }
diff --git a/packages/frontend/src/components/navigation/DesktopContainer.js b/packages/frontend/src/components/navigation/DesktopContainer.js
index 841b45ac25..319dc1382f 100644
--- a/packages/frontend/src/components/navigation/DesktopContainer.js
+++ b/packages/frontend/src/components/navigation/DesktopContainer.js
@@ -12,7 +12,6 @@ const Container = styled.div`
     color: white;
     position: relative;
     font-size: 14px;
-    padding: 0 15px;
 
     @media (min-width: 992px) {
         display: flex;
diff --git a/packages/frontend/src/components/navigation/NavigationV2.js b/packages/frontend/src/components/navigation/NavigationV2.js
index b04d15b766..08ee694c31 100644
--- a/packages/frontend/src/components/navigation/NavigationV2.js
+++ b/packages/frontend/src/components/navigation/NavigationV2.js
@@ -15,9 +15,10 @@ const Container = styled.div`
         border-bottom: 1px solid #F0F0F1;
         background-color: #FFFFFF;
         margin: auto;
+        padding: 0 64px;
+
         @media (max-width: 991px) {
-            bottom: ${(props) => props.open ? '0' : 'unset'};
-            border: none;
+            padding: 0 24px;
         }
 
         h6 {
diff --git a/packages/frontend/src/translations/en.global.json b/packages/frontend/src/translations/en.global.json
index 80df6a7265..7bc9709330 100644
--- a/packages/frontend/src/translations/en.global.json
+++ b/packages/frontend/src/translations/en.global.json
@@ -694,8 +694,7 @@
             "wellDone": "A multi-chain extension wallet that gives you control over all your assets from a single platform."
         },
         "transfer": {
-            "titleSingular": "You have ${accountCount} account ready to transfer.",
-            "titlePlural": "You have ${accountCount} accounts ready to transfer.",
+            "title": "You have accounts that need to be transferred",
             "description": "To continue using NEAR apps and managing your assets you need to migrate your accounts to a different wallet."
         }