[OMN-189] : Settings View - Emails #286

gitstart-omnivore · 2022-03-22T02:15:08Z

Spec Checklist

Are Api endpoints ready and properly documented ?
Does the figma design fit the ticket description ?
Added video describing your plan of action ?

Description

This is part of the base issue Settings View

Omnivore allows users to create addresses that receive email and add it to a user's inbox. A user can create multiple email addresses. There is a temporary version of this page available at settings/emails.

A new design for this page has been created here:

https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=444%3A33319

Notes
The design for this view is slightly off. Visually it is correct, but the user experience is inaccurate. Email addresses are immutable. They can be created, and they can be deleted, but they can not be modified. Also, they are created by Omnivore's backend, so there should be no user input on this page.

The confirmation codes are created when a GMail address is linked with an Omnivore Inbox address. So in testing they will normally not be set.

[ ] List emails

[ ] Display confirmation code if set on an email

[ ] Create an email

[ ] Delete an email

[ ] Copy an email address

[ ] Copy a confirmation code

[ ] Light and dark mode support

[ ] Desktop and mobile support

Loom

loom video

House Keeping

Added video describing your plan of action ?
Added Loom video ?
Is Deployment Link passing ?
Have you assinged PR to yourself ?
Is Github action passing ?
Updated the appropriate tag ?

Ticket link (if applicable)

How has this been tested?

Types of changes

Bug fix
New feature
Refactor
Others

Checklist:

I have test my code on different browsers and devices to make sure it is cross-browser compatible (both desktop and mobile).
I have confirmed the payload for integrated API matches params on API docs
I have confirmed design matches Spec specified on Figma.

Remarks

I added a new package to achieve this task.
I have updated package.json

vercel · 2022-03-22T02:15:12Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

omnivore-demo – ./

🔍 Inspect: https://vercel.com/omnivore/omnivore-demo/2ELiLTyxCMGXdy83rGTg5sKW93rr
✅ Preview: https://omnivore-demo-git-omn-189-omnivore.vercel.app

omnivore-prod – ./

🔍 Inspect: https://vercel.com/omnivore/omnivore-prod/HShE2WHLDEQss2CMgdHbPTjStYaU
✅ Preview: https://omnivore-prod-git-omn-189-omnivore.vercel.app

jacksonh · 2022-03-22T04:11:55Z

Deploying this one to the demo environment.

jacksonh · 2022-03-22T04:34:46Z

On mobile can we add padding above the table. Its a little too tight to the top of the page

Here's the designed version:

and here is the actual:

jacksonh · 2022-03-22T04:36:49Z

On mobile because there is no header, we need to round the top corners of the first item. You can see in our version we have straight lines on the top row on mobile.

jacksonh · 2022-03-22T04:40:29Z

On mobile can we add a little more padding to the two right side buttons. I know that will truncate the address but I think its a little too tight without.

jacksonh · 2022-03-22T04:42:54Z

On mobile the bottom button is too tight on the bottom of the page.

jacksonh · 2022-03-22T04:44:10Z

packages/web/components/elements/images/MoreOptionsIcon.tsx

@@ -7,48 +9,9 @@ type MoreOptionsIconProps = {
 }

 export function MoreOptionsIcon(props: MoreOptionsIconProps): JSX.Element {
-  const dots =


jacksonh · 2022-03-22T04:44:31Z

packages/web/package.json

@@ -23,6 +23,7 @@
    "@radix-ui/react-id": "^0.1.1",
    "@radix-ui/react-popover": "^0.1.1",
    "@radix-ui/react-separator": "^0.1.0",
+    "@radix-ui/react-tooltip": "^0.1.7",


jacksonh · 2022-03-22T04:44:55Z

packages/web/pages/_app.tsx

@@ -48,7 +49,9 @@ function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
        defaultLocale="en"
        messages={englishTranslations}
      >
-        <Component {...pageProps} />
+        <TooltipProvider delayDuration={200}>


Ah this is handy. Should be able to use these a lot more now.

jacksonh · 2022-03-22T04:48:06Z

On desktop the InfoIcon should link to this page when tapped: https://omnivore.app/help/newsletters

jacksonh

added some comments regarding visual issues, mostly on mobile

gitstart-omnivore · 2022-03-22T22:10:30Z

@jacksonh we've effected the requested review changes, please take a look

jacksonh · 2022-03-22T22:31:29Z

@jacksonh we've effected the requested review changes, please take a look

Thanks, taking a look.

jacksonh · 2022-03-22T22:37:28Z

Deploying this to the demo environment

gitstart-omnivore · 2022-03-22T23:38:41Z

This should just be the relative URL /help/newsletters

Fixed

jacksonh · 2022-03-23T04:23:58Z

This looks good. I'll merge/deploy it in the morning.

jacksonh · 2022-03-23T16:44:02Z

There's one last small issue here. On mobile, if you have a single email, you don't get rounded corners, because this loop here doesn't account for the case where i ===0 and isLastChild is true:

                  '@mdDown': {
                    borderRadius: i === 0 ? '5px 5px 0 0 ' : '',
                  },
                  borderRadius: isLastChild ? '0 0 5px 5px' : '',

gitstart-omnivore · 2022-03-23T21:26:37Z

There's one last small issue here. On mobile, if you have a single email, you don't get rounded corners, because this loop here doesn't account for the case where i ===0 and isLastChild is true:
                  '@mdDown': {
                    borderRadius: i === 0 ? '5px 5px 0 0 ' : '',
                  },
                  borderRadius: isLastChild ? '0 0 5px 5px' : '',

Fixed

jacksonh · 2022-03-23T22:19:42Z

nice work.

[OMN-189] : Settings View - Emails

1f51710

gitstart-omnivore requested review from satindar, sywhb and jacksonh as code owners March 22, 2022 02:15

vercel bot deployed to Preview – omnivore-demo March 22, 2022 02:15 View deployment

vercel bot deployed to Preview – omnivore-prod March 22, 2022 02:15 View deployment

gitstart-omnivore self-assigned this Mar 22, 2022

gitstart-omnivore added code/ready for review GitStart labels Mar 22, 2022

vercel bot deployed to Production – omnivore-demo March 22, 2022 04:12 View deployment

jacksonh reviewed Mar 22, 2022

View reviewed changes

jacksonh requested changes Mar 22, 2022

View reviewed changes

gitstart added 2 commits March 22, 2022 22:06

Merge commit '42e2beb53d89b333611f215e63d366034905bba6' into OMN-189

2593596

Effected review corrections

8fbb976

vercel bot deployed to Preview – omnivore-prod March 22, 2022 22:07 View deployment

vercel bot deployed to Preview – omnivore-demo March 22, 2022 22:07 View deployment

vercel bot deployed to Production – omnivore-demo March 22, 2022 22:37 View deployment

vercel bot deployed to Production – omnivore-demo March 22, 2022 22:44 View deployment

updated full url to relative url for learn more link

a56314c

vercel bot deployed to Preview – omnivore-prod March 22, 2022 23:37 View deployment

vercel bot deployed to Preview – omnivore-demo March 22, 2022 23:37 View deployment

Remove uneeded coma

f92c4a3

vercel bot deployed to Preview – omnivore-demo March 23, 2022 16:18 View deployment

vercel bot deployed to Preview – omnivore-prod March 23, 2022 16:18 View deployment

vercel bot deployed to Production – omnivore-demo March 23, 2022 16:35 View deployment

gitstart added 2 commits March 23, 2022 21:15

Merge commit '6e36bb271f595d6dfe02ddee320980d433917d35' into OMN-189

1ff66da

fix borderRadius for single email

77b97c4

vercel bot deployed to Preview – omnivore-prod March 23, 2022 21:16 View deployment

vercel bot deployed to Preview – omnivore-demo March 23, 2022 21:16 View deployment

gitstart added 2 commits March 23, 2022 21:24

Merge commit '54e4c04c31457c6d320be50fc65180deb2b75f98' into OMN-189

f76abe0

remove unneeded change

46b2dc1

vercel bot deployed to Preview – omnivore-prod March 23, 2022 21:25 View deployment

vercel bot deployed to Preview – omnivore-demo March 23, 2022 21:25 View deployment

jacksonh approved these changes Mar 23, 2022

View reviewed changes

jacksonh merged commit 13d8039 into main Mar 23, 2022

jacksonh deleted the OMN-189 branch March 23, 2022 22:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[OMN-189] : Settings View - Emails #286

[OMN-189] : Settings View - Emails #286

gitstart-omnivore commented Mar 22, 2022 •

edited

vercel bot commented Mar 22, 2022 •

edited

jacksonh commented Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh Mar 22, 2022

jacksonh Mar 22, 2022

jacksonh Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh left a comment

gitstart-omnivore commented Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh commented Mar 22, 2022

gitstart-omnivore commented Mar 22, 2022

jacksonh commented Mar 23, 2022

jacksonh commented Mar 23, 2022

gitstart-omnivore commented Mar 23, 2022

jacksonh commented Mar 23, 2022

[OMN-189] : Settings View - Emails #286

[OMN-189] : Settings View - Emails #286

Conversation

gitstart-omnivore commented Mar 22, 2022 • edited

Spec Checklist

Description

Loom

House Keeping

Ticket link (if applicable)

How has this been tested?

Types of changes

Checklist:

Remarks

vercel bot commented Mar 22, 2022 • edited

omnivore-demo – ./

omnivore-prod – ./

jacksonh commented Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh Mar 22, 2022

Choose a reason for hiding this comment

jacksonh Mar 22, 2022

Choose a reason for hiding this comment

jacksonh Mar 22, 2022

Choose a reason for hiding this comment

jacksonh commented Mar 22, 2022

jacksonh left a comment

Choose a reason for hiding this comment

gitstart-omnivore commented Mar 22, 2022

jacksonh commented Mar 22, 2022

jacksonh commented Mar 22, 2022

gitstart-omnivore commented Mar 22, 2022

jacksonh commented Mar 23, 2022

jacksonh commented Mar 23, 2022

gitstart-omnivore commented Mar 23, 2022

jacksonh commented Mar 23, 2022

gitstart-omnivore commented Mar 22, 2022 •

edited

vercel bot commented Mar 22, 2022 •

edited