fix: change css to be compatible with safari on ios 14 (#345)

* fix: change css to be compatible with safari on ios 14 * fix: invert button on mobile * chore: add inputmode decimal
FuelLabs · Jun 24, 2022 · 1d75126 · 1d75126
1 parent 64faa1a
commit 1d75126
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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/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}

diff --git 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
@@ -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
@@ -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
@@ -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-[14px] sm: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
@@ -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
@@ -47,6 +47,7 @@ export function WelcomeDone() {
       <Button
         size="lg"
         variant="primary"
+        className="mt-5 mx-auto"
         isDisabled={!state.context.acceptAgreement}
         onPress={handleDone}
       >