style: import wallet dialog

src/components/ImportWalletDialog.tsx

@@ -1,17 +1,26 @@
-import React, { useEffect, useState } from 'react';
-
-import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Grid, Button, Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import styles from "../styles/stylesheet";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  Grid,
+  Button,
+  Typography,
+} from "@mui/material";
 
 const ImportWalletDialog = ({
   visible,
   hideDialog,
-  importWalletHandler
+  importWalletHandler,
 }: {
   visible: boolean;
   hideDialog: () => void;
   importWalletHandler: (recoveryPhrase: string) => Promise<void>;
 }) => {
-  const [words, setWords] = useState(Array(12).fill(''));
+  const [words, setWords] = useState(Array(12).fill(""));
 
   const handleWordChange = (index: number, value: string) => {
     const newWords = [...words];
@@ -20,7 +29,7 @@ const ImportWalletDialog = ({
   };
 
   const handlePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
-    const pastedText = event.clipboardData.getData('Text');
+    const pastedText = event.clipboardData.getData("Text");
     const splitWords = pastedText.trim().split(/\s+/);
 
     if (splitWords.length === 12) {
@@ -30,15 +39,17 @@ const ImportWalletDialog = ({
   };
 
   useEffect(() => {
-    setWords(Array(12).fill(''));
-  },[visible]);
+    setWords(Array(12).fill(""));
+  }, [visible]);
 
   return (
     <Dialog open={visible} onClose={hideDialog}>
-      <DialogTitle>Import your wallet from your mnemonic</DialogTitle>
-      <DialogContent>
-        <Typography>
-        (You can paste your entire mnemonic into the first textbox)
+      <DialogTitle style={styles.mnemonicTitle}>
+        Import your wallet from your mnemonic
+      </DialogTitle>
+      <DialogContent style={styles.mnemonicContainer}>
+        <Typography component="div">
+          (You can paste your entire mnemonic into the first textbox)
         </Typography>
         <Grid container spacing={2}>
           {words.map((word, index) => (
@@ -55,9 +66,16 @@ const ImportWalletDialog = ({
           ))}
         </Grid>
       </DialogContent>
-      <DialogActions>
-        <Button onClick={() => importWalletHandler(words.join(' '))}>Import Wallet</Button>
-        <Button onClick={hideDialog}>Cancel</Button>
+      <DialogActions style={styles.mnemonicButtonRow}>
+        <Button
+          onClick={() => importWalletHandler(words.join(" "))}
+          style={styles.mnemonicButton}
+        >
+          Import Wallet
+        </Button>
+        <Button onClick={hideDialog} style={styles.mnemonicButton}>
+          Cancel
+        </Button>
       </DialogActions>
     </Dialog>
   );