Merge pull request #4039 from thematters/develop

Release: v4.28.1

.env.dev

@@ -31,7 +31,7 @@ NEXT_PUBLIC_USDT_CONTRACT_ADDRESS=0xfe4F5145f6e09952a5ba9e956ED0C25e3Fa4c7F1
 NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS=0xa219c6722008aa22828b31a13ab9ba93bb91222c
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=315393900359-2r9fundftis7dc0tdeo2hf8630nfdd8h.apps.googleusercontent.com
 NEXT_PUBLIC_TWITTER_CLIENT_ID=X3d6Szg5bnVCMm5wRWxSVmhXUTc6MTpjaQ
-NEXT_PUBLIC_FACEBOOK_CLIENT_ID=823885921293850
+NEXT_PUBLIC_FACEBOOK_CLIENT_ID=203337806078602
 NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=0x4AAAAAAAKiedvR5qiLUhIs
 DEBUG=false
 PLAYWRIGHT_RUNTIME_ENV=ci

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.28.0",
+  "version": "4.28.1",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",

src/components/ArticleDigest/Feed/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 
 import { TEST_ID } from '~/common/enums'
 import { stripHtml, toPath, UtmParams } from '~/common/utils'
@@ -9,6 +9,7 @@ import {
   LinkWrapper,
   Media,
   ResponsiveImage,
+  useIsomorphicLayoutEffect,
 } from '~/components'
 import { UserDigest } from '~/components/UserDigest'
 import {
@@ -60,21 +61,16 @@ const BaseArticleDigestFeed = ({
 }: ArticleDigestFeedProps) => {
   const titleRef: React.RefObject<any> = useRef(null)
 
-  const [height, setHeight] = useState(0)
   const [titleLine, setTitleLine] = useState(2)
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (titleRef && titleRef.current) {
-      setHeight(titleRef.current.clientHeight)
+      if (titleRef.current.clientHeight === 24) {
+        setTitleLine(1)
+      }
     }
   }, [])
 
-  useEffect(() => {
-    if (height === 24) {
-      setTitleLine(1)
-    }
-  }, [height])
-
   const { author, summary } = article
   const isBanned = article.articleState === 'banned'
   const cover = !isBanned ? article.cover : null
@@ -83,7 +79,7 @@ const BaseArticleDigestFeed = ({
   const summaryClasses = classNames({
     [styles.description]: true,
     [styles.lineClamp2]: titleLine === 1,
-    [styles.hasCover]: !!cover,
+    [styles.minHeight]: !!cover && titleLine === 1,
   })
 
   const path = toPath({

src/components/ArticleDigest/Feed/styles.module.css

@@ -43,7 +43,7 @@
     -webkit-line-clamp: 2;
   }
 
-  &.hasCover {
+  &.minHeight {
     min-height: 2.75rem;
   }
 }

src/components/Dialog/Content/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 
+import Message from '../Message'
 import styles from './styles.module.css'
 
 interface DialogContentProps {
@@ -10,7 +11,9 @@ interface DialogContentProps {
   noMaxHeight?: boolean
 }
 
-const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> = ({
+const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> & {
+  Message: typeof Message
+} = ({
   noSpacing,
   smExtraSpacing = true,
   noSpacingBottom,
@@ -27,7 +30,13 @@ 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
+
 export default DialogContent

src/components/Dialog/Footer/index.tsx

@@ -3,24 +3,20 @@ 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 = {
   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,
 }) => {
@@ -40,12 +36,10 @@ const Footer: React.FC<FooterProps> = ({
 
   const smUpContentClasses = classNames({
     [styles.smUpContent]: true,
-    [styles.smUpSpaceBetween]: !!smUpSpaceBetween,
-    [styles.smUpContentNoSpacingBottom]: !!smUpContentNoSpacingBottom,
   })
 
   return (
-    <footer className={footerClasses}>
+    <footer className={footerClasses} data-dialog-entity={!!hasBtns}>
       <Media at="sm">
         {hasBtns && (
           <section className={styles.content}>
@@ -59,13 +53,7 @@ const Footer: React.FC<FooterProps> = ({
             )}
           </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>
-
       {hasSmUpBtns && (
         <Media greaterThan="sm">
           <section className={smUpContentClasses}>

src/components/Dialog/Footer/styles.module.css

@@ -8,7 +8,7 @@
 
   flex-direction: column;
   flex-shrink: 0;
-  padding: var(--spacing-base-loose) var(--spacing-base) var(--spacing-xx-loose);
+  padding: var(--spacing-base-loose) var(--spacing-base) 0;
 
   & > * {
     flex: 1;
@@ -31,11 +31,3 @@
     margin-left: var(--spacing-x-loose);
   }
 }
-
-.smUpContentNoSpacingBottom {
-  margin-bottom: 0;
-}
-
-.smUpSpaceBetween {
-  @mixin flex-center-space-between;
-}

src/components/Dialog/Message/index.tsx

@@ -1,17 +1,14 @@
 import classNames from 'classnames'
 
 import { capitalizeFirstLetter } from '~/common/utils'
-import { Dialog } from '~/components'
 
 import styles from './styles.module.css'
 
 interface DialogMessageProps {
   align?: 'left' | 'center'
   smUpAlign?: 'left' | 'center'
   type?: 'error'
-
-  noSpacing?: boolean
-  noSpacingBottom?: boolean
+  spacingBottom?: boolean
 }
 
 /**
@@ -32,26 +29,21 @@ interface DialogMessageProps {
 const DialogMessage: React.FC<React.PropsWithChildren<DialogMessageProps>> = ({
   align = 'center',
   smUpAlign = 'left',
+  spacingBottom,
   type,
 
-  noSpacing,
-  noSpacingBottom,
-
   children,
 }) => {
   const contentClasses = classNames({
     [styles.content]: true,
+    [styles.spacingBottom]: !!spacingBottom,
     [styles[`${type}`]]: !!type,
     [align ? styles[`align${capitalizeFirstLetter(align)}`] : '']: !!align,
     [smUpAlign ? styles[`alignSmUp${capitalizeFirstLetter(smUpAlign)}`] : '']:
       !!smUpAlign,
   })
 
-  return (
-    <Dialog.Content noSpacing={noSpacing} noSpacingBottom={noSpacingBottom}>
-      <section className={contentClasses}>{children}</section>
-    </Dialog.Content>
-  )
+  return <section className={contentClasses}>{children}</section>
 }
 
 export default DialogMessage

src/components/Dialog/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);
   }
 
@@ -69,3 +69,7 @@
     text-align: left;
   }
 }
+
+.spacingBottom {
+  padding-bottom: var(--spacing-base);
+}

src/components/Dialog/index.tsx

@@ -17,7 +17,6 @@ import Handle from './Handle'
 import Header from './Header'
 import Lazy from './Lazy'
 import Message from './Message'
-import Overlay from './Overlay'
 import styles from './styles.module.css'
 
 export interface DialogOverlayProps {
@@ -34,6 +33,7 @@ export type DialogProps = {
   hidePaddingBottom?: boolean
 
   testId?: string
+  scrollable?: boolean
 } & DialogOverlayProps
 
 const Container: React.FC<
@@ -121,11 +121,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>
   )
 }
@@ -136,12 +136,12 @@ export const Dialog: React.ComponentType<
   Header: typeof Header
   Content: typeof Content
   Footer: typeof Footer
-  Message: typeof Message
   TextButton: typeof TextButton
+  Message: typeof Message
   RoundedButton: typeof RoundedButton
   Lazy: typeof Lazy
 } = (props) => {
-  const { isOpen, onRest } = props
+  const { isOpen, onRest, scrollable } = props
   const [mounted, setMounted] = useState(isOpen)
   const initialFocusRef = useRef<any>(null)
 
@@ -177,9 +177,14 @@ export const Dialog: React.ComponentType<
     }
   })
 
+  const dialogOverlayClasses = classNames({
+    dialog: true,
+    [styles.scrollable]: !!scrollable,
+    [styles.overlay]: !!mounted,
+  })
+
   const AnimatedDialogOverlay = animated(DialogOverlay)
   const AnimatedContainer = animated(Container)
-  const AnimatedOverlay = animated(Overlay)
 
   if (!mounted) {
     return null
@@ -188,11 +193,10 @@ export const Dialog: React.ComponentType<
   return (
     <>
       <AnimatedDialogOverlay
-        className="dialog"
+        className={dialogOverlayClasses}
         initialFocusRef={initialFocusRef}
+        style={{ opacity: opacity as any }}
       >
-        <AnimatedOverlay style={{ opacity: opacity as any }} />
-
         <DialogContent aria-labelledby="dialog-title">
           <AnimatedContainer
             style={{ opacity: opacity as any, top }}
@@ -208,8 +212,8 @@ export const Dialog: React.ComponentType<
 
 Dialog.Header = Header
 Dialog.Content = Content
-Dialog.Footer = Footer
 Dialog.Message = Message
+Dialog.Footer = Footer
 Dialog.TextButton = TextButton
 Dialog.RoundedButton = RoundedButton
 Dialog.Lazy = Lazy

src/components/Dialog/styles.module.css

@@ -1,7 +1,4 @@
 .overlay {
-  @mixin expand-to-container;
-
-  content: '';
   background: rgb(0 0 0 / 40%);
   will-change: opacity;
 }
@@ -25,6 +22,12 @@
     background: var(--color-white);
   }
 
+  & :nth-last-child(1 of [data-dialog-entity='true']) {
+    @media (--sm-down) {
+      padding-bottom: var(--spacing-xx-loose);
+    }
+  }
+
   &.bgGreyLighter {
     background: var(--color-grey-lighter);
 
@@ -49,10 +52,15 @@
   }
 }
 
+.scrollable {
+  overflow: auto !important;
+}
+
 .handle {
   position: absolute;
   top: 0;
   left: 50%;
+  z-index: calc(var(--z-index-dialog) + 1);
   padding: var(--spacing-x-tight);
   transform: translateX(-50%);