Add About screen, list of recently opened vaults, category filtering

packages/web/src/components/Modal.tsx

@@ -25,7 +25,6 @@ const ModalContainer = styled.div`
   background: var(--page-background);
   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
   border-radius: 5px;
-  max-width: 500px;
   margin: 0 auto;
 `
 const ModalTitle = styled.div`
@@ -41,8 +40,9 @@ const ModalContent = styled.div`
 export const Modal: React.FC<{
   show: boolean
   title: string
+  maxWidth?: number
   onClose(): void
-}> = ({ show, children, title, onClose }) => {
+}> = ({ show, children, title, maxWidth = 700, onClose }) => {
   const onBackgroundClick = useCallback(
     e => {
       if (e.currentTarget === e.target) {
@@ -61,7 +61,7 @@ export const Modal: React.FC<{
     <>
       <ModalBackground />
       <ModalBackground2 onClick={onBackgroundClick}>
-        <ModalContainer>
+        <ModalContainer style={{ maxWidth }}>
           <ModalTitle>{title}</ModalTitle>
           <ModalContent>{children}</ModalContent>
         </ModalContainer>