Merge pull request #3422 from thematters/develop

Release: v4.20.2

package.json

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

src/common/enums/index.ts

@@ -51,7 +51,7 @@ export const VERIFICATION_CODE_TYPES = {
 export const MAX_ARTICLE_REVISION_COUNT = 4
 export const MAX_ARTICLE_REVISION_DIFF = 50
 export const MAX_ARTICLE_TAG_LENGTH = 3
-export const MAX_ARTICLE_COLLECT_LENGTH = 10
+export const MAX_ARTICLE_COLLECT_LENGTH = 7
 
 export const MAX_TAG_CONTENT_LENGTH = 50
 export const MAX_TAG_DESCRIPTION_LENGTH = 200

src/common/utils/url.ts

@@ -24,7 +24,7 @@ export const parseURL = (url: string) => {
 /**
  * Responsive Image
  */
-export type ToSizedImageURLSize = '144w' | '360w' | '540w' | '1080w'
+export type ToSizedImageURLSize = '144w' | '360w' | '540w' | '1080w' | '1280w'
 
 interface ToSizedImageURLProps {
   url: string

src/components/Avatar/index.tsx

@@ -3,6 +3,7 @@ import gql from 'graphql-tag'
 
 import ICON_AVATAR_DEFAULT from '@/public/static/icons/72px/avatar-default.svg'
 import IMAGE_MATTERS_ARCHITECT_RING from '@/public/static/icons/architect-ring.svg'
+import IMAGE_CIVIC_LIKER_MATTERS_ARCHITECT_RING from '@/public/static/icons/civic-liker-architect-ring.svg'
 import IMAGE_CIVIC_LIKER_RING from '@/public/static/icons/civic-liker-ring.svg'
 import LOGBOOK from '@/public/static/images/logbook.gif'
 import { IconLogbookBadge16, ResponsiveImage } from '~/components'
@@ -73,8 +74,15 @@ export const Avatar = (props: AvatarProps) => {
         disabled={isFallback || inEditor}
       />
 
-      {isCivicLiker && <span className="civic-liker ring" />}
-      {hasArchitectBadge && <span className="architect ring" />}
+      {isCivicLiker && !hasArchitectBadge && (
+        <span className="civic-liker ring" />
+      )}
+      {hasArchitectBadge && !isCivicLiker && (
+        <span className="architect ring" />
+      )}
+      {hasArchitectBadge && isCivicLiker && (
+        <span className="civic-architect ring" />
+      )}
       {hasLogbook && (
         <section className="badge">
           {inProfile ? (
@@ -94,6 +102,9 @@ export const Avatar = (props: AvatarProps) => {
         .architect.ring {
           background-image: url(${IMAGE_MATTERS_ARCHITECT_RING});
         }
+        .civic-architect.ring {
+          background-image: url(${IMAGE_CIVIC_LIKER_MATTERS_ARCHITECT_RING});
+        }
       `}</style>
     </div>
   )

src/components/Avatar/styles.css

@@ -18,14 +18,12 @@
  * Ring
  */
 .hasRing {
-  margin: 2px 0;
-
   & .ring {
     position: absolute;
-    top: -2px;
-    right: -2px;
-    bottom: -2px;
-    left: -2px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
   }
 }
 
@@ -115,17 +113,6 @@
   width: 2.5rem;
   height: 2.5rem;
 
-  &.hasRing {
-    margin: 4px 0;
-
-    & .ring {
-      top: -4px;
-      right: -4px;
-      bottom: -4px;
-      left: -4px;
-    }
-  }
-
   &.hasBadge {
     & .badge {
       & :global(svg) {
@@ -140,15 +127,6 @@
   width: 3rem;
   height: 3rem;
 
-  &.hasRing {
-    & .ring {
-      top: -5px;
-      right: -5px;
-      bottom: -5px;
-      left: -5px;
-    }
-  }
-
   &.hasBadge {
     & .badge {
       & :global(svg) {
@@ -164,15 +142,6 @@
   width: 3.5rem;
   height: 3.5rem;
 
-  &.hasRing {
-    & .ring {
-      top: -6px;
-      right: -6px;
-      bottom: -6px;
-      left: -6px;
-    }
-  }
-
   &.hasBadge {
     & .badge {
       & :global(svg) {
@@ -187,15 +156,6 @@
   width: 4.5rem;
   height: 4.5rem;
 
-  &.hasRing {
-    & .ring {
-      top: -8px;
-      right: -8px;
-      bottom: -8px;
-      left: -8px;
-    }
-  }
-
   &.hasBadge {
     & .badge {
       & :global(svg) {

src/components/Buttons/ViewMoreCard/index.tsx

@@ -41,7 +41,7 @@ export const ViewMoreCard: React.FC<
         {...cardProps}
       >
         <TextIcon
-          icon={<IconArrowRight16 size="xs" {...iconProps} />}
+          icon={<IconArrowRight16 {...iconProps} />}
           textPlacement="left"
           color="green"
           {...textIconProps}

src/components/Cover/index.tsx

@@ -21,8 +21,7 @@ export const Cover: React.FC<React.PropsWithChildren<CoverProps>> = ({
     <div className="cover">
       <ResponsiveImage
         url={url}
-        size="540w"
-        smUpSize="1080w"
+        size="1280w"
         disabled={isFallback || inEditor}
       />
 

src/components/Dialog/Content/index.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames'
 
 import styles from './styles.css'
 
-type SpacingX = 0 | 'base' | 'xloose'
-type SpacingY = 0 | 'base' | 'xloose'
+type SpacingX = 0 | 'tight' | 'base' | 'xloose'
+type SpacingY = 0 | 'tight' | 'base' | 'xloose'
 
 interface DialogContentProps {
   // Note: only apply in "sm-up" if the spacing is large than "base"

src/components/Dialog/Content/styles.css

@@ -20,6 +20,13 @@
   padding-left: 0;
 }
 
+.spacing-x-tight {
+  @media (--sm-up) {
+    padding-right: var(--spacing-tight);
+    padding-left: var(--spacing-tight);
+  }
+}
+
 .spacing-x-xloose {
   @media (--sm-up) {
     padding-right: var(--spacing-x-loose);
@@ -32,6 +39,13 @@
   padding-bottom: 0;
 }
 
+.spacing-y-tight {
+  @media (--sm-up) {
+    padding-top: var(--spacing-tight);
+    padding-bottom: var(--spacing-tight);
+  }
+}
+
 .spacing-y-xloose {
   @media (--sm-up) {
     padding-top: var(--spacing-x-loose);

src/components/Dialog/Header/styles.css

@@ -1,6 +1,6 @@
 header {
   @mixin flex-center-space-between;
-  @mixin shadow-border-bottom-grey;
+  @mixin border-bottom-grey;
 
   position: relative;
   flex-shrink: 0;
@@ -47,7 +47,7 @@ header {
 }
 
 .inner {
-  box-shadow: none;
+  border-bottom: none;
 
   & :global(> :not(h1)) {
     visibility: hidden;

src/components/UserProfile/CircleWidget/index.tsx

@@ -40,9 +40,8 @@ const CircleWidget: React.FC<CircleWidgetProps> = ({ circles, isMe }) => {
 
     return (
       <section className="circle-widget">
-        <Form.List forceGreyStyle>
+        <Form.List spacingX={0}>
           <Form.List.Item
-            forceGreyStyle
             bold
             title={
               <FormattedMessage
@@ -55,6 +54,10 @@ const CircleWidget: React.FC<CircleWidgetProps> = ({ circles, isMe }) => {
               analytics.trackEvent('click_button', { type: 'create_circle' })
             }}
             role="button"
+            bgColor="grey-lighter"
+            bgActiveColor="grey-lighter"
+            spacing={[0, 'base']}
+            borderRadius="xtight"
           />
         </Form.List>
 

src/components/UserProfile/FollowersDialog/Content.tsx

@@ -124,6 +124,7 @@ const FollowersDialogContent = () => {
                     id: node.id,
                   })
                 }
+                spacing={['tight', 'base']}
               />
             </List.Item>
           ))}

src/components/UserProfile/FollowingDialog/CirclesFeed/index.tsx

@@ -91,7 +91,7 @@ const CirclesFeed = () => {
           <List.Item key={cursor}>
             <CircleDigest.Mini
               circle={node}
-              spacing={['base', 'tight']}
+              spacing={['tight', 'base']}
               onClick={() =>
                 analytics.trackEvent('click_feed', {
                   type: 'user_circle',
@@ -100,6 +100,7 @@ const CirclesFeed = () => {
                   id: node.id,
                 })
               }
+              bgActiveColor="none"
             />
           </List.Item>
         ))}

src/components/UserProfile/FollowingDialog/Content/index.tsx

@@ -11,7 +11,7 @@ const FollowingDialogContent = () => {
   const [feedType, setFeedType] = useState<FollowingFeedType>('user')
 
   return (
-    <Dialog.Content spacing={['base', 'base']}>
+    <Dialog.Content>
       <FeedType type={feedType} setFeedType={setFeedType} />
       {feedType === 'circle' && <CirclesFeed />}
       {feedType === 'tag' && <TagsFeed />}