mnemonic dialog styles

prettier.config.js

@@ -0,0 +1,18 @@
+const config = {
+  arrowParens: "always",
+  printWidth: 80,
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: "es5",
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  plugins: ["@trivago/prettier-plugin-sort-imports"],
+  importOrder: [
+    "<THIRD_PARTY_MODULES>",
+    "^(pages|components|utils|icons|test|graphql)/(.*)$",
+    "^[./]",
+  ],
+};
+
+export default config;

src/components/Grid.tsx

@@ -7,7 +7,7 @@ import { GridViewProps } from '../types';
 
 const GridView = ({ words }: GridViewProps) => {
   return (
-    <View style={styles.gridContainer}>
+    <View style={styles.mnemonicGridContainer}>
       {words.map((word, index) => (
         <View key={index} style={styles.gridItem}>
           <Text>{index + 1}. </Text>

src/components/MnemonicDialog.tsx

@@ -1,32 +1,48 @@
-import React from 'react';
-import { Dialog, DialogActions, DialogContent, DialogTitle, Button, Typography } from '@mui/material';
+import React from "react";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Button,
+  Typography,
+} from "@mui/material";
 
-import styles from '../styles/stylesheet';
-import GridView from './Grid';
-import { CustomDialogProps } from '../types';
+import styles from "../styles/stylesheet";
+import GridView from "./Grid";
+import { CustomDialogProps } from "../types";
 
-const MnemonicDialog = ({ visible, hideDialog, contentText }: CustomDialogProps) => {
-  const words = contentText.split(' ');
+const MnemonicDialog = ({
+  visible,
+  hideDialog,
+  contentText,
+}: CustomDialogProps) => {
+  const words = contentText.split(" ");
 
   const copyMnemonic = () => {
-    navigator.clipboard.writeText(contentText)
+    navigator.clipboard.writeText(contentText);
   };
 
   return (
     <Dialog open={visible} onClose={hideDialog}>
-      <DialogTitle>Mnemonic</DialogTitle>
-      <DialogContent>
-        <Typography variant="h6" component="div" style={{ color: 'rgba(0, 0, 0, 0.87)' }}>
-          Your mnemonic provides full access to your wallet and funds. Make sure to note it down.
+      <DialogTitle style={{ ...styles.mnemonicTitle }}>Mnemonic</DialogTitle>
+      <DialogContent style={{ ...styles.mnemonicContainer }}>
+        <Typography component="div">
+          Your mnemonic provides full access to your wallet and funds. <br />
+          Make sure to note it down.
         </Typography>
-        <Typography variant="h6" component="div" style={{ ...styles.dialogWarning }}>
+        <Typography component="div" style={{ ...styles.mnomonicDialogWarning }}>
           Do not share your mnemonic with anyone
         </Typography>
         <GridView words={words} />
       </DialogContent>
-      <DialogActions>
-        <Button onClick={copyMnemonic}>Copy</Button>
-        <Button onClick={hideDialog}>Cancel</Button>
+      <DialogActions style={{ ...styles.mnemonicButtonRow }}>
+        <Button style={{ ...styles.mnemonicButton }} onClick={copyMnemonic}>
+          Copy
+        </Button>
+        <Button style={{ ...styles.mnemonicButton }} onClick={hideDialog}>
+          Cancel
+        </Button>
       </DialogActions>
     </Dialog>
   );

src/styles/stylesheet.js

@@ -75,7 +75,36 @@ const styles = StyleSheet.create({
     borderRadius: 10,
   },
   dialogWarning: {
-    color: 'red',
+    color: '#FFA3A8',
+  },
+  mnemonicTitle:{
+    backgroundColor: '#18181A',
+  },
+  mnemonicContainer:{
+    backgroundColor: '#18181A',
+  },
+  mnomonicDialogWarning: {
+    color: '#FFA3A8',
+    marginTop: 10
+  },
+  mnemonicButtonRow: {
+    paddingRight: 40,
+    backgroundColor: '#18181A'
+  },
+  mnemonicButton:{
+    backgroundColor: '#0000F4',
+    color: 'white',
+    padding: 2,
+    marginBottom: 20
+  },
+  mnemonicGridContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    marginTop: 20,
+    paddingBottom: 30,
+    borderBottomWidth: 1,
+    borderBottomColor: '#29292E'
   },
   gridContainer: {
     flexDirection: 'row',
@@ -83,14 +112,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   gridItem: {
-    width: '25%',
-    margin: 8,
-    padding: 6,
-    borderWidth: 1,
-    borderColor: '#ccc',
-    borderRadius: 8,
+    width: '30%',
+    margin: 4,
+    padding: 4,
+    borderRadius: 4,
     alignItems: 'center',
     justifyContent: 'flex-start',
+    backgroundColor: '#29292E'
   },
   HDcontainer: {
     marginTop: 24,