Update UI for buy prepaid service button

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>

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>

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);