feat: reuse <Label>

refs:
- 2024-05-dev-1#RB-003

src/components/CommentBeta/RoleLabel/index.tsx

@@ -1,10 +1,9 @@
 import gql from 'graphql-tag'
 import { FormattedMessage } from 'react-intl'
 
+import { Label } from '~/components/Label'
 import { RoleLabelCommentFragment } from '~/gql/graphql'
 
-import styles from './styles.module.css'
-
 const fragments = {
   comment: gql`
     fragment RoleLabelComment on Comment {
@@ -25,33 +24,31 @@ const fragments = {
   `,
 }
 
-// TODO: reuse <Label> component
-// https://github.com/thematters/matters-web/pull/4192#discussion_r1495549659
 const RoleLabel = ({ comment }: { comment: RoleLabelCommentFragment }) => {
   if (
     comment.node.__typename === 'Article' &&
     comment.author.id === comment.node.author.id
   ) {
     return (
-      <span className={`${styles.label} ${styles.authorLabel}`}>
+      <Label color="green">
         <FormattedMessage
           defaultMessage="Author"
           id="78qsg6"
           description="src/components/Comment/RoleLabel/index.tsx"
         />
-      </span>
+      </Label>
     )
   }
 
   if (comment.fromDonator) {
     return (
-      <span className={`${styles.label} ${styles.supporterLabel}`}>
+      <Label color="gold">
         <FormattedMessage
           defaultMessage="Supporter"
           id="jc3mW/"
           description="src/components/Comment/RoleLabel/index.tsx"
         />
-      </span>
+      </Label>
     )
   }
 

src/components/Label/styles.module.css

@@ -7,17 +7,17 @@
   user-select: none;
   border-style: solid;
   border-width: 1px;
-  border-radius: 2px;
+  border-radius: 4px;
 
   &.gold {
     color: var(--color-matters-gold);
     background: var(--color-yellow-lighter);
-    border-color: var(--color-matters-gold);
+    border-color: var(--color-line-matters-gold-light);
   }
 
   &.green {
     color: var(--color-matters-green);
     background: var(--color-green-lighter);
-    border-color: var(--color-matters-green);
+    border-color: var(--color-line-matters-green-light);
   }
 }