From 7770c4ad8d03beb64098a85014e4d7d36b60203f Mon Sep 17 00:00:00 2001
From: Luiz Estacio <luizstacio@gmail.com>
Date: Fri, 24 Jun 2022 00:09:55 -0300
Subject: [PATCH 1/3] fix: change css to be compatible with safari on ios 14

---
 packages/app/src/styles/components/button.css      |  2 +-
 packages/app/src/styles/components/home-page.css   | 11 ++++++++++-
 .../app/src/styles/components/welcome-page.css     |  4 ++--
 .../app/src/systems/Core/components/TokenIcon.tsx  | 14 +++++++++++++-
 .../src/systems/Faucet/components/FaucetApp.tsx    |  2 +-
 .../app/src/systems/Home/components/Header.tsx     |  7 +------
 .../app/src/systems/UI/components/InvertButton.tsx |  2 +-
 .../systems/Welcome/components/CreateWallet.tsx    |  7 ++++++-
 .../src/systems/Welcome/components/WelcomeDone.tsx |  1 +
 9 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/packages/app/src/styles/components/button.css b/packages/app/src/styles/components/button.css
index a73456d2..a17463b8 100644
--- a/packages/app/src/styles/components/button.css
+++ b/packages/app/src/styles/components/button.css
@@ -1,6 +1,6 @@
 @layer components {
   .button {
-    @apply appearance-none transition-main inline-flex items-center rounded-xl gap-2;
+    @apply appearance-none transition-main grid grid-flow-col items-center rounded-xl gap-2;
     @apply border focus-ring btn-active cursor-pointer;
 
     &[aria-disabled="true"] {
diff --git a/packages/app/src/styles/components/home-page.css b/packages/app/src/styles/components/home-page.css
index ad61b403..3d9f033b 100644
--- a/packages/app/src/styles/components/home-page.css
+++ b/packages/app/src/styles/components/home-page.css
@@ -11,10 +11,19 @@
 
   .homePage--header {
     @apply flex justify-between font-semibold;
+
+    img {
+      height: 46px;
+      width: 46px;
+    }
   }
 
   .homePage--menu {
-    @apply flex items-center gap-4 lg:gap-6 text-lg;
+    @apply flex items-center text-lg;
+
+    > * {
+      @apply ml-4 lg:ml-6;
+    }
 
     & a {
       @apply text-gray-200;
diff --git a/packages/app/src/styles/components/welcome-page.css b/packages/app/src/styles/components/welcome-page.css
index 950edd9e..a585a8b2 100644
--- a/packages/app/src/styles/components/welcome-page.css
+++ b/packages/app/src/styles/components/welcome-page.css
@@ -1,7 +1,7 @@
 @layer components {
   .welcomePage--layout {
     @apply text-gray-100 min-h-screen;
-    @apply grid gap-8;
+    @apply grid gap-8 h-full;
 
     @media (min-width: 1024px) {
       grid-template-columns: 300px 1fr;
@@ -112,7 +112,7 @@
   */
   .stepsIndicator {
     @apply absolute bottom-0 left-[50%] -translate-x-1/2;
-    @apply flex gap-4;
+    @apply grid grid-cols-3 gap-4 sm:gap-2;
 
     li {
       @apply bg-gray-500 w-16 h-2 rounded-full;
diff --git a/packages/app/src/systems/Core/components/TokenIcon.tsx b/packages/app/src/systems/Core/components/TokenIcon.tsx
index 3908d335..2fd8122b 100644
--- a/packages/app/src/systems/Core/components/TokenIcon.tsx
+++ b/packages/app/src/systems/Core/components/TokenIcon.tsx
@@ -15,6 +15,11 @@ type TokenIconProps = {
 
 export function TokenIcon({ coinFrom, coinTo, size = 20 }: TokenIconProps) {
   if (!coinFrom) return null;
+  // Force image dimensions for retro compatibility
+  const dimensionStyle = {
+    height: size,
+    width: size,
+  };
   return (
     <div className="flex items-center">
       <span className={style.icon}>
@@ -23,11 +28,18 @@ export function TokenIcon({ coinFrom, coinTo, size = 20 }: TokenIconProps) {
           alt={coinFrom.name}
           height={size}
           width={size}
+          style={dimensionStyle}
         />
       </span>
       {coinTo && (
         <span className={cx(style.icon, style.iconLast)}>
-          <img src={coinTo.img} alt={coinTo.name} height={size} width={size} />
+          <img
+            src={coinTo.img}
+            alt={coinTo.name}
+            height={size}
+            width={size}
+            style={dimensionStyle}
+          />
         </span>
       )}
     </div>
diff --git a/packages/app/src/systems/Faucet/components/FaucetApp.tsx b/packages/app/src/systems/Faucet/components/FaucetApp.tsx
index bff25f34..2108c7e4 100644
--- a/packages/app/src/systems/Faucet/components/FaucetApp.tsx
+++ b/packages/app/src/systems/Faucet/components/FaucetApp.tsx
@@ -43,7 +43,7 @@ export function FaucetApp({ isButtonFull, onSuccess }: FaucetAppProps) {
         isFull={isButtonFull}
         size="lg"
         variant="primary"
-        className="mt-5"
+        className="mt-5 mx-auto"
         isLoading={faucet.mutation.isLoading}
         onPress={() => faucet.handleFaucet(captcha.value)}
         {...(captcha.needToShow && { isDisabled: !captcha.value })}
diff --git a/packages/app/src/systems/Home/components/Header.tsx b/packages/app/src/systems/Home/components/Header.tsx
index 56d3e416..ced6e6f3 100644
--- a/packages/app/src/systems/Home/components/Header.tsx
+++ b/packages/app/src/systems/Home/components/Header.tsx
@@ -9,12 +9,7 @@ export function Header() {
   const navigate = useNavigate();
   return (
     <header className="homePage--header">
-      <img
-        src={relativeUrl("/fuel-logo-512x512.png")}
-        alt="swayswap"
-        height={40}
-        width={40}
-      />
+      <img src={relativeUrl("/fuel-logo-512x512.png")} alt="swayswap" />
       <nav className="homePage--menu">
         <Link isExternal href="https://github.com/FuelLabs/swayswap">
           Github
diff --git a/packages/app/src/systems/UI/components/InvertButton.tsx b/packages/app/src/systems/UI/components/InvertButton.tsx
index 8279a048..aea38ced 100644
--- a/packages/app/src/systems/UI/components/InvertButton.tsx
+++ b/packages/app/src/systems/UI/components/InvertButton.tsx
@@ -9,7 +9,7 @@ const style = {
     p-0 relative w-10 h-10 rounded-xl mb-3 mt-0 translate-x-[60px]
     border-2 border-gray-700 bg-gray-800 cursor-pointer text-gray-400
     sm:translate-x-0 sm:my-1 sm:w-12 sm:h-12 sm:rounded-xl hover:text-gray-50`,
-  icon: `transition-all`,
+  icon: `transition-all w-[18px]`,
   iconLeft: `translate-x-[6px]`,
   iconRight: `translate-x-[-6px]`,
   rotate: `rotate-180`,
diff --git a/packages/app/src/systems/Welcome/components/CreateWallet.tsx b/packages/app/src/systems/Welcome/components/CreateWallet.tsx
index b8858b4d..6256b121 100644
--- a/packages/app/src/systems/Welcome/components/CreateWallet.tsx
+++ b/packages/app/src/systems/Welcome/components/CreateWallet.tsx
@@ -30,7 +30,12 @@ export function CreateWallet() {
         <br />
         Click &ldquo;Create Wallet&rdquo; below to generate one.
       </p>
-      <Button variant="primary" size="lg" onPress={handleCreateWallet}>
+      <Button
+        variant="primary"
+        size="lg"
+        className="mt-5 mx-auto"
+        onPress={handleCreateWallet}
+      >
         Create Wallet
       </Button>
     </WelcomeStep>
diff --git a/packages/app/src/systems/Welcome/components/WelcomeDone.tsx b/packages/app/src/systems/Welcome/components/WelcomeDone.tsx
index 527c5430..df0de8d8 100644
--- a/packages/app/src/systems/Welcome/components/WelcomeDone.tsx
+++ b/packages/app/src/systems/Welcome/components/WelcomeDone.tsx
@@ -47,6 +47,7 @@ export function WelcomeDone() {
       <Button
         size="lg"
         variant="primary"
+        className="mt-5 mx-auto"
         isDisabled={!state.context.acceptAgreement}
         onPress={handleDone}
       >

From 7318dcdd468f6b7ea3835c43c19fcecb01af5dca Mon Sep 17 00:00:00 2001
From: Luiz Estacio <luizstacio@gmail.com>
Date: Fri, 24 Jun 2022 00:22:33 -0300
Subject: [PATCH 2/3] fix: invert button on mobile

---
 packages/app/src/systems/UI/components/InvertButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/systems/UI/components/InvertButton.tsx b/packages/app/src/systems/UI/components/InvertButton.tsx
index aea38ced..fdfd2706 100644
--- a/packages/app/src/systems/UI/components/InvertButton.tsx
+++ b/packages/app/src/systems/UI/components/InvertButton.tsx
@@ -9,7 +9,7 @@ const style = {
     p-0 relative w-10 h-10 rounded-xl mb-3 mt-0 translate-x-[60px]
     border-2 border-gray-700 bg-gray-800 cursor-pointer text-gray-400
     sm:translate-x-0 sm:my-1 sm:w-12 sm:h-12 sm:rounded-xl hover:text-gray-50`,
-  icon: `transition-all w-[18px]`,
+  icon: `transition-all w-[14px] sm:w-[18px]`,
   iconLeft: `translate-x-[6px]`,
   iconRight: `translate-x-[-6px]`,
   rotate: `rotate-180`,

From bb1e33abe82fa1b80203f30a9c9a7967524f66e9 Mon Sep 17 00:00:00 2001
From: Luiz Estacio <luizstacio@gmail.com>
Date: Fri, 24 Jun 2022 00:26:00 -0300
Subject: [PATCH 3/3] chore: add inputmode decimal

---
 packages/app/src/systems/Core/components/CoinInput.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/app/src/systems/Core/components/CoinInput.tsx b/packages/app/src/systems/Core/components/CoinInput.tsx
index adad7920..3c52484f 100644
--- a/packages/app/src/systems/Core/components/CoinInput.tsx
+++ b/packages/app/src/systems/Core/components/CoinInput.tsx
@@ -220,6 +220,7 @@ export const CoinInput = forwardRef<HTMLInputElement, CoinInputProps>(
             <NumberFormat
               {...props}
               autoFocus={autoFocus}
+              inputMode={"decimal"}
               getInputRef={ref}
               allowNegative={false}
               defaultValue={initialValue}