Merge pull request #6310 from weseek/feat/apply-style-to-sidebar

feat: Apply recent-changes style

packages/app/src/components/Sidebar/RecentChanges.module.scss

@@ -0,0 +1,41 @@
+.grw-recent-changes-resize-button :global {
+  font-size: 12px;
+  line-height: normal;
+  transform: translateY(-2px);
+
+  .custom-control-label::before {
+    padding-left: 16px;
+    content: 'L';
+  }
+
+  .custom-control-input:checked + .custom-control-label::before {
+    padding-left: 5px;
+    content: 'S';
+  }
+}
+
+.list-group-item :global {
+  .grw-recent-changes-item-lower {
+    height: 17.5px;
+  }
+  .footstamp-icon {
+    svg {
+      width: 14px;
+      height: 14px;
+      transform: translateY(-3.5px);
+    }
+  }
+
+  .grw-list-counts {
+    height: 14px;
+    font-size: 12px;
+  }
+
+  .grw-formatted-distance-date {
+    font-size: 10px;
+  }
+
+  .icon-lock {
+    font-size: 14px;
+  }
+}

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

@@ -17,6 +17,7 @@ import FormattedDistanceDate from '../FormattedDistanceDate';
 
 import InfiniteScroll from './InfiniteScroll';
 
+import styles from './RecentChanges.module.scss';
 
 const logger = loggerFactory('growi:History');
 
@@ -72,7 +73,7 @@ const LargePageItem = memo(({ page }: PageItemProps): JSX.Element => {
   });
 
   return (
-    <li className="list-group-item py-3 px-0">
+    <li className={`list-group-item ${styles['list-group-item']} py-3 px-0`}>
       <div className="d-flex w-100">
         <UserPicture user={page.lastUpdateUser} size="md" noTooltip />
         <div className="flex-grow-1 ml-2">
@@ -157,7 +158,7 @@ const RecentChanges = (): JSX.Element => {
           <i className="icon icon-reload"></i>
         </button>
         <div className="d-flex align-items-center">
-          <div className="grw-recent-changes-resize-button custom-control custom-switch ml-1">
+          <div className={`grw-recent-changes-resize-button ${styles['grw-recent-changes-resize-button']} custom-control custom-switch ml-1`}>
             <input
               id="recentChangesResize"
               className="custom-control-input"

packages/app/src/styles/_recent-changes.scss

@@ -1,45 +0,0 @@
-.grw-sidebar-content-header {
-  .grw-recent-changes-resize-button {
-    font-size: 12px;
-    line-height: normal;
-    transform: translateY(-2px);
-
-    .custom-control-label::before {
-      padding-left: 16px;
-      content: 'L';
-    }
-
-    .custom-control-input:checked + .custom-control-label::before {
-      padding-left: 5px;
-      content: 'S';
-    }
-  }
-}
-
-.list-group {
-  .list-group-item {
-    .grw-recent-changes-item-lower {
-      height: 17.5px;
-    }
-    .footstamp-icon {
-      svg {
-        width: 14px;
-        height: 14px;
-        transform: translateY(-3.5px);
-      }
-    }
-
-    .grw-list-counts {
-      height: 14px;
-      font-size: 12px;
-    }
-
-    .grw-formatted-distance-date {
-      font-size: 10px;
-    }
-
-    .icon-lock {
-      font-size: 14px;
-    }
-  }
-}