Email App Revamp #31
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { FC } from 'react'; | ||
| import { Box, PushLogo, Text } from 'shared-components'; | ||
| import { css } from 'styled-components'; | ||
| import { | ||
| TogglePushWalletButton, | ||
| usePushWalletContext, | ||
| } from '@pushprotocol/pushchain-ui-kit'; | ||
|
|
||
| const Header: FC = () => { | ||
|
There was a problem hiding this comment. @riyanshu-patro The header component should be a fixed component and should not scroll with the viewport when user tries to scroll down. |
||
| const { account } = usePushWalletContext(); | ||
|
|
||
| return ( | ||
| <Box | ||
| width="100%" | ||
| display="flex" | ||
| padding="spacing-xs spacing-xs" | ||
| alignItems="center" | ||
| justifyContent="space-between" | ||
| css={css` | ||
| border-bottom: 1px solid var(--stroke-secondary); | ||
| `} | ||
| > | ||
| <Box display="flex" alignItems="center" gap="spacing-xs"> | ||
| <Box display="flex" alignItems="center" gap="spacing-xxs"> | ||
| <PushLogo height={40} /> | ||
| <Text variant="h2-bold">Push</Text> | ||
|
There was a problem hiding this comment. 
Maybe remove the Push text for now in the mobile view,=, |
||
| </Box> | ||
| <Text | ||
| variant="h4-semibold" | ||
| css={css` | ||
| display: block; | ||
| @media (max-width: 768px) { | ||
| display: none; | ||
| } | ||
| `} | ||
|
There was a problem hiding this comment. not the correct way. Wrap text inside the box component and use the box display property to implement it. |
||
| > | ||
| </Text> | ||
| </Box> | ||
| <Box>{account && <TogglePushWalletButton account={account} />}</Box> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export { Header }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| import { Back, Box, PushLogo, Text } from 'shared-components'; | ||
| import { Card } from './ui/card'; | ||
| import { css } from 'styled-components'; | ||
|
There was a problem hiding this comment.
|
||
|
|
||
| interface EmailViewerProps { | ||
| handleBack: () => void; | ||
| } | ||
|
|
||
| const DummyEmail: React.FC<EmailViewerProps> = ({ handleBack }) => { | ||
| return ( | ||
| <Card className="w-full h-fit flex-1 py-6 px-4 md:px-8 gap-6"> | ||
| <Box cursor="pointer" onClick={handleBack}> | ||
| <Back size={24} /> | ||
| </Box> | ||
| <Box display="flex" justifyContent="space-between" alignSelf="stretch"> | ||
| <Box | ||
| display="flex" | ||
| flexDirection="column" | ||
| gap="spacing-xs" | ||
| width="100%" | ||
| > | ||
| <Box | ||
| display="flex" | ||
| justifyContent="space-between" | ||
| alignItems="center" | ||
| width="100%" | ||
| css={css` | ||
| padding-left: 48px; | ||
| @media (max-width: 768px) { | ||
| padding-left: 0px; | ||
| } | ||
| `} | ||
| > | ||
| <Text variant="h4-semibold">GM! Web3 Email</Text> | ||
| <Box> | ||
| <Text variant="bes-semibold">now</Text> | ||
| </Box> | ||
| </Box> | ||
| <Box display="flex" gap="spacing-xxs"> | ||
| <PushLogo height={36} width={40} /> | ||
| <Box display="flex" flexDirection="column" gap="spacing-xxxs"> | ||
| <Text variant="bes-semibold">Push Fam</Text> | ||
| <Text variant="bes-semibold" color="text-tertiary"> | ||
| To: | ||
| </Text> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| <Box | ||
| display="flex" | ||
| flexDirection="column" | ||
| maxWidth="600px" | ||
| alignSelf="center" | ||
| gap="spacing-md" | ||
| css={css` | ||
| padding: 0px 48px; | ||
| @media (max-width: 768px) { | ||
| padding: 0px; | ||
| } | ||
| `} | ||
| > | ||
| <img src="/DummyHeader.png" /> | ||
| <Text variant="bs-regular"> | ||
| Hello Degen, <br /> | ||
| Welcome to the future of email, where web3 meets seamless unified | ||
| across all chains! With this app, you can easily connect with your | ||
| fellow Solana, Ethereum, Polygon, Optimism and other blockchain users. | ||
| </Text> | ||
| <Box | ||
| display="flex" | ||
| gap="spacing-lg" | ||
| alignItems="flex-start" | ||
| css={css` | ||
| flex-direction: row; | ||
| flex: 1; | ||
| @media (max-width: 768px) { | ||
| flex-direction: column; | ||
| } | ||
| `} | ||
| > | ||
| <Box | ||
| display="flex" | ||
| flexDirection="column" | ||
| gap="spacing-xxs" | ||
| alignItems="flex-start" | ||
| css={css` | ||
| flex: 1; | ||
| @media (max-width: 768px) { | ||
| flex: none; | ||
| } | ||
| `} | ||
| > | ||
| <img src="/DummyEmail.png" height={75} width={75} /> | ||
| <Box> | ||
| <Text variant="bm-bold">About Push Email</Text> | ||
| <Text variant="bs-regular"> | ||
| Push Email is a sample Devnet app designed to showcase the power | ||
| of a shared state email app. | ||
| </Text> | ||
| <br /> | ||
| <Text variant="bs-semibold"> | ||
| Please note that in this version, emails sent and received are | ||
| not encrypted. | ||
| </Text> | ||
| </Box> | ||
| </Box> | ||
| <Box | ||
| display="flex" | ||
| flexDirection="column" | ||
| gap="spacing-xxs" | ||
| alignItems="flex-start" | ||
| css={css` | ||
| flex: 1; | ||
| @media (max-width: 768px) { | ||
| flex: none; | ||
| } | ||
| `} | ||
| > | ||
| <img src="/DummyDiscord.png" height={75} width={75} /> | ||
| <Box> | ||
| <Text variant="bm-bold">No Frens? No Problem!</Text> | ||
| <Text variant="bs-regular"> | ||
| Feeling too busy for frens? Don’t worry! We’ve got your back. | ||
| Test out the email experience by chatting with our sassy email | ||
| bot. | ||
| </Text> | ||
| <br /> | ||
| <Text variant="bs-semibold"> | ||
| It’s quick, fun, and always ready to banter. | ||
| </Text> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| <Box display="flex" flexDirection="column" alignItems="flex-start"> | ||
| <Text variant="bs-regular">Happy emailing,</Text> | ||
| <Text variant="bs-bold">Push Fam</Text> | ||
| </Box> | ||
| </Box> | ||
| </Card> | ||
| ); | ||
| }; | ||
|
|
||
| export default DummyEmail; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@riyanshu-patro you could uninstall the styled components from here and use the one from shared-components.