apply scss module

packages/app/src/components/User/UserInfo.module.scss

@@ -0,0 +1,27 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.grw-users-info :global {
+  .users-meta {
+    margin-left: 30px;
+  }
+
+  .user-page-name {
+    margin: 0;
+    font-size: 2.5em;
+    color: bs.$secondary;
+  }
+
+  .picture {
+    width: 120px;
+    height: 120px;
+  }
+
+  div.user-page-meta {
+    padding-left: 0;
+    color: bs.$gray-400;
+
+    .user-page-username {
+      font-weight: bold;
+    }
+  }
+}

packages/app/src/components/User/UserInfo.tsx

@@ -4,6 +4,8 @@ import { UserPicture } from '@growi/ui';
 
 import { IUserHasId } from '~/interfaces/user';
 
+import styles from './UserInfo.module.scss';
+
 type UserInfoProps = {
   pageUser: IUserHasId,
 }
@@ -11,13 +13,8 @@ type UserInfoProps = {
 export const UserInfo = (props: UserInfoProps): JSX.Element => {
   const { pageUser } = props;
 
-  // // do not display when the user does not exist
-  // if (pageUser == null) {
-  //   return <></>;
-  // }
-
   return (
-    <div className="grw-users-info d-flex align-items-center d-edit-none mb-5 pb-3 border-bottom">
+    <div className={`${styles['grw-users-info']} d-flex align-items-center d-edit-none mb-5 pb-3 border-bottom`}>
       <UserPicture user={pageUser} />
       <div className="users-meta">
         <h1 className="user-page-name">

packages/app/src/styles/_user.scss

@@ -8,32 +8,6 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 /*
  * Styles
  */
-.grw-users-info {
-  .users-meta {
-    margin-left: 30px;
-  }
-
-  .user-page-name {
-    margin: 0;
-    font-size: 2.5em;
-    color: $secondary;
-  }
-
-  .picture {
-    width: 120px;
-    height: 120px;
-  }
-
-  div.user-page-meta {
-    padding-left: 0;
-    color: $gray-400;
-
-    .user-page-username {
-      font-weight: bold;
-    }
-  }
-}
-
 .grw-usermenu-notification-icon {
   position: absolute;
   top: -4px;