Merge pull request #5778 from thematters/develop

Release: v6.3.3

Author: ham-76

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "6.3.2",
+  "version": "6.3.3",
   "description": "codebase of Matters' website",
   "author": "Matters <hi@matters.town>",
   "engines": {

package.json

@@ -7,3 +7,6 @@ const isProd = process.env.NEXT_PUBLIC_RUNTIME_ENV === 'production'
 export const FEATUED_CHANNEL_SHORT_HASH = isProd
   ? 'zlkqtdykun21'
   : 'zctb1wb9s2vn'
+export const CREATIONS_CHANNEL_SHORT_HASH = isProd
+  ? '1ptnue2cleq4'
+  : 'r09vjix6reha'

src/common/enums/channel.ts

@@ -76,4 +76,5 @@
   --color-new-palette-attention-600: #ddc700;
   --color-new-palette-attention-700: #cab600;
   --color-new-palette-secondary-700: #379f03;
+  --color-new-palette-primary-500: #9280f5;
 }

src/common/styles/variables/colors.css

@@ -16,6 +16,7 @@
   --sp30: 1.875rem; /* 30px */
   --sp32: 2rem; /* 32px */
   --sp40: 2.5rem; /* 40px */
+  --sp44: 2.75rem; /* 44px */
   --sp48: 3rem; /* 48px */
   --sp64: 4rem; /* 64px */
   --ar17-100: 0.93125rem; /* 14.9px */

src/common/styles/variables/spacing.css

@@ -103,7 +103,7 @@
   height: 0.125rem;
   margin-right: var(--sp8);
   cursor: pointer;
-  background: var(--color-grey-darker);
+  background: var(--color-grey-scale-white-60);
   border: 1px solid rgb(255 255 255 / 0%);
   border-radius: 1px;
   transition-property: border-color, border-width, background-color;

src/components/Announcements/Carousel/styles.module.css

@@ -28,6 +28,17 @@ export const fragments = {
             ...DigestTitleCircle
           }
         }
+        collections(input: { first: null }) {
+          edges {
+            node {
+              id
+              title
+              articles(input: { first: 0 }) {
+                totalCount
+              }
+            }
+          }
+        }
         campaigns {
           campaign {
             id

src/components/ArticleDigest/Feed/FooterActions/gql.ts

@@ -2,6 +2,7 @@ import Link from 'next/link'
 import { useContext } from 'react'
 import { FormattedMessage } from 'react-intl'
 
+import IconBook2 from '@/public/static/icons/24px/book2.svg'
 import IconPaywall from '@/public/static/icons/24px/paywall.svg'
 import IconStar from '@/public/static/icons/24px/star.svg'
 import { toPath } from '~/common/utils'
@@ -29,6 +30,7 @@ export type FooterActionsProps = {
   hasDonationCount?: boolean
   hasCircle?: boolean
   hasCampaign?: boolean
+  hasCollection?: boolean
   tag?: React.ReactNode
   includesMetaData?: boolean
 } & FooterActionsControls
@@ -40,6 +42,7 @@ const FooterActions = ({
   hasDonationCount,
   hasCircle,
   hasCampaign = true,
+  hasCollection = false,
   tag,
   includesMetaData = true,
   ...controls
@@ -50,6 +53,18 @@ const FooterActions = ({
   const viewer = useContext(ViewerContext)
   const { lang } = useContext(LanguageContext)
   const { channelId, pinned, hasTogglePinChannelArticles } = controls
+  const collection = article.collections.edges
+    ?.map((edge) => edge.node)
+    .reduce(
+      (maxCollection, currentCollection) => {
+        if (!maxCollection) return currentCollection
+        return currentCollection.articles.totalCount >
+          maxCollection.articles.totalCount
+          ? currentCollection
+          : maxCollection
+      },
+      null as (typeof article.collections.edges)[0]['node'] | null
+    )
 
   return (
     <footer className={styles.footer}>
@@ -112,6 +127,25 @@ const FooterActions = ({
                 }
               </Link>
             )}
+
+            {hasCollection && collection && article.author.userName && (
+              <Link
+                {...toPath({
+                  page: 'collectionDetail',
+                  userName: article.author.userName,
+                  collection,
+                })}
+                className={styles.collection}
+              >
+                <TextIcon
+                  icon={<Icon icon={IconBook2} size={12} />}
+                  size={12}
+                  color="newPalettePrimary500"
+                >
+                  {collection.title}
+                </TextIcon>
+              </Link>
+            )}
           </>
         )}
       </section>

src/components/ArticleDigest/Feed/FooterActions/index.tsx

@@ -34,6 +34,11 @@ const ChannelItem = ({ channel }: ChannelItemProps) => {
   const isWritingChallenge = channel.__typename === 'WritingChallenge'
   const isCurationChannel = channel.__typename === 'CurationChannel'
 
+  const innerClassName = classnames({
+    [styles.inner]: true,
+    [styles.threeLines]: isWritingChallenge || isCurationChannel,
+  })
+
   const pathType = isWritingChallenge
     ? CHANNEL_PATH_TYPES.WRITING_CHALLENGE
     : CHANNEL_PATH_TYPES.REGULAR_CHANNEL
@@ -71,7 +76,7 @@ const ChannelItem = ({ channel }: ChannelItemProps) => {
         }}
       >
         <span className={styles.name}>
-          <span className={styles.inner}>{channelName}</span>
+          <span className={innerClassName}>{channelName}</span>
         </span>
       </Link>
     </Tooltip>

src/components/Layout/SideChannelNav/ChannelItem.tsx

@@ -128,6 +128,10 @@
       @mixin line-clamp;
 
       -webkit-line-clamp: 2;
+
+      &.threeLines {
+        -webkit-line-clamp: 3;
+      }
     }
 
     @media (--xs-up) {