From 16d307bba6bed1f47f74c2eacfdc5396f5c8e698 Mon Sep 17 00:00:00 2001
From: Shreerang Kale <shreerangkale@gmail.com>
Date: Mon, 10 Feb 2025 18:05:27 +0530
Subject: [PATCH] Update UI for buy prepaid service button

---
 .../shared/auth/AutoSignInIFrameModal.tsx     |  4 ----
 .../frontend/src/pages/BuyPrepaidService.tsx  | 20 +++++++++++--------
 .../frontend/src/pages/org-slug/index.tsx     |  1 -
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx b/packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx
index be3da107..b2f46507 100644
--- a/packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx
+++ b/packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx
@@ -129,10 +129,7 @@ const AutoSignInIFrameModal = () => {
           height: '600px',
           maxHeight: '80vh',
           overflow: 'auto',
-          boxShadow: 24,
-          borderRadius: '8px',
           outline: 'none',
-          bgcolor: 'background.paper',
         }}
       >
         <iframe
@@ -142,7 +139,6 @@ const AutoSignInIFrameModal = () => {
           width="100%"
           height="100%"
           sandbox="allow-scripts allow-same-origin"
-          className="border rounded-md shadow-sm"
         ></iframe>
       </Box>
     </Modal>
diff --git a/packages/frontend/src/pages/BuyPrepaidService.tsx b/packages/frontend/src/pages/BuyPrepaidService.tsx
index 26b38179..fece8472 100644
--- a/packages/frontend/src/pages/BuyPrepaidService.tsx
+++ b/packages/frontend/src/pages/BuyPrepaidService.tsx
@@ -1,20 +1,26 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useMediaQuery } from 'usehooks-ts';
 
 import { Modal } from '@mui/material';
-import { Button } from '@snowballtools/material-tailwind-react-fork';
 
-import { VITE_AUTH_SECRET, VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants';
+import {
+  VITE_AUTH_SECRET,
+  VITE_LACONICD_CHAIN_ID,
+  VITE_WALLET_IFRAME_URL,
+} from 'utils/constants';
+import { Button } from 'components/shared';
 
 const BuyPrepaidService = () => {
   const [isSufficient, setIsSufficient] = useState(null);
 
   const navigate = useNavigate();
 
+  const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
+  const buttonSize = isTabletView ? { size: 'lg' as const } : {};
+
   const requestForBalance = useCallback(() => {
-    const iframe = document.getElementById(
-      'checkBalance',
-    ) as HTMLIFrameElement;
+    const iframe = document.getElementById('checkBalance') as HTMLIFrameElement;
 
     if (!iframe.contentWindow) {
       console.error('Iframe not found or not loaded');
@@ -37,7 +43,6 @@ const BuyPrepaidService = () => {
       if (event.origin !== VITE_WALLET_IFRAME_URL) return;
 
       if (event.data.type === 'IS_SUFFICIENT') {
-        console.log("event.data.data", event.data.data)
         setIsSufficient(event.data.data);
       } else if (event.data.type === 'ERROR') {
         console.error('Error from wallet:', event.data.message);
@@ -55,12 +60,11 @@ const BuyPrepaidService = () => {
     if (isSufficient === true) {
       navigate('/');
     }
-
   }, [isSufficient]);
   return (
     <div className="dark:bg-background flex flex-col min-h-screen">
       <div className="pb-12 relative z-10 flex-1 flex-center">
-        <Button>
+        <Button {...buttonSize} shape={'default'}>
           <a href="https://store.laconic.com" target="_blank">
             Buy prepaid service
           </a>
diff --git a/packages/frontend/src/pages/org-slug/index.tsx b/packages/frontend/src/pages/org-slug/index.tsx
index 65903797..69ef28c0 100644
--- a/packages/frontend/src/pages/org-slug/index.tsx
+++ b/packages/frontend/src/pages/org-slug/index.tsx
@@ -57,7 +57,6 @@ const Projects = () => {
       if (event.origin !== VITE_WALLET_IFRAME_URL) return;
 
       if (event.data.type === 'IS_SUFFICIENT') {
-        console.log("event.data.data", event.data.data)
         setIsSufficient(event.data.data);
       } else if (event.data.type === 'ERROR') {
         console.error('Error from wallet:', event.data.message);