Merge pull request #3556 from thematters/fix/icon-style

fix(css): fix superlike icon;
thematters · Jun 12, 2023 · be0cb05 · be0cb05 · vercel · Jun 12, 2023
2 parents 8f3c249 + 410b168
commit be0cb05
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.23.0",
+  "version": "4.23.1",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",

diff --git a/src/views/ArticleDetail/AppreciationButton/styles.module.css b/src/views/ArticleDetail/AppreciationButton/styles.module.css
@@ -30,7 +30,7 @@
     transform: scale(0);
   }
 
-  & .iconSuperlike .superlike_svg__star {
+  & .iconSuperlike :global(.superlike_svg__star) {
     fill-opacity: 0;
     transition: fill-opacity 0.1s ease-in-out;
   }
@@ -39,7 +39,7 @@
 .isSuperLike {
   color: var(--color-matters-gold);
 
-  & .icon-like {
+  & .iconLike {
     opacity: 0;
     transform: scale(0);
   }
@@ -50,7 +50,7 @@
   }
 
   &.superLiked {
-    & .icon-superlike .superlike_svg__star {
+    & .iconSuperlike :global(.superlike_svg__star) {
       fill-opacity: 1;
     }
   }

diff --git a/src/views/ArticleDetail/index.tsx b/src/views/ArticleDetail/index.tsx
@@ -136,13 +136,12 @@ const BaseArticleDetail = ({
   const collectionCount = article.collection?.totalCount || 0
   const isAuthor = viewer.id === authorId
   const circle = article.access.circle
-  const canReadFullContent =
-    !!(
-      isAuthor ||
-      !circle ||
-      circle.isMember ||
-      article.access.type === ArticleAccessType.Public
-    ) && !isSensitive
+  const canReadFullContent = !!(
+    isAuthor ||
+    !circle ||
+    circle.isMember ||
+    article.access.type === ArticleAccessType.Public
+  )
 
   // wall
   const { data: clientPreferenceData } = useQuery<ClientPreferenceQuery>(
@@ -303,7 +302,9 @@ const BaseArticleDetail = ({
             canReadFullContent={canReadFullContent}
           />
         </section>
+
         {article?.summaryCustomized && <CustomizedSummary summary={summary} />}
+
         {isSensitive && (
           <DynamicSensitiveWall
             sensitiveByAuthor={article.sensitiveByAuthor}
@@ -319,12 +320,17 @@ const BaseArticleDetail = ({
               translating={translating}
             />
             <License license={article.license} />
+
+            {circle && !canReadFullContent && (
+              <DynamicCircleWall circle={circle} />
+            )}
+
+            {features.payment && canReadFullContent && (
+              <DynamicSupportWidget article={article} />
+            )}
           </>
         )}
-        {circle && !canReadFullContent && <DynamicCircleWall circle={circle} />}
-        {features.payment && canReadFullContent && (
-          <DynamicSupportWidget article={article} />
-        )}
+
         {collectionCount > 0 && (
           <section className={styles.block}>
             <DynamicCollection
@@ -333,9 +339,11 @@ const BaseArticleDetail = ({
             />
           </section>
         )}
+
         <section className={styles.block}>
           <DynamicResponse id={article.id} lock={!canReadFullContent} />
         </section>
+
         <Media lessThan="xl">
           <RelatedArticles article={article} />
         </Media>