From afd09dc4c174a338a86ca51e192ae97781af4c37 Mon Sep 17 00:00:00 2001 From: Monkey Date: Fri, 9 Aug 2024 12:31:53 -0400 Subject: [PATCH] mnemonic dialog styles --- prettier.config.js | 18 ++++++++++++ src/components/Grid.tsx | 2 +- src/components/MnemonicDialog.tsx | 48 ++++++++++++++++++++----------- src/styles/stylesheet.js | 42 ++++++++++++++++++++++----- 4 files changed, 86 insertions(+), 24 deletions(-) create mode 100644 prettier.config.js diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..ecc8a48 --- /dev/null +++ b/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: [ + "", + "^(pages|components|utils|icons|test|graphql)/(.*)$", + "^[./]", + ], +}; + +export default config; diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx index 764e51c..7e32aa2 100644 --- a/src/components/Grid.tsx +++ b/src/components/Grid.tsx @@ -7,7 +7,7 @@ import { GridViewProps } from '../types'; const GridView = ({ words }: GridViewProps) => { return ( - + {words.map((word, index) => ( {index + 1}. diff --git a/src/components/MnemonicDialog.tsx b/src/components/MnemonicDialog.tsx index 1e10297..b1708af 100644 --- a/src/components/MnemonicDialog.tsx +++ b/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 ( - Mnemonic - - - Your mnemonic provides full access to your wallet and funds. Make sure to note it down. + Mnemonic + + + Your mnemonic provides full access to your wallet and funds.
+ Make sure to note it down.
- + Do not share your mnemonic with anyone
- - - + + +
); diff --git a/src/styles/stylesheet.js b/src/styles/stylesheet.js index 778b750..f1493ff 100644 --- a/src/styles/stylesheet.js +++ b/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,