fixes pre-order banner for windows users

src/app/components/PreOrderBanner/index.module.css

@@ -6,12 +6,19 @@
   margin: 0 auto;
 }
 
+.banner.windows {
+  background-image: url("./assets/290x90.png");
+}
+
 @media screen and (min-width: 576px) {
   .banner {
     width: 540px;
     background-image: url("./assets/540x90.svg");
     background-size: 540px 90px;
   }
+  .banner.windows {
+    background-image: url("./assets/540x90.png");
+  }
 }
 
 @media screen and (min-width: 768px) {
@@ -20,6 +27,9 @@
     background-image: url("./assets/720x90.svg");
     background-size: 720px 90px;
   }
+  .banner.windows {
+    background-image: url("./assets/720x90.png");
+  }
 }
 
 @media screen and (min-width: 992px) {
@@ -28,6 +38,9 @@
     background-image: url("./assets/960x90.svg");
     background-size: 960px 90px;
   }
+  .banner.windows {
+    background-image: url("./assets/960x90.png");
+  }
 }
 
 @media screen and (min-width: 1200px) {
@@ -36,4 +49,7 @@
     background-image: url("./assets/1140x90.svg");
     background-size: 1140px 90px;
   }
+  .banner.windows {
+    background-image: url("./assets/1140x90.png");
+  }
 }

src/app/components/PreOrderBanner/index.tsx

@@ -3,15 +3,21 @@
  * PreOrderBanner
  *
  */
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
 import styles from './index.module.css';
 
 export function PreOrderBanner() {
+  const [isWindow, setIsWindows] = useState(false);
+  useEffect(() => {
+    setIsWindows(navigator?.appVersion?.indexOf('Win') !== -1);
+  }, []);
+
   return (
     <div className="row mb-5">
       <a
         href="https://token.sovryn.app"
-        className={styles.banner}
+        className={classNames(styles.banner, isWindow && styles.windows)}
         rel="noreferrer noopener"
         target="_blank"
       >