style: home screen first pass

2024-08-09 13:19:39 -04:00 · 2024-08-09 13:19:21 -04:00
9 changed files with 352 additions and 244 deletions
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
    "@ethersproject/shims": "^5.7.0",
    "@hookform/resolvers": "^3.3.4",
    "@json-rpc-tools/utils": "^1.7.6",
+    "@mui/lab": "^5.0.0-alpha.173",
    "@mui/material": "^5.16.4",
    "@react-navigation/elements": "^1.3.30",
    "@react-navigation/native": "^6.1.10",
--- a/public/index.html
+++ b/public/index.html
@ -8,6 +8,11 @@
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Laconic Wallet Web App" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+    rel="stylesheet" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--- a/src/components/AccountDetails.tsx
+++ b/src/components/AccountDetails.tsx
@ -1,9 +1,7 @@
-import React from 'react';
-import { View } from 'react-native';
-import { Text } from 'react-native-paper';
+import React from "react";

-import { Account } from '../types';
-import styles from '../styles/stylesheet';
+import { Account } from "../types";
+import { Box, Stack, Typography } from "@mui/material";

 interface AccountDetailsProps {
  account: Account | undefined;
@ -11,20 +9,28 @@ interface AccountDetailsProps {

 const AccountDetails: React.FC<AccountDetailsProps> = ({ account }) => {
  return (
-    <View style={styles.accountContainer}>
-      <Text variant="bodyLarge" selectable={true}>
-        <Text style={styles.highlight}>Address: </Text>
-        {account?.address}
-      </Text>
-      <Text variant="bodyLarge" selectable={true}>
-        <Text style={styles.highlight}>Public Key: </Text>
-        {account?.pubKey}
-      </Text>
-      <Text variant="bodyLarge">
-        <Text style={styles.highlight}>HD Path: </Text>
-        {account?.hdPath}
-      </Text>
-    </View>
+    <Box sx={{ marginY: 4 }}>
+      <Stack spacing={1}>
+        <Stack flexDirection="row">
+          <Typography color="secondary" sx={{ mr: 1 }}>
+            Address:
+          </Typography>
+          <Typography color="text.primary">{account?.address}</Typography>
+        </Stack>
+      </Stack>
+      <Stack flexDirection="row">
+        <Typography color="secondary" sx={{ mr: 1 }}>
+          Public Key:
+        </Typography>
+        <Typography color="text.primary">{account?.pubKey}</Typography>
+      </Stack>
+      <Stack flexDirection="row">
+        <Typography color="secondary" sx={{ mr: 1 }}>
+          HD Path:
+        </Typography>
+        <Typography color="text.primary">{account?.hdPath}</Typography>
+      </Stack>
+    </Box>
  );
 };

--- a/src/components/Accounts.tsx
+++ b/src/components/Accounts.tsx
@ -1,22 +1,23 @@
-import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { Button, List, Text, useTheme } from 'react-native-paper';
+import React, { useEffect, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { List } from "react-native-paper";

-import { useNavigation } from '@react-navigation/native';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useNavigation } from "@react-navigation/native";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";

-import { StackParamsList, Account } from '../types';
-import { addAccount } from '../utils/accounts';
-import styles from '../styles/stylesheet';
-import HDPathDialog from './HDPathDialog';
-import AccountDetails from './AccountDetails';
-import { useAccounts } from '../context/AccountsContext';
-import { useWalletConnect } from '../context/WalletConnectContext';
-import { useNetworks } from '../context/NetworksContext';
-import ConfirmDialog from './ConfirmDialog';
-import { getNamespaces } from '../utils/wallet-connect/helpers';
-import ShowPKDialog from './ShowPKDialog';
-import { setInternetCredentials } from '../utils/key-store';
+import { StackParamsList, Account } from "../types";
+import { addAccount } from "../utils/accounts";
+import HDPathDialog from "./HDPathDialog";
+import AccountDetails from "./AccountDetails";
+import { useAccounts } from "../context/AccountsContext";
+import { useWalletConnect } from "../context/WalletConnectContext";
+import { useNetworks } from "../context/NetworksContext";
+import ConfirmDialog from "./ConfirmDialog";
+import { getNamespaces } from "../utils/wallet-connect/helpers";
+import ShowPKDialog from "./ShowPKDialog";
+import { setInternetCredentials } from "../utils/key-store";
+import { Button, Link, Stack } from "@mui/material";
+import { LoadingButton } from "@mui/lab";

 const Accounts = () => {
  const navigation =
@ -27,16 +28,14 @@ const Accounts = () => {
  const { networksData, selectedNetwork, setNetworksData, setSelectedNetwork } =
    useNetworks();

-  const {web3wallet} = useWalletConnect();
+  const { web3wallet } = useWalletConnect();
  const [expanded, setExpanded] = useState(false);
  const [isAccountCreating, setIsAccountCreating] = useState(false);
  const [hdDialog, setHdDialog] = useState(false);
-  const [pathCode, setPathCode] = useState('');
+  const [pathCode, setPathCode] = useState("");
  const [deleteNetworkDialog, setDeleteNetworkDialog] =
    useState<boolean>(false);

-  const theme = useTheme();
-
  const handlePress = () => setExpanded(!expanded);

  const hideDeleteNetworkDialog = () => setDeleteNetworkDialog(false);
@ -88,7 +87,7 @@ const Accounts = () => {
  };

  const renderAccountItems = () =>
-    accounts.map(account => (
+    accounts.map((account) => (
      <List.Item
        key={account.index}
        title={`Account ${account.index + 1}`}
@ -101,12 +100,12 @@ const Accounts = () => {

  const handleRemove = async () => {
    const updatedNetworks = networksData.filter(
-      networkData => selectedNetwork!.networkId !== networkData.networkId,
+      (networkData) => selectedNetwork!.networkId !== networkData.networkId,
    );

    await setInternetCredentials(
-      'networks',
-      '_',
+      "networks",
+      "_",
      JSON.stringify(updatedNetworks),
    );

@ -128,91 +127,72 @@ const Accounts = () => {
        <List.Accordion
          title={`Account ${currentIndex + 1}`}
          expanded={expanded}
-          onPress={handlePress}>
+          onPress={handlePress}
+        >
          {renderAccountItems()}
        </List.Accordion>

-        <View style={styles.addAccountButton}>
-          <Button
-            mode="contained"
-            onPress={addAccountHandler}
+        <Stack direction="row" spacing={3} sx={{ mt: 4 }}>
+          <LoadingButton
+            variant="contained"
+            onClick={addAccountHandler}
            loading={isAccountCreating}
-            disabled={isAccountCreating}>
-            {isAccountCreating ? 'Adding' : 'Add Account'}
-          </Button>
-        </View>
+            disabled={isAccountCreating}
+          >
+            {isAccountCreating ? "Adding" : "Add Account"}
+          </LoadingButton>

-        <View style={styles.addAccountButton}>
          <Button
-            mode="contained"
-            onPress={() => {
+            variant="contained"
+            onClick={() => {
              setHdDialog(true);
              setPathCode(`m/44'/${selectedNetwork!.coinType}'/`);
-            }}>
+            }}
+          >
            Add Account from HD path
          </Button>
-        </View>
+        </Stack>

        <AccountDetails account={accounts[currentIndex]} />
-        <View style={styles.linkContainer}>
-          <View style={styles.signLink}>
-            <TouchableOpacity
-              onPress={() => {
-                navigation.navigate('SignMessage', {
-                  selectedNamespace: selectedNetwork!.namespace,
-                  selectedChainId: selectedNetwork!.chainId,
-                  accountInfo: accounts[currentIndex],
-                });
-              }}>
-              <Text
-                variant="titleSmall"
-                style={[styles.hyperlink, { color: theme.colors.primary }]}>
-                Sign Message
-              </Text>
-            </TouchableOpacity>
-          </View>
+        <Stack direction="row" spacing={4}>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate("SignMessage", {
+                selectedNamespace: selectedNetwork!.namespace,
+                selectedChainId: selectedNetwork!.chainId,
+                accountInfo: accounts[currentIndex],
+              });
+            }}
+          >
+            <Link>Sign Message</Link>
+          </TouchableOpacity>

-          <View style={styles.signLink}>
-            <TouchableOpacity
-              onPress={() => {
-                navigation.navigate('AddNetwork');
-              }}>
-              <Text
-                variant="titleSmall"
-                style={[styles.hyperlink, { color: theme.colors.primary }]}>
-                Add Network
-              </Text>
-            </TouchableOpacity>
-          </View>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate("AddNetwork");
+            }}
+          >
+            <Link>Add Network</Link>
+          </TouchableOpacity>

-          <View style={styles.signLink}>
-            <TouchableOpacity
-              onPress={() => {
-                navigation.navigate('EditNetwork', {
-                  selectedNetwork: selectedNetwork!,
-                });
-              }}>
-              <Text
-                variant="titleSmall"
-                style={[styles.hyperlink, { color: theme.colors.primary }]}>
-                Edit Network
-              </Text>
-            </TouchableOpacity>
-          </View>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate("EditNetwork", {
+                selectedNetwork: selectedNetwork!,
+              });
+            }}
+          >
+            <Link>Edit Network</Link>
+          </TouchableOpacity>

          {!selectedNetwork!.isDefault && (
-            <View style={styles.signLink}>
-              <TouchableOpacity
-                onPress={() => {
-                  setDeleteNetworkDialog(true);
-                }}>
-                <Text
-                  variant="titleSmall"
-                  style={[styles.hyperlink, { color: theme.colors.primary }]}>
-                  Delete Network
-                </Text>
-              </TouchableOpacity>
-            </View>
+            <TouchableOpacity
+              onPress={() => {
+                setDeleteNetworkDialog(true);
+              }}
+            >
+              <Link>Delete Network</Link>
+            </TouchableOpacity>
          )}
          <ConfirmDialog
            title="Delete Network"
@ -221,7 +201,7 @@ const Accounts = () => {
            onConfirm={handleRemove}
          />
          <ShowPKDialog />
-        </View>
+        </Stack>
      </View>
    </View>
  );
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@ -1,33 +1,52 @@
-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 DialogComponent = ({ visible, hideDialog, contentText }: CustomDialogProps) => {
-  const words = contentText.split(' ');
+const DialogComponent = ({
+  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 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.
+      <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.
        </Typography>
-        <Typography component="div" style={{ ...styles.mnomonicDialogWarning }}>
+        <Typography
+          variant="h6"
+          component="div"
+          style={{ ...styles.dialogWarning }}
+        >
          Do not share your mnemonic with anyone
        </Typography>
        <GridView words={words} />
      </DialogContent>
-      <DialogActions style={{...styles.mnemonicButtonRow}}>
-        <Button style={{...styles.mnemonicButton}} onClick={copyMnemonic}>Copy</Button>
-        <Button style={{...styles.mnemonicButton}} onClick={hideDialog}>Done</Button>
+      <DialogActions>
+        <Button onClick={copyMnemonic}>Copy</Button>
+        <Button onClick={hideDialog}>Done</Button>
      </DialogActions>
    </Dialog>
  );
--- a/src/components/ShowPKDialog.tsx
+++ b/src/components/ShowPKDialog.tsx
@ -1,16 +1,16 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { Button, Typography } from '@mui/material';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
+import React, { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { Button, Link, Typography } from "@mui/material";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";

-import styles from '../styles/stylesheet';
-import { getPathKey } from '../utils/misc';
-import { useNetworks } from '../context/NetworksContext';
-import { useAccounts } from '../context/AccountsContext';
-import { Text, useTheme } from 'react-native-paper';
+import styles from "../styles/stylesheet";
+import { getPathKey } from "../utils/misc";
+import { useNetworks } from "../context/NetworksContext";
+import { useAccounts } from "../context/AccountsContext";
+import { useTheme } from "react-native-paper";

 const ShowPKDialog = () => {
  const { currentIndex } = useAccounts();
@ -19,8 +19,6 @@ const ShowPKDialog = () => {
  const [privateKey, setPrivateKey] = useState<string>();
  const [showPKDialog, setShowPKDialog] = useState<boolean>(false);

-  const theme = useTheme();
-
  const handleShowPrivateKey = async () => {
    const pathKey = await getPathKey(
      `${selectedNetwork!.namespace}:${selectedNetwork!.chainId}`,
@ -41,12 +39,9 @@ const ShowPKDialog = () => {
        <TouchableOpacity
          onPress={() => {
            setShowPKDialog(true);
-          }}>
-          <Text
-            variant="titleSmall"
-            style={[styles.hyperlink, { color: theme.colors.primary }]}>
-            Show Private Key
-          </Text>
+          }}
+        >
+          <Link>Show Private Key</Link>
        </TouchableOpacity>
      </View>
      <View>
@ -66,8 +61,8 @@ const ShowPKDialog = () => {
                  variant="body1"
                  style={styles.dataBoxData}
                  sx={{
-                    wordWrap: 'break-word',
-                    whiteSpace: 'initial',
+                    wordWrap: "break-word",
+                    whiteSpace: "initial",
                  }}
                >
                  {privateKey}
@ -76,11 +71,9 @@ const ShowPKDialog = () => {
            )}
            <View>
              <Typography variant="body1" style={styles.dialogWarning}>
-                <Typography component="span">
-                  Warning:
-                </Typography>
-                Never disclose this key. Anyone with your private keys can
-                steal any assets held in your account.
+                <Typography component="span">Warning:</Typography>
+                Never disclose this key. Anyone with your private keys can steal
+                any assets held in your account.
              </Typography>
            </View>
          </DialogContent>
--- a/src/index.tsx
+++ b/src/index.tsx
@ -36,12 +36,41 @@ const navigationTheme: typeof DarkTheme = {
    card: "#18181A",
  },
 };
+
 const muiTheme = createTheme({
+  components: {
+    MuiButton: {
+      defaultProps: {
+        color: "primary",
+        sx: {
+          fontFamily: `DM Mono, monospace`,
+          fontWeight: 400,
+        },
+      },
+    },
+    MuiLink: {
+      defaultProps: {
+        color: "text.primary",
+        fontSize: "14px",
+      },
+    },
+    MuiTypography: {
+      defaultProps: {
+        fontWeight: 400,
+      },
+    },
+  },
  palette: {
    mode: "dark",
    primary: {
      main: "#0000F4",
    },
+    secondary: {
+      main: "#A2A2FF",
+    },
+    error: {
+      main: "#B20710",
+    },
  },
 });

--- a/src/screens/HomeScreen.tsx
+++ b/src/screens/HomeScreen.tsx
@ -1,28 +1,29 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { View, ActivityIndicator, Image } from 'react-native';
-import { Button, Text } from 'react-native-paper';
+import React, { useCallback, useEffect, useState } from "react";
+import { View, ActivityIndicator, Image } from "react-native";
+import { Text } from "react-native-paper";
+import { Box, Button, Divider } from "@mui/material";

-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useNavigation } from '@react-navigation/native';
-import { getSdkError } from '@walletconnect/utils';
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { useNavigation } from "@react-navigation/native";
+import { getSdkError } from "@walletconnect/utils";

-import { createWallet, resetWallet, retrieveAccounts } from '../utils/accounts';
-import { DialogComponent } from '../components/Dialog';
-import { NetworkDropdown } from '../components/NetworkDropdown';
-import Accounts from '../components/Accounts';
-import CreateWallet from '../components/CreateWallet';
-import ConfirmDialog from '../components/ConfirmDialog';
-import styles from '../styles/stylesheet';
-import { useAccounts } from '../context/AccountsContext';
-import { useWalletConnect } from '../context/WalletConnectContext';
-import { NetworksDataState, StackParamsList } from '../types';
-import { useNetworks } from '../context/NetworksContext';
+import { createWallet, resetWallet, retrieveAccounts } from "../utils/accounts";
+import { DialogComponent } from "../components/Dialog";
+import { NetworkDropdown } from "../components/NetworkDropdown";
+import Accounts from "../components/Accounts";
+import CreateWallet from "../components/CreateWallet";
+import ConfirmDialog from "../components/ConfirmDialog";
+import styles from "../styles/stylesheet";
+import { useAccounts } from "../context/AccountsContext";
+import { useWalletConnect } from "../context/WalletConnectContext";
+import { NetworksDataState, StackParamsList } from "../types";
+import { useNetworks } from "../context/NetworksContext";

 const WCLogo = () => {
  return (
    <Image
      style={styles.walletConnectLogo}
-      source={require('../assets/WalletConnect-Icon-Blueberry.png')}
+      source={require("../assets/WalletConnect-Icon-Blueberry.png")}
    />
  );
 };
@ -41,7 +42,7 @@ const HomeScreen = () => {
      navigation.setOptions({
        // eslint-disable-next-line react/no-unstable-nested-components
        headerRight: () => (
-          <Button onPress={() => navigation.navigate('WalletConnect')}>
+          <Button onClick={() => navigation.navigate("WalletConnect")}>
            {<WCLogo />}
          </Button>
        ),
@ -58,7 +59,7 @@ const HomeScreen = () => {
  const [walletDialog, setWalletDialog] = useState<boolean>(false);
  const [resetWalletDialog, setResetWalletDialog] = useState<boolean>(false);
  const [isAccountsFetched, setIsAccountsFetched] = useState<boolean>(true);
-  const [phrase, setPhrase] = useState('');
+  const [phrase, setPhrase] = useState("");

  const hideWalletDialog = () => setWalletDialog(false);
  const hideResetDialog = () => setResetWalletDialog(false);
@ -99,10 +100,10 @@ const HomeScreen = () => {
    await resetWallet();
    const sessions = web3wallet!.getActiveSessions();

-    Object.keys(sessions).forEach(async sessionId => {
+    Object.keys(sessions).forEach(async (sessionId) => {
      await web3wallet!.disconnectSession({
        topic: sessionId,
-        reason: getSdkError('USER_DISCONNECTED'),
+        reason: getSdkError("USER_DISCONNECTED"),
      });
    });
    setActiveSessions({});
@ -114,7 +115,7 @@ const HomeScreen = () => {
    setCurrentIndex,
    setNetworksData,
    setSelectedNetwork,
-    web3wallet
+    web3wallet,
  ]);

  const updateNetwork = (networkData: NetworksDataState) => {
@ -128,46 +129,47 @@ const HomeScreen = () => {

  return (
    <View style={styles.appContainer}>
-      {!isAccountsFetched ? (
-        <View style={styles.spinnerContainer}>
-          <Text style={styles.LoadingText}>Loading...</Text>
-          <ActivityIndicator size="large" color="#0000ff" />
-        </View>
-      ) : isWalletCreated && selectedNetwork ? (
-        <>
-          <NetworkDropdown updateNetwork={updateNetwork} />
-          <View style={styles.accountComponent}>
-            <Accounts />
+      <Box sx={{ maxWidth: "752px", marginX: "auto" }}>
+        {!isAccountsFetched ? (
+          <View style={styles.spinnerContainer}>
+            <Text style={styles.LoadingText}>Loading...</Text>
+            <ActivityIndicator size="large" color="#0000ff" />
          </View>
-          <View style={styles.resetContainer}>
+        ) : isWalletCreated && selectedNetwork ? (
+          <>
+            <NetworkDropdown updateNetwork={updateNetwork} />
+            <View style={styles.accountComponent}>
+              <Accounts />
+            </View>
+            <Divider flexItem sx={{ my: 4 }} />
            <Button
-              style={styles.resetButton}
-              mode="contained"
-              buttonColor="#B82B0D"
-              onPress={() => {
+              variant="contained"
+              onClick={() => {
                setResetWalletDialog(true);
-              }}>
+              }}
+              color="error"
+            >
              Reset Wallet
            </Button>
-          </View>
-        </>
-      ) : (
-        <CreateWallet
-          isWalletCreating={isWalletCreating}
-          createWalletHandler={createWalletHandler}
+          </>
+        ) : (
+          <CreateWallet
+            isWalletCreating={isWalletCreating}
+            createWalletHandler={createWalletHandler}
+          />
+        )}
+        <DialogComponent
+          visible={walletDialog}
+          hideDialog={hideWalletDialog}
+          contentText={phrase}
        />
-      )}
-      <DialogComponent
-        visible={walletDialog}
-        hideDialog={hideWalletDialog}
-        contentText={phrase}
-      />
-      <ConfirmDialog
-        title="Reset wallet"
-        visible={resetWalletDialog}
-        hideDialog={hideResetDialog}
-        onConfirm={confirmResetWallet}
-      />
+        <ConfirmDialog
+          title="Reset wallet"
+          visible={resetWalletDialog}
+          hideDialog={hideResetDialog}
+          onConfirm={confirmResetWallet}
+        />
+      </Box>
    </View>
  );
 };
--- a/yarn.lock
+++ b/yarn.lock
@ -2125,6 +2125,33 @@
    "@ethersproject/properties" "^5.7.0"
    "@ethersproject/strings" "^5.7.0"

+"@floating-ui/core@^1.6.0":
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.7.tgz#7602367795a390ff0662efd1c7ae8ca74e75fb12"
+  integrity sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.7"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.10.tgz#b74c32f34a50336c86dcf1f1c845cf3a39e26d6f"
+  integrity sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.7"
+
+"@floating-ui/react-dom@^2.0.8":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz#cca58b6b04fc92b4c39288252e285e0422291fb0"
+  integrity sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/utils@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.7.tgz#d0ece53ce99ab5a8e37ebdfe5e32452a2bfc073e"
+  integrity sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==
+
 "@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
  version "9.3.0"
  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@ -2557,11 +2584,37 @@
    tweetnacl "^1.0.3"
    tweetnacl-util "^0.15.1"

+"@mui/base@5.0.0-beta.40":
+  version "5.0.0-beta.40"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2"
+  integrity sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@floating-ui/react-dom" "^2.0.8"
+    "@mui/types" "^7.2.14"
+    "@mui/utils" "^5.15.14"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/core-downloads-tracker@^5.16.4":
  version "5.16.4"
  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.4.tgz#a34de72acd7e81fdbcc7eeb07786205e90dda148"
  integrity sha512-rNdHXhclwjEZnK+//3SR43YRx0VtjdHnUFhMSGYmAMJve+KiwEja/41EYh8V3pZKqF2geKyfcFUenTfDTYUR4w==

+"@mui/lab@^5.0.0-alpha.173":
+  version "5.0.0-alpha.173"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.173.tgz#a0f9696d93a765b48d69a7da5aaca0affa510ae8"
+  integrity sha512-Gt5zopIWwxDgGy/MXcp6GueD84xFFugFai4hYiXY0zowJpTVnIrTQCQXV004Q7rejJ7aaCntX9hpPJqCrioshA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/base" "5.0.0-beta.40"
+    "@mui/system" "^5.16.5"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.5"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/material@^5.16.4":
  version "5.16.4"
  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.16.4.tgz#992d630637d9d38620e4937fb11d0a97965fdabf"
@ -2589,6 +2642,15 @@
    "@mui/utils" "^5.16.4"
    prop-types "^15.8.1"

+"@mui/private-theming@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.16.6.tgz#547671e7ae3f86b68d1289a0b90af04dfcc1c8c9"
+  integrity sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/utils" "^5.16.6"
+    prop-types "^15.8.1"
+
 "@mui/styled-engine@^5.16.4":
  version "5.16.4"
  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.16.4.tgz#a7a8c9079c307bab91ccd65ed5dd1496ddf2a3ab"
@ -2599,6 +2661,16 @@
    csstype "^3.1.3"
    prop-types "^15.8.1"

+"@mui/styled-engine@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.16.6.tgz#60110c106dd482dfdb7e2aa94fd6490a0a3f8852"
+  integrity sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
 "@mui/system@^5.16.4":
  version "5.16.4"
  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.16.4.tgz#c03f971ed273f0ad06c69c949c05e866ad211407"
@ -2613,11 +2685,37 @@
    csstype "^3.1.3"
    prop-types "^15.8.1"

-"@mui/types@^7.2.15":
+"@mui/system@^5.16.5":
+  version "5.16.7"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.16.7.tgz#4583ca5bf3b38942e02c15a1e622ba869ac51393"
+  integrity sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/private-theming" "^5.16.6"
+    "@mui/styled-engine" "^5.16.6"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.6"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.14", "@mui/types@^7.2.15":
  version "7.2.15"
  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.15.tgz#dadd232fe9a70be0d526630675dff3b110f30b53"
  integrity sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==

+"@mui/utils@^5.15.14", "@mui/utils@^5.16.5", "@mui/utils@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.16.6.tgz#905875bbc58d3dcc24531c3314a6807aba22a711"
+  integrity sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/types" "^7.2.15"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+
 "@mui/utils@^5.16.4":
  version "5.16.4"
  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.16.4.tgz#8e50e27a630e3d8eeb3e9d3bc31cbb0e4956f5fd"
@ -13225,16 +13323,7 @@ string-natural-compare@^3.0.1:
  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==

-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -13337,7 +13426,7 @@ stringify-object@^3.3.0:
    is-obj "^1.0.1"
    is-regexp "^1.0.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -13351,13 +13440,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
  dependencies:
    ansi-regex "^4.1.0"

-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@ -14654,7 +14736,7 @@ workbox-window@6.6.1:
    "@types/trusted-types" "^2.0.2"
    workbox-core "6.6.1"

-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@ -14672,15 +14754,6 @@ wrap-ansi@^6.2.0:
    string-width "^4.1.0"
    strip-ansi "^6.0.0"

-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
Author	SHA1	Message	Date
Cody Bender	02c267db5c	style: home screen first pass	2024-08-09 13:19:39 -04:00
Cody Bender	f035129537	style: home screen first pass	2024-08-09 13:19:21 -04:00