mnemonic dialog styles

src/components/Dialog.tsx

@@ -14,19 +14,20 @@ const DialogComponent = ({ visible, hideDialog, contentText }: CustomDialogProps
 
   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}>Done</Button>
+      <DialogActions style={{...styles.mnemonicButtonRow}}>
+        <Button style={{...styles.mnemonicButton}} onClick={copyMnemonic}>Copy</Button>
+        <Button style={{...styles.mnemonicButton}} onClick={hideDialog}>Done</Button>
       </DialogActions>
     </Dialog>
   );

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/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,