Fix/dialog beta

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);

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<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'

src/components/DialogBeta/Content/index.tsx

@@ -0,0 +1,42 @@
+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<React.PropsWithChildren<DialogContentProps>> & {
+  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 (
+    <section className={contentClasses} data-dialog-entity>
+      {children}
+    </section>
+  )
+}
+
+DialogContent.Message = Message
+
+export default DialogContent

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;
+}

src/components/DialogBeta/Footer/index.tsx

@@ -0,0 +1,92 @@
+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<FooterProps> = ({
+  btns,
+  smUpBtns,
+  // smUpContentNoSpacingBottom = false,
+  // smUpSpaceBetween = false,
+  closeText,
+  closeDialog,
+}) => {
+  if (!btns && !smUpBtns && !closeDialog) {
+    return null
+  }
+
+  const text = closeText || <FormattedMessage defaultMessage="Cancel" />
+
+  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,
+  })
+
+  const SmUpBtns = () => (
+    <>
+      {hasSmUpBtns && (
+        <Media greaterThan="sm">
+          <section className={smUpContentClasses}>
+            {closeDialog && (
+              <TextButton
+                text={text}
+                color="greyDarker"
+                onClick={closeDialog}
+              />
+            )}
+            {smUpBtns}
+          </section>
+        </Media>
+      )}
+    </>
+  )
+
+  if (hasBtns) {
+    return (
+      <footer className={footerClasses} data-dialog-entity>
+        <Media at="sm">
+          <section className={styles.content}>
+            {btns}
+            {closeDialog && (
+              <RoundedButton
+                text={text}
+                color="greyDarker"
+                onClick={closeDialog}
+              />
+            )}
+          </section>
+        </Media>
+
+        <SmUpBtns />
+      </footer>
+    )
+  }
+
+  return (
+    <footer className={footerClasses}>
+      <SmUpBtns />
+    </footer>
+  )
+}
+
+export default Footer

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;
+} */

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<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