From fbec1c70c31b9a0cbd10ad9ae84ed02d4139b94e Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Thu, 11 Jan 2024 18:54:48 +0800
Subject: [PATCH] fix(ArticleDetail): revise variable name

---
 .../ArticleDigest/AuthorSidebar/index.tsx          | 11 ++++++-----
 .../ArticleDigest/AuthorSidebar/styles.module.css  |  4 ++--
 .../CollectionDigest/AuthorSidebar/index.tsx       | 14 ++++++++------
 .../AuthorSidebar/styles.module.css                |  2 +-
 .../AuthorSidebar/FromAuthor/index.tsx             |  2 +-
 .../AuthorSidebar/RelatedArticles/index.tsx        |  2 +-
 6 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/ArticleDigest/AuthorSidebar/index.tsx b/src/components/ArticleDigest/AuthorSidebar/index.tsx
index 51cd9aae9d..3cfd53cf57 100644
--- a/src/components/ArticleDigest/AuthorSidebar/index.tsx
+++ b/src/components/ArticleDigest/AuthorSidebar/index.tsx
@@ -15,7 +15,7 @@ export type ArticleDigestAuthorSidebarProps = {
   collectionId?: string
   titleTextSize?: ArticleDigestTitleTextSize
   titleColor?: 'greyDarker' | 'black'
-  imageSize?: 44 | 64
+  imageSize?: 'sm' | 'md'
 }
 
 const fragments = {
@@ -39,7 +39,7 @@ export const ArticleDigestAuthorSidebar = ({
 
   titleTextSize = 'mdS',
   titleColor = 'greyDarker',
-  imageSize = 44,
+  imageSize = 'sm',
 }: ArticleDigestAuthorSidebarProps) => {
   const { articleState: state } = article
   const isBanned = state === 'banned'
@@ -47,7 +47,7 @@ export const ArticleDigestAuthorSidebar = ({
   const containerClasses = classNames({
     [styles.container]: true,
     [styles.hasCover]: !!cover,
-    [styles[`imageSize${imageSize}`]]: !!cover,
+    [styles[`imageSize${capitalizeFirstLetter(imageSize)}`]]: !!cover,
   })
   const path = toPath({
     page: 'articleDetail',
@@ -60,6 +60,7 @@ export const ArticleDigestAuthorSidebar = ({
     [styles[`lineHeight${capitalizeFirstLetter(titleTextSize)}`]]:
       !!titleTextSize,
   })
+  const imgSize = imageSize === 'sm' ? 44 : 64
 
   return (
     <section
@@ -81,8 +82,8 @@ export const ArticleDigestAuthorSidebar = ({
           <aside className={styles.cover}>
             <ResponsiveImage
               url={cover}
-              width={imageSize}
-              height={imageSize}
+              width={imgSize}
+              height={imgSize}
               disableAnimation={true}
             />
           </aside>
diff --git a/src/components/ArticleDigest/AuthorSidebar/styles.module.css b/src/components/ArticleDigest/AuthorSidebar/styles.module.css
index 6b0868bf16..77823cb0c7 100644
--- a/src/components/ArticleDigest/AuthorSidebar/styles.module.css
+++ b/src/components/ArticleDigest/AuthorSidebar/styles.module.css
@@ -35,7 +35,7 @@
   &.hasCover {
     position: relative;
 
-    &.imageSize44 {
+    &.imageSizeSm {
       min-height: 2.75rem;
       padding-right: calc(2.75rem + var(--spacing-loose));
 
@@ -45,7 +45,7 @@
       }
     }
 
-    &.imageSize64 {
+    &.imageSizeMd {
       min-height: 4rem;
       padding-right: calc(4rem + var(--spacing-loose));
 
diff --git a/src/components/CollectionDigest/AuthorSidebar/index.tsx b/src/components/CollectionDigest/AuthorSidebar/index.tsx
index 4a020a659d..93c8e9e6e6 100644
--- a/src/components/CollectionDigest/AuthorSidebar/index.tsx
+++ b/src/components/CollectionDigest/AuthorSidebar/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import gql from 'graphql-tag'
 
-import { toPath } from '~/common/utils'
+import { capitalizeFirstLetter, toPath } from '~/common/utils'
 import {
   IconDraft24,
   LinkWrapper,
@@ -14,7 +14,7 @@ import styles from './styles.module.css'
 
 export type CollectionDigestAuthorSidebarProps = {
   collection: CollectionDigestAuthorSidebarCollectionFragment
-  imageSize?: 64
+  imageSize?: 'md'
 }
 
 const fragments = {
@@ -36,7 +36,7 @@ const fragments = {
 
 export const CollectionDigestAuthorSidebar = ({
   collection,
-  imageSize = 64,
+  imageSize = 'md',
 }: CollectionDigestAuthorSidebarProps) => {
   const {
     title,
@@ -48,7 +48,7 @@ export const CollectionDigestAuthorSidebar = ({
   const containerClasses = classNames({
     [styles.container]: true,
     [styles.hasCover]: !!cover,
-    [styles[`imageSize${imageSize}`]]: !!cover,
+    [styles[`imageSize${capitalizeFirstLetter(imageSize)}`]]: !!cover,
   })
 
   const path = toPath({
@@ -57,6 +57,8 @@ export const CollectionDigestAuthorSidebar = ({
     userName: userName || '',
   })
 
+  const imgSize = 64
+
   return (
     <section className={containerClasses}>
       <header>
@@ -67,8 +69,8 @@ export const CollectionDigestAuthorSidebar = ({
           <aside className={styles.cover}>
             <ResponsiveImage
               url={cover}
-              width={64}
-              height={64}
+              width={imgSize}
+              height={imgSize}
               disableAnimation={true}
             />
             <div className={styles.count}>
diff --git a/src/components/CollectionDigest/AuthorSidebar/styles.module.css b/src/components/CollectionDigest/AuthorSidebar/styles.module.css
index e5352ea042..c02fb4ffc6 100644
--- a/src/components/CollectionDigest/AuthorSidebar/styles.module.css
+++ b/src/components/CollectionDigest/AuthorSidebar/styles.module.css
@@ -12,7 +12,7 @@
   &.hasCover {
     position: relative;
 
-    &.imageSize64 {
+    &.imageSizeMd {
       min-height: 4rem;
       padding-right: calc(4rem + var(--spacing-loose));
 
diff --git a/src/views/ArticleDetail/AuthorSidebar/FromAuthor/index.tsx b/src/views/ArticleDetail/AuthorSidebar/FromAuthor/index.tsx
index 5aa5b75430..52a35e0ce8 100644
--- a/src/views/ArticleDetail/AuthorSidebar/FromAuthor/index.tsx
+++ b/src/views/ArticleDetail/AuthorSidebar/FromAuthor/index.tsx
@@ -52,7 +52,7 @@ export const FromAuthor = ({ article }: FromAuthorProps) => {
                 article={work}
                 titleColor="black"
                 titleTextSize="md"
-                imageSize={64}
+                imageSize="md"
               />
             )}
             {work.__typename === 'Collection' && (
diff --git a/src/views/ArticleDetail/AuthorSidebar/RelatedArticles/index.tsx b/src/views/ArticleDetail/AuthorSidebar/RelatedArticles/index.tsx
index d61f74c762..a3ecfb1112 100644
--- a/src/views/ArticleDetail/AuthorSidebar/RelatedArticles/index.tsx
+++ b/src/views/ArticleDetail/AuthorSidebar/RelatedArticles/index.tsx
@@ -45,7 +45,7 @@ export const RelatedArticles = ({ article }: RelatedArticlesProps) => {
               article={node}
               titleColor="black"
               titleTextSize="md"
-              imageSize={64}
+              imageSize="md"
             />
           </List.Item>
         ))}