-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/browser-ui-update' into x-id-cards
- Loading branch information
Showing
23 changed files
with
399 additions
and
23 deletions.
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
14 changes: 10 additions & 4 deletions
14
packages/browser-wallet/src/popup/popupX/pages/ChangePasscode/ChangePasscode.scss
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 |
|---|---|---|
| @@ -1,7 +1,13 @@ | ||
| .change-passcode-x { | ||
| .divider { | ||
| display: block; | ||
| margin: rem(16px) 0 rem(24px) 0; | ||
| border-bottom: 1px solid rgba($color-white, 0.1); | ||
| .change-passcode-page__form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: rem(8px); | ||
|
|
||
| .divider { | ||
| display: block; | ||
| margin: rem(8px) 0 rem(16px) 0; | ||
| border-bottom: 1px solid rgba($color-white, 0.1); | ||
| } | ||
| } | ||
| } |
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
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
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
23 changes: 23 additions & 0 deletions
23
packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.scss
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,23 @@ | ||
| .fullscreen-notice { | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| z-index: 1000; | ||
|
|
||
| &__back { | ||
| border: none; | ||
| background: none; | ||
|
|
||
| &:hover { | ||
| background: none !important; | ||
| } | ||
| } | ||
|
|
||
| &__content { | ||
| padding: 0 rem(24px); | ||
| overflow: auto; | ||
| height: calc(100% - 7.4rem); | ||
| } | ||
| } |
106 changes: 106 additions & 0 deletions
106
...ages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.stories.tsx
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,106 @@ | ||
| /* eslint-disable react/function-component-definition, react/destructuring-assignment */ | ||
| import React from 'react'; | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
| import FullscreenNotice from './FullscreenNotice'; | ||
| import Page from '../Page'; | ||
| import Button from '../Button'; | ||
|
|
||
| export default { | ||
| title: 'X/Shared/FullscreenNotice', | ||
| component: FullscreenNotice, | ||
| beforeEach: () => { | ||
| const body = document.getElementsByTagName('body').item(0); | ||
| body?.classList.add('popup-x'); | ||
|
|
||
| return () => { | ||
| body?.classList.remove('popup-x'); | ||
| }; | ||
| }, | ||
| tags: ['!autodocs'], | ||
| } as Meta<typeof FullscreenNotice>; | ||
|
|
||
| type Story = StoryObj<typeof FullscreenNotice>; | ||
|
|
||
| export const Primary: Story = { | ||
| args: { | ||
| children: ( | ||
| <Page> | ||
| <Page.Top heading="Some title" /> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore | ||
| et dolore magna aliqua. Tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in. | ||
| Tristique sollicitudin nibh sit amet commodo nulla facilisi. Eget nullam non nisi est sit amet. At | ||
| lectus urna duis convallis. Consequat semper viverra nam libero. Gravida rutrum quisque non tellus | ||
| orci ac auctor. Mattis aliquam faucibus purus in massa tempor nec feugiat. Consectetur adipiscing | ||
| elit duis tristique sollicitudin. Sit amet est placerat in egestas erat imperdiet sed euismod. | ||
| Ornare massa eget egestas purus viverra. Viverra maecenas accumsan lacus vel facilisis. Malesuada | ||
| fames ac turpis egestas integer eget aliquet nibh. Non diam phasellus vestibulum lorem sed risus. | ||
| Tincidunt vitae semper quis lectus nulla. Cursus euismod quis viverra nibh cras pulvinar mattis nunc | ||
| sed. | ||
| </p> | ||
| <Page.Footer> | ||
| <Button.Main label="Some action" /> | ||
| </Page.Footer> | ||
| </Page> | ||
| ), | ||
| open: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const WallOfText: Story = { | ||
| args: { | ||
| children: ( | ||
| <> | ||
| <h1>Lorem ipsum!</h1> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore | ||
| et dolore magna aliqua. Tincidunt nunc pulvinar sapien et. Mattis aliquam faucibus purus in. | ||
| Tristique sollicitudin nibh sit amet commodo nulla facilisi. Eget nullam non nisi est sit amet. At | ||
| lectus urna duis convallis. Consequat semper viverra nam libero. Gravida rutrum quisque non tellus | ||
| orci ac auctor. Mattis aliquam faucibus purus in massa tempor nec feugiat. Consectetur adipiscing | ||
| elit duis tristique sollicitudin. Sit amet est placerat in egestas erat imperdiet sed euismod. | ||
| Ornare massa eget egestas purus viverra. Viverra maecenas accumsan lacus vel facilisis. Malesuada | ||
| fames ac turpis egestas integer eget aliquet nibh. Non diam phasellus vestibulum lorem sed risus. | ||
| Tincidunt vitae semper quis lectus nulla. Cursus euismod quis viverra nibh cras pulvinar mattis nunc | ||
| sed. | ||
| </p> | ||
| <p> | ||
| Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Vitae congue mauris rhoncus | ||
| aenean vel elit scelerisque mauris pellentesque. Nec feugiat in fermentum posuere urna. Lobortis | ||
| scelerisque fermentum dui faucibus in ornare quam. Sit amet est placerat in egestas erat imperdiet | ||
| sed euismod. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Arcu risus quis varius | ||
| quam. Ullamcorper a lacus vestibulum sed arcu non odio. Eu mi bibendum neque egestas. Duis at | ||
| consectetur lorem donec. | ||
| </p> | ||
| <p> | ||
| Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Dignissim sodales ut eu sem. Tellus | ||
| molestie nunc non blandit massa enim nec. Amet nulla facilisi morbi tempus iaculis urna. Metus | ||
| vulputate eu scelerisque felis imperdiet proin. Mauris ultrices eros in cursus turpis massa | ||
| tincidunt dui ut. Praesent tristique magna sit amet purus gravida quis blandit turpis. Turpis nunc | ||
| eget lorem dolor sed viverra ipsum. Et egestas quis ipsum suspendisse ultrices gravida. Egestas diam | ||
| in arcu cursus euismod quis. Egestas purus viverra accumsan in. Convallis convallis tellus id | ||
| interdum. Donec pretium vulputate sapien nec sagittis. Consectetur adipiscing elit ut aliquam purus | ||
| sit amet luctus venenatis. | ||
| </p> | ||
| <p> | ||
| Eget gravida cum sociis natoque penatibus et. Tincidunt eget nullam non nisi est. Amet mattis | ||
| vulputate enim nulla. Eget mi proin sed libero enim sed faucibus turpis in. Mattis ullamcorper velit | ||
| sed ullamcorper. Nunc vel risus commodo viverra. At tellus at urna condimentum mattis. At elementum | ||
| eu facilisis sed odio. Egestas dui id ornare arcu. Proin libero nunc consequat interdum varius. | ||
| Scelerisque eleifend donec pretium vulputate sapien nec. | ||
| </p> | ||
| <p> | ||
| Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Sapien eget mi proin sed | ||
| libero enim. Eget velit aliquet sagittis id consectetur. Est placerat in egestas erat. Diam maecenas | ||
| ultricies mi eget mauris pharetra et ultrices neque. Ut sem nulla pharetra diam sit amet nisl | ||
| suscipit adipiscing. Curabitur vitae nunc sed velit dignissim sodales ut eu sem. Adipiscing at in | ||
| tellus integer feugiat scelerisque varius. Ultrices mi tempus imperdiet nulla malesuada pellentesque | ||
| elit eget. Quisque sagittis purus sit amet volutpat. Dignissim diam quis enim lobortis scelerisque | ||
| fermentum dui. At lectus urna duis convallis convallis tellus id. Ultrices dui sapien eget mi proin | ||
| sed. | ||
| </p> | ||
| </> | ||
| ), | ||
| open: true, | ||
| }, | ||
| }; |
93 changes: 93 additions & 0 deletions
93
packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/FullscreenNotice.tsx
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,93 @@ | ||
| import React, { PropsWithChildren, useCallback, useEffect, useMemo } from 'react'; | ||
| import clsx from 'clsx'; | ||
| import { Portal, noOp } from 'wallet-common-helpers'; | ||
| import Back from '@assets/svgX/arrow-left.svg'; | ||
| import { Connection, Fullscreen } from '@popup/popupX/page-layouts/MainLayout/Header/components'; | ||
| import Button from '../Button'; | ||
|
|
||
| type HeaderProps = { | ||
| isScrolling: boolean; | ||
| onBack(): void; | ||
| }; | ||
|
|
||
| function Header({ isScrolling, onBack }: HeaderProps) { | ||
| return ( | ||
| <div className={clsx('main-header', isScrolling && 'scroll-border')}> | ||
| <div className="main-header__top"> | ||
| <Fullscreen /> | ||
| <Connection hideConnection={false} /> | ||
| </div> | ||
| <div className="main-header__bottom"> | ||
| <Button.Icon className="fullscreen-notice__back" icon={<Back />} onClick={() => onBack()} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const htmlElement = document.getElementsByTagName('html')[0]!; | ||
| const bodyElement = document.getElementsByTagName('body')[0]!; | ||
|
|
||
| type Props = { | ||
| /** Control whether notice is shown or not */ | ||
| open: boolean; | ||
| /** Invoked when the notice is closed */ | ||
| onClose(): void; | ||
| }; | ||
|
|
||
| /** | ||
| * @description | ||
| * Opens content in a modal overlay on top of the current wallet window. | ||
| * | ||
| * @example | ||
| * <FullscreenNotice open={isOpen} onClose={() => setIsOpen(false)}> | ||
| * <Page> | ||
| * <Page.Top heading="Notice title"/> | ||
| * This is the body | ||
| * <Page.Footer> | ||
| * <Button.Main>Some action</Button.Main> | ||
| * </Page.Footer> | ||
| * </Page> | ||
| * This content is shown in a modal! | ||
| * </FullscreenNotice> | ||
| */ | ||
| export default function FullscreenNotice({ open, onClose, children }: PropsWithChildren<Props>): JSX.Element | null { | ||
| const [scroll, setScroll] = React.useState(0); | ||
| const isScrolling = useMemo(() => scroll > 0, [!!scroll]); | ||
| const close = useCallback(() => { | ||
| onClose(); | ||
| }, [onClose]); | ||
|
|
||
| useEffect(() => { | ||
| if (open) { | ||
| htmlElement.classList.add('modal-open'); | ||
|
|
||
| // Prevent modal from stretching window height | ||
| htmlElement.style.height = bodyElement.style.height; | ||
|
|
||
| return () => { | ||
| htmlElement.classList.remove('modal-open'); | ||
| // Reset to initial value | ||
| htmlElement.style.height = '100%'; | ||
| }; | ||
| } | ||
| return noOp; | ||
| }, [open]); | ||
|
|
||
| if (!open) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Portal className="fullscreen-notice"> | ||
| <Header isScrolling={isScrolling} onBack={close} /> | ||
| <div | ||
| className="fullscreen-notice__content" | ||
| onScroll={(e) => { | ||
| setScroll(e.currentTarget.scrollTop); | ||
| }} | ||
| > | ||
| {children} | ||
| </div> | ||
| </Portal> | ||
| ); | ||
| } |
1 change: 1 addition & 0 deletions
1
packages/browser-wallet/src/popup/popupX/shared/FullscreenNotice/index.ts
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 @@ | ||
| export { default } from './FullscreenNotice'; |
Oops, something went wrong.