Merge pull request #593 from belong112/master

style(articleReply): fix reference title font size and share button size
cofacts · Jan 1, 2025 · 98722b2 · 98722b2
2 parents 7116883 + df21911
commit 98722b2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/components/ArticleReply/ArticleReply.js b/components/ArticleReply/ArticleReply.js
@@ -27,6 +27,10 @@ const useStyles = makeStyles(theme => ({
       marginRight: theme.spacing(2),
     },
   },
+  title: {
+    fontSize: '1em',
+    fontWeight: 700,
+  },
 }));
 
 const ArticleReplyData = gql`
@@ -123,7 +127,7 @@ const ArticleReply = React.memo(({ articleReply }) => {
     const reference = reply.reference;
     return (
       <section className={classes.root}>
-        <h3>{TYPE_REFERENCE_TITLE[replyType]}</h3>
+        <h3 className={classes.title}>{TYPE_REFERENCE_TITLE[replyType]}</h3>
         {reference
           ? nl2br(linkify(reference))
           : `⚠️️ ${t`There is no reference for this reply. Its truthfulness may be doubtful.`}`}

diff --git a/components/ArticleReply/ReplyShare.js b/components/ArticleReply/ReplyShare.js
@@ -12,19 +12,19 @@ import CopyButton from '../CopyButton';
 
 const useStyles = makeStyles(theme => ({
   button: ({ open }) => ({
-    fontSize: theme.typography.htmlFontSize,
     borderRadius: 45,
-    padding: '1px 8px',
+    padding: '0px 8px',
     outline: 'none',
     cursor: 'pointer',
     marginLeft: 2,
+    fontWeight: 500,
     border: `1px solid ${
       open ? theme.palette.primary[500] : theme.palette.secondary[100]
     }`,
     color: open ? theme.palette.primary[500] : theme.palette.secondary[200],
     background: theme.palette.common.white,
     [theme.breakpoints.up('md')]: {
-      padding: '4px 18px',
+      padding: '0px 18px',
       marginRight: 10,
       marginLeft: 12,
     },

diff --git a/components/ArticleReplyFeedbackControl/ButtonGroupDisplay.js b/components/ArticleReplyFeedbackControl/ButtonGroupDisplay.js
@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
     color: theme.palette.secondary[100],
     background: theme.palette.common.white,
     [theme.breakpoints.up('md')]: {
-      padding: '0 18px',
+      padding: '0 15px',
       marginRight: 10,
     },
     '&:hover': {
@@ -46,7 +46,12 @@ const useStyles = makeStyles(theme => ({
         borderTopRightRadius: 0,
         borderBottomRightRadius: 0,
         borderRight: 0,
-        paddingRight: 0,
+        paddingLeft: '10px',
+        paddingRight: '4px',
+        [theme.breakpoints.up('md')]: {
+          paddingLeft: '18px',
+          paddingRight: '6px',
+        },
       },
       '&:last-child': {
         borderTopLeftRadius: 0,