styles-patch

Author: tripolskypetr

packages/client/src/components/common/Logo.tsx

@@ -79,6 +79,7 @@ export const Logo = observer(() => {
             src="/avatar.png"
             alt="Peter Tripolsky"
             sx={{ width: 128, height: 128 }}
+            imgProps={{ loading: "lazy" }}
           />
           <Typography variant="h6" sx={{ mt: -2 }}>Peter Tripolsky</Typography>
           <Typography

packages/client/src/pages/ConnectPage.tsx

@@ -27,7 +27,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         flexDirection: 'column',
-        gap: 15,
+        gap: 20,
         padding: 15,
     },
     container: {
@@ -51,7 +51,7 @@ export const ConnectPage = () => {
                     <Paper className={classes.container}>
                         <Stack direction='column' gap="15px">
                             <Logo />
-                            <span>
+                            <span style={{ marginTop: -10 }}>
                                 Please, connect your <strong>MetaMask</strong> wallet <span className="emoji">😃</span><br />
                             </span>
                             <Button

packages/client/src/pages/DonePage.tsx

@@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme) => ({
     display: "flex",
     alignItems: "center",
     flexDirection: "column",
-    gap: 15,
+    gap: 20,
     padding: 15,
   },
   container: {
@@ -55,7 +55,7 @@ export const ErrorPage = () => {
           <Paper className={classes.container}>
             <Stack direction="column" gap="15px">
               <Logo />
-              <span>
+              <span style={{ marginTop: -10 }}>
                 <strong>Congratulations!</strong> 🎉 Tokens have been{" "}
                 <strong>sent</strong>. Please contact me by using the email <br />
                 <Link href={`mailto:tripolskypetr@gmail.com`}>

packages/client/src/pages/ErrorPage.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         flexDirection: 'column',
-        gap: 15,
+        gap: 20,
         padding: 15,
     },
     container: {
@@ -54,7 +54,7 @@ export const ErrorPage = () => {
                     <Paper className={classes.container}>
                         <Stack direction='column' gap="15px">
                             <Logo />
-                            <span>
+                            <span style={{ marginTop: -10 }}>
                                 It looks like DAPP finished with uncaught exception<span className="emoji">😐</span><br />
                                 Please reload this page and try again
                             </span>

packages/client/src/pages/NoMetamaskPage.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         flexDirection: 'column',
-        gap: 15,
+        gap: 20,
         padding: 15,
     },
     container: {
@@ -55,7 +55,7 @@ export const NoMetamaskPage = () => {
                     <Paper className={classes.container}>
                         <Stack direction='column' gap="15px">
                             <Logo />
-                            <span>
+                            <span style={{ marginTop: -10 }}>
                                 We were not able to detect <strong>MetaMask</strong> <span className="emoji">😐</span>.
                                 We value <strong>privacy and security</strong> a lot so we 
                                 limit the wallet options on the DAPP.<br />

packages/client/src/pages/NotDeployedPage.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         flexDirection: 'column',
-        gap: 15,
+        gap: 20,
         padding: 15,
     },
     container: {
@@ -54,7 +54,7 @@ export const ConnectPage = () => {
                     <Paper className={classes.container}>
                         <Stack direction='column' gap="15px">
                             <Logo />
-                            <span>
+                            <span style={{ marginTop: -10 }}>
                                 Could not find the contract, are you connected to the right chain?<span className="emoji">😐</span><br />
                                 Please reload this page and try again
                             </span>

packages/client/src/pages/PermissionPage.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         flexDirection: 'column',
-        gap: 15,
+        gap: 20,
         padding: 15,
     },
     container: {
@@ -54,7 +54,7 @@ export const ConnectPage = () => {
                     <Paper className={classes.container}>
                         <Stack direction='column' gap="15px">
                             <Logo />
-                            <span>
+                            <span style={{ marginTop: -10 }}>
                                 It looks like you rejected the wallet connection request <span className="emoji">😐</span><br />
                                 Please reload this page and try again
                             </span>