create tag lables style module

packages/app/src/components/Page/TagLabels.module.scss

@@ -0,0 +1,9 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.grw-tag-labels :global {
+  .grw-tag-label {
+    font-size: 12px;
+    font-weight: normal;
+    border-radius: bs.$border-radius;
+  }
+}

packages/app/src/components/Page/TagLabels.tsx

@@ -3,6 +3,8 @@ import React, { FC, useState } from 'react';
 import RenderTagLabels from './RenderTagLabels';
 import TagEditModal from './TagEditModal';
 
+import styles from './TagLabels.module.scss';
+
 type Props = {
   tags?: string[],
   isGuestUser: boolean,
@@ -25,7 +27,7 @@ const TagLabels:FC<Props> = (props: Props) => {
 
   return (
     <>
-      <form className="grw-tag-labels form-inline">
+      <form className={`${styles['grw-tag-labels']} grw-tag-labels form-inline`}>
         <i className="tag-icon icon-tag mr-2"></i>
         { tags == null
           ? (

packages/app/src/components/Sidebar/RecentChanges.tsx

@@ -17,8 +17,10 @@ import FormattedDistanceDate from '../FormattedDistanceDate';
 
 import InfiniteScroll from './InfiniteScroll';
 
+import TagLabelsStyles from '../Page/TagLabels.module.scss';
 import styles from './RecentChanges.module.scss';
 
+
 const logger = loggerFactory('growi:History');
 
 type PageItemProps = {
@@ -82,7 +84,7 @@ const LargePageItem = memo(({ page }: PageItemProps): JSX.Element => {
             <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.isRoot ? undefined : dPagePath.former} />
             {locked}
           </h5>
-          <div className="grw-tag-labels mt-1 mb-2">
+          <div className={`grw-tag-labels ${TagLabelsStyles['grw-tag-labels']} mt-1 mb-2`}>
             { tagElements }
           </div>
           <PageItemLower page={page} />

packages/app/src/styles/_tag.scss

@@ -6,14 +6,6 @@
   }
 }
 
-.grw-tag-labels {
-  .grw-tag-label {
-    font-size: 12px;
-    font-weight: normal;
-    border-radius: bs.$border-radius;
-  }
-}
-
 .grw-popular-tag-labels {
   text-align: left;