feat: new modal design & generate proof modal

client/src/components/GenerateProofModal/index.tsx

@@ -0,0 +1,33 @@
+import { ThemedText } from 'src/theme/components'
+import { Logo } from 'src/theme/components/icons'
+
+import { Column } from '../Flex'
+import Content from '../Modal/Content'
+import Overlay from '../Modal/Overlay'
+import Portal from '../Portal'
+
+function GenerateProofModalContent() {
+  return (
+    <Content title="Proof generation">
+      <Column gap={42} alignItems="center">
+        <Column gap={16}>
+          <Logo width={42} height={42} />
+
+          <ThemedText.HeadlineSmall>Snarkification of the elliptic curve...</ThemedText.HeadlineSmall>
+        </Column>
+
+        <ThemedText.BodySecondary fontSize={16}>This might take a while</ThemedText.BodySecondary>
+      </Column>
+    </Content>
+  )
+}
+
+export default function GenerateProofModal() {
+  return (
+    <Portal>
+      <GenerateProofModalContent />
+
+      <Overlay />
+    </Portal>
+  )
+}

client/src/components/Modal/Content.tsx

@@ -5,86 +5,71 @@ import { styled } from 'styled-components'
 import { Column, Row } from '../Flex'
 
 const StyledContent = styled.div`
-  border: 3px solid ${({ theme }) => theme.neutral1};
-  padding: 80px 32px;
-  background: ${({ theme }) => theme.bg1};
-  z-index: 1060;
   position: fixed;
-  width: 100%;
-  top: 0;
-  bottom: 0;
+  z-index: 1060;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   justify-content: center;
-
-  @media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.xs}px`}) {
-    left: 50%;
-    top: 50%;
-    width: 386px;
-    transform: translate(-50%, -50%);
-    padding: 32px;
-    bottom: unset;
-  }
+  width: 100%;
+  max-width: 480px;
+  padding: 16px;
+  background: ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.border};
+  border-radius: 20px;
 `
 
 const TitleContainer = styled(Row)`
-  position: absolute;
   width: 100%;
-  padding: 0 4px;
-  text-align: center;
-  top: 16px;
-
-  & > div {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 100%;
-  }
+`
 
-  @media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.xs}px`}) {
-    top: -32px;
-    text-align: left;
-  }
+const Title = styled(ThemedText.HeadlineSmall)`
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 `
 
-const CloseContainer = styled.div`
-  position: absolute;
-  color: ${({ theme }) => theme.neutral1};
+const CloseContainer = styled.button`
   width: 28px;
   height: 28px;
   padding: 4px;
+  background: transparent;
+  color: ${({ theme }) => theme.neutral1};
+  border: none;
   cursor: pointer;
-  border: 3px solid ${({ theme }) => theme.neutral1};
-  top: -3px;
-  right: -3px;
+  transition: color 0.15s linear;
 
   & > svg {
     display: block;
   }
 
   &:hover {
-    background: ${({ theme }) => theme.neutral1};
-    color: ${({ theme }) => theme.bg1};
+    color: ${({ theme }) => theme.neutral2};
   }
 `
 
 interface ContentProps {
   children: React.ReactNode
   title: string
-  close: () => void
+  close?: () => void
 }
 
 export default function Content({ children, title, close }: ContentProps) {
   return (
     <StyledContent>
       <Column gap={32}>
         <TitleContainer>
-          <ThemedText.HeadlineSmall>{title}</ThemedText.HeadlineSmall>
-        </TitleContainer>
+          <Title>{title}</Title>
 
-        <CloseContainer onClick={close}>
-          <Icons.Close />
-        </CloseContainer>
+          {close && (
+            <CloseContainer onClick={close}>
+              <Icons.Close />
+            </CloseContainer>
+          )}
+        </TitleContainer>
 
         {children}
       </Column>

client/src/components/Modal/Overlay.tsx

@@ -15,7 +15,7 @@ const StyledOverlay = styled.div`
 `
 
 interface OverlayProps {
-  onClick: () => void
+  onClick?: () => void
 }
 
 export default function Overlay({ onClick }: OverlayProps) {

client/src/pages/Register.tsx

@@ -1,6 +1,7 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { PrimaryButton } from 'src/components/Button'
 import { Column, Row } from 'src/components/Flex'
+import GenerateProofModal from 'src/components/GenerateProofModal'
 import { ThemedText } from 'src/theme/components'
 import { LockClosed, LockOpen } from 'src/theme/components/icons'
 import { styled, useTheme } from 'styled-components'
@@ -55,8 +56,18 @@ const ProofCard = styled(Row)`
 export default function RegisterPage() {
   const theme = useTheme()
   const [revtag, setRevtag] = useState('')
+  const [generatingProof, setGeneratingProof] = useState(false)
   const [proven, setProven] = useState(false)
 
+  useEffect(() => {
+    if (generatingProof) {
+      setTimeout(() => {
+        setProven(true)
+        setGeneratingProof(false)
+      }, 5_000)
+    }
+  }, [generatingProof])
+
   return (
     <Layout>
       <Content gap={12}>
@@ -101,12 +112,14 @@ export default function RegisterPage() {
               </ProofCard>
             </ContentCard>
 
-            <PrimaryButton onClick={() => setProven(true)}>
+            <PrimaryButton onClick={() => !proven && setGeneratingProof(true)}>
               <ThemedText.Title>{proven ? 'Complete registration' : 'Generate proof'}</ThemedText.Title>
             </PrimaryButton>
           </>
         )}
       </Content>
+
+      {generatingProof && <GenerateProofModal />}
     </Layout>
   )
 }