font weight to fw and rounded-lg to rounded-3

apps/app/_obsolete/src/components/PageEditor/ConflictDiffModal.tsx

@@ -163,10 +163,10 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
         && (
           <div className="row">
             <div className="col-12 text-center mt-2 mb-4">
-              <h2 className="font-weight-bold">{t('modal_resolve_conflict.resolve_conflict_message')}</h2>
+              <h2 className="fw-bold">{t('modal_resolve_conflict.resolve_conflict_message')}</h2>
             </div>
             <div className="col-4">
-              <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.requested_revision')}</h3>
+              <h3 className="fw-bold my-2">{t('modal_resolve_conflict.requested_revision')}</h3>
               <div className="d-flex align-items-center my-3">
                 <div>
                   <UserPicture user={request.user} size="lg" noLink noTooltip />
@@ -178,7 +178,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
               </div>
             </div>
             <div className="col-4">
-              <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.origin_revision')}</h3>
+              <h3 className="fw-bold my-2">{t('modal_resolve_conflict.origin_revision')}</h3>
               <div className="d-flex align-items-center my-3">
                 <div>
                   <UserPicture user={origin.user} size="lg" noLink noTooltip />
@@ -190,7 +190,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
               </div>
             </div>
             <div className="col-4">
-              <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.latest_revision')}</h3>
+              <h3 className="fw-bold my-2">{t('modal_resolve_conflict.latest_revision')}</h3>
               <div className="d-flex align-items-center my-3">
                 <div>
                   <UserPicture user={latest.user} size="lg" noLink noTooltip />
@@ -249,7 +249,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
             </div>
             <div className="col-12">
               <div className="border border-dark">
-                <h3 className="font-weight-bold my-2 mx-2">{t('modal_resolve_conflict.selected_editable_revision')}</h3>
+                <h3 className="fw-bold my-2 mx-2">{t('modal_resolve_conflict.selected_editable_revision')}</h3>
                 <UncontrolledCodeMirror
                   ref={uncontrolledRef}
                   value={resolvedRevision}

apps/app/src/components/Admin/Common/Accordion.jsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
-import { Collapse } from 'reactstrap';
+
 import PropTypes from 'prop-types';
+import { Collapse } from 'reactstrap';
 
 const Accordion = (props) => {
   const [isOpen, setIsOpen] = useState(props.isOpenDefault);
   return (
-    <div className="card border-0 rounded-lg mb-0">
+    <div className="card border-0 rounded-3 mb-0">
       <div
-        className="card-header font-weight-normal py-3 d-flex justify-content-between"
+        className="card-header fw-normal py-3 d-flex justify-content-between"
         role="button"
         onClick={() => setIsOpen(prevState => !prevState)}
       >

apps/app/src/components/Admin/MarkdownSetting/XssForm.jsx

@@ -59,7 +59,7 @@ class XssForm extends React.Component {
                 onChange={() => { adminMarkDownContainer.setState({ xssOption: RehypeSanitizeOption.RECOMMENDED }) }}
               />
               <label className="custom-control-label w-100" htmlFor="xssOption1">
-                <p className="font-weight-bold">{t('markdown_settings.xss_options.recommended_setting')}</p>
+                <p className="fw-bold">{t('markdown_settings.xss_options.recommended_setting')}</p>
                 <div className="mt-4">
                   <div className="d-flex justify-content-between">
                     {t('markdown_settings.xss_options.tag_names')}
@@ -101,7 +101,7 @@ class XssForm extends React.Component {
                 onChange={() => { adminMarkDownContainer.setState({ xssOption: RehypeSanitizeOption.CUSTOM }) }}
               />
               <label className="custom-control-label w-100" htmlFor="xssOption2">
-                <p className="font-weight-bold">{t('markdown_settings.xss_options.custom_whitelist')}</p>
+                <p className="fw-bold">{t('markdown_settings.xss_options.custom_whitelist')}</p>
                 <WhitelistInput customizable />
               </label>
             </div>

apps/app/src/components/Admin/Notification/ManageGlobalNotification.tsx

@@ -155,7 +155,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => { setNotifyType(NotifyType.Email) }}
               />
               <label className="custom-control-label" htmlFor="mail">
-                <p className="font-weight-bold">Email</p>
+                <p className="fw-bold">Email</p>
               </label>
             </div>
             <div className="custom-control custom-radio ms-2">
@@ -169,7 +169,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => { setNotifyType(NotifyType.SLACK) }}
               />
               <label className="custom-control-label" htmlFor="slack">
-                <p className="font-weight-bold">Slack</p>
+                <p className="fw-bold">Slack</p>
               </label>
             </div>
           </div>

apps/app/src/components/Admin/SlackIntegration/Bridge.jsx

@@ -7,7 +7,7 @@ import { UncontrolledTooltip } from 'reactstrap';
 const ProxyCircle = () => (
   <div className="grw-bridge-proxy-circle">
     <div className="circle position-absolute bg-primary border-light rounded-circle">
-      <p className="circle-inner text-light font-weight-bold d-none d-lg-inline">Proxy Server</p>
+      <p className="circle-inner text-light fw-bold d-none d-lg-inline">Proxy Server</p>
       <p className="circle-inner grw-proxy-server-name d-block d-lg-none">Proxy Server</p>
     </div>
   </div>

apps/app/src/components/Admin/SlackIntegration/CustomBotWithProxyConnectionStatus.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
+
 import Bridge from './Bridge';
 
 const CustomBotWithProxyConnectionStatus = (props) => {
@@ -14,7 +16,7 @@ const CustomBotWithProxyConnectionStatus = (props) => {
     <div className="d-flex justify-content-center my-5 bot-integration">
 
       <div className="card rounded shadow border-0 w-50 admin-bot-card">
-        <h5 className="card-title font-weight-bold mt-3 ms-3">Slack</h5>
+        <h5 className="card-title fw-bold mt-3 ms-3">Slack</h5>
         <div className="card-body px-5">
           {connectionStatusValues.map((connectionStatus, i) => {
             const workspaceName = connectionStatus.workspaceName || `Settings #${i}`;
@@ -22,7 +24,7 @@ const CustomBotWithProxyConnectionStatus = (props) => {
             return (
               <div key={workspaceName} className="card slack-work-space-name-card">
                 <div className="m-2 text-center">
-                  <h5 className="font-weight-bold">{workspaceName}</h5>
+                  <h5 className="fw-bold">{workspaceName}</h5>
                   <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
                 </div>
               </div>
@@ -35,8 +37,8 @@ const CustomBotWithProxyConnectionStatus = (props) => {
         <Bridge errorCount={errorCount} totalCount={totalCount} withProxy />
       </div>
 
-      <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
-        <h5 className="card-title font-weight-bold mt-3 ms-3">GROWI App</h5>
+      <div className="card rounded-3 shadow border-0 w-50 admin-bot-card">
+        <h5 className="card-title fw-bold mt-3 ms-3">GROWI App</h5>
         <div className="card-body text-center">
           <div className="mx-md-3 my-4 my-lg-5 p-2 border bg-primary text-light">
             {siteName}

apps/app/src/components/Admin/SlackIntegration/CustomBotWithoutProxyConnectionStatus.jsx

@@ -18,12 +18,12 @@ const CustomBotWithoutProxyConnectionStatus = (props) => {
   return (
     <div className="d-flex justify-content-center my-5 bot-integration">
       <div className="card rounded shadow border-0 w-50 admin-bot-card mb-0">
-        <h5 className="card-title font-weight-bold mt-3 ms-4">Slack</h5>
+        <h5 className="card-title fw-bold mt-3 ms-4">Slack</h5>
         <div className="card-body px-4 text-center mx-md-5">
           {totalCount > 0 ? (
             <div className="card slack-work-space-name-card">
               <div className="m-2 text-center">
-                <h5 className="font-weight-bold">
+                <h5 className="fw-bold">
                   {workspaceName != null ? workspaceName : 'Settings #1'}
                 </h5>
                 <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
@@ -37,8 +37,8 @@ const CustomBotWithoutProxyConnectionStatus = (props) => {
         <Bridge errorCount={errorCount} totalCount={totalCount} />
       </div>
 
-      <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
-        <h5 className="card-title font-weight-bold mt-3 ms-4">GROWI App</h5>
+      <div className="card rounded-3 shadow border-0 w-50 admin-bot-card mb-0">
+        <h5 className="card-title fw-bold mt-3 ms-4">GROWI App</h5>
         <div className="card-body p-4 text-center">
           <div className="border p-2 bg-primary text-light mx-md-5">
             {siteName}

apps/app/src/components/Admin/SlackIntegration/CustomBotWithoutProxySettingsAccordion.jsx

@@ -70,7 +70,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
   );
 
   return (
-    <div className="card border-0 rounded-lg shadow overflow-hidden">
+    <div className="card border-0 rounded-3 shadow overflow-hidden">
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CREATE_BOT)}
         title={<><span className="me-2">①</span>{t('admin:slack_integration.accordion.create_bot')}</>}
@@ -160,7 +160,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
             </div>
             <button
               type="submit"
-              className="btn btn-info mx-3 font-weight-bold"
+              className="btn btn-info mx-3 fw-bold"
               disabled={testChannel.trim().length === 0}
             >Test
             </button>
@@ -174,7 +174,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
             <div className="form-group slack-connection-log col-md-4">
               <label className="mb-1"><p className="border-info slack-connection-log-title ps-2 m-0">Logs</p></label>
               <textarea
-                className="form-control card border-info slack-connection-log-body rounded-lg"
+                className="form-control card border-info slack-connection-log-body rounded-3"
                 rows="5"
                 value={logsValue}
                 readOnly

apps/app/src/components/Admin/SlackIntegration/ManageCommandsProcess.jsx

@@ -299,7 +299,7 @@ const ManageCommandsProcess = ({
         {(title || description) && (
           <div className="row">
             <div className="col-md-7 offset-md-2">
-              { title && <p className="font-weight-bold mb-1">{title}</p> }
+              { title && <p className="fw-bold mb-1">{title}</p> }
               { description && <p className="text-muted">{description}</p> }
             </div>
           </div>
@@ -362,7 +362,7 @@ const ManageCommandsProcess = ({
 
   return (
     <div className="py-4 px-5">
-      <p className="mb-4 font-weight-bold">{t('admin:slack_integration.accordion.growi_commands')}</p>
+      <p className="mb-4 fw-bold">{t('admin:slack_integration.accordion.growi_commands')}</p>
       <div className="row d-flex flex-column align-items-center">
         <div className="col-8">
           {Object.values(CommandUsageTypes).map(commandUsageType => (
@@ -376,7 +376,7 @@ const ManageCommandsProcess = ({
         </div>
       </div>
 
-      <p className="mb-4 font-weight-bold">Events</p>
+      <p className="mb-4 fw-bold">Events</p>
       <div className="row d-flex flex-column align-items-center">
         <div className="col-8">
           {Object.values(EventTypes).map(EventType => (

apps/app/src/components/Admin/SlackIntegration/ManageCommandsProcessWithoutProxy.jsx

@@ -217,7 +217,7 @@ const ManageCommandsProcessWithoutProxy = ({ commandPermission, eventActionsPerm
 
   return (
     <div className="py-4 px-5">
-      <p className="mb-4 font-weight-bold">{t('admin:slack_integration.accordion.growi_commands')}</p>
+      <p className="mb-4 fw-bold">{t('admin:slack_integration.accordion.growi_commands')}</p>
       <div className="row d-flex flex-column align-items-center">
         <div className="col-8">
           <div className="custom-control custom-checkbox">
@@ -238,7 +238,7 @@ const ManageCommandsProcessWithoutProxy = ({ commandPermission, eventActionsPerm
           </div>
         </div>
       </div>
-      <p className="mb-4 font-weight-bold">Events</p>
+      <p className="mb-4 fw-bold">Events</p>
       <div className="row d-flex flex-column align-items-center">
         <div className="col-8">
           <div className="custom-control custom-checkbox">

apps/app/src/components/Admin/SlackIntegration/WithProxyAccordions.jsx

@@ -136,7 +136,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
 
   return (
     <div className="py-4 px-5">
-      <p className="font-weight-bold">1. {t('admin:slack_integration.accordion.generate_access_token')}</p>
+      <p className="fw-bold">1. {t('admin:slack_integration.accordion.generate_access_token')}</p>
       <div className="form-group row">
         <label className="text-start text-md-right col-md-3 col-form-label">Access Token Proxy to GROWI</label>
         <div className="col-md-6">
@@ -165,7 +165,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
           { t('admin:slack_integration.access_token_settings.regenerate') }
         </button>
       </div>
-      <p className="font-weight-bold mt-5">2. {t('admin:slack_integration.accordion.register_for_growi_official_bot_proxy_service')}</p>
+      <p className="fw-bold mt-5">2. {t('admin:slack_integration.accordion.register_for_growi_official_bot_proxy_service')}</p>
       <div className="d-flex flex-column align-items-center">
         <ol className="p-0">
           <li>
@@ -258,7 +258,7 @@ const TestProcess = ({
           </div>
           <button
             type="submit"
-            className="btn btn-info mx-3 font-weight-bold"
+            className="btn btn-info mx-3 fw-bold"
             disabled={testChannel.trim() === ''}
           >
             Test
@@ -271,7 +271,7 @@ const TestProcess = ({
           <div className="form-group slack-connection-log col-md-4">
             <label className="mb-1"><p className="border-info slack-connection-log-title ps-2 m-0">Logs</p></label>
             <textarea
-              className="form-control card border-info slack-connection-log-body rounded-lg"
+              className="form-control card border-info slack-connection-log-body rounded-3"
               rows="5"
               value={logsValue}
               readOnly
@@ -382,7 +382,7 @@ const WithProxyAccordions = (props) => {
 
   return (
     <div
-      className="card border-0 rounded-lg shadow overflow-hidden"
+      className="card border-0 rounded-3 shadow overflow-hidden"
     >
       {Object.entries(integrationProcedureMapping).map(([key, value]) => {
         return (

apps/app/src/components/Admin/UserGroup/UserGroupDeleteModal.tsx

@@ -188,7 +188,7 @@ export const UserGroupDeleteModal: FC<Props> = (props: Props) => {
       </ModalHeader>
       <ModalBody>
         <div>
-          <span className="font-weight-bold">{t('admin:user_group_management.group_name')}</span> : &quot;{props?.deleteUserGroup?.name || ''}&quot;
+          <span className="fw-bold">{t('admin:user_group_management.group_name')}</span> : &quot;{props?.deleteUserGroup?.name || ''}&quot;
         </div>
         <div className="text-danger mt-3">
           {t('admin:user_group_management.delete_modal.desc')}

apps/app/src/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx

@@ -34,7 +34,7 @@ export const UpdateParentConfirmModal: FC = () => {
           <>
             <ModalBody>
               <div className="mb-2">
-                <span className="font-weight-bold">{t('admin:user_group_management.group_name')}</span> : &quot;{targetGroup.name}&quot;
+                <span className="fw-bold">{t('admin:user_group_management.group_name')}</span> : &quot;{targetGroup.name}&quot;
                 <hr />
                 {t('admin:user_group_management.update_parent_confirm_modal.caution_change_parent', { groupName: targetGroup.name })}
               </div>

apps/app/src/components/IdenticalPathPage.tsx

@@ -32,7 +32,7 @@ const IdenticalPathAlert : FC<IdenticalPathAlertProps> = (props: IdenticalPathAl
 
   return (
     <div className="alert alert-warning py-3">
-      <h5 className="font-weight-bold mt-1">{t('duplicated_page_alert.same_page_name_exists', { pageName: _pageName })}</h5>
+      <h5 className="fw-bold mt-1">{t('duplicated_page_alert.same_page_name_exists', { pageName: _pageName })}</h5>
       <p>
         {t('duplicated_page_alert.same_page_name_exists_at_path',
           { path: _path, pageName: _pageName })}<br />

apps/app/src/components/Navbar/GrowiSubNavigation.module.scss

@@ -88,13 +88,13 @@
       padding-right: 8px;
       padding-left: 6px;
       font-size: 14px;
-      font-weight: bs.$font-weight-bold;
+      font-weight: bs.$fw-bold;
     }
     .seen-user-count {
       padding-right: 6px;
       padding-left: 6px;
       font-size: 14px;
-      font-weight: bs.$font-weight-bold;
+      font-weight: bs.$fw-bold;
       vertical-align: bottom;
     }
 

apps/app/src/features/questionnaire/client/components/QuestionnaireModal.tsx

@@ -44,7 +44,7 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
       }
       toastSuccess(
         <>
-          <div className="font-weight-bold">{t('questionnaire.thank_you_for_answering')}</div>
+          <div className="fw-bold">{t('questionnaire.thank_you_for_answering')}</div>
           <div className="pt-2">{t('questionnaire.additional_feedback')}</div>
         </>,
         {
@@ -130,10 +130,10 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
             </div>
             <div className="container">
               <div className="row mt-4">
-                <div className="col-md-2 offset-md-5 font-weight-bold text-end align-items-center p-0">{t('questionnaire.no_answer')}</div>
+                <div className="col-md-2 offset-md-5 fw-bold text-end align-items-center p-0">{t('questionnaire.no_answer')}</div>
                 <div className="col-md-5 d-flex justify-content-between align-items-center">
-                  <span className="font-weight-bold">{t('questionnaire.disagree')}</span>
-                  <span className="font-weight-bold">{t('questionnaire.agree')}</span>
+                  <span className="fw-bold">{t('questionnaire.disagree')}</span>
+                  <span className="fw-bold">{t('questionnaire.agree')}</span>
                 </div>
               </div>
               {questionnaireOrder.questions?.map((question) => {