From 610336fe8374b30c0b7de7b121abb4375ed039f6 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Wed, 20 Sep 2023 16:47:15 +0800 Subject: [PATCH 01/18] feat(DialogBeta): init --- src/components/DialogBeta/Buttons.tsx | 128 +++++++++++ src/components/DialogBeta/Content/index.tsx | 38 ++++ .../DialogBeta/Content/styles.module.css | 45 ++++ src/components/DialogBeta/Footer/index.tsx | 85 +++++++ .../DialogBeta/Footer/styles.module.css | 41 ++++ src/components/DialogBeta/Handle.tsx | 25 +++ src/components/DialogBeta/Header/index.tsx | 67 ++++++ .../DialogBeta/Header/styles.module.css | 43 ++++ src/components/DialogBeta/Lazy/index.tsx | 22 ++ src/components/DialogBeta/Message/index.tsx | 46 ++++ .../DialogBeta/Message/styles.module.css | 71 ++++++ src/components/DialogBeta/Overlay.tsx | 7 + src/components/DialogBeta/index.tsx | 212 ++++++++++++++++++ src/components/DialogBeta/styles.module.css | 66 ++++++ src/components/index.tsx | 1 + 15 files changed, 897 insertions(+) create mode 100644 src/components/DialogBeta/Buttons.tsx create mode 100644 src/components/DialogBeta/Content/index.tsx create mode 100644 src/components/DialogBeta/Content/styles.module.css create mode 100644 src/components/DialogBeta/Footer/index.tsx create mode 100644 src/components/DialogBeta/Footer/styles.module.css create mode 100644 src/components/DialogBeta/Handle.tsx create mode 100644 src/components/DialogBeta/Header/index.tsx create mode 100644 src/components/DialogBeta/Header/styles.module.css create mode 100644 src/components/DialogBeta/Lazy/index.tsx create mode 100644 src/components/DialogBeta/Message/index.tsx create mode 100644 src/components/DialogBeta/Message/styles.module.css create mode 100644 src/components/DialogBeta/Overlay.tsx create mode 100644 src/components/DialogBeta/index.tsx create mode 100644 src/components/DialogBeta/styles.module.css diff --git a/src/components/DialogBeta/Buttons.tsx b/src/components/DialogBeta/Buttons.tsx new file mode 100644 index 0000000000..88f13a26a5 --- /dev/null +++ b/src/components/DialogBeta/Buttons.tsx @@ -0,0 +1,128 @@ +import { forwardRef } from 'react' + +import { TextId } from '~/common/enums' +import { + Button, + ButtonProps, + IconSpinner16, + TextIcon, + Translate, +} from '~/components' + +export type DialogTextButtonProps = { + text: TextId | React.ReactNode + color?: 'greyDarker' | 'green' | 'red' + loading?: boolean +} & ButtonProps + +export const TextButton: React.FC = ({ + text, + color = 'green', + loading, + ...restProps +}) => { + let buttonProps: ButtonProps = restProps + + switch (color) { + case 'greyDarker': + buttonProps = { + ...buttonProps, + textColor: 'greyDarker', + textActiveColor: 'black', + } + break + case 'green': + buttonProps = { + ...buttonProps, + textColor: 'green', + textActiveColor: 'greenDark', + } + break + case 'red': + buttonProps = { + ...buttonProps, + textColor: 'red', + textActiveColor: 'redDark', + } + break + } + + return ( + + ) +} + +export type DialogRoundedButtonProps = { + text: TextId | React.ReactNode + color?: 'greyDarker' | 'green' | 'red' + icon?: React.ReactNode + loading?: boolean +} & ButtonProps + +export const RoundedButton: React.FC< + React.PropsWithChildren +> = forwardRef( + ({ text, color = 'green', loading, icon, disabled, ...restProps }, ref) => { + let buttonProps: ButtonProps = restProps + + switch (color) { + case 'greyDarker': + buttonProps = { + ...buttonProps, + borderColor: 'greyDarker', + textColor: 'greyDarker', + } + break + case 'green': + buttonProps = { + ...buttonProps, + borderColor: 'green', + textColor: 'green', + } + break + case 'red': + buttonProps = { ...buttonProps, borderColor: 'red', textColor: 'red' } + break + } + + return ( + + ) + } +) + +RoundedButton.displayName = 'RoundedButton' diff --git a/src/components/DialogBeta/Content/index.tsx b/src/components/DialogBeta/Content/index.tsx new file mode 100644 index 0000000000..d028319df4 --- /dev/null +++ b/src/components/DialogBeta/Content/index.tsx @@ -0,0 +1,38 @@ +import classNames from 'classnames' + +import Message from '../Message' +import styles from './styles.module.css' + +interface DialogContentProps { + noSpacing?: boolean + smExtraSpacing?: boolean + fixedHeight?: boolean + noSpacingBottom?: boolean + noMaxHeight?: boolean +} + +const DialogContent: React.FC> & { + Message: typeof Message +} = ({ + noSpacing, + smExtraSpacing = true, + noSpacingBottom, + noMaxHeight, + fixedHeight, + children, +}) => { + const contentClasses = classNames({ + [styles.content]: true, + [styles.spacing]: !noSpacing, + [styles.smExtraSpacing]: smExtraSpacing, + [styles.fixedHeight]: !!fixedHeight, + [styles.noSpacingBottom]: !!noSpacingBottom, + [styles.noMaxHeight]: !!noMaxHeight, + }) + + return
{children}
+} + +DialogContent.Message = Message + +export default DialogContent diff --git a/src/components/DialogBeta/Content/styles.module.css b/src/components/DialogBeta/Content/styles.module.css new file mode 100644 index 0000000000..e4b49a410e --- /dev/null +++ b/src/components/DialogBeta/Content/styles.module.css @@ -0,0 +1,45 @@ +.content { + display: flex; + flex-direction: column; + flex-shrink: 1; + max-height: calc(70vh - 4.25rem); /* 4.25rem is the height of header */ + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + + &.fixedHeight { + height: calc(70vh - 4.25rem); /* 4.25rem is the height of header */ + + @media (--sm-up) { + height: min(30rem, 64vh); + } + } + + @media (--sm-up) { + max-height: min(30rem, 64vh); + } +} + +.smExtraSpacing { + padding-bottom: var(--spacing-xx-loose); + + @media (--sm-up) { + padding-bottom: 0; + } +} + +.spacing { + padding: var(--spacing-base); + + @media (--sm-up) { + padding: 0 var(--spacing-base-loose); + } +} + +.noSpacingBottom { + padding-bottom: 0; +} + +.noMaxHeight { + max-height: none; +} diff --git a/src/components/DialogBeta/Footer/index.tsx b/src/components/DialogBeta/Footer/index.tsx new file mode 100644 index 0000000000..7ebd8f0f2f --- /dev/null +++ b/src/components/DialogBeta/Footer/index.tsx @@ -0,0 +1,85 @@ +import classNames from 'classnames' +import React from 'react' +import { FormattedMessage } from 'react-intl' + +import { Media } from '~/components' + +import { RoundedButton, TextButton } from '../Buttons' +import styles from './styles.module.css' + +type FooterProps = { + btns?: React.ReactNode + smUpBtns?: React.ReactNode + // smUpContentNoSpacingBottom?: boolean + // smUpSpaceBetween?: boolean + closeText?: React.ReactNode + closeDialog?: () => any +} + +const Footer: React.FC = ({ + btns, + smUpBtns, + // smUpContentNoSpacingBottom = false, + // smUpSpaceBetween = false, + closeText, + closeDialog, +}) => { + if (!btns && !smUpBtns && !closeDialog) { + return null + } + + const text = closeText || + + const footerClasses = classNames({ + [styles.footer]: true, + }) + const hasBtns = btns || closeDialog + const hasSmUpBtns = smUpBtns || closeDialog + + const smUpContentClasses = classNames({ + [styles.smUpContent]: true, + // [styles.smUpSpaceBetween]: !!smUpSpaceBetween, + // [styles.smUpContentNoSpacingBottom]: !!smUpContentNoSpacingBottom, + }) + + return ( +
+ + {hasBtns && ( +
+ {btns} + {closeDialog && ( + + )} +
+ )} + + {/* show bottom spacing for dialog if there is no buttons, + * otherwise, the footer will be too close to the content + */} + {/* {!hasBtns && } */} + + + {hasSmUpBtns && ( + +
+ {closeDialog && ( + + )} + {smUpBtns} +
+ + )} +
+ ) +} + +export default Footer diff --git a/src/components/DialogBeta/Footer/styles.module.css b/src/components/DialogBeta/Footer/styles.module.css new file mode 100644 index 0000000000..a41d159d22 --- /dev/null +++ b/src/components/DialogBeta/Footer/styles.module.css @@ -0,0 +1,41 @@ +.footer { + position: relative; +} + +.content { + @mixin flex-center-space-between; + @mixin safe-area-botttom; + + flex-direction: column; + flex-shrink: 0; + padding: var(--spacing-base-loose) var(--spacing-base) 0; + + & > * { + flex: 1; + width: 100%; + } + + & > * + * { + margin-top: var(--spacing-base); + } +} + +.smUpContent { + @mixin flex-center-end; + + padding: 0 var(--spacing-base-loose) 0; + margin: var(--spacing-base) 0 var(--spacing-base-loose); + text-align: right; + + & > * + * { + margin-left: var(--spacing-x-loose); + } +} + +/* .smUpContentNoSpacingBottom { + margin-bottom: 0; +} + +.smUpSpaceBetween { + @mixin flex-center-space-between; +} */ diff --git a/src/components/DialogBeta/Handle.tsx b/src/components/DialogBeta/Handle.tsx new file mode 100644 index 0000000000..0f24069538 --- /dev/null +++ b/src/components/DialogBeta/Handle.tsx @@ -0,0 +1,25 @@ +import { useIntl } from 'react-intl' + +import styles from './styles.module.css' + +interface HandleProps { + closeDialog: () => void +} + +const Handle: React.FC = ({ closeDialog, ...props }) => { + const intl = useIntl() + + return ( + + ) +} + +export default Handle diff --git a/src/components/DialogBeta/Header/index.tsx b/src/components/DialogBeta/Header/index.tsx new file mode 100644 index 0000000000..47e5f82261 --- /dev/null +++ b/src/components/DialogBeta/Header/index.tsx @@ -0,0 +1,67 @@ +import { VisuallyHidden } from '@reach/visually-hidden' +import { FormattedMessage } from 'react-intl' + +import { TextId } from '~/common/enums' +import { Media, Translate } from '~/components' + +import { TextButton } from '../Buttons' +import styles from './styles.module.css' + +export interface HeaderProps { + title: TextId | React.ReactNode + hasSmUpTitle?: boolean + + leftBtn?: React.ReactNode + rightBtn?: React.ReactNode | string + + closeText?: React.ReactNode + closeDialog?: () => any +} + +const Title = ({ title }: Pick) => ( +

+ {typeof title === 'string' ? : title} +

+) + +const Header: React.FC = ({ + title, + hasSmUpTitle = true, + leftBtn, + rightBtn, + closeText, + closeDialog, +}) => { + const text = closeText || + + return ( + <> + +
+ + {leftBtn && <section className={styles.left}>{leftBtn}</section>} + {!leftBtn && closeDialog && ( + <section className={styles.left}> + <TextButton text={text} onClick={closeDialog} /> + </section> + )} + <section className={styles.right}>{rightBtn}</section> + </header> + </Media> + + <Media greaterThan="sm"> + {hasSmUpTitle ? ( + <header className={styles.smUpheader}> + <Title title={title} /> + </header> + ) : ( + <VisuallyHidden> + <Title title={title} /> + </VisuallyHidden> + )} + </Media> + </> + ) +} + +export default Header diff --git a/src/components/DialogBeta/Header/styles.module.css b/src/components/DialogBeta/Header/styles.module.css new file mode 100644 index 0000000000..0b9efe6d1a --- /dev/null +++ b/src/components/DialogBeta/Header/styles.module.css @@ -0,0 +1,43 @@ +.header { + @mixin flex-center-space-between; + + position: relative; + flex-shrink: 0; + padding: var(--spacing-x-loose) var(--spacing-base) var(--spacing-x-tight); + background: var(--color-white); + border-radius: var(--spacing-x-tight) var(--spacing-x-tight) 0 0; + + & .title { + @mixin flex-center-all; + + position: absolute; + inset: 0; + padding: var(--spacing-x-loose) 0 var(--spacing-x-tight); + font-size: var(--font-size-lg); + font-weight: var(--font-weight-medium); + line-height: 1.75rem; + } + + & .left, + & .right { + display: inline-flex; + min-height: 1.75rem; + + & > * { + line-height: 1.5rem; + } + } +} + +.smUpheader { + @mixin flex-center-space-between; + + padding: 0 var(--spacing-base-loose); + margin: var(--spacing-base-loose) 0 var(--spacing-base); + + & .title { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-medium); + line-height: 1.875rem; + } +} diff --git a/src/components/DialogBeta/Lazy/index.tsx b/src/components/DialogBeta/Lazy/index.tsx new file mode 100644 index 0000000000..4a8479b52a --- /dev/null +++ b/src/components/DialogBeta/Lazy/index.tsx @@ -0,0 +1,22 @@ +import { useState } from 'react' + +interface DialogLazyProps { + children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode + mounted: React.ReactNode +} + +const DialogLazy = ({ + children, + mounted: mountedChildren, +}: DialogLazyProps) => { + const [mounted, setMounted] = useState(false) + const mount = () => setMounted(true) + + if (mounted) { + return <>{mountedChildren}</> + } + + return <>{children({ openDialog: mount })}</> +} + +export default DialogLazy diff --git a/src/components/DialogBeta/Message/index.tsx b/src/components/DialogBeta/Message/index.tsx new file mode 100644 index 0000000000..06ce94ece9 --- /dev/null +++ b/src/components/DialogBeta/Message/index.tsx @@ -0,0 +1,46 @@ +import classNames from 'classnames' + +import { capitalizeFirstLetter } from '~/common/utils' + +import styles from './styles.module.css' + +interface DialogMessageProps { + align?: 'left' | 'center' + smUpAlign?: 'left' | 'center' + type?: 'error' +} + +/** + * + * Usage: + * + * ```jsx + * <Dialog.Message> + * <p>grey text</p> + * </Dialog.Message> + * + * <Dialog.Message> + * <h3>bold text</h3> + * </Dialog.Message> + * ``` + * + */ +const DialogMessage: React.FC<React.PropsWithChildren<DialogMessageProps>> = ({ + align = 'center', + smUpAlign = 'left', + type, + + children, +}) => { + const contentClasses = classNames({ + [styles.content]: true, + [styles[`${type}`]]: !!type, + [align ? styles[`align${capitalizeFirstLetter(align)}`] : '']: !!align, + [smUpAlign ? styles[`alignSmUp${capitalizeFirstLetter(smUpAlign)}`] : '']: + !!smUpAlign, + }) + + return <section className={contentClasses}>{children}</section> +} + +export default DialogMessage diff --git a/src/components/DialogBeta/Message/styles.module.css b/src/components/DialogBeta/Message/styles.module.css new file mode 100644 index 0000000000..10e6b72515 --- /dev/null +++ b/src/components/DialogBeta/Message/styles.module.css @@ -0,0 +1,71 @@ +.content { + & h2 { + font-size: var(--font-size-xm); + } + + & h3 { + font-size: var(--font-size-md); + line-height: 2rem; + } + + & p { + font-size: var(--font-size-md-s); + line-height: 1.5rem; + color: var(--color-grey-dark); + } + + & h2 + p, + h3 + p, + p + p { + margin-top: var(--spacing-tight); + } + + & ul, + & ol { + padding-left: var(--spacing-loose); + font-size: var(--font-size-md-s); + line-height: 1.5rem; + color: var(--color-grey-dark); + } + + & li { + padding-left: var(--spacing-xx-tight); + margin: var(--spacing-x-tight) 0; + } + + & ul { + margin: var(--spacing-base) 0; + list-style-type: disc; + } + + & ol { + margin: var(--spacing-base) 0; + list-style-type: decimal; + } +} + +.error { + & h3 { + color: var(--color-red); + } +} + +.alignCenter { + text-align: center; +} + +.alignLeft { + text-align: left; +} + +.alignSmUpCenter { + @media (--sm-up) { + text-align: center; + } +} + +.alignSmUpLeft { + @media (--sm-up) { + text-align: left; + } +} diff --git a/src/components/DialogBeta/Overlay.tsx b/src/components/DialogBeta/Overlay.tsx new file mode 100644 index 0000000000..abf0e051f8 --- /dev/null +++ b/src/components/DialogBeta/Overlay.tsx @@ -0,0 +1,7 @@ +import styles from './styles.module.css' + +const Overlay = (props: { style: React.CSSProperties }) => ( + <div aria-hidden className={styles.overlay} {...props}></div> +) + +export default Overlay diff --git a/src/components/DialogBeta/index.tsx b/src/components/DialogBeta/index.tsx new file mode 100644 index 0000000000..3ca029c7e7 --- /dev/null +++ b/src/components/DialogBeta/index.tsx @@ -0,0 +1,212 @@ +import { DialogContent, DialogOverlay } from '@reach/dialog' +import { VisuallyHidden } from '@reach/visually-hidden' +import classNames from 'classnames' +import _get from 'lodash/get' +import { useEffect, useRef, useState } from 'react' +import { animated, useSpring } from 'react-spring' +import { useDrag } from 'react-use-gesture' + +import { KEYVALUE } from '~/common/enums' +import { capitalizeFirstLetter, dom } from '~/common/utils' +import { Media, useOutsideClick } from '~/components' + +import { RoundedButton, TextButton } from './Buttons' +import Content from './Content' +import Footer from './Footer' +import Handle from './Handle' +import Header from './Header' +import Lazy from './Lazy' +import Overlay from './Overlay' +import styles from './styles.module.css' + +export interface DialogBetaOverlayProps { + isOpen: boolean | undefined + onDismiss: () => void + onRest?: () => void + dismissOnClickOutside?: boolean + dismissOnHandle?: boolean +} + +export type DialogBetaProps = { + smBgColor?: 'greyLighter' + smUpBgColor?: 'greyLighter' + hidePaddingBottom?: boolean + + testId?: string +} & DialogBetaOverlayProps + +const Container: React.FC< + React.PropsWithChildren< + { + style?: React.CSSProperties + setDragGoal: (val: any) => void + initialFocusRef: React.RefObject<any> + } & DialogBetaProps + > +> = ({ + smBgColor, + smUpBgColor, + hidePaddingBottom, + testId, + onDismiss, + dismissOnClickOutside = false, + dismissOnHandle = true, + children, + style, + setDragGoal, + initialFocusRef, +}) => { + const node: React.RefObject<any> | null = useRef(null) + + const containerClasses = classNames({ + [styles.container]: true, + [smBgColor ? styles[`bg${capitalizeFirstLetter(smBgColor)}`] : '']: + !!smBgColor, + [smUpBgColor ? styles[`bg${capitalizeFirstLetter(smUpBgColor)}SmUp`] : '']: + !!smUpBgColor, + [styles.hidePaddingBottom]: !!hidePaddingBottom, + }) + + const closeTopDialog = () => { + const dialogs = Array.prototype.slice.call( + dom.$$('[data-reach-dialog-overlay]') + ) as Element[] + const topDialog = dialogs[dialogs.length - 1] + const isTopDialog = + topDialog && node.current && topDialog.contains(node.current) + + if (!isTopDialog) { + return + } + + onDismiss() + } + + const handleClickOutside = () => { + if (!dismissOnClickOutside) { + return + } + + closeTopDialog() + } + + const bind = useDrag(({ down, movement: [, my] }) => { + if (!down && my > 30) { + onDismiss() + } else { + setDragGoal({ top: down ? Math.max(my, -30) : 0 }) + } + }) + + useOutsideClick(node, handleClickOutside) + + return ( + <div + {...(testId ? { 'data-test-id': testId } : {})} + ref={node} + className={containerClasses} + style={style} + onKeyDown={(event) => { + if (event.code.toLowerCase() !== KEYVALUE.escape) { + return + } + if (!dismissOnHandle) { + return + } + closeTopDialog() + }} + > + <VisuallyHidden> + <button type="button" ref={initialFocusRef} aria-hidden="true" /> + </VisuallyHidden> + + {children} + + <Media at="sm"> + {dismissOnHandle && <Handle closeDialog={onDismiss} {...bind()} />} + </Media> + </div> + ) +} + +export const DialogBeta: React.ComponentType< + React.PropsWithChildren<DialogBetaProps> +> & { + Header: typeof Header + Content: typeof Content + Footer: typeof Footer + TextButton: typeof TextButton + RoundedButton: typeof RoundedButton + Lazy: typeof Lazy +} = (props) => { + const { isOpen, onRest } = props + const [mounted, setMounted] = useState(isOpen) + const initialFocusRef = useRef<any>(null) + + // Drag + const [{ top }, setDragGoal] = useSpring(() => ({ top: 0 })) + + // Fade In/ Fade Out + const [{ opacity }, setFade] = useSpring<{ + opacity: number + }>(() => ({ + opacity: 0, + config: { tension: 270 }, + onRest: (val: any) => { + const isFadedOut = _get(val, 'value.opacity') <= 0 + + if (isFadedOut) { + setMounted(false) + setDragGoal({ top: 0 }) + } + + if (onRest) { + onRest() + } + }, + })) + + useEffect(() => { + if (isOpen) { + setMounted(true) + setFade({ opacity: 1 }) + } else { + setFade({ opacity: 0 }) + } + }) + + const AnimatedDialogOverlay = animated(DialogOverlay) + const AnimatedContainer = animated(Container) + const AnimatedOverlay = animated(Overlay) + + if (!mounted) { + return null + } + + return ( + <> + <AnimatedDialogOverlay + className="dialog" + initialFocusRef={initialFocusRef} + > + <AnimatedOverlay style={{ opacity: opacity as any }} /> + + <DialogContent aria-labelledby="dialog-title"> + <AnimatedContainer + style={{ opacity: opacity as any, top }} + setDragGoal={setDragGoal} + initialFocusRef={initialFocusRef} + {...props} + /> + </DialogContent> + </AnimatedDialogOverlay> + </> + ) +} + +DialogBeta.Header = Header +DialogBeta.Content = Content +DialogBeta.Footer = Footer +DialogBeta.TextButton = TextButton +DialogBeta.RoundedButton = RoundedButton +DialogBeta.Lazy = Lazy diff --git a/src/components/DialogBeta/styles.module.css b/src/components/DialogBeta/styles.module.css new file mode 100644 index 0000000000..5dff177c53 --- /dev/null +++ b/src/components/DialogBeta/styles.module.css @@ -0,0 +1,66 @@ +.overlay { + @mixin expand-to-container; + + content: ''; + background: rgb(0 0 0 / 40%); + will-change: opacity; +} + +.container { + position: relative; + display: flex; + flex-direction: column; + overflow: hidden; + background: var(--color-white); + border-radius: var(--spacing-x-tight) var(--spacing-x-tight) 0 0; + will-change: transform, top; + + &::before { + position: absolute; + top: 100%; + right: 0; + left: 0; + height: 300vh; + content: ''; + background: var(--color-white); + } + + &.bgGreyLighter { + background: var(--color-grey-lighter); + + @media (--sm-up) { + background: var(--color-white); + } + } + + &.bgGreyLighterSmUp { + @media (--md-up) { + background: var(--color-grey-lighter); + } + } + + @media (--sm-up) { + border-radius: var(--spacing-x-tight); + will-change: opacity; + + &::before { + display: none; + } + } +} + +.handle { + position: absolute; + top: 0; + left: 50%; + padding: var(--spacing-x-tight); + transform: translateX(-50%); + + & .icon { + display: inline-block; + width: 3rem; + height: 0.375rem; + background: var(--color-grey-lighter); + border-radius: var(--spacing-x-tight); + } +} diff --git a/src/components/index.tsx b/src/components/index.tsx index 4c8fe89e30..f1f348b9bd 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -13,6 +13,7 @@ export * from './Cover' export * from './CurrencyFormatter' export * from './DateTime' export * from './Dialog' +export * from './DialogBeta' export * from './Error' export * from './Expandable' export * from './Form' From 23e944651d5379f94a0fdc17619fb5a1f59a4293 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Wed, 20 Sep 2023 17:24:42 +0800 Subject: [PATCH 02/18] fix(SetPasswordDialog): Use DialogBeta instead of Dialog --- src/components/DialogBeta/Content/index.tsx | 6 +++- src/components/DialogBeta/styles.module.css | 6 ++++ .../Dialogs/SetPasswordDialog/Content.tsx | 31 +++++++++---------- .../Dialogs/SetPasswordDialog/index.tsx | 10 +++--- 4 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/components/DialogBeta/Content/index.tsx b/src/components/DialogBeta/Content/index.tsx index d028319df4..d741c76442 100644 --- a/src/components/DialogBeta/Content/index.tsx +++ b/src/components/DialogBeta/Content/index.tsx @@ -30,7 +30,11 @@ const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> & { [styles.noMaxHeight]: !!noMaxHeight, }) - return <section className={contentClasses}>{children}</section> + return ( + <section className={contentClasses} data-dialog-entity> + {children} + </section> + ) } DialogContent.Message = Message diff --git a/src/components/DialogBeta/styles.module.css b/src/components/DialogBeta/styles.module.css index 5dff177c53..9aa34cd3cb 100644 --- a/src/components/DialogBeta/styles.module.css +++ b/src/components/DialogBeta/styles.module.css @@ -25,6 +25,12 @@ background: var(--color-white); } + &:last-child [data-dialog-entity] { + @media (--sm-down) { + padding-bottom: var(--spacing-xx-loose); + } + } + &.bgGreyLighter { background: var(--color-grey-lighter); diff --git a/src/components/Dialogs/SetPasswordDialog/Content.tsx b/src/components/Dialogs/SetPasswordDialog/Content.tsx index 9fdf0bd014..d2c7e5b81c 100644 --- a/src/components/Dialogs/SetPasswordDialog/Content.tsx +++ b/src/components/Dialogs/SetPasswordDialog/Content.tsx @@ -12,9 +12,9 @@ import { } from '~/common/utils' import { Dialog, + DialogBeta, Form, LanguageContext, - Media, Spacer, toast, useMutation, @@ -125,7 +125,7 @@ const SetPasswordDialogContent: React.FC<FormProps> = ({ closeDialog }) => { ) const SubmitButton = ( - <Dialog.TextButton + <DialogBeta.TextButton type="submit" form={formId} disabled={isSubmitting || values.password.length < 8} @@ -136,7 +136,7 @@ const SetPasswordDialogContent: React.FC<FormProps> = ({ closeDialog }) => { return ( <> - <Dialog.Header + <DialogBeta.Header title={ <FormattedMessage defaultMessage="Login password" @@ -147,21 +147,20 @@ const SetPasswordDialogContent: React.FC<FormProps> = ({ closeDialog }) => { rightBtn={SubmitButton} /> - <Dialog.Message> - <p> - <FormattedMessage - defaultMessage="Password must be at least 8 characters long, support letter, numbers and symbols." - description="src/components/Dialogs/SetPasswordDialog/Content.tsx" - /> - </p> - <Media greaterThan="sm"> + <DialogBeta.Content> + <DialogBeta.Content.Message> + <p> + <FormattedMessage + defaultMessage="Password must be at least 8 characters long, support letter, numbers and symbols." + description="src/components/Dialogs/SetPasswordDialog/Content.tsx" + /> + </p> <Spacer size="base" /> - </Media> - </Dialog.Message> - - <Dialog.Content>{InnerForm}</Dialog.Content> + </DialogBeta.Content.Message> + {InnerForm} + </DialogBeta.Content> - <Dialog.Footer + <DialogBeta.Footer smUpBtns={ <> <Dialog.TextButton diff --git a/src/components/Dialogs/SetPasswordDialog/index.tsx b/src/components/Dialogs/SetPasswordDialog/index.tsx index 47355b17ea..1ad1b9c00c 100644 --- a/src/components/Dialogs/SetPasswordDialog/index.tsx +++ b/src/components/Dialogs/SetPasswordDialog/index.tsx @@ -1,6 +1,6 @@ import dynamic from 'next/dynamic' -import { Dialog, Spinner, useDialogSwitch } from '~/components' +import { DialogBeta, Spinner, useDialogSwitch } from '~/components' interface SetPasswordDialogProps { children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode @@ -15,15 +15,15 @@ const BaseSetPasswordDialog = ({ children }: SetPasswordDialogProps) => { <> {children({ openDialog })} - <Dialog isOpen={show} onDismiss={closeDialog}> + <DialogBeta isOpen={show} onDismiss={closeDialog}> <DynamicContent closeDialog={closeDialog} /> - </Dialog> + </DialogBeta> </> ) } export const SetPasswordDialog = (props: SetPasswordDialogProps) => ( - <Dialog.Lazy mounted={<BaseSetPasswordDialog {...props} />}> + <DialogBeta.Lazy mounted={<BaseSetPasswordDialog {...props} />}> {({ openDialog }) => <>{props.children({ openDialog })}</>} - </Dialog.Lazy> + </DialogBeta.Lazy> ) From b0578468f92f278b35a71b890f033e6dcdada286 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Wed, 20 Sep 2023 17:34:57 +0800 Subject: [PATCH 03/18] feat(Message): revise p style --- src/components/DialogBeta/Message/styles.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DialogBeta/Message/styles.module.css b/src/components/DialogBeta/Message/styles.module.css index 10e6b72515..60f857ec98 100644 --- a/src/components/DialogBeta/Message/styles.module.css +++ b/src/components/DialogBeta/Message/styles.module.css @@ -9,8 +9,8 @@ } & p { - font-size: var(--font-size-md-s); - line-height: 1.5rem; + font-size: var(--font-size-sm); + line-height: 1.375rem; color: var(--color-grey-dark); } From 97fcf37a75ac7827fa731512d945a884de1c9de6 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Wed, 20 Sep 2023 17:42:30 +0800 Subject: [PATCH 04/18] fix(SetEmailDialog): Use DialogBeta instead of Dialog --- src/components/DialogBeta/Message/index.tsx | 3 ++ .../DialogBeta/Message/styles.module.css | 4 ++ .../Dialogs/SetEmailDialog/Content.tsx | 39 +++++++++---------- .../Dialogs/SetEmailDialog/index.tsx | 10 ++--- .../Dialogs/SetEmailDialog/styles.module.css | 5 --- 5 files changed, 30 insertions(+), 31 deletions(-) delete mode 100644 src/components/Dialogs/SetEmailDialog/styles.module.css diff --git a/src/components/DialogBeta/Message/index.tsx b/src/components/DialogBeta/Message/index.tsx index 06ce94ece9..0d0777a0de 100644 --- a/src/components/DialogBeta/Message/index.tsx +++ b/src/components/DialogBeta/Message/index.tsx @@ -8,6 +8,7 @@ interface DialogMessageProps { align?: 'left' | 'center' smUpAlign?: 'left' | 'center' type?: 'error' + spacingBottom?: boolean } /** @@ -28,12 +29,14 @@ interface DialogMessageProps { const DialogMessage: React.FC<React.PropsWithChildren<DialogMessageProps>> = ({ align = 'center', smUpAlign = 'left', + spacingBottom, type, children, }) => { const contentClasses = classNames({ [styles.content]: true, + [styles.spacingBottom]: !!spacingBottom, [styles[`${type}`]]: !!type, [align ? styles[`align${capitalizeFirstLetter(align)}`] : '']: !!align, [smUpAlign ? styles[`alignSmUp${capitalizeFirstLetter(smUpAlign)}`] : '']: diff --git a/src/components/DialogBeta/Message/styles.module.css b/src/components/DialogBeta/Message/styles.module.css index 60f857ec98..e53623b627 100644 --- a/src/components/DialogBeta/Message/styles.module.css +++ b/src/components/DialogBeta/Message/styles.module.css @@ -69,3 +69,7 @@ text-align: left; } } + +.spacingBottom { + padding-bottom: var(--spacing-base); +} diff --git a/src/components/Dialogs/SetEmailDialog/Content.tsx b/src/components/Dialogs/SetEmailDialog/Content.tsx index 1247385671..a545b6c26d 100644 --- a/src/components/Dialogs/SetEmailDialog/Content.tsx +++ b/src/components/Dialogs/SetEmailDialog/Content.tsx @@ -16,6 +16,7 @@ import { } from '~/common/utils' import { Dialog, + DialogBeta, Form, LanguageContext, useMutation, @@ -28,8 +29,6 @@ import { VerificationCodeType, } from '~/gql/graphql' -import styles from './styles.module.css' - interface FormProps { closeDialog: () => void } @@ -148,7 +147,7 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => { ) const SubmitButton = ( - <Dialog.TextButton + <DialogBeta.TextButton type="submit" form={formId} disabled={ @@ -161,7 +160,7 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => { return ( <> - <Dialog.Header + <DialogBeta.Header title={ <FormattedMessage defaultMessage="Email address" @@ -172,10 +171,10 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => { rightBtn={editable ? SubmitButton : undefined} /> - {editable && hasPassword && ( - <> - <Dialog.Message noSpacingBottom> - <p className={styles.hint}> + <DialogBeta.Content> + {editable && hasPassword && ( + <DialogBeta.Content.Message spacingBottom> + <p> <FormattedMessage defaultMessage="For security, we will {resetHint} for this. You can set your password again after verifying new email address." description="src/components/Dialogs/SetEmailDialog/Content.tsx" @@ -191,14 +190,12 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => { }} /> </p> - </Dialog.Message> - </> - )} + </DialogBeta.Content.Message> + )} - {!editable && ( - <> - <Dialog.Message noSpacingBottom> - <p className={styles.hint}> + {!editable && ( + <DialogBeta.Content.Message spacingBottom> + <p> <FormattedMessage defaultMessage="Email can be modified up to {count} times per day." description="src/components/Dialogs/SetEmailDialog/Content.tsx" @@ -207,14 +204,14 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => { }} /> </p> - </Dialog.Message> - </> - )} + </DialogBeta.Content.Message> + )} - <Dialog.Content>{InnerForm}</Dialog.Content> + {InnerForm} + </DialogBeta.Content> {editable && ( - <Dialog.Footer + <DialogBeta.Footer smUpBtns={ <> <Dialog.TextButton @@ -228,7 +225,7 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => { /> )} {!editable && ( - <Dialog.Footer + <DialogBeta.Footer smUpBtns={ <> <Dialog.TextButton diff --git a/src/components/Dialogs/SetEmailDialog/index.tsx b/src/components/Dialogs/SetEmailDialog/index.tsx index f73db5b708..42e5cabe60 100644 --- a/src/components/Dialogs/SetEmailDialog/index.tsx +++ b/src/components/Dialogs/SetEmailDialog/index.tsx @@ -1,6 +1,6 @@ import dynamic from 'next/dynamic' -import { Dialog, Spinner, useDialogSwitch } from '~/components' +import { DialogBeta, Spinner, useDialogSwitch } from '~/components' interface SetEmailDialogProps { children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode @@ -15,15 +15,15 @@ const BaseSetEmailDialog = ({ children }: SetEmailDialogProps) => { <> {children({ openDialog })} - <Dialog isOpen={show} onDismiss={closeDialog}> + <DialogBeta isOpen={show} onDismiss={closeDialog}> <DynamicContent closeDialog={closeDialog} /> - </Dialog> + </DialogBeta> </> ) } export const SetEmailDialog = (props: SetEmailDialogProps) => ( - <Dialog.Lazy mounted={<BaseSetEmailDialog {...props} />}> + <DialogBeta.Lazy mounted={<BaseSetEmailDialog {...props} />}> {({ openDialog }) => <>{props.children({ openDialog })}</>} - </Dialog.Lazy> + </DialogBeta.Lazy> ) diff --git a/src/components/Dialogs/SetEmailDialog/styles.module.css b/src/components/Dialogs/SetEmailDialog/styles.module.css deleted file mode 100644 index 2152e6894b..0000000000 --- a/src/components/Dialogs/SetEmailDialog/styles.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.hint { - @media (--sm-up) { - margin-bottom: var(--spacing-base); - } -} From ae03eeeeaa29aa6fae11c3c07398f5d6a7feb146 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Wed, 20 Sep 2023 20:50:31 +0800 Subject: [PATCH 05/18] fix(AddWalletLoginDialog): Use DialogBeta instead of Dialog --- .../AuthMethodFeed/styles.module.css | 6 +++++- .../Dialogs/AddWalletLoginDialog/Content.tsx | 17 ++++++++++------ .../Dialogs/AddWalletLoginDialog/index.tsx | 10 +++++----- .../Forms/WalletAuthForm/Connect.tsx | 20 +++++++++---------- .../Forms/WalletAuthForm/styles.module.css | 5 ++++- 5 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/components/AuthMethodFeed/styles.module.css b/src/components/AuthMethodFeed/styles.module.css index 021929fb2e..be0dd4c412 100644 --- a/src/components/AuthMethodFeed/styles.module.css +++ b/src/components/AuthMethodFeed/styles.module.css @@ -34,10 +34,14 @@ } .info { - padding: 0 var(--spacing-base) var(--spacing-loose); + padding: 0 var(--spacing-base); color: var(--color-grey); text-align: center; + @media (--sm-up) { + padding-bottom: var(--spacing-loose); + } + .errorHint { margin-bottom: var(--spacing-base); font-size: var(--font-size-sm); diff --git a/src/components/Dialogs/AddWalletLoginDialog/Content.tsx b/src/components/Dialogs/AddWalletLoginDialog/Content.tsx index e42abcb1bd..9081619f26 100644 --- a/src/components/Dialogs/AddWalletLoginDialog/Content.tsx +++ b/src/components/Dialogs/AddWalletLoginDialog/Content.tsx @@ -2,7 +2,12 @@ import React, { useState } from 'react' import { FormattedMessage } from 'react-intl' import { WalletType } from '~/common/utils' -import { AuthWalletFeed, Dialog, WalletAuthForm } from '~/components' +import { + AuthWalletFeed, + Dialog, + DialogBeta, + WalletAuthForm, +} from '~/components' interface Props { closeDialog: () => void @@ -19,7 +24,7 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { return ( <> - <Dialog.Header + <DialogBeta.Header title={ <FormattedMessage defaultMessage="Connect wallet" @@ -27,7 +32,7 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { /> } leftBtn={ - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Close" />} color="greyDarker" onClick={closeDialog} @@ -38,7 +43,7 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { {isSelect && ( <> - <Dialog.Content> + <DialogBeta.Content> <AuthWalletFeed submitCallback={(type: WalletType) => { setWalletType(type) @@ -46,8 +51,8 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { }} hasWalletExist={hasWalletExist} /> - </Dialog.Content> - <Dialog.Footer + </DialogBeta.Content> + <DialogBeta.Footer smUpBtns={ <> <Dialog.TextButton diff --git a/src/components/Dialogs/AddWalletLoginDialog/index.tsx b/src/components/Dialogs/AddWalletLoginDialog/index.tsx index 3b577b31a2..b418f6acf9 100644 --- a/src/components/Dialogs/AddWalletLoginDialog/index.tsx +++ b/src/components/Dialogs/AddWalletLoginDialog/index.tsx @@ -1,6 +1,6 @@ import dynamic from 'next/dynamic' -import { Dialog, Spinner, useDialogSwitch } from '~/components' +import { DialogBeta, Spinner, useDialogSwitch } from '~/components' interface AddWalletLoginDialogProps { children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode @@ -15,15 +15,15 @@ const BaseAddWalletLoginDialog = ({ children }: AddWalletLoginDialogProps) => { <> {children({ openDialog })} - <Dialog isOpen={show} onDismiss={closeDialog}> + <DialogBeta isOpen={show} onDismiss={closeDialog}> <DynamicContent closeDialog={closeDialog} /> - </Dialog> + </DialogBeta> </> ) } export const AddWalletLoginDialog = (props: AddWalletLoginDialogProps) => ( - <Dialog.Lazy mounted={<BaseAddWalletLoginDialog {...props} />}> + <DialogBeta.Lazy mounted={<BaseAddWalletLoginDialog {...props} />}> {({ openDialog }) => <>{props.children({ openDialog })}</>} - </Dialog.Lazy> + </DialogBeta.Lazy> ) diff --git a/src/components/Forms/WalletAuthForm/Connect.tsx b/src/components/Forms/WalletAuthForm/Connect.tsx index d4801aafe3..f7314aff30 100644 --- a/src/components/Forms/WalletAuthForm/Connect.tsx +++ b/src/components/Forms/WalletAuthForm/Connect.tsx @@ -22,7 +22,7 @@ import { import { AuthFeedType, AuthTabs, - Dialog, + DialogBeta, IconLeft20, IconMetamask22, IconSpinner22, @@ -252,12 +252,12 @@ const Connect: React.FC<FormProps> = ({ return ( <> {isLogin && ( - <Dialog.Header + <DialogBeta.Header title={<>{isMetamask ? 'MetaMask' : 'WalletConnect'}</>} hasSmUpTitle={false} leftBtn={ back ? ( - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Back" />} onClick={onBack} color="greyDarker" @@ -268,7 +268,7 @@ const Connect: React.FC<FormProps> = ({ /> )} - <Dialog.Content> + <DialogBeta.Content> {isLogin && ( <Media greaterThan="sm"> <AuthTabs @@ -303,14 +303,14 @@ const Connect: React.FC<FormProps> = ({ /> </span> </section> - </Dialog.Content> + </DialogBeta.Content> - <Dialog.Footer - smUpContentNoSpacingBottom={isInPage} - smUpSpaceBetween + <DialogBeta.Footer + // smUpContentNoSpacingBottom={isInPage} + // smUpSpaceBetween smUpBtns={ <> - <Dialog.TextButton + <DialogBeta.TextButton text={ <TextIcon icon={<IconLeft20 size="mdS" />} spacing="xxxtight"> <FormattedMessage @@ -324,7 +324,7 @@ const Connect: React.FC<FormProps> = ({ /> {isInDialog && ( - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Close" />} color="greyDarker" onClick={onCloseDialog} diff --git a/src/components/Forms/WalletAuthForm/styles.module.css b/src/components/Forms/WalletAuthForm/styles.module.css index a504e1c6c5..0cbad5f1fc 100644 --- a/src/components/Forms/WalletAuthForm/styles.module.css +++ b/src/components/Forms/WalletAuthForm/styles.module.css @@ -95,10 +95,13 @@ gap: var(--spacing-tight); align-self: stretch; height: 6.88rem; - margin-bottom: var(--spacing-loose); font-size: var(--font-size-sm); line-height: 1.375rem; color: var(--color-grey-darker); background: var(--color-green-lighter); border-radius: 0.5rem; + + @media (--sm-up) { + margin-bottom: var(--spacing-xx-tight); + } } From bcfe7bfe0a014a7c65bdd3e794a40e81e58a654c Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Wed, 20 Sep 2023 20:53:34 +0800 Subject: [PATCH 06/18] fix(RemoveWalletLoginDialog): Use DialogBeta instead of Dialog --- src/components/DialogBeta/Footer/index.tsx | 2 +- .../RemoveWalletLoginDialog/Content.tsx | 54 ++++++++++--------- .../Dialogs/RemoveWalletLoginDialog/index.tsx | 10 ++-- 3 files changed, 34 insertions(+), 32 deletions(-) diff --git a/src/components/DialogBeta/Footer/index.tsx b/src/components/DialogBeta/Footer/index.tsx index 7ebd8f0f2f..064d0da964 100644 --- a/src/components/DialogBeta/Footer/index.tsx +++ b/src/components/DialogBeta/Footer/index.tsx @@ -46,7 +46,7 @@ const Footer: React.FC<FooterProps> = ({ <footer className={footerClasses}> <Media at="sm"> {hasBtns && ( - <section className={styles.content}> + <section className={styles.content} data-dialog-entity> {btns} {closeDialog && ( <RoundedButton diff --git a/src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx b/src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx index 0810a8d258..aaff21b0a7 100644 --- a/src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx +++ b/src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import { FormattedMessage } from 'react-intl' import { useDisconnect } from 'wagmi' -import { Dialog, toast, useMutation } from '~/components' +import { DialogBeta, toast, useMutation } from '~/components' import { RemoveWalletLoginMutation } from '~/gql/graphql' import { REMOVE_WALLET_LOGIN } from './gql' @@ -49,7 +49,7 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { return ( <> - <Dialog.Header + <DialogBeta.Header title={ <FormattedMessage defaultMessage="Disconnect wallet" @@ -58,28 +58,30 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { } /> - <Dialog.Message> - <p> - {isConfirm && ( - <FormattedMessage - defaultMessage="Are you sure you want to disconnect from this?" - description="src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx" - /> - )} - {isFailure && ( - <FormattedMessage - defaultMessage="Unable to disconnect the wallet because you have not added or associated another login (Email/Wallet/Social account)." - description="src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx" - /> - )} - </p> - </Dialog.Message> + <DialogBeta.Content> + <DialogBeta.Content.Message> + <p> + {isConfirm && ( + <FormattedMessage + defaultMessage="Are you sure you want to disconnect from this?" + description="src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx" + /> + )} + {isFailure && ( + <FormattedMessage + defaultMessage="Unable to disconnect the wallet because you have not added or associated another login (Email/Wallet/Social account)." + description="src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx" + /> + )} + </p> + </DialogBeta.Content.Message> + </DialogBeta.Content> {isConfirm && ( - <Dialog.Footer + <DialogBeta.Footer btns={ <> - <Dialog.RoundedButton + <DialogBeta.RoundedButton text={ <FormattedMessage defaultMessage="Disconnect" @@ -89,7 +91,7 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { loading={loading} onClick={remove} /> - <Dialog.RoundedButton + <DialogBeta.RoundedButton text={<FormattedMessage defaultMessage="Close" />} color="greyDarker" onClick={closeDialog} @@ -98,12 +100,12 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { } smUpBtns={ <> - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Cancel" />} color="greyDarker" onClick={closeDialog} /> - <Dialog.TextButton + <DialogBeta.TextButton text={ <FormattedMessage defaultMessage="Disconnect" @@ -119,10 +121,10 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { )} {isFailure && ( - <Dialog.Footer + <DialogBeta.Footer btns={ <> - <Dialog.RoundedButton + <DialogBeta.RoundedButton text={<FormattedMessage defaultMessage="Close" />} color="greyDarker" onClick={closeDialog} @@ -131,7 +133,7 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { } smUpBtns={ <> - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Close" />} color="greyDarker" onClick={closeDialog} diff --git a/src/components/Dialogs/RemoveWalletLoginDialog/index.tsx b/src/components/Dialogs/RemoveWalletLoginDialog/index.tsx index f7d30ce278..a8b38c1c09 100644 --- a/src/components/Dialogs/RemoveWalletLoginDialog/index.tsx +++ b/src/components/Dialogs/RemoveWalletLoginDialog/index.tsx @@ -1,6 +1,6 @@ import dynamic from 'next/dynamic' -import { Dialog, Spinner, useDialogSwitch } from '~/components' +import { DialogBeta, Spinner, useDialogSwitch } from '~/components' interface RemoveWalletLoginDialogProps { children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode @@ -17,9 +17,9 @@ const BaseRemoveWalletLoginDialog = ({ <> {children({ openDialog })} - <Dialog isOpen={show} onDismiss={closeDialog}> + <DialogBeta isOpen={show} onDismiss={closeDialog}> <DynamicContent closeDialog={closeDialog} /> - </Dialog> + </DialogBeta> </> ) } @@ -27,7 +27,7 @@ const BaseRemoveWalletLoginDialog = ({ export const RemoveWalletLoginDialog = ( props: RemoveWalletLoginDialogProps ) => ( - <Dialog.Lazy mounted={<BaseRemoveWalletLoginDialog {...props} />}> + <DialogBeta.Lazy mounted={<BaseRemoveWalletLoginDialog {...props} />}> {({ openDialog }) => <>{props.children({ openDialog })}</>} - </Dialog.Lazy> + </DialogBeta.Lazy> ) From f249390b670ea5dd13ded874208d6ca1e9aa9620 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Wed, 20 Sep 2023 21:00:00 +0800 Subject: [PATCH 07/18] fix(DialogBeta): revise selector --- src/components/DialogBeta/Content/index.tsx | 6 ++++-- src/components/DialogBeta/styles.module.css | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/DialogBeta/Content/index.tsx b/src/components/DialogBeta/Content/index.tsx index d741c76442..dd11c6dae8 100644 --- a/src/components/DialogBeta/Content/index.tsx +++ b/src/components/DialogBeta/Content/index.tsx @@ -31,8 +31,10 @@ const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> & { }) return ( - <section className={contentClasses} data-dialog-entity> - {children} + <section> + <section className={contentClasses} data-dialog-entity> + {children} + </section> </section> ) } diff --git a/src/components/DialogBeta/styles.module.css b/src/components/DialogBeta/styles.module.css index 9aa34cd3cb..2f58d32846 100644 --- a/src/components/DialogBeta/styles.module.css +++ b/src/components/DialogBeta/styles.module.css @@ -25,7 +25,7 @@ background: var(--color-white); } - &:last-child [data-dialog-entity] { + & [data-dialog-entity]:last-child { @media (--sm-down) { padding-bottom: var(--spacing-xx-loose); } From d451f09e28125e67d06fe941c7d9d072ed241b08 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 14:57:59 +0800 Subject: [PATCH 08/18] feat(DialogBeta): fix bottom space in mobile --- src/components/DialogBeta/Content/index.tsx | 6 +-- src/components/DialogBeta/Footer/index.tsx | 47 ++++++++++++--------- src/components/DialogBeta/index.tsx | 4 +- src/components/DialogBeta/styles.module.css | 3 +- 4 files changed, 33 insertions(+), 27 deletions(-) diff --git a/src/components/DialogBeta/Content/index.tsx b/src/components/DialogBeta/Content/index.tsx index dd11c6dae8..d741c76442 100644 --- a/src/components/DialogBeta/Content/index.tsx +++ b/src/components/DialogBeta/Content/index.tsx @@ -31,10 +31,8 @@ const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> & { }) return ( - <section> - <section className={contentClasses} data-dialog-entity> - {children} - </section> + <section className={contentClasses} data-dialog-entity> + {children} </section> ) } diff --git a/src/components/DialogBeta/Footer/index.tsx b/src/components/DialogBeta/Footer/index.tsx index 064d0da964..684cd42e51 100644 --- a/src/components/DialogBeta/Footer/index.tsx +++ b/src/components/DialogBeta/Footer/index.tsx @@ -42,42 +42,49 @@ const Footer: React.FC<FooterProps> = ({ // [styles.smUpContentNoSpacingBottom]: !!smUpContentNoSpacingBottom, }) - return ( - <footer className={footerClasses}> - <Media at="sm"> - {hasBtns && ( - <section className={styles.content} data-dialog-entity> - {btns} + const SmUpBtns = () => ( + <> + {hasSmUpBtns && ( + <Media greaterThan="sm"> + <section className={smUpContentClasses}> {closeDialog && ( - <RoundedButton + <TextButton text={text} color="greyDarker" onClick={closeDialog} /> )} + {smUpBtns} </section> - )} - - {/* show bottom spacing for dialog if there is no buttons, - * otherwise, the footer will be too close to the content - */} - {/* {!hasBtns && <Spacer size="xxloose" />} */} - </Media> + </Media> + )} + </> + ) - {hasSmUpBtns && ( - <Media greaterThan="sm"> - <section className={smUpContentClasses}> + if (hasBtns) { + return ( + <footer className={footerClasses} data-dialog-entity> + <Media at="sm"> + <section className={styles.content}> + {btns} {closeDialog && ( - <TextButton + <RoundedButton text={text} color="greyDarker" onClick={closeDialog} /> )} - {smUpBtns} </section> </Media> - )} + + <SmUpBtns /> + </footer> + ) + } + + return ( + <footer className={footerClasses}> + <SmUpBtns /> </footer> ) } diff --git a/src/components/DialogBeta/index.tsx b/src/components/DialogBeta/index.tsx index 3ca029c7e7..0f01b30e2d 100644 --- a/src/components/DialogBeta/index.tsx +++ b/src/components/DialogBeta/index.tsx @@ -120,11 +120,11 @@ const Container: React.FC< <button type="button" ref={initialFocusRef} aria-hidden="true" /> </VisuallyHidden> - {children} - <Media at="sm"> {dismissOnHandle && <Handle closeDialog={onDismiss} {...bind()} />} </Media> + + {children} </div> ) } diff --git a/src/components/DialogBeta/styles.module.css b/src/components/DialogBeta/styles.module.css index 2f58d32846..40c49943b1 100644 --- a/src/components/DialogBeta/styles.module.css +++ b/src/components/DialogBeta/styles.module.css @@ -25,7 +25,7 @@ background: var(--color-white); } - & [data-dialog-entity]:last-child { + & :nth-last-child(1 of [data-dialog-entity]) { @media (--sm-down) { padding-bottom: var(--spacing-xx-loose); } @@ -59,6 +59,7 @@ position: absolute; top: 0; left: 50%; + z-index: var(--z-index-dialog); padding: var(--spacing-x-tight); transform: translateX(-50%); From d2f09ac46669e680d11e7f7da678a0136779b566 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 15:12:56 +0800 Subject: [PATCH 09/18] fix(SetUserName): Use DialogBeta instead of Dialog --- .../Dialogs/SetUserNameDialog/ConfirmStep.tsx | 39 +++++++------- .../Dialogs/SetUserNameDialog/InputStep.tsx | 54 +++++++++---------- .../Dialogs/SetUserNameDialog/index.tsx | 10 ++-- 3 files changed, 49 insertions(+), 54 deletions(-) diff --git a/src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx b/src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx index 1cf2b12ed9..a373a3a35c 100644 --- a/src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx +++ b/src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx @@ -3,7 +3,7 @@ import React from 'react' import { FormattedMessage } from 'react-intl' import { PATHS } from '~/common/enums' -import { Dialog, toast, useMutation, useRoute } from '~/components' +import { DialogBeta, toast, useMutation, useRoute } from '~/components' import { SetUserNameMutation } from '~/gql/graphql' import { USER_PROFILE_PUBLIC } from '~/views/User/UserProfile/gql' @@ -68,7 +68,7 @@ const ConfirmStep: React.FC<Props> = ({ userName, back, closeDialog }) => { return ( <> - <Dialog.Header + <DialogBeta.Header title={ <FormattedMessage defaultMessage="Confirm Matters ID" @@ -76,23 +76,24 @@ const ConfirmStep: React.FC<Props> = ({ userName, back, closeDialog }) => { /> } /> + <DialogBeta.Content> + <DialogBeta.Content.Message> + <p> + <FormattedMessage + defaultMessage="This ID cannot be modified. Are you sure you want to use {id} as your Matters ID?" + description="src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx" + values={{ + id: <span className="u-highlight">{userName}</span>, + }} + /> + </p> + </DialogBeta.Content.Message> + </DialogBeta.Content> - <Dialog.Message> - <p> - <FormattedMessage - defaultMessage="This ID cannot be modified. Are you sure you want to use {id} as your Matters ID?" - description="src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx" - values={{ - id: <span className="u-highlight">{userName}</span>, - }} - /> - </p> - </Dialog.Message> - - <Dialog.Footer + <DialogBeta.Footer btns={ <> - <Dialog.RoundedButton + <DialogBeta.RoundedButton disabled={loading} text={ <FormattedMessage @@ -103,7 +104,7 @@ const ConfirmStep: React.FC<Props> = ({ userName, back, closeDialog }) => { loading={loading} onClick={confirmUse} /> - <Dialog.RoundedButton + <DialogBeta.RoundedButton text={<FormattedMessage defaultMessage="Back" />} color="greyDarker" onClick={back} @@ -112,12 +113,12 @@ const ConfirmStep: React.FC<Props> = ({ userName, back, closeDialog }) => { } smUpBtns={ <> - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Back" />} color="greyDarker" onClick={back} /> - <Dialog.TextButton + <DialogBeta.TextButton disabled={loading} text={ <FormattedMessage diff --git a/src/components/Dialogs/SetUserNameDialog/InputStep.tsx b/src/components/Dialogs/SetUserNameDialog/InputStep.tsx index 401be49c49..24436b2bd5 100644 --- a/src/components/Dialogs/SetUserNameDialog/InputStep.tsx +++ b/src/components/Dialogs/SetUserNameDialog/InputStep.tsx @@ -10,13 +10,7 @@ import { MIN_USER_NAME_LENGTH, } from '~/common/enums' import { normalizeUserName, validateUserName } from '~/common/utils' -import { - Dialog, - Form, - LanguageContext, - Spacer, - ViewerContext, -} from '~/components' +import { DialogBeta, Form, LanguageContext, ViewerContext } from '~/components' import Field from '../../Form/Field' import { QUERY_USER_NAME } from './gql' @@ -153,7 +147,7 @@ const InputStep: React.FC<Props> = ({ userName, gotoConfirm }) => { ) const SubmitButton = ( - <Dialog.TextButton + <DialogBeta.TextButton type="submit" form={formId} disabled={isSubmitting || values.userName.length < MIN_USER_NAME_LENGTH} @@ -164,7 +158,7 @@ const InputStep: React.FC<Props> = ({ userName, gotoConfirm }) => { return ( <> - <Dialog.Header + <DialogBeta.Header title={ isLegacyUserConfirm ? ( <FormattedMessage @@ -179,29 +173,29 @@ const InputStep: React.FC<Props> = ({ userName, gotoConfirm }) => { ) } /> - - <Dialog.Message> - <p> - {isLegacyUserConfirm ? ( - <FormattedMessage - defaultMessage="In order to ensure the identity security of the citizens of Matters City, we've upgraded some security settings. Please confirm your Matters ID (cannot be modified once confirmation)." - description="src/components/Dialogs/SetUserNameDialog/Content.tsx" - /> - ) : ( - <FormattedMessage - defaultMessage="Matters ID is your unique identifier, and cannot be modified once set." - description="src/components/Dialogs/SetUserNameDialog/Content.tsx" - /> - )} - </p> - </Dialog.Message> - <Spacer size="base" /> - <Dialog.Content>{InnerForm}</Dialog.Content> - - <Dialog.Footer + <DialogBeta.Content> + <DialogBeta.Content.Message spacingBottom> + <p> + {isLegacyUserConfirm ? ( + <FormattedMessage + defaultMessage="In order to ensure the identity security of the citizens of Matters City, we've upgraded some security settings. Please confirm your Matters ID (cannot be modified once confirmation)." + description="src/components/Dialogs/SetUserNameDialog/Content.tsx" + /> + ) : ( + <FormattedMessage + defaultMessage="Matters ID is your unique identifier, and cannot be modified once set." + description="src/components/Dialogs/SetUserNameDialog/Content.tsx" + /> + )} + </p> + </DialogBeta.Content.Message> + {InnerForm} + </DialogBeta.Content> + + <DialogBeta.Footer btns={ <> - <Dialog.RoundedButton + <DialogBeta.RoundedButton type="submit" color="green" form={formId} diff --git a/src/components/Dialogs/SetUserNameDialog/index.tsx b/src/components/Dialogs/SetUserNameDialog/index.tsx index ffda527c58..6ead14e874 100644 --- a/src/components/Dialogs/SetUserNameDialog/index.tsx +++ b/src/components/Dialogs/SetUserNameDialog/index.tsx @@ -2,7 +2,7 @@ import dynamic from 'next/dynamic' import { OPEN_SET_USER_NAME_DIALOG } from '~/common/enums' import { - Dialog, + DialogBeta, Spinner, useDialogSwitch, useEventListener, @@ -21,9 +21,9 @@ const BaseSetUserNameDialog = ({ children }: SetUserNameDialogProps) => { <> {children && children({ openDialog })} - <Dialog isOpen={show} onDismiss={closeDialog} dismissOnHandle={false}> + <DialogBeta isOpen={show} onDismiss={closeDialog} dismissOnHandle={false}> <DynamicContent closeDialog={closeDialog} /> - </Dialog> + </DialogBeta> </> ) } @@ -35,8 +35,8 @@ export const SetUserNameDialog = (props: SetUserNameDialogProps) => { } return ( - <Dialog.Lazy mounted={<BaseSetUserNameDialog {...props} />}> + <DialogBeta.Lazy mounted={<BaseSetUserNameDialog {...props} />}> {({ openDialog }) => <Children openDialog={openDialog} />} - </Dialog.Lazy> + </DialogBeta.Lazy> ) } From 11461b3c884cbc2128a9025d74d677d9092496a5 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 15:23:20 +0800 Subject: [PATCH 10/18] fix(RemoveSocialLogin): Use DialogBeta instead of Dialog --- .../RemoveSocialLoginDialog/Content.tsx | 67 ++++++++++--------- .../Dialogs/RemoveSocialLoginDialog/index.tsx | 10 +-- 2 files changed, 39 insertions(+), 38 deletions(-) diff --git a/src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx b/src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx index 5427f6f934..8dbd7e0c0c 100644 --- a/src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx +++ b/src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx @@ -2,7 +2,7 @@ import _pickBy from 'lodash/pickBy' import React, { useState } from 'react' import { FormattedMessage } from 'react-intl' -import { Dialog, toast, useMutation } from '~/components' +import { DialogBeta, toast, useMutation } from '~/components' import { RemoveSocialLoginMutation, SocialAccountType } from '~/gql/graphql' import { REMOVE_SOCIAL_LOGIN } from './gql' @@ -59,7 +59,7 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({ return ( <> - <Dialog.Header + <DialogBeta.Header title={ <FormattedMessage defaultMessage="Disconnect from {type}" @@ -70,35 +70,36 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({ /> } /> - - <Dialog.Message> - <p> - {isConfirm && ( - <FormattedMessage - defaultMessage="Do you want to disconnect from {type}?" - description="src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx" - values={{ - type, - }} - /> - )} - {isFailure && ( - <FormattedMessage - defaultMessage="Unable to disconnect from {type} temporarily because you do not have any other log in methods (Email/Crypto wallet/Social account)." - description="src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx" - values={{ - type, - }} - /> - )} - </p> - </Dialog.Message> + <DialogBeta.Content> + <DialogBeta.Content.Message> + <p> + {isConfirm && ( + <FormattedMessage + defaultMessage="Do you want to disconnect from {type}?" + description="src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx" + values={{ + type, + }} + /> + )} + {isFailure && ( + <FormattedMessage + defaultMessage="Unable to disconnect from {type} temporarily because you do not have any other log in methods (Email/Crypto wallet/Social account)." + description="src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx" + values={{ + type, + }} + /> + )} + </p> + </DialogBeta.Content.Message> + </DialogBeta.Content> {isConfirm && ( - <Dialog.Footer + <DialogBeta.Footer btns={ <> - <Dialog.RoundedButton + <DialogBeta.RoundedButton text={ <FormattedMessage defaultMessage="Disconnect" @@ -108,7 +109,7 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({ loading={loading} onClick={remove} /> - <Dialog.RoundedButton + <DialogBeta.RoundedButton text={<FormattedMessage defaultMessage="Close" />} color="greyDarker" onClick={closeDialog} @@ -117,12 +118,12 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({ } smUpBtns={ <> - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Cancel" />} color="greyDarker" onClick={closeDialog} /> - <Dialog.TextButton + <DialogBeta.TextButton text={ <FormattedMessage defaultMessage="Disconnect" @@ -138,10 +139,10 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({ )} {isFailure && ( - <Dialog.Footer + <DialogBeta.Footer btns={ <> - <Dialog.RoundedButton + <DialogBeta.RoundedButton text={<FormattedMessage defaultMessage="Close" />} color="greyDarker" onClick={closeDialog} @@ -150,7 +151,7 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({ } smUpBtns={ <> - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Close" />} color="greyDarker" onClick={closeDialog} diff --git a/src/components/Dialogs/RemoveSocialLoginDialog/index.tsx b/src/components/Dialogs/RemoveSocialLoginDialog/index.tsx index 18e1dd2e18..56e599e2c1 100644 --- a/src/components/Dialogs/RemoveSocialLoginDialog/index.tsx +++ b/src/components/Dialogs/RemoveSocialLoginDialog/index.tsx @@ -1,6 +1,6 @@ import dynamic from 'next/dynamic' -import { Dialog, Spinner, useDialogSwitch } from '~/components' +import { DialogBeta, Spinner, useDialogSwitch } from '~/components' import { SocialAccountType } from '~/gql/graphql' interface RemoveSocialLoginDialogProps { @@ -20,9 +20,9 @@ const BaseRemoveSocialLoginDialog = ({ <> {children({ openDialog })} - <Dialog isOpen={show} onDismiss={closeDialog}> + <DialogBeta isOpen={show} onDismiss={closeDialog}> <DynamicContent closeDialog={closeDialog} type={type} /> - </Dialog> + </DialogBeta> </> ) } @@ -30,7 +30,7 @@ const BaseRemoveSocialLoginDialog = ({ export const RemoveSocialLoginDialog = ( props: RemoveSocialLoginDialogProps ) => ( - <Dialog.Lazy mounted={<BaseRemoveSocialLoginDialog {...props} />}> + <DialogBeta.Lazy mounted={<BaseRemoveSocialLoginDialog {...props} />}> {({ openDialog }) => <>{props.children({ openDialog })}</>} - </Dialog.Lazy> + </DialogBeta.Lazy> ) From 0bf142ebe0c730b5d3acb455e17ff2e9236227e4 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 15:31:43 +0800 Subject: [PATCH 11/18] fix(UniversalAuthDialog): Use DialogBeta instead of Dialog --- .../GlobalDialogs/UniversalAuthDialog/index.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx b/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx index 1a8eb7a855..e5e0f9106d 100644 --- a/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx +++ b/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx @@ -10,7 +10,7 @@ import { import { WalletType } from '~/common/utils' import { AuthFeedType, - Dialog, + DialogBeta, ReCaptchaProvider, Spinner, useDialogSwitch, @@ -90,7 +90,11 @@ const BaseUniversalAuthDialog = () => { ) return ( - <Dialog isOpen={show} onDismiss={closeDialog} testId={TEST_ID.DIALOG_AUTH}> + <DialogBeta + isOpen={show} + onDismiss={closeDialog} + testId={TEST_ID.DIALOG_AUTH} + > {currStep === 'select-login-method' && ( <DynamicSelectAuthMethodForm purpose="dialog" @@ -166,7 +170,7 @@ const BaseUniversalAuthDialog = () => { email={email} /> )} - </Dialog> + </DialogBeta> ) } @@ -182,9 +186,9 @@ const UniversalAuthDialog = () => { } return ( - <Dialog.Lazy mounted={<BaseUniversalAuthDialog />}> + <DialogBeta.Lazy mounted={<BaseUniversalAuthDialog />}> {({ openDialog }) => <Children openDialog={openDialog} />} - </Dialog.Lazy> + </DialogBeta.Lazy> ) } From 7e80e4bc70058eea4da3ff79844facdb31432c1e Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 15:35:27 +0800 Subject: [PATCH 12/18] fix(SelectAuthMethodForm): Use DialogBeta instead of Dialog --- src/components/Forms/SelectAuthMethodForm/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Forms/SelectAuthMethodForm/index.tsx b/src/components/Forms/SelectAuthMethodForm/index.tsx index 73b9d023c2..2e061084f2 100644 --- a/src/components/Forms/SelectAuthMethodForm/index.tsx +++ b/src/components/Forms/SelectAuthMethodForm/index.tsx @@ -8,7 +8,7 @@ import { AuthNormalFeed, AuthTabs, AuthWalletFeed, - Dialog, + DialogBeta, } from '~/components' interface FormProps { @@ -68,12 +68,14 @@ export const SelectAuthMethodForm: React.FC<FormProps> = ({ return ( <> - <Dialog.Content noMaxHeight={isInPage}>{InnerForm}</Dialog.Content> + <DialogBeta.Content noMaxHeight={isInPage}> + {InnerForm} + </DialogBeta.Content> {isInDialog && ( - <Dialog.Footer + <DialogBeta.Footer smUpBtns={ - <Dialog.TextButton + <DialogBeta.TextButton color="greyDarker" text={<FormattedMessage defaultMessage="Close" />} onClick={closeDialog} From 38a40f575d4c9a54441415d53d443b9d80fe91c1 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 15:54:09 +0800 Subject: [PATCH 13/18] fix(EmailLoginForm): Use DialogBeta instead of Dialog --- .../AuthMethodFeed/styles.module.css | 2 +- src/components/Forms/EmailLoginForm/index.tsx | 26 +++++++++---------- .../Forms/EmailLoginForm/styles.module.css | 8 ++++++ src/views/Auth/Universal/styles.module.css | 2 ++ 4 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/components/AuthMethodFeed/styles.module.css b/src/components/AuthMethodFeed/styles.module.css index be0dd4c412..0addb0927a 100644 --- a/src/components/AuthMethodFeed/styles.module.css +++ b/src/components/AuthMethodFeed/styles.module.css @@ -39,7 +39,7 @@ text-align: center; @media (--sm-up) { - padding-bottom: var(--spacing-loose); + padding-bottom: var(--spacing-x-tight); } .errorHint { diff --git a/src/components/Forms/EmailLoginForm/index.tsx b/src/components/Forms/EmailLoginForm/index.tsx index 4340186000..b889288105 100644 --- a/src/components/Forms/EmailLoginForm/index.tsx +++ b/src/components/Forms/EmailLoginForm/index.tsx @@ -24,7 +24,7 @@ import { AuthNormalFeed, AuthTabs, AuthWalletFeed, - Dialog, + DialogBeta, Form, IconLeft20, LanguageContext, @@ -308,7 +308,7 @@ export const EmailLoginForm: React.FC<FormProps> = ({ ) const SubmitButton = ( - <Dialog.TextButton + <DialogBeta.TextButton type="submit" form={formId} disabled={!values.email || !values.password || isSubmitting} @@ -320,11 +320,11 @@ export const EmailLoginForm: React.FC<FormProps> = ({ return ( <> {!isSelectMethod && ( - <Dialog.Header + <DialogBeta.Header title={<FormattedMessage defaultMessage="Sign In" />} hasSmUpTitle={false} leftBtn={ - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Back" />} color="greyDarker" onClick={() => { @@ -337,7 +337,7 @@ export const EmailLoginForm: React.FC<FormProps> = ({ /> )} - <Dialog.Content noMaxHeight={isInPage}> + <DialogBeta.Content noMaxHeight={isInPage}> <Media at="sm"> {isSelectMethod && ( <AuthTabs @@ -362,15 +362,13 @@ export const EmailLoginForm: React.FC<FormProps> = ({ /> )} {isWallet && <AuthWalletFeed submitCallback={gotoWalletConnect} />} - </Dialog.Content> + </DialogBeta.Content> {isNormal && !isSelectMethod && ( - <Dialog.Footer - smUpContentNoSpacingBottom={isInPage} - smUpSpaceBetween + <DialogBeta.Footer smUpBtns={ - <> - <Dialog.TextButton + <section className={styles.footerBtns}> + <DialogBeta.TextButton text={ <TextIcon icon={<IconLeft20 size="mdS" />} spacing="xxxtight"> <FormattedMessage defaultMessage="Back" /> @@ -382,14 +380,14 @@ export const EmailLoginForm: React.FC<FormProps> = ({ }} /> {SubmitButton} - </> + </section> } /> )} {((isNormal && isSelectMethod) || isWallet) && !isInPage && ( - <Dialog.Footer + <DialogBeta.Footer smUpBtns={ - <Dialog.TextButton + <DialogBeta.TextButton color="greyDarker" text={<FormattedMessage defaultMessage="Close" />} onClick={closeDialog} diff --git a/src/components/Forms/EmailLoginForm/styles.module.css b/src/components/Forms/EmailLoginForm/styles.module.css index 100915f25d..0d3614558c 100644 --- a/src/components/Forms/EmailLoginForm/styles.module.css +++ b/src/components/Forms/EmailLoginForm/styles.module.css @@ -47,4 +47,12 @@ .footer { @mixin flex-center-all; + + margin-top: var(--spacing-base); +} + +.footerBtns { + @mixin flex-center-space-between; + + flex: 1; } diff --git a/src/views/Auth/Universal/styles.module.css b/src/views/Auth/Universal/styles.module.css index f693216761..4f0a2f08d4 100644 --- a/src/views/Auth/Universal/styles.module.css +++ b/src/views/Auth/Universal/styles.module.css @@ -23,4 +23,6 @@ .footer { @mixin flex-center-all; + + margin-top: var(--spacing-base); } From 44eb65ee208390070e02335cef8ac285f96b97f8 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 16:05:31 +0800 Subject: [PATCH 14/18] fix(EmailSignUp): Use DialogBeta instead of Dialog --- src/components/Forms/EmailSignUpForm/Init.tsx | 28 +++++++------- .../Forms/EmailSignUpForm/styles.module.css | 6 +++ .../Forms/Verification/LinkSent.tsx | 38 ++++++++++--------- 3 files changed, 40 insertions(+), 32 deletions(-) diff --git a/src/components/Forms/EmailSignUpForm/Init.tsx b/src/components/Forms/EmailSignUpForm/Init.tsx index 18f25f0155..11737a4f94 100644 --- a/src/components/Forms/EmailSignUpForm/Init.tsx +++ b/src/components/Forms/EmailSignUpForm/Init.tsx @@ -13,7 +13,7 @@ import { AuthFeedType, AuthTabs, AuthWalletFeed, - Dialog, + DialogBeta, Form, IconLeft20, LanguageContext, @@ -25,6 +25,8 @@ import { import SEND_CODE from '~/components/GQL/mutations/sendCode' import { SendVerificationCodeMutation } from '~/gql/graphql' +import styles from './styles.module.css' + interface FormProps { purpose: 'dialog' | 'page' submitCallback: (email: string) => void @@ -134,7 +136,7 @@ const Init: React.FC<FormProps> = ({ ) const SubmitButton = ( - <Dialog.TextButton + <DialogBeta.TextButton type="submit" form={formId} disabled={ @@ -152,11 +154,11 @@ const Init: React.FC<FormProps> = ({ return ( <> - <Dialog.Header + <DialogBeta.Header title={<FormattedMessage defaultMessage="Sign Up" />} hasSmUpTitle={false} leftBtn={ - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Back" />} color="greyDarker" onClick={back} @@ -166,7 +168,7 @@ const Init: React.FC<FormProps> = ({ rightBtn={SubmitButton} /> - <Dialog.Content> + <DialogBeta.Content> <Media at="sm">{InnerForm}</Media> <Media greaterThan="sm"> <AuthTabs @@ -178,15 +180,13 @@ const Init: React.FC<FormProps> = ({ {isNormal && <>{InnerForm}</>} {isWallet && <AuthWalletFeed submitCallback={gotoWalletConnect} />} </Media> - </Dialog.Content> + </DialogBeta.Content> {isNormal && ( - <Dialog.Footer - smUpContentNoSpacingBottom={isInPage} - smUpSpaceBetween + <DialogBeta.Footer smUpBtns={ - <> - <Dialog.TextButton + <section className={styles.footerBtns}> + <DialogBeta.TextButton text={ <TextIcon icon={<IconLeft20 size="mdS" />} spacing="xxxtight"> <FormattedMessage defaultMessage="Back" /> @@ -197,14 +197,14 @@ const Init: React.FC<FormProps> = ({ /> {SubmitButton} - </> + </section> } /> )} {isWallet && !isInPage && ( - <Dialog.Footer + <DialogBeta.Footer smUpBtns={ - <Dialog.TextButton + <DialogBeta.TextButton color="greyDarker" text={<FormattedMessage defaultMessage="Close" />} onClick={closeDialog} diff --git a/src/components/Forms/EmailSignUpForm/styles.module.css b/src/components/Forms/EmailSignUpForm/styles.module.css index 6502155fc2..0f2ba323ef 100644 --- a/src/components/Forms/EmailSignUpForm/styles.module.css +++ b/src/components/Forms/EmailSignUpForm/styles.module.css @@ -2,3 +2,9 @@ padding: var(--spacing-base); text-align: center; } + +.footerBtns { + @mixin flex-center-space-between; + + flex: 1; +} diff --git a/src/components/Forms/Verification/LinkSent.tsx b/src/components/Forms/Verification/LinkSent.tsx index 69c8863bfd..8608821581 100644 --- a/src/components/Forms/Verification/LinkSent.tsx +++ b/src/components/Forms/Verification/LinkSent.tsx @@ -1,7 +1,7 @@ import { FormattedMessage } from 'react-intl' import { PATHS } from '~/common/enums' -import { Dialog, Layout, Translate, useRoute } from '~/components' +import { Dialog, DialogBeta, Layout, Translate, useRoute } from '~/components' import styles from './styles.module.css' @@ -23,7 +23,7 @@ export const VerificationLinkSent = ({ if (isRegister) { return ( <> - <Dialog.Header + <DialogBeta.Header title={ <FormattedMessage defaultMessage="Check your inbox" @@ -34,22 +34,24 @@ export const VerificationLinkSent = ({ closeText={<FormattedMessage defaultMessage="Close" />} /> - <Dialog.Message> - <p> - <FormattedMessage - defaultMessage="The login link has been sent to {email}" - description="src/components/Forms/Verification/LinkSent.tsx" - values={{ - email: <span className={styles.email}>{email}</span>, - }} - /> - </p> - </Dialog.Message> + <DialogBeta.Content> + <DialogBeta.Content.Message> + <p> + <FormattedMessage + defaultMessage="The login link has been sent to {email}" + description="src/components/Forms/Verification/LinkSent.tsx" + values={{ + email: <span className={styles.email}>{email}</span>, + }} + /> + </p> + </DialogBeta.Content.Message> + </DialogBeta.Content> {closeDialog && ( - <Dialog.Footer + <DialogBeta.Footer smUpBtns={ - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Close" />} color="greyDarker" onClick={closeDialog} @@ -59,15 +61,15 @@ export const VerificationLinkSent = ({ )} {isInPage && ( - <Dialog.Footer + <DialogBeta.Footer btns={ - <Dialog.RoundedButton + <DialogBeta.RoundedButton text={<FormattedMessage defaultMessage="Enter Matters" />} onClick={() => router.push(PATHS.HOME)} /> } smUpBtns={ - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Enter Matters" />} onClick={() => router.push(PATHS.HOME)} /> From 313f3a03689dc24680d10371d3d44bb47f308e93 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 16:16:11 +0800 Subject: [PATCH 15/18] fix(DialogBeta): reuse dialog component --- src/components/DialogBeta/Footer/index.tsx | 6 -- src/components/DialogBeta/Handle.tsx | 25 ------- src/components/DialogBeta/Header/index.tsx | 67 ------------------- .../DialogBeta/Header/styles.module.css | 43 ------------ src/components/DialogBeta/Lazy/index.tsx | 22 ------ src/components/DialogBeta/Overlay.tsx | 7 -- src/components/DialogBeta/index.tsx | 8 +-- 7 files changed, 4 insertions(+), 174 deletions(-) delete mode 100644 src/components/DialogBeta/Handle.tsx delete mode 100644 src/components/DialogBeta/Header/index.tsx delete mode 100644 src/components/DialogBeta/Header/styles.module.css delete mode 100644 src/components/DialogBeta/Lazy/index.tsx delete mode 100644 src/components/DialogBeta/Overlay.tsx diff --git a/src/components/DialogBeta/Footer/index.tsx b/src/components/DialogBeta/Footer/index.tsx index 684cd42e51..886ebe0a2b 100644 --- a/src/components/DialogBeta/Footer/index.tsx +++ b/src/components/DialogBeta/Footer/index.tsx @@ -10,8 +10,6 @@ import styles from './styles.module.css' type FooterProps = { btns?: React.ReactNode smUpBtns?: React.ReactNode - // smUpContentNoSpacingBottom?: boolean - // smUpSpaceBetween?: boolean closeText?: React.ReactNode closeDialog?: () => any } @@ -19,8 +17,6 @@ type FooterProps = { const Footer: React.FC<FooterProps> = ({ btns, smUpBtns, - // smUpContentNoSpacingBottom = false, - // smUpSpaceBetween = false, closeText, closeDialog, }) => { @@ -38,8 +34,6 @@ const Footer: React.FC<FooterProps> = ({ const smUpContentClasses = classNames({ [styles.smUpContent]: true, - // [styles.smUpSpaceBetween]: !!smUpSpaceBetween, - // [styles.smUpContentNoSpacingBottom]: !!smUpContentNoSpacingBottom, }) const SmUpBtns = () => ( diff --git a/src/components/DialogBeta/Handle.tsx b/src/components/DialogBeta/Handle.tsx deleted file mode 100644 index 0f24069538..0000000000 --- a/src/components/DialogBeta/Handle.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useIntl } from 'react-intl' - -import styles from './styles.module.css' - -interface HandleProps { - closeDialog: () => void -} - -const Handle: React.FC<HandleProps> = ({ closeDialog, ...props }) => { - const intl = useIntl() - - return ( - <button - type="button" - className={styles.handle} - aria-label={intl.formatMessage({ defaultMessage: 'Close' })} - onClick={closeDialog} - {...props} - > - <span className={styles.icon} /> - </button> - ) -} - -export default Handle diff --git a/src/components/DialogBeta/Header/index.tsx b/src/components/DialogBeta/Header/index.tsx deleted file mode 100644 index 47e5f82261..0000000000 --- a/src/components/DialogBeta/Header/index.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { VisuallyHidden } from '@reach/visually-hidden' -import { FormattedMessage } from 'react-intl' - -import { TextId } from '~/common/enums' -import { Media, Translate } from '~/components' - -import { TextButton } from '../Buttons' -import styles from './styles.module.css' - -export interface HeaderProps { - title: TextId | React.ReactNode - hasSmUpTitle?: boolean - - leftBtn?: React.ReactNode - rightBtn?: React.ReactNode | string - - closeText?: React.ReactNode - closeDialog?: () => any -} - -const Title = ({ title }: Pick<HeaderProps, 'title'>) => ( - <h1 id="dialog-title" className={styles.title}> - {typeof title === 'string' ? <Translate id={title as TextId} /> : title} - </h1> -) - -const Header: React.FC<HeaderProps> = ({ - title, - hasSmUpTitle = true, - leftBtn, - rightBtn, - closeText, - closeDialog, -}) => { - const text = closeText || <FormattedMessage defaultMessage="Cancel" /> - - return ( - <> - <Media at="sm"> - <header className={styles.header}> - <Title title={title} /> - {leftBtn && <section className={styles.left}>{leftBtn}</section>} - {!leftBtn && closeDialog && ( - <section className={styles.left}> - <TextButton text={text} onClick={closeDialog} /> - </section> - )} - <section className={styles.right}>{rightBtn}</section> - </header> - </Media> - - <Media greaterThan="sm"> - {hasSmUpTitle ? ( - <header className={styles.smUpheader}> - <Title title={title} /> - </header> - ) : ( - <VisuallyHidden> - <Title title={title} /> - </VisuallyHidden> - )} - </Media> - </> - ) -} - -export default Header diff --git a/src/components/DialogBeta/Header/styles.module.css b/src/components/DialogBeta/Header/styles.module.css deleted file mode 100644 index 0b9efe6d1a..0000000000 --- a/src/components/DialogBeta/Header/styles.module.css +++ /dev/null @@ -1,43 +0,0 @@ -.header { - @mixin flex-center-space-between; - - position: relative; - flex-shrink: 0; - padding: var(--spacing-x-loose) var(--spacing-base) var(--spacing-x-tight); - background: var(--color-white); - border-radius: var(--spacing-x-tight) var(--spacing-x-tight) 0 0; - - & .title { - @mixin flex-center-all; - - position: absolute; - inset: 0; - padding: var(--spacing-x-loose) 0 var(--spacing-x-tight); - font-size: var(--font-size-lg); - font-weight: var(--font-weight-medium); - line-height: 1.75rem; - } - - & .left, - & .right { - display: inline-flex; - min-height: 1.75rem; - - & > * { - line-height: 1.5rem; - } - } -} - -.smUpheader { - @mixin flex-center-space-between; - - padding: 0 var(--spacing-base-loose); - margin: var(--spacing-base-loose) 0 var(--spacing-base); - - & .title { - font-size: var(--font-size-lg); - font-weight: var(--font-weight-medium); - line-height: 1.875rem; - } -} diff --git a/src/components/DialogBeta/Lazy/index.tsx b/src/components/DialogBeta/Lazy/index.tsx deleted file mode 100644 index 4a8479b52a..0000000000 --- a/src/components/DialogBeta/Lazy/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { useState } from 'react' - -interface DialogLazyProps { - children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode - mounted: React.ReactNode -} - -const DialogLazy = ({ - children, - mounted: mountedChildren, -}: DialogLazyProps) => { - const [mounted, setMounted] = useState(false) - const mount = () => setMounted(true) - - if (mounted) { - return <>{mountedChildren}</> - } - - return <>{children({ openDialog: mount })}</> -} - -export default DialogLazy diff --git a/src/components/DialogBeta/Overlay.tsx b/src/components/DialogBeta/Overlay.tsx deleted file mode 100644 index abf0e051f8..0000000000 --- a/src/components/DialogBeta/Overlay.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import styles from './styles.module.css' - -const Overlay = (props: { style: React.CSSProperties }) => ( - <div aria-hidden className={styles.overlay} {...props}></div> -) - -export default Overlay diff --git a/src/components/DialogBeta/index.tsx b/src/components/DialogBeta/index.tsx index 0f01b30e2d..b9af4d2c38 100644 --- a/src/components/DialogBeta/index.tsx +++ b/src/components/DialogBeta/index.tsx @@ -10,13 +10,13 @@ import { KEYVALUE } from '~/common/enums' import { capitalizeFirstLetter, dom } from '~/common/utils' import { Media, useOutsideClick } from '~/components' +import Handle from '../Dialog/Handle' +import Header from '../Dialog/Header' +import Lazy from '../Dialog/Lazy' +import Overlay from '../Dialog/Overlay' import { RoundedButton, TextButton } from './Buttons' import Content from './Content' import Footer from './Footer' -import Handle from './Handle' -import Header from './Header' -import Lazy from './Lazy' -import Overlay from './Overlay' import styles from './styles.module.css' export interface DialogBetaOverlayProps { From 9453ec40c134ecb0dc7371545a41dd82e4cba2ad Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 16:40:56 +0800 Subject: [PATCH 16/18] fix(DialogBeta): reuse dialog component 2 --- src/components/DialogBeta/Buttons.tsx | 128 --------------------- src/components/DialogBeta/Footer/index.tsx | 2 +- src/components/DialogBeta/index.tsx | 2 +- 3 files changed, 2 insertions(+), 130 deletions(-) delete mode 100644 src/components/DialogBeta/Buttons.tsx diff --git a/src/components/DialogBeta/Buttons.tsx b/src/components/DialogBeta/Buttons.tsx deleted file mode 100644 index 88f13a26a5..0000000000 --- a/src/components/DialogBeta/Buttons.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { forwardRef } from 'react' - -import { TextId } from '~/common/enums' -import { - Button, - ButtonProps, - IconSpinner16, - TextIcon, - Translate, -} from '~/components' - -export type DialogTextButtonProps = { - text: TextId | React.ReactNode - color?: 'greyDarker' | 'green' | 'red' - loading?: boolean -} & ButtonProps - -export const TextButton: React.FC<DialogTextButtonProps> = ({ - text, - color = 'green', - loading, - ...restProps -}) => { - let buttonProps: ButtonProps = restProps - - switch (color) { - case 'greyDarker': - buttonProps = { - ...buttonProps, - textColor: 'greyDarker', - textActiveColor: 'black', - } - break - case 'green': - buttonProps = { - ...buttonProps, - textColor: 'green', - textActiveColor: 'greenDark', - } - break - case 'red': - buttonProps = { - ...buttonProps, - textColor: 'red', - textActiveColor: 'redDark', - } - break - } - - return ( - <Button {...buttonProps}> - <TextIcon - size="md" - weight="md" - icon={loading && <IconSpinner16 size="sm" />} - > - {!loading ? ( - typeof text === 'string' ? ( - <Translate id={text as TextId} /> - ) : ( - text - ) - ) : null} - </TextIcon> - </Button> - ) -} - -export type DialogRoundedButtonProps = { - text: TextId | React.ReactNode - color?: 'greyDarker' | 'green' | 'red' - icon?: React.ReactNode - loading?: boolean -} & ButtonProps - -export const RoundedButton: React.FC< - React.PropsWithChildren<DialogRoundedButtonProps> -> = forwardRef( - ({ text, color = 'green', loading, icon, disabled, ...restProps }, ref) => { - let buttonProps: ButtonProps = restProps - - switch (color) { - case 'greyDarker': - buttonProps = { - ...buttonProps, - borderColor: 'greyDarker', - textColor: 'greyDarker', - } - break - case 'green': - buttonProps = { - ...buttonProps, - borderColor: 'green', - textColor: 'green', - } - break - case 'red': - buttonProps = { ...buttonProps, borderColor: 'red', textColor: 'red' } - break - } - - return ( - <Button - size={['100%', '3rem']} - disabled={disabled || loading} - ref={ref} - {...buttonProps} - > - <TextIcon - icon={icon || (loading && <IconSpinner16 size="md" />)} - size="xm" - weight="md" - textPlacement="left" - > - {!loading ? ( - typeof text === 'string' ? ( - <Translate id={text as TextId} /> - ) : ( - text - ) - ) : null} - </TextIcon> - </Button> - ) - } -) - -RoundedButton.displayName = 'RoundedButton' diff --git a/src/components/DialogBeta/Footer/index.tsx b/src/components/DialogBeta/Footer/index.tsx index 886ebe0a2b..e9f950b6bf 100644 --- a/src/components/DialogBeta/Footer/index.tsx +++ b/src/components/DialogBeta/Footer/index.tsx @@ -3,8 +3,8 @@ import React from 'react' import { FormattedMessage } from 'react-intl' import { Media } from '~/components' +import { RoundedButton, TextButton } from '~/components/Dialog/Buttons' -import { RoundedButton, TextButton } from '../Buttons' import styles from './styles.module.css' type FooterProps = { diff --git a/src/components/DialogBeta/index.tsx b/src/components/DialogBeta/index.tsx index b9af4d2c38..6c44d13861 100644 --- a/src/components/DialogBeta/index.tsx +++ b/src/components/DialogBeta/index.tsx @@ -10,11 +10,11 @@ import { KEYVALUE } from '~/common/enums' import { capitalizeFirstLetter, dom } from '~/common/utils' import { Media, useOutsideClick } from '~/components' +import { RoundedButton, TextButton } from '../Dialog/Buttons' import Handle from '../Dialog/Handle' import Header from '../Dialog/Header' import Lazy from '../Dialog/Lazy' import Overlay from '../Dialog/Overlay' -import { RoundedButton, TextButton } from './Buttons' import Content from './Content' import Footer from './Footer' import styles from './styles.module.css' From 6d6031786da9047f18d218fb63e961dd36c92b3a Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 16:42:10 +0800 Subject: [PATCH 17/18] fix(AddWalletLoginDialog): fix typo --- src/components/Dialogs/AddWalletLoginDialog/Content.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/Dialogs/AddWalletLoginDialog/Content.tsx b/src/components/Dialogs/AddWalletLoginDialog/Content.tsx index 9081619f26..f01bde8db0 100644 --- a/src/components/Dialogs/AddWalletLoginDialog/Content.tsx +++ b/src/components/Dialogs/AddWalletLoginDialog/Content.tsx @@ -2,12 +2,7 @@ import React, { useState } from 'react' import { FormattedMessage } from 'react-intl' import { WalletType } from '~/common/utils' -import { - AuthWalletFeed, - Dialog, - DialogBeta, - WalletAuthForm, -} from '~/components' +import { AuthWalletFeed, DialogBeta, WalletAuthForm } from '~/components' interface Props { closeDialog: () => void @@ -55,7 +50,7 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => { <DialogBeta.Footer smUpBtns={ <> - <Dialog.TextButton + <DialogBeta.TextButton text={<FormattedMessage defaultMessage="Close" />} color="greyDarker" onClick={closeDialog} From ca718a96a605d15ce06a96418eaba6b97d433478 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Thu, 21 Sep 2023 16:43:08 +0800 Subject: [PATCH 18/18] fix(WalletAuthForm.Connect): remove unused code --- src/components/Forms/WalletAuthForm/Connect.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Forms/WalletAuthForm/Connect.tsx b/src/components/Forms/WalletAuthForm/Connect.tsx index f7314aff30..959ac61bd0 100644 --- a/src/components/Forms/WalletAuthForm/Connect.tsx +++ b/src/components/Forms/WalletAuthForm/Connect.tsx @@ -306,8 +306,6 @@ const Connect: React.FC<FormProps> = ({ </DialogBeta.Content> <DialogBeta.Footer - // smUpContentNoSpacingBottom={isInPage} - // smUpSpaceBetween smUpBtns={ <> <DialogBeta.TextButton