From 8da5973448114526134bd1a68d9b1bc5a2043bb6 Mon Sep 17 00:00:00 2001
From: rishabhkeshan <rishabhkeshan@gmail.com>
Date: Thu, 19 Dec 2024 01:13:58 +0530
Subject: [PATCH] feat: added mobile responsiveness to wallet support notice

---
 .../modals/UnsupportedWalletsNoticeModal.tsx  | 108 +++++++++---------
 1 file changed, 52 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/modals/UnsupportedWalletsNoticeModal.tsx b/frontend/src/components/modals/UnsupportedWalletsNoticeModal.tsx
index 22ba671..171bdce 100644
--- a/frontend/src/components/modals/UnsupportedWalletsNoticeModal.tsx
+++ b/frontend/src/components/modals/UnsupportedWalletsNoticeModal.tsx
@@ -7,54 +7,62 @@ export const UnsupportedWalletsNoticeModal = ({
 }) => {
   if (!isOpen) return null;
 
+  const styles = {
+    modalOverlay: {
+      position: "fixed" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      backgroundColor: "rgba(0, 0, 0, 0.7)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 1000,
+    },
+    modalContent: {
+      backgroundColor: "rgb(18, 18, 18)",
+      padding: window.innerWidth <= 480 ? "30px 20px" : "50px",
+      borderRadius: "8px",
+      maxWidth: "500px",
+      width: "90%",
+      position: "relative" as const,
+    },
+    title: {
+      fontWeight: "bold",
+      marginBottom: window.innerWidth <= 480 ? "25px" : "35px",
+      fontSize: window.innerWidth <= 480 ? "20px" : "26px",
+      color: "green",
+      lineHeight: "1.5",
+    },
+    text: {
+      fontSize: window.innerWidth <= 480 ? "16px" : "18px",
+      color: "white",
+      marginTop: window.innerWidth <= 480 ? "14px" : "25px",
+      lineHeight: window.innerWidth <= 480 ? "1.6" : "2",
+      letterSpacing: window.innerWidth <= 480 ? "0.2px" : "0.4px",
+    },
+    button: {
+      marginTop: window.innerWidth <= 480 ? "30px" : "40px",
+      padding: window.innerWidth <= 480 ? "12px 24px" : "14px 28px",
+      borderRadius: "4px",
+      border: "none",
+      backgroundColor: "#102a9e",
+      color: "#d0cdcd",
+      cursor: "pointer",
+      fontSize: window.innerWidth <= 480 ? "16px" : "18px",
+    },
+  };
+
   return (
-    <div
-      onClick={onClose}
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        backgroundColor: "rgba(0, 0, 0, 0.7)",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        zIndex: 1000,
-      }}
-    >
+    <div onClick={onClose} style={styles.modalOverlay}>
       <div
         className="modal-content"
         onClick={(e) => e.stopPropagation()}
-        style={{
-          backgroundColor: "rgb(18, 18, 18)",
-          padding: "50px",
-          borderRadius: "8px",
-          maxWidth: "500px",
-          width: "90%",
-          position: "relative",
-        }}
+        style={styles.modalContent}
       >
-        <div
-          style={{
-            fontWeight: "bold",
-            marginBottom: "35px",
-            fontSize: "26px",
-            color: "green",
-            lineHeight: "1.5",
-          }}
-        >
-          Wallet Support Notice
-        </div>
-        <div
-          style={{
-            fontSize: "18px",
-            color: "white",
-            marginTop: "25px",
-            lineHeight: "2",
-            letterSpacing: "0.4px",
-          }}
-        >
+        <div style={styles.title}>Wallet Support Notice</div>
+        <div style={styles.text}>
           Note: Gasless transactions are currently only supported for the Burner
           wallet & Fuelet Wallet.
           <br />
@@ -62,19 +70,7 @@ export const UnsupportedWalletsNoticeModal = ({
           Support for other wallets is coming soon. If you use these other
           wallets, you can still play the game by paying gas fees yourself.
         </div>
-        <button
-          onClick={onClose}
-          style={{
-            marginTop: "40px",
-            padding: "14px 28px",
-            borderRadius: "4px",
-            border: "none",
-            backgroundColor: "#102a9e",
-            color: "#d0cdcd",
-            cursor: "pointer",
-            fontSize: "18px",
-          }}
-        >
+        <button onClick={onClose} style={styles.button}>
           Continue
         </button>
       </div>