Merge branch 'support/apply-bootstrap4' into support/fix-label-layout

.github/workflows/ci.yml

@@ -53,12 +53,13 @@ jobs:
         yarn lint
 
     - name: Slack Notification
-      uses: homoluctus/slatify@master
+      uses: weseek/ghaction-slack-notification@master
       if: failure()
       with:
         type: ${{ job.status }}
         job_name: '*test (${{ matrix.node-version }})*'
         channel: '#ci'
+        isCompactMode: true
         url: ${{ secrets.SLACK_WEBHOOK_URL }}
 
 
@@ -113,12 +114,13 @@ jobs:
         MONGO_URI: mongodb://localhost:27017/growi_test
 
     - name: Slack Notification
-      uses: homoluctus/slatify@master
+      uses: weseek/ghaction-slack-notification@master
       if: failure()
       with:
         type: ${{ job.status }}
         job_name: '*test (${{ matrix.node-version }})*'
         channel: '#ci'
+        isCompactMode: true
         url: ${{ secrets.SLACK_WEBHOOK_URL }}
 
 
@@ -183,12 +185,13 @@ jobs:
         yarn build:dev
 
     - name: Slack Notification
-      uses: homoluctus/slatify@master
+      uses: weseek/ghaction-slack-notification@master
       if: failure()
       with:
         type: ${{ job.status }}
         job_name: '*build-dev (${{ matrix.node-version }})*'
         channel: '#ci'
+        isCompactMode: true
         url: ${{ secrets.SLACK_WEBHOOK_URL }}
 
 
@@ -268,10 +271,11 @@ jobs:
         path: report
 
     - name: Slack Notification
-      uses: homoluctus/slatify@master
+      uses: weseek/ghaction-slack-notification@master
       if: failure()
       with:
         type: ${{ job.status }}
         job_name: '*build-prod (${{ matrix.node-version }})*'
         channel: '#ci'
+        isCompactMode: true
         url: ${{ secrets.SLACK_WEBHOOK_URL }}

CHANGES.md

@@ -5,10 +5,14 @@
 * Support: Upgrade libs
     * bootstrap
 
-## v3.7.4-RC
+## v3.7.5
 
 *
 
+## v3.7.4
+
+* Fix: Broken by displaying user image
+
 ## v3.7.3
 
 * Feature: Profile Image Cropping

config/webpack.common.js

@@ -38,12 +38,12 @@ module.exports = (options) => {
       // 'styles/theme-mono-blue':       './src/client/styles/scss/theme/mono-blue.scss',
       // 'styles/theme-future':          './src/client/styles/scss/theme/future.scss',
       // 'styles/theme-blue-night':      './src/client/styles/scss/theme/blue-night.scss',
-      // 'styles/theme-kibela':          './src/client/styles/scss/theme/kibela.scss',
+      'styles/theme-kibela':          './src/client/styles/scss/theme/kibela.scss',
       // 'styles/theme-halloween':       './src/client/styles/scss/theme/halloween.scss',
       // 'styles/theme-wood':          './src/client/styles/scss/theme/wood.scss',
       // 'styles/theme-christmas':          './src/client/styles/scss/theme/christmas.scss',
       // 'styles/theme-island':      './src/client/styles/scss/theme/island.scss',
-      // 'styles/theme-antarctic':      './src/client/styles/scss/theme/antarctic.scss',
+      'styles/theme-antarctic':      './src/client/styles/scss/theme/antarctic.scss',
       // styles for external services
       'styles/style-hackmd':          './src/client/styles/hackmd/style.scss',
     }, options.entry || {}), // Merge with env dependent settings

package.json

@@ -155,7 +155,6 @@
     ],
     "@alienfast/i18next-loader": "^1.0.16",
     "@atlaskit/drawer": "^5.3.5",
-    "@atlaskit/logo": "^12.3.3",
     "@atlaskit/navigation-next": "^8.0.2",
     "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -198,8 +197,8 @@
     "load-css-file": "^1.0.0",
     "lodash-webpack-plugin": "^0.11.5",
     "markdown-it": "^10.0.0",
-    "markdown-it-blockdiag": "^1.0.3",
-    "markdown-it-drawio-viewer": "^1.1.3",
+    "markdown-it-blockdiag": "^1.1.1",
+    "markdown-it-drawio-viewer": "^1.2.0",
     "markdown-it-emoji": "^1.4.0",
     "markdown-it-footnote": "^3.0.1",
     "markdown-it-mathjax": "^2.0.0",

resource/cdn-manifests.js

@@ -138,6 +138,14 @@ module.exports = {
         integrity: '',
       },
     },
+    {
+      name: 'animate.css',
+      url: 'https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css',
+      groups: ['basis'],
+      args: {
+        integrity: '',
+      },
+    },
     {
       name: 'jquery-ui',
       url: 'https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css',

resource/locales/en-US/translation.json

@@ -294,7 +294,7 @@
   "modal_shortcuts": {
     "global": {
       "title": "Global shortcuts",
-      "Open/Close shortcut help": "Open/Close shortcut help",
+      "Open/Close shortcut help": "Open/Close<br>shortcut help",
       "Edit Page": "Edit Page",
       "Create Page": "Create Page",
       "Show Contributors": "Show Contributors",

resource/locales/ja/translation.json

@@ -292,10 +292,10 @@
   "modal_shortcuts": {
     "global": {
       "title": "グローバルショートカット",
-      "Open/Close shortcut help": "ショートカットヘルプの表示/非表示",
+      "Open/Close shortcut help": "ショートカットヘルプ<br>の表示/非表示",
       "Edit Page": "ページ編集",
       "Create Page": "ページ作成",
-      "Show Contributors": "コントリビューターを表示",
+      "Show Contributors": "コントリビューター<br>を表示",
       "Konami Code": "コナミコマンド",
       "konami_code_url": "https://ja.wikipedia.org/wiki/コナミコマンド"
     },

src/client/js/bootstrap.jsx

@@ -4,6 +4,7 @@ import loggerFactory from '@alias/logger';
 import Xss from '@commons/service/xss';
 
 import HeaderSearchBox from './components/HeaderSearchBox';
+import NavbarToggler from './components/Navbar/NavbarToggler';
 import PersonalDropdown from './components/Navbar/PersonalDropdown';
 import Sidebar from './components/Sidebar';
 import StaffCredit from './components/StaffCredit/StaffCredit';
@@ -37,6 +38,8 @@ appContainer.injectToWindow();
  *  value: React Element
  */
 const componentMappings = {
+  'grw-navbar-toggler': <NavbarToggler />,
+
   'search-top': <HeaderSearchBox />,
   'search-sidebar': <HeaderSearchBox crowi={appContainer} />,
   'personal-dropdown': <PersonalDropdown />,

src/client/js/components/Admin/App/AppSetting.jsx

@@ -38,9 +38,9 @@ class AppSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">{t('admin:app_setting.site_name')}</label>
-          <div className="col-6">
+        <div className="form-group row">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -53,8 +53,8 @@ class AppSetting extends React.Component {
         </div>
 
         <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">{t('admin:app_setting.confidential_name')}</label>
-          <div className="col-6">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.confidential_name')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -67,8 +67,8 @@ class AppSetting extends React.Component {
         </div>
 
         <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">{t('admin:app_setting.default_language')}</label>
-          <div className="col-6">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.default_language')}</label>
+          <div className="col-md-6">
             <div className="custom-control custom-radio custom-control-inline">
               <input
                 type="radio"
@@ -97,8 +97,8 @@ class AppSetting extends React.Component {
         </div>
 
         <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">{t('admin:app_setting.file_uploading')}</label>
-          <div className="col-6">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.file_uploading')}</label>
+          <div className="col-md-6">
             <div className="custom-control custom-checkbox custom-checkbox-info">
               <input
                 type="checkbox"

src/client/js/components/Admin/App/AwsSetting.jsx

@@ -50,11 +50,11 @@ class AwsSetting extends React.Component {
           </span>
         </p>
 
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">
+        <div className="row form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">
             {t('admin:app_setting.region')}
           </label>
-          <div className="col-6">
+          <div className="col-md-6">
             <input
               className="form-control"
               placeholder={`${t('eg')} ap-northeast-1`}
@@ -66,11 +66,11 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">
+        <div className="row form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">
             {t('admin:app_setting.custom_endpoint')}
           </label>
-          <div className="col-6">
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -84,11 +84,11 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">
+        <div className="row form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">
             {t('admin:app_setting.bucket_name')}
           </label>
-          <div className="col-6">
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -101,11 +101,11 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">
+        <div className="row form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">
             Access Key ID
           </label>
-          <div className="col-6">
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -117,11 +117,11 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">
+        <div className="row form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">
             Secret Access Key
           </label>
-          <div className="col-6">
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"

src/client/js/components/Admin/App/MailSetting.jsx

@@ -40,8 +40,8 @@ class MailSetting extends React.Component {
       <React.Fragment>
         <p className="card well">{t('admin:app_setting.smtp_used')} {t('admin:app_setting.smtp_but_aws')}<br />{t('admin:app_setting.neihter_of')}</p>
         <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">{t('admin:app_setting.from_e-mail_address')}</label>
-          <div className="col-6">
+          <label className="col-md-3 col-form-label text-left">{t('admin:app_setting.from_e-mail_address')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -53,8 +53,8 @@ class MailSetting extends React.Component {
         </div>
 
         <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">{t('admin:app_setting.smtp_settings')}</label>
-          <div className="col-4">
+          <label className="col-md-3 col-form-label text-left">{t('admin:app_setting.smtp_settings')}</label>
+          <div className="col-md-4">
             <label>{t('admin:app_setting.host')}</label>
             <input
               className="form-control"
@@ -63,7 +63,7 @@ class MailSetting extends React.Component {
               onChange={(e) => { adminAppContainer.changeSmtpHost(e.target.value) }}
             />
           </div>
-          <div className="col-2">
+          <div className="col-md-2">
             <label>{t('admin:app_setting.port')}</label>
             <input
               className="form-control"
@@ -74,16 +74,16 @@ class MailSetting extends React.Component {
         </div>
 
         <div className="row form-group mb-5">
-          <div className="col-3 offset-3">
+          <div className="col-md-3 offset-md-3">
             <label>{t('admin:app_setting.user')}</label>
             <input
               className="form-control"
               type="text"
-              defaultValue={adminAppContainer.state.SmtpUser || ''}
+              defaultValue={adminAppContainer.state.smtpUser || ''}
               onChange={(e) => { adminAppContainer.changeSmtpUser(e.target.value) }}
             />
           </div>
-          <div className="col-3">
+          <div className="col-md-3">
             <label>{t('Password')}</label>
             <input
               className="form-control"

src/client/js/components/Admin/App/PluginSetting.jsx

@@ -43,7 +43,7 @@ class PluginSetting extends React.Component {
 
         <div className="row form-group mb-5">
           <div className="offset-3 col-6 text-left">
-            <div className="custom-control custom-switch custom-checkbox-success">
+            <div className="custom-control custom-checkbox custom-checkbox-success">
               <input
                 id="isEnabledPlugins"
                 className="custom-control-input"

src/client/js/components/Admin/App/SiteUrlSetting.jsx

@@ -43,7 +43,7 @@ class SiteUrlSetting extends React.Component {
           && (<p className="alert alert-danger"><i className="icon-exclamation"></i> {t('admin:app_setting.site_url_warn')}</p>)}
 
         <div className="row form-group">
-          <div className="col-9 offset-3">
+          <div className="col-md-9 offset-md-3">
             <table className="table settings-table">
               <colgroup>
                 <col className="from-db" />

src/client/js/components/Admin/Common/AdminUpdateButtonRow.jsx

@@ -7,7 +7,7 @@ const AdminUpdateButtonRow = (props) => {
 
   return (
     <div className="row my-3">
-      <div className="offset-4 col-5">
+      <div className="mx-auto">
         <button type="button" className="btn btn-primary" onClick={props.onClick} disabled={props.disabled}>{ t('Update') }</button>
       </div>
     </div>

src/client/js/components/Admin/Customize/CustomizeFunctionOption.jsx

@@ -7,7 +7,7 @@ class CustomizeFunctionOption extends React.PureComponent {
   render() {
     return (
       <React.Fragment>
-        <div className="custom-control custom-switch custom-checkbox-success">
+        <div className="custom-control custom-checkbox custom-checkbox-success">
           <input
             className="custom-control-input"
             type="checkbox"

src/client/js/components/Admin/Customize/CustomizeFunctionSetting.jsx

@@ -150,14 +150,14 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="col-xs-offset-3 col-xs-6 text-left">
+              <div className="offset-3 col-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isAllReplyShown"
                   label={t('admin:customize_setting.function_options.show_all_reply_comments')}
                   isChecked={adminCustomizeContainer.state.isAllReplyShown || false}
                   onChecked={() => { adminCustomizeContainer.switchIsAllReplyShown() }}
                 >
-                  <p className="help-block">
+                  <p className="form-text text-muted">
                     {t('admin:customize_setting.function_options.show_all_reply_comments_desc')}
                   </p>
                 </CustomizeFunctionOption>

src/client/js/components/Admin/Customize/CustomizeLayoutOptions.jsx

@@ -14,8 +14,8 @@ class CustomizeLayoutOptions extends React.Component {
     const { t, adminCustomizeContainer } = this.props;
 
     return (
-      <div className="row">
-        <div className="col-md-4">
+      <div className="row row-cols-1 row-cols-md-2">
+        <div className="col text-center">
           <CustomizeLayoutOption
             layoutType="crowi-plus"
             isSelected={adminCustomizeContainer.state.currentLayout === 'growi'}
@@ -23,15 +23,17 @@ class CustomizeLayoutOptions extends React.Component {
             labelHtml={`GROWI Enhanced Layout <small class="text-success">${t('admin:customize_setting.recommended')}</small>`}
           >
             <h4>{t('admin:customize_setting.layout_desc.growi_title')}</h4>
-            <ul>
-              <li>{t('admin:customize_setting.layout_desc.growi_text1')}</li>
-              <li>{t('admin:customize_setting.layout_desc.growi_text2')}</li>
-              <li>{t('admin:customize_setting.layout_desc.growi_text3')}</li>
-            </ul>
+            <div className="text-justify d-inline-block">
+              <ul>
+                <li>{t('admin:customize_setting.layout_desc.growi_text1')}</li>
+                <li>{t('admin:customize_setting.layout_desc.growi_text2')}</li>
+                <li>{t('admin:customize_setting.layout_desc.growi_text3')}</li>
+              </ul>
+            </div>
           </CustomizeLayoutOption>
         </div>
 
-        <div className="col-md-4">
+        <div className="col text-center">
           <CustomizeLayoutOption
             layoutType="kibela"
             isSelected={adminCustomizeContainer.state.currentLayout === 'kibela'}
@@ -39,27 +41,13 @@ class CustomizeLayoutOptions extends React.Component {
             labelHtml="Kibela Like Layout"
           >
             <h4>{t('admin:customize_setting.layout_desc.kibela_title')}</h4>
-            <ul>
-              <li>{t('admin:customize_setting.layout_desc.kibela_text1')}</li>
-              <li>{t('admin:customize_setting.layout_desc.kibela_text2')}</li>
-              <li>{t('admin:customize_setting.layout_desc.kibela_text3')}</li>
-            </ul>
-          </CustomizeLayoutOption>
-        </div>
-
-        <div className="col-md-4">
-          <CustomizeLayoutOption
-            layoutType="classic"
-            isSelected={adminCustomizeContainer.state.currentLayout === 'crowi'}
-            onSelected={() => adminCustomizeContainer.switchLayoutType('crowi')}
-            labelHtml="Crowi Classic Layout"
-          >
-            <h4>{t('admin:customize_setting.layout_desc.crowi_title')}</h4>
-            <ul>
-              <li>{t('admin:customize_setting.layout_desc.crowi_text1')}</li>
-              <li>{t('admin:customize_setting.layout_desc.crowi_text2')}</li>
-              <li>{t('admin:customize_setting.layout_desc.crowi_text3')}</li>
-            </ul>
+            <div className="text-justify d-inline-block">
+              <ul>
+                <li>{t('admin:customize_setting.layout_desc.kibela_text1')}</li>
+                <li>{t('admin:customize_setting.layout_desc.kibela_text2')}</li>
+                <li>{t('admin:customize_setting.layout_desc.kibela_text3')}</li>
+              </ul>
+            </div>
           </CustomizeLayoutOption>
         </div>
       </div>

src/client/js/components/Admin/ElasticsearchManagement/ElasticsearchManagement.jsx

@@ -162,7 +162,7 @@ class ElasticsearchManagement extends React.Component {
 
         {/* Controls */}
         <div className="row">
-          <label className="col-md-3 col-form-label">{ t('full_text_search_management.reconnect') }</label>
+          <label className="col-md-3 col-form-label text-left text-md-right">{ t('full_text_search_management.reconnect') }</label>
           <div className="col-md-6">
             <ReconnectControls
               isConfigured={isConfigured}
@@ -175,7 +175,7 @@ class ElasticsearchManagement extends React.Component {
         <hr />
 
         <div className="row">
-          <label className="col-md-3 col-form-label">{ t('full_text_search_management.normalize') }</label>
+          <label className="col-md-3 col-form-label text-left text-md-right">{ t('full_text_search_management.normalize') }</label>
           <div className="col-md-6">
             <NormalizeIndicesControls
               isRebuildingProcessing={isRebuildingProcessing}
@@ -189,7 +189,7 @@ class ElasticsearchManagement extends React.Component {
         <hr />
 
         <div className="row">
-          <label className="col-md-3 col-form-label">{ t('full_text_search_management.rebuild') }</label>
+          <label className="col-md-3 col-form-label text-left text-md-right">{ t('full_text_search_management.rebuild') }</label>
           <div className="col-md-6">
             <RebuildIndexControls
               isRebuildingProcessing={isRebuildingProcessing}

src/client/js/components/Admin/ElasticsearchManagement/NormalizeIndicesControls.jsx

@@ -22,7 +22,7 @@ class NormalizeIndicesControls extends React.PureComponent {
           { t('full_text_search_management.normalize_button') }
         </button>
 
-        <p className="help-block">
+        <p className="form-text text-muted">
           { t('full_text_search_management.normalize_description') }<br />
         </p>
       </>

src/client/js/components/Admin/ElasticsearchManagement/ReconnectControls.jsx

@@ -22,7 +22,7 @@ class ReconnectControls extends React.PureComponent {
           { t('full_text_search_management.reconnect_button') }
         </button>
 
-        <p className="help-block">
+        <p className="form-text text-muted">
           { t('full_text_search_management.reconnect_description') }<br />
         </p>
       </>

src/client/js/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -20,10 +20,11 @@ class StatusTable extends React.PureComponent {
     return (
       <div className="card">
         <div className="card-header">
-          <a role="button" data-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
+
+          <a role="button" className="text-nowrap mr-2" data-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
             <i className="fa fa-fw fa-database"></i> {indexName}
           </a>
-          <span className="ml-3">{aliasLabels}</span>
+          <span className="ml-md-3">{aliasLabels}</span>
         </div>
         <div id={collapseId} className="collapse">
           <div className="card-body">
@@ -82,7 +83,7 @@ class StatusTable extends React.PureComponent {
       <div className="row">
         { Object.keys(indexNameToDataMap).map((indexName) => {
           return (
-            <div key={`col-${indexName}`} className="col-6">
+            <div key={`col-${indexName}`} className="col-md-6">
               { this.renderIndexInfoPanel(indexName, indexNameToDataMap[indexName], indexNameToAliasMap[indexName]) }
             </div>
           );

src/client/js/components/Admin/ExportArchiveData/SelectCollectionsModal.jsx

@@ -193,26 +193,26 @@ class SelectCollectionsModal extends React.Component {
             </div>
             <div className="row mt-4">
               <div className="col-sm-12">
-                <h3 className="admin-setting-header">Page Collections</h3>
+                <h3 className="admin-setting-header">MongoDB Page Collections</h3>
                 {this.renderGroups(GROUPS_PAGE)}
               </div>
             </div>
             <div className="row mt-4">
               <div className="col-sm-12">
-                <h3 className="admin-setting-header">User Collections</h3>
+                <h3 className="admin-setting-header">MongoDB User Collections</h3>
                 {this.renderGroups(GROUPS_USER, 'danger')}
                 {this.renderWarnForUser()}
               </div>
             </div>
             <div className="row mt-4">
               <div className="col-sm-12">
-                <h3 className="admin-setting-header">Config Collections</h3>
+                <h3 className="admin-setting-header">MongoDB Config Collections</h3>
                 {this.renderGroups(GROUPS_CONFIG)}
               </div>
             </div>
             <div className="row mt-4">
               <div className="col-sm-12">
-                <h3 className="admin-setting-header">Other Collections</h3>
+                <h3 className="admin-setting-header">MongoDB Other Collections</h3>
                 {this.renderOthers()}
               </div>
             </div>

src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx

@@ -203,7 +203,7 @@ export default class ImportCollectionItem extends React.Component {
     return (
       <div className="card border-light">
         <div className="card-header bg-light">
-          <div className="d-flex justify-content-between align-items-center">
+          <div className="d-flex justify-content-between align-items-center flex-wrap">
             {/* left */}
             {this.renderCheckbox()}
             {/* right */}

src/client/js/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -387,7 +387,7 @@ class ImportForm extends React.Component {
           const isConfigButtonAvailable = Object.keys(IMPORT_OPTION_CLASS_MAPPING).includes(collectionName);
 
           return (
-            <div className="col-6 my-1" key={collectionName}>
+            <div className="col-md-6 my-1" key={collectionName}>
               <ImportCollectionItem
                 isImporting={isImporting}
                 isImported={collectionProgress ? isImported : false}

src/client/js/components/Admin/ImportDataPage.jsx

@@ -216,7 +216,7 @@ class ImportDataPage extends React.Component {
                     name="Esa"
                     type="button"
                     id="importFromEsa"
-                    className="btn btn-outline-secondary btn-esa"
+                    className="btn btn-secondary btn-esa"
                     onClick={this.esaHandleSubmitTest}
                     value={t('admin:importer_management.esa_settings.test_connection')}
                   />
@@ -309,7 +309,7 @@ class ImportDataPage extends React.Component {
                     name="Qiita"
                     type="button"
                     id="importFromQiita"
-                    className="btn btn-outline-secondary btn-qiita"
+                    className="btn btn-secondary btn-qiita"
                     onClick={this.qiitaHandleSubmitTest}
                     value={t('admin:importer_management.qiita_settings.test_connection')}
                   />

src/client/js/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -44,22 +44,20 @@ class LineBreakForm extends React.Component {
     const helpLineBreak = { __html: t('admin:markdown_setting.lineBreak_options.enable_lineBreak_desc') };
 
     return (
-      <div className="form-group text-left my-3">
-        <div className="col-8 offset-4">
-          <div className="custom-control custom-switch custom-checkbox-success">
-            <input
-              type="checkbox"
-              className="custom-control-input"
-              id="isEnabledLinebreaks"
-              checked={isEnabledLinebreaks}
-              onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}
-            />
-            <label className="custom-control-label" htmlFor="isEnabledLinebreaks">
-              {t('admin:markdown_setting.lineBreak_options.enable_lineBreak') }
-            </label>
-          </div>
-          <p className="help-block" dangerouslySetInnerHTML={helpLineBreak} />
+      <div className="col">
+        <div className="custom-control custom-checkbox custom-checkbox-success">
+          <input
+            type="checkbox"
+            className="custom-control-input"
+            id="isEnabledLinebreaks"
+            checked={isEnabledLinebreaks}
+            onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}
+          />
+          <label className="custom-control-label" htmlFor="isEnabledLinebreaks">
+            {t('admin:markdown_setting.lineBreak_options.enable_lineBreak') }
+          </label>
         </div>
+        <p className="form-text text-muted" dangerouslySetInnerHTML={helpLineBreak} />
       </div>
     );
   }
@@ -71,22 +69,20 @@ class LineBreakForm extends React.Component {
     const helpLineBreakInComment = { __html: t('admin:markdown_setting.lineBreak_options.enable_lineBreak_for_comment_desc') };
 
     return (
-      <div className="form-group text-left my-3">
-        <div className="col-8 offset-4">
-          <div className="custom-control custom-switch custom-checkbox-success">
-            <input
-              type="checkbox"
-              className="custom-control-input"
-              id="isEnabledLinebreaksInComments"
-              checked={isEnabledLinebreaksInComments}
-              onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}
-            />
-            <label className="custom-control-label" htmlFor="isEnabledLinebreaksInComments">
-              {t('admin:markdown_setting.lineBreak_options.enable_lineBreak') }
-            </label>
-          </div>
-          <p className="help-block" dangerouslySetInnerHTML={helpLineBreakInComment} />
+      <div className="col">
+        <div className="custom-control custom-checkbox custom-checkbox-success">
+          <input
+            type="checkbox"
+            className="custom-control-input"
+            id="isEnabledLinebreaksInComments"
+            checked={isEnabledLinebreaksInComments}
+            onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}
+          />
+          <label className="custom-control-label" htmlFor="isEnabledLinebreaksInComments">
+            {t('admin:markdown_setting.lineBreak_options.enable_lineBreak') }
+          </label>
         </div>
+        <p className="form-text text-muted" dangerouslySetInnerHTML={helpLineBreakInComment} />
       </div>
     );
   }
@@ -96,7 +92,7 @@ class LineBreakForm extends React.Component {
 
     return (
       <React.Fragment>
-        <fieldset className="col-12">
+        <fieldset className="form-group row row-cols-1 row-cols-md-2 mx-3">
           {this.renderLineBreakOption()}
           {this.renderLineBreakInCommentOption()}
         </fieldset>

src/client/js/components/Admin/Notification/NotificationSetting.jsx

@@ -63,6 +63,7 @@ class NotificationSetting extends React.Component {
             <NavLink
               className={`${activeTab === 'slack-configuration' && 'active'} `}
               onClick={() => { this.toggleActiveTab('slack-configuration') }}
+              href="#slack-configuration"
             >
               <i className="icon-settings"></i> Slack Configuration
             </NavLink>
@@ -71,6 +72,7 @@ class NotificationSetting extends React.Component {
             <NavLink
               className={`${activeTab === 'user-trigger-notification' && 'active'} `}
               onClick={() => { this.toggleActiveTab('user-trigger-notification') }}
+              href="#user-trigger-notification"
             >
               <i className="icon-settings"></i> User Trigger Notification
             </NavLink>
@@ -79,6 +81,7 @@ class NotificationSetting extends React.Component {
             <NavLink
               className={`${activeTab === 'global-notification' && 'active'} `}
               onClick={() => { this.toggleActiveTab('global-notification') }}
+              href="#global-notification"
             >
               <i className="icon-settings"></i> Global Notification
             </NavLink>

src/client/js/components/Admin/Notification/SlackAppConfiguration.jsx

@@ -64,8 +64,8 @@ class SlackAppConfiguration extends React.Component {
             <h2 className="border-bottom mb-5">{t('notification_setting.slack_incoming_configuration')}</h2>
 
             <div className="row mb-3">
-              <label className="col-3 text-right">Webhook URL</label>
-              <div className="col-6">
+              <label className="col-md-3 text-left text-md-right">Webhook URL</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -76,8 +76,8 @@ class SlackAppConfiguration extends React.Component {
             </div>
 
             <div className="row mb-3">
-              <div className="offset-3 col-6 text-left">
-                <div className="custom-control custom-switch custom-checkbox-success">
+              <div className="offset-md-3 col-md-6 text-left">
+                <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"
@@ -89,7 +89,7 @@ class SlackAppConfiguration extends React.Component {
                     {t('notification_setting.prioritize_webhook')}
                   </label>
                 </div>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   {t('notification_setting.prioritize_webhook_desc')}
                 </p>
               </div>
@@ -116,8 +116,8 @@ class SlackAppConfiguration extends React.Component {
               </div>
 
               <div className="row mb-5">
-                <label className="col-3 text-right">OAuth Access Token</label>
-                <div className="col-6">
+                <label className="col-md-3 text-left text-md-right">OAuth Access Token</label>
+                <div className="col-md-6">
                   <input
                     className="form-control"
                     type="text"

src/client/js/components/Admin/Security/BasicSecuritySetting.jsx

@@ -81,7 +81,7 @@ class BasicSecurityManagement extends React.Component {
                 { t('security_setting.Basic.enable_basic') }
               </label>
             </div>
-            <p className="help-block">
+            <p className="form-text text-muted">
               <small>
                 <span dangerouslySetInnerHTML={{ __html: t('security_setting.Basic.desc_1') }} /><br />
                 { t('security_setting.Basic.desc_2')}
@@ -96,7 +96,7 @@ class BasicSecurityManagement extends React.Component {
         <React.Fragment>
           <div className="row mb-5">
             <div className="offset-3 col-6">
-              <div className="custom-control custom-switch custom-checkbox-success">
+              <div className="custom-control custom-checkbox custom-checkbox-success">
                 <input
                   id="bindByEmail-basic"
                   className="custom-control-input"
@@ -110,7 +110,7 @@ class BasicSecurityManagement extends React.Component {
                   dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical', 'username') }}
                 />
               </div>
-              <p className="help-block">
+              <p className="form-text text-muted">
                 <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical_warn', 'username') }} />
               </p>
             </div>

src/client/js/components/Admin/Security/GitHubSecuritySetting.jsx

@@ -96,7 +96,7 @@ class GitHubSecurityManagement extends React.Component {
               value={adminGitHubSecurityContainer.state.appSiteUrl}
               readOnly
             />
-            <p className="help-block small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
+            <p className="form-text text-muted small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
             {!adminGeneralSecurityContainer.state.appSiteUrl && (
               <div className="alert alert-danger">
                 <i
@@ -125,7 +125,7 @@ class GitHubSecurityManagement extends React.Component {
                   value={adminGitHubSecurityContainer.state.githubClientId || ''}
                   onChange={e => adminGitHubSecurityContainer.changeGitHubClientId(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_GITHUB_CLIENT_ID' }) }} />
                 </p>
               </div>
@@ -141,7 +141,7 @@ class GitHubSecurityManagement extends React.Component {
                   defaultValue={adminGitHubSecurityContainer.state.githubClientSecret || ''}
                   onChange={e => adminGitHubSecurityContainer.changeGitHubClientSecret(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_GITHUB_CLIENT_SECRET' }) }} />
                 </p>
               </div>
@@ -149,7 +149,7 @@ class GitHubSecurityManagement extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6 text-left">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserNameGitHub"
                     className="custom-control-input"
@@ -163,7 +163,7 @@ class GitHubSecurityManagement extends React.Component {
                     dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical') }}
                   />
                 </div>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical_warn') }} />
                 </p>
               </div>

src/client/js/components/Admin/Security/GoogleSecuritySetting.jsx

@@ -96,7 +96,7 @@ class GoogleSecurityManagement extends React.Component {
               value={adminGoogleSecurityContainer.state.callbackUrl}
               readOnly
             />
-            <p className="help-block small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
+            <p className="form-text text-muted small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
             {!adminGeneralSecurityContainer.state.appSiteUrl && (
               <div className="alert alert-danger">
                 <i
@@ -125,7 +125,7 @@ class GoogleSecurityManagement extends React.Component {
                   defaultValue={adminGoogleSecurityContainer.state.googleClientId || ''}
                   onChange={e => adminGoogleSecurityContainer.changeGoogleClientId(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_GOOGLE_CLIENT_ID' }) }} />
                 </p>
               </div>
@@ -141,7 +141,7 @@ class GoogleSecurityManagement extends React.Component {
                   defaultValue={adminGoogleSecurityContainer.state.googleClientSecret || ''}
                   onChange={e => adminGoogleSecurityContainer.changeGoogleClientSecret(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_GOOGLE_CLIENT_SECRET' }) }} />
                 </p>
               </div>
@@ -149,7 +149,7 @@ class GoogleSecurityManagement extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserNameGoogle"
                     className="custom-control-input"
@@ -163,7 +163,7 @@ class GoogleSecurityManagement extends React.Component {
                     dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical') }}
                   />
                 </div>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical_warn') }} />
                 </p>
               </div>

src/client/js/components/Admin/Security/LdapSecuritySetting.jsx

@@ -112,7 +112,7 @@ class LdapSecuritySetting extends React.Component {
                 />
                 <small>
                   <p
-                    className="help-block"
+                    className="form-text text-muted"
                     // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{ __html: t('security_setting.ldap.server_url_detail') }}
                   />
@@ -164,7 +164,7 @@ class LdapSecuritySetting extends React.Component {
                   onChange={e => adminLdapSecurityContainer.changeBindDN(e.target.value)}
                 />
                 {(adminLdapSecurityContainer.state.isUserBind === true) ? (
-                  <p className="help-block passport-ldap-userbind">
+                  <p className="form-text text-muted passport-ldap-userbind">
                     <small>
                       {t('security_setting.ldap.bind_DN_user_detail1')}<br />
                       {/* eslint-disable-next-line react/no-danger */}
@@ -175,7 +175,7 @@ class LdapSecuritySetting extends React.Component {
                   </p>
                 )
                   : (
-                    <p className="help-block passport-ldap-managerbind">
+                    <p className="form-text text-muted passport-ldap-managerbind">
                       <small>
                         {t('security_setting.ldap.bind_DN_manager_detail')}<br />
                         {t('security_setting.example')}1: <code>uid=admin,dc=domain,dc=com</code><br />
@@ -229,7 +229,7 @@ class LdapSecuritySetting extends React.Component {
                   defaultValue={adminLdapSecurityContainer.state.ldapSearchFilter || ''}
                   onChange={e => adminLdapSecurityContainer.changeSearchFilter(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small>
                     {t('security_setting.ldap.search_filter_detail1')}<br />
                     {/* eslint-disable-next-line react/no-danger */}
@@ -238,7 +238,7 @@ class LdapSecuritySetting extends React.Component {
                     <span dangerouslySetInnerHTML={{ __html: t('security_setting.ldap.search_filter_detail3') }} />
                   </small>
                 </p>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small>
                     {t('security_setting.example')}1 - {t('security_setting.ldap.search_filter_example1')}:
                     <code>(|(uid={'{{ username }}'})(mail={'{{ username }}'}))</code><br />
@@ -266,7 +266,7 @@ class LdapSecuritySetting extends React.Component {
                   defaultValue={adminLdapSecurityContainer.state.ldapAttrMapUsername || ''}
                   onChange={e => adminLdapSecurityContainer.changeAttrMapUsername(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   {/* eslint-disable-next-line react/no-danger */}
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.ldap.username_detail') }} />
                 </p>
@@ -275,7 +275,7 @@ class LdapSecuritySetting extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"
@@ -290,7 +290,7 @@ class LdapSecuritySetting extends React.Component {
                     dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical') }}
                   />
                 </div>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   {/* eslint-disable-next-line react/no-danger */}
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical_warn') }} />
                 </p>
@@ -310,7 +310,7 @@ class LdapSecuritySetting extends React.Component {
                   defaultValue={adminLdapSecurityContainer.state.ldapAttrMapMail || ''}
                   onChange={e => adminLdapSecurityContainer.changeAttrMapMail(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small>
                     {t('security_setting.ldap.mail_detail')}
                   </small>
@@ -330,7 +330,7 @@ class LdapSecuritySetting extends React.Component {
                   defaultValue={adminLdapSecurityContainer.state.ldapAttrMapName || ''}
                   onChange={e => adminLdapSecurityContainer.changeAttrMapName(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small>
                     {t('security_setting.ldap.name_detail')}
                   </small>
@@ -355,7 +355,7 @@ class LdapSecuritySetting extends React.Component {
                   defaultValue={adminLdapSecurityContainer.state.ldapGroupSearchBase || ''}
                   onChange={e => adminLdapSecurityContainer.changeGroupSearchBase(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small>
                     {/* eslint-disable-next-line react/no-danger */}
                     <span dangerouslySetInnerHTML={{ __html: t('security_setting.ldap.group_search_base_DN_detail') }} /><br />
@@ -377,7 +377,7 @@ class LdapSecuritySetting extends React.Component {
                   defaultValue={adminLdapSecurityContainer.state.ldapGroupSearchFilter || ''}
                   onChange={e => adminLdapSecurityContainer.changeGroupSearchFilter(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small>
                     {/* eslint-disable react/no-danger */}
                     <span dangerouslySetInnerHTML={{ __html: t('security_setting.ldap.group_search_filter_detail1') }} /><br />
@@ -386,7 +386,7 @@ class LdapSecuritySetting extends React.Component {
                     {/* eslint-enable react/no-danger */}
                   </small>
                 </p>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small>
                     {t('security_setting.example')}:
                     {/* eslint-disable-next-line react/no-danger */}
@@ -409,7 +409,7 @@ class LdapSecuritySetting extends React.Component {
                   defaultValue={adminLdapSecurityContainer.state.ldapGroupDnProperty || ''}
                   onChange={e => adminLdapSecurityContainer.changeGroupDnProperty(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   {/* eslint-disable-next-line react/no-danger */}
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.ldap.group_search_user_DN_property_detail') }} />
                 </p>

src/client/js/components/Admin/Security/LocalSecuritySetting.jsx

@@ -130,7 +130,7 @@ class LocalSecuritySetting extends React.Component {
                   </div>
                 </div>
 
-                <p className="help-block small">
+                <p className="form-text text-muted small">
                   {t('security_setting.Register limitation desc')}
                 </p>
               </div>
@@ -147,7 +147,7 @@ class LocalSecuritySetting extends React.Component {
                   defaultValue={adminLocalSecurityContainer.state.registrationWhiteList.join('\n')}
                   onChange={e => adminLocalSecurityContainer.changeRegistrationWhiteList(e.target.value)}
                 />
-                <p className="help-block small">{t('security_setting.restrict_emails')}<br />{t('security_setting.for_instance')}
+                <p className="form-text text-muted small">{t('security_setting.restrict_emails')}<br />{t('security_setting.for_instance')}
                   <code>@growi.org</code>{t('security_setting.only_those')}<br />
                   {t('security_setting.insert_single')}
                 </p>

src/client/js/components/Admin/Security/OidcSecuritySetting.jsx

@@ -91,7 +91,7 @@ class OidcSecurityManagement extends React.Component {
               value={adminOidcSecurityContainer.state.callbackUrl}
               readOnly
             />
-            <p className="help-block small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
+            <p className="form-text text-muted small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
             {!adminGeneralSecurityContainer.state.appSiteUrl && (
               <div className="alert alert-danger">
                 <i
@@ -132,7 +132,7 @@ class OidcSecurityManagement extends React.Component {
                   defaultValue={adminOidcSecurityContainer.state.oidcIssuerHost || ''}
                   onChange={e => adminOidcSecurityContainer.changeOidcIssuerHost(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_ISSUER_HOST' }) }} />
                 </p>
               </div>
@@ -148,7 +148,7 @@ class OidcSecurityManagement extends React.Component {
                   defaultValue={adminOidcSecurityContainer.state.oidcClientId || ''}
                   onChange={e => adminOidcSecurityContainer.changeOidcClientId(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_ID' }) }} />
                 </p>
               </div>
@@ -164,7 +164,7 @@ class OidcSecurityManagement extends React.Component {
                   defaultValue={adminOidcSecurityContainer.state.oidcClientSecret || ''}
                   onChange={e => adminOidcSecurityContainer.changeOidcClientSecret(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_SECRET' }) }} />
                 </p>
               </div>
@@ -184,7 +184,7 @@ class OidcSecurityManagement extends React.Component {
                   defaultValue={adminOidcSecurityContainer.state.oidcAttrMapId || ''}
                   onChange={e => adminOidcSecurityContainer.changeOidcAttrMapId(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.id_detail') }} />
                 </p>
               </div>
@@ -200,7 +200,7 @@ class OidcSecurityManagement extends React.Component {
                   defaultValue={adminOidcSecurityContainer.state.oidcAttrMapUserName || ''}
                   onChange={e => adminOidcSecurityContainer.changeOidcAttrMapUserName(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.username_detail') }} />
                 </p>
               </div>
@@ -216,7 +216,7 @@ class OidcSecurityManagement extends React.Component {
                   defaultValue={adminOidcSecurityContainer.state.oidcAttrMapName || ''}
                   onChange={e => adminOidcSecurityContainer.changeOidcAttrMapName(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.name_detail') }} />
                 </p>
               </div>
@@ -232,7 +232,7 @@ class OidcSecurityManagement extends React.Component {
                   defaultValue={adminOidcSecurityContainer.state.oidcAttrMapEmail || ''}
                   onChange={e => adminOidcSecurityContainer.changeOidcAttrMapEmail(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.mapping_detail', { target: t('Email') }) }} />
                 </p>
               </div>
@@ -247,7 +247,7 @@ class OidcSecurityManagement extends React.Component {
                   defaultValue={adminOidcSecurityContainer.state.callbackUrl || ''}
                   readOnly
                 />
-                <p className="help-block small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
+                <p className="form-text text-muted small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
                 {!adminGeneralSecurityContainer.state.appSiteUrl && (
                   <div className="alert alert-danger">
                     <i
@@ -262,7 +262,7 @@ class OidcSecurityManagement extends React.Component {
 
             <div className="row mb-3">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserName-oidc"
                     className="custom-control-input"
@@ -276,7 +276,7 @@ class OidcSecurityManagement extends React.Component {
                     dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical') }}
                   />
                 </div>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical_warn') }} />
                 </p>
               </div>
@@ -284,7 +284,7 @@ class OidcSecurityManagement extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByEmail-oidc"
                     className="custom-control-input"
@@ -298,7 +298,7 @@ class OidcSecurityManagement extends React.Component {
                     dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical') }}
                   />
                 </div>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical_warn') }} />
                 </p>
               </div>

src/client/js/components/Admin/Security/SamlSecuritySetting.jsx

@@ -118,7 +118,7 @@ class SamlSecurityManagement extends React.Component {
               defaultValue={adminSamlSecurityContainer.state.callbackUrl}
               readOnly
             />
-            <p className="help-block small">{t('security_setting.desc_of_callback_URL', { AuthName: 'SAML Identity' })}</p>
+            <p className="form-text text-muted small">{t('security_setting.desc_of_callback_URL', { AuthName: 'SAML Identity' })}</p>
             {!adminGeneralSecurityContainer.state.appSiteUrl && (
               <div className="alert alert-danger">
                 <i
@@ -180,7 +180,7 @@ class SamlSecurityManagement extends React.Component {
                       value={this.state.envEntryPoint || ''}
                       readOnly
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_ENTRY_POINT' }) }} />
                     </p>
                   </td>
@@ -204,7 +204,7 @@ class SamlSecurityManagement extends React.Component {
                       value={this.state.envIssuer || ''}
                       readOnly
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_ISSUER' }) }} />
                     </p>
                   </td>
@@ -249,7 +249,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       readOnly
                       value={this.state.envCert || ''}
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_CERT' }) }} />
                     </p>
                   </td>
@@ -281,7 +281,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       defaultValue={adminSamlSecurityContainer.state.samlAttrMapId}
                       onChange={e => adminSamlSecurityContainer.changeSamlAttrMapId(e.target.value)}
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small>
                         {t('security_setting.SAML.id_detail')}
                       </small>
@@ -294,7 +294,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       value={this.state.envAttrMapId || ''}
                       readOnly
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_ATTR_MAPPING_ID' }) }} />
                     </p>
                   </td>
@@ -309,7 +309,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       defaultValue={adminSamlSecurityContainer.state.samlAttrMapUsername}
                       onChange={e => adminSamlSecurityContainer.changeSamlAttrMapUserName(e.target.value)}
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.username_detail') }} />
                     </p>
                   </td>
@@ -320,7 +320,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       value={this.state.envAttrMapUsername || ''}
                       readOnly
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_ATTR_MAPPING_USERNAME' }) }} />
                     </p>
                   </td>
@@ -335,7 +335,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       defaultValue={adminSamlSecurityContainer.state.samlAttrMapMail}
                       onChange={e => adminSamlSecurityContainer.changeSamlAttrMapMail(e.target.value)}
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.mapping_detail', { target: 'Email' }) }} />
                     </p>
                   </td>
@@ -346,7 +346,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       value={this.state.envAttrMapMail || ''}
                       readOnly
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_ATTR_MAPPING_MAIL' }) }} />
                     </p>
                   </td>
@@ -361,7 +361,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       defaultValue={adminSamlSecurityContainer.state.samlAttrMapFirstName}
                       onChange={e => adminSamlSecurityContainer.changeSamlAttrMapFirstName(e.target.value)}
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       {/* eslint-disable-next-line max-len */}
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.mapping_detail', { target: t('security_setting.form_item_name.attrMapFirstName') }) }} />
                     </p>
@@ -373,7 +373,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       value={this.state.envAttrMapFirstName || ''}
                       readOnly
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small>
                         <span dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_ATTR_MAPPING_FIRST_NAME' }) }} />
                         <br />
@@ -392,7 +392,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       defaultValue={adminSamlSecurityContainer.state.samlAttrMapLastName}
                       onChange={e => adminSamlSecurityContainer.changeSamlAttrMapLastName(e.target.value)}
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       {/* eslint-disable-next-line max-len */}
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.mapping_detail', { target: t('security_setting.form_item_name.attrMapLastName') }) }} />
                     </p>
@@ -404,7 +404,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       value={this.state.envAttrMapLastName || ''}
                       readOnly
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small>
                         <span dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_ATTR_MAPPING_LAST_NAME' }) }} />
                         <br />
@@ -422,7 +422,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
 
             <div className="row mb-5">
               <div className="offset-3 col-6 text-left">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserName-SAML"
                     className="custom-control-input"
@@ -436,7 +436,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                     dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical') }}
                   />
                 </div>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat username matching as identical_warn') }} />
                 </p>
               </div>
@@ -444,7 +444,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
 
             <div className="row mb-5">
               <div className="offset-3 col-6 text-left">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByEmail-SAML"
                     className="custom-control-input"
@@ -458,7 +458,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                     dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical') }}
                   />
                 </div>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical_warn') }} />
                 </p>
               </div>
@@ -468,7 +468,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
               Attribute-based Login Control
             </h3>
 
-            <p className="help-block">
+            <p className="form-text text-muted">
               <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.attr_based_login_control_detail') }} />
             </p>
 
@@ -494,7 +494,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       onChange={(e) => { adminSamlSecurityContainer.changeSamlABLCRule(e.target.value) }}
                       readOnly={useOnlyEnvVars}
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small>
                         <span dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.attr_based_login_control_rule_detail') }} />
                         <span dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.attr_based_login_control_rule_example') }} />
@@ -508,7 +508,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                       value={this.state.envABLCRule || ''}
                       readOnly
                     />
-                    <p className="help-block">
+                    <p className="form-text text-muted">
                       <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_ABLC_RULE' }) }} />
                     </p>
                   </td>

src/client/js/components/Admin/Security/SecurityManagement.jsx

@@ -65,6 +65,7 @@ class SecurityManagement extends React.Component {
               <NavLink
                 className={`${activeTab === 'passport-local' && 'active'} `}
                 onClick={() => { this.toggleActiveTab('passport-local') }}
+                href="#passport-local"
               >
                 <i className="fa fa-users" /> ID/Pass
               </NavLink>
@@ -73,6 +74,7 @@ class SecurityManagement extends React.Component {
               <NavLink
                 className={`${activeTab === 'passport-ldap' && 'active'} `}
                 onClick={() => { this.toggleActiveTab('passport-ldap') }}
+                href="#passport-ldap"
               >
                 <i className="fa fa-sitemap" /> LDAP
               </NavLink>
@@ -81,6 +83,7 @@ class SecurityManagement extends React.Component {
               <NavLink
                 className={`${activeTab === 'passport-saml' && 'active'} `}
                 onClick={() => { this.toggleActiveTab('passport-saml') }}
+                href="#passport-saml"
               >
                 <i className="fa fa-key" /> SAML
               </NavLink>
@@ -89,6 +92,7 @@ class SecurityManagement extends React.Component {
               <NavLink
                 className={`${activeTab === 'passport-oidc' && 'active'} `}
                 onClick={() => { this.toggleActiveTab('passport-oidc') }}
+                href="#passport-oidc"
               >
                 <i className="fa fa-openid" /> OIDC
               </NavLink>
@@ -97,6 +101,7 @@ class SecurityManagement extends React.Component {
               <NavLink
                 className={`${activeTab === 'passport-basic' && 'active'} `}
                 onClick={() => { this.toggleActiveTab('passport-basic') }}
+                href="#passport-basic"
               >
                 <i className="fa fa-lock" /> BASIC
               </NavLink>
@@ -105,6 +110,7 @@ class SecurityManagement extends React.Component {
               <NavLink
                 className={`${activeTab === 'passport-google' && 'active'} `}
                 onClick={() => { this.toggleActiveTab('passport-google') }}
+                href="#passport-google"
               >
                 <i className="fa fa-google" /> Google
               </NavLink>
@@ -113,6 +119,7 @@ class SecurityManagement extends React.Component {
               <NavLink
                 className={`${activeTab === 'passport-github' && 'active'} `}
                 onClick={() => { this.toggleActiveTab('passport-github') }}
+                href="#passport-github"
               >
                 <i className="fa fa-github" /> GitHub
               </NavLink>
@@ -121,6 +128,7 @@ class SecurityManagement extends React.Component {
               <NavLink
                 className={`${activeTab === 'passport-twitter' && 'active'} `}
                 onClick={() => { this.toggleActiveTab('passport-twitter') }}
+                href="#passport-twitter"
               >
                 <i className="fa fa-twitter" /> Twitter
               </NavLink>
@@ -129,6 +137,7 @@ class SecurityManagement extends React.Component {
               <NavLink
                 className={`${activeTab === 'passport-facebook' && 'active'} `}
                 onClick={() => { this.toggleActiveTab('passport-facebook') }}
+                href="#passport-facebook"
               >
                 <i className="fa fa-facebook" /> (TBD) Facebook
               </NavLink>

src/client/js/components/Admin/Security/SecuritySetting.jsx

@@ -58,10 +58,10 @@ class SecuritySetting extends React.Component {
         </div>
           )}
         <div className="row mb-5">
-          <div className="col-3 text-right py-2">
+          <div className="col-md-3 text-md-right text-nowrap py-2 mr-md-5">
             <strong>{t('security_setting.Guest Users Access')}</strong>
           </div>
-          <div className="col-6">
+          <div className="col-md-6 ml-md-5">
             <div className="dropdown">
               <button
                 className={`btn btn-outline-secondary dropdown-toggle ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}`}
@@ -102,9 +102,9 @@ class SecuritySetting extends React.Component {
         </div>
           )}
         <div className="row mb-5">
-          <strong className="col-3 text-right" dangerouslySetInnerHTML={{ __html: t('security_setting.page_listing_1') }} />
-          <div className="col-6">
-            <div className="custom-control custom-switch custom-checkbox-success">
+          <strong className="col-md-3 text-md-right text-nowrap mb-2 mr-md-5" dangerouslySetInnerHTML={{ __html: t('security_setting.page_listing_1') }} />
+          <div className="col-md-6">
+            <div className="custom-control custom-checkbox custom-checkbox-success ml-md-5">
               <input
                 type="checkbox"
                 className="custom-control-input"
@@ -120,9 +120,9 @@ class SecuritySetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <strong className="col-3 text-right" dangerouslySetInnerHTML={{ __html: t('security_setting.page_listing_2') }} />
-          <div className="col-6">
-            <div className="custom-control custom-switch custom-checkbox-success">
+          <strong className="col-md-3 text-md-right text-nowrap mr-md-5 mb-2" dangerouslySetInnerHTML={{ __html: t('security_setting.page_listing_2') }} />
+          <div className="col-md-6 ml-md-5">
+            <div className="custom-control custom-checkbox custom-checkbox-success">
               <input
                 type="checkbox"
                 className="custom-control-input"
@@ -138,10 +138,10 @@ class SecuritySetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <div className="col-3 text-right">
+          <div className="col-md-3 text-md-right mr-md-5 mb-2">
             <strong>{t('security_setting.complete_deletion')}</strong>
           </div>
-          <div className="col-9">
+          <div className="col-md-6 ml-md-5">
             <div className="dropdown">
               <button
                 className="btn btn-outline-secondary dropdown-toggle"
@@ -167,7 +167,7 @@ class SecuritySetting extends React.Component {
                   {t('security_setting.admin_and_author')}
                 </a>
               </div>
-              <p className="help-block small">
+              <p className="form-text text-muted small">
                 {t('security_setting.complete_deletion_explain')}
               </p>
             </div>

src/client/js/components/Admin/Security/TwitterSecuritySetting.jsx

@@ -96,7 +96,7 @@ class TwitterSecurityManagement extends React.Component {
               value={adminTwitterSecurityContainer.state.callbackUrl}
               readOnly
             />
-            <p className="help-block small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
+            <p className="form-text text-muted small">{t('security_setting.desc_of_callback_URL', { AuthName: 'OAuth' })}</p>
             {!adminGeneralSecurityContainer.state.appSiteUrl && (
               <div className="alert alert-danger">
                 <i
@@ -125,7 +125,7 @@ class TwitterSecurityManagement extends React.Component {
                   defaultValue={adminTwitterSecurityContainer.state.twitterConsumerKey || ''}
                   onChange={e => adminTwitterSecurityContainer.changeTwitterConsumerKey(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_TWITTER_CONSUMER_KEY' }) }} />
                 </p>
               </div>
@@ -141,7 +141,7 @@ class TwitterSecurityManagement extends React.Component {
                   defaultValue={adminTwitterSecurityContainer.state.twitterConsumerSecret || ''}
                   onChange={e => adminTwitterSecurityContainer.changeTwitterConsumerSecret(e.target.value)}
                 />
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_TWITTER_CONSUMER_SECRET' }) }} />
                 </p>
               </div>
@@ -149,7 +149,7 @@ class TwitterSecurityManagement extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserNameTwitter"
                     className="custom-control-input"
@@ -163,7 +163,7 @@ class TwitterSecurityManagement extends React.Component {
                     dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical') }}
                   />
                 </div>
-                <p className="help-block">
+                <p className="form-text text-muted">
                   <small dangerouslySetInnerHTML={{ __html: t('security_setting.Treat email matching as identical_warn') }} />
                 </p>
               </div>

src/client/js/components/Admin/UserManagement.jsx

@@ -121,10 +121,17 @@ class UserManagement extends React.Component {
 
     return (
       <Fragment>
-        {adminUsersContainer.state.userForPasswordResetModal && <PasswordResetModal />}
+        {adminUsersContainer.state.userForPasswordResetModal != null
+        && (
+        <PasswordResetModal
+          isOpen={adminUsersContainer.state.isPasswordResetModalShown}
+          onClose={adminUsersContainer.hidePasswordResetModal}
+          userForPasswordResetModal={adminUsersContainer.state.userForPasswordResetModal}
+        />
+        )}
         <p>
           <InviteUserControl />
-          <a className="btn text-dark btn-outline-secondary ml-2" href="/admin/users/external-accounts" role="button">
+          <a className="btn btn-outline-secondary ml-2" href="/admin/users/external-accounts" role="button">
             <i className="icon-user-follow" aria-hidden="true"></i>
             {t('admin:user_management.external_account')}
           </a>
@@ -157,7 +164,7 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('all') }}
                 />
                 <label className="custom-control-label" htmlFor="c1">
-                  <span className="badge badge-primary d-inline-block vt mt-1">All</span>
+                  <span className="badge badge-pill badge-primary d-inline-block vt mt-1">All</span>
                 </label>
               </div>
 
@@ -170,7 +177,7 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('registered') }}
                 />
                 <label className="custom-control-label" htmlFor="c2">
-                  <span className="badge badge-info d-inline-block vt mt-1">Approval Pending</span>
+                  <span className="badge badge-pill badge-info d-inline-block vt mt-1">Approval Pending</span>
                 </label>
               </div>
 
@@ -183,11 +190,11 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('active') }}
                 />
                 <label className="custom-control-label" htmlFor="c3">
-                  <span className="badge badge-success d-inline-block vt mt-1">Active</span>
+                  <span className="badge badge-pill badge-success d-inline-block vt mt-1">Active</span>
                 </label>
               </div>
 
-              <div className="custom-control custom-checkbox custom-checkbox-secondary mr-2">
+              <div className="custom-control custom-checkbox custom-checkbox-warning mr-2">
                 <input
                   className="custom-control-input"
                   type="checkbox"
@@ -196,7 +203,7 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('suspended') }}
                 />
                 <label className="custom-control-label" htmlFor="c4">
-                  <span className="badge badge-secondary d-inline-block vt mt-1">Suspended</span>
+                  <span className="badge badge-pill badge-warning d-inline-block vt mt-1">Suspended</span>
                 </label>
               </div>
 
@@ -209,7 +216,7 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('invited') }}
                 />
                 <label className="custom-control-label" htmlFor="c5">
-                  <span className="badge badge-info d-inline-block vt mt-1">Invited</span>
+                  <span className="badge badge-pill badge-info d-inline-block vt mt-1">Invited</span>
                 </label>
               </div>
             </div>
@@ -228,8 +235,8 @@ class UserManagement extends React.Component {
               </button>
             </div>
 
-            <div className="ml-5">
-              {this.state.isNotifyCommentShow && <span className="text-warning small">{t('admin:user_management.click_twice_same_checkbox')}</span>}
+            <div className="ml-4">
+              {this.state.isNotifyCommentShow && <span className="text-warning">{t('admin:user_management.click_twice_same_checkbox')}</span>}
             </div>
 
           </div>

src/client/js/components/Admin/Users/PasswordResetModal.jsx

@@ -8,7 +8,6 @@ import {
 import { toastError } from '../../../util/apiNotification';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
-import AdminUsersContainer from '../../../services/AdminUsersContainer';
 
 class PasswordResetModal extends React.Component {
 
@@ -24,10 +23,9 @@ class PasswordResetModal extends React.Component {
   }
 
   async resetPassword() {
-    const { appContainer, adminUsersContainer } = this.props;
-    const user = adminUsersContainer.state.userForPasswordResetModal;
+    const { appContainer, userForPasswordResetModal } = this.props;
 
-    const res = await appContainer.apiPost('/admin/users.resetPassword', { user_id: user._id });
+    const res = await appContainer.apiPost('/admin/users.resetPassword', { user_id: userForPasswordResetModal._id });
     if (res.ok) {
       this.setState({ temporaryPassword: res.newPassword, isPasswordResetDone: true });
     }
@@ -37,14 +35,13 @@ class PasswordResetModal extends React.Component {
   }
 
   renderModalBodyBeforeReset() {
-    const { t, adminUsersContainer } = this.props;
-    const user = adminUsersContainer.state.userForPasswordResetModal;
+    const { t, userForPasswordResetModal } = this.props;
 
     return (
       <div>
         <p className="alert alert-danger">{t('admin:user_management.reset_password_modal.password_reset_message')}</p>
         <p>
-          {t('admin:user_management.reset_password_modal.target_user')}: <code>{user.email}</code>
+          {t('admin:user_management.reset_password_modal.target_user')}: <code>{userForPasswordResetModal.email}</code>
         </p>
         <p>
           {t('admin:user_management.reset_password_modal.new_password')}: <code>{this.state.temporaryPassword}</code>
@@ -54,8 +51,7 @@ class PasswordResetModal extends React.Component {
   }
 
   returnModalBodyAfterReset() {
-    const { t, adminUsersContainer } = this.props;
-    const user = adminUsersContainer.state.userForPasswordResetModal;
+    const { t, userForPasswordResetModal } = this.props;
 
     return (
       <div>
@@ -64,7 +60,7 @@ class PasswordResetModal extends React.Component {
           <span className="text-danger">{t('admin:user_management.reset_password_modal.send_new_password')}</span>
         </p>
         <p>
-          {t('admin:user_management.reset_password_modal.target_user')}: <code>{user.email}</code>
+          {t('admin:user_management.reset_password_modal.target_user')}: <code>{userForPasswordResetModal.email}</code>
         </p>
         <button type="submit" className="btn btn-primary" onClick={this.resetPassword}>
           {t('admin:user_management.reset_password')}
@@ -76,18 +72,18 @@ class PasswordResetModal extends React.Component {
   returnModalFooter() {
     return (
       <div>
-        <button type="submit" className="btn btn-primary" onClick={this.props.adminUsersContainer.hidePasswordResetModal}>OK</button>
+        <button type="submit" className="btn btn-primary" onClick={this.props.onClose}>OK</button>
       </div>
     );
   }
 
 
   render() {
-    const { t, adminUsersContainer } = this.props;
+    const { t } = this.props;
 
     return (
-      <Modal isOpen={adminUsersContainer.state.isPasswordResetModalShown} toggle={adminUsersContainer.hidePasswordResetModal}>
-        <ModalHeader tag="h4" toggle={adminUsersContainer.hidePasswordResetModal} className="modal-header">
+      <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="modal-header">
           {t('admin:user_management.reset_password') }
         </ModalHeader>
         <ModalBody>
@@ -106,13 +102,17 @@ class PasswordResetModal extends React.Component {
  * Wrapper component for using unstated
  */
 const PasswordResetModalWrapper = (props) => {
-  return createSubscribedElement(PasswordResetModal, props, [AppContainer, AdminUsersContainer]);
+  return createSubscribedElement(PasswordResetModal, props, [AppContainer]);
 };
 
 PasswordResetModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminUsersContainer: PropTypes.instanceOf(AdminUsersContainer).isRequired,
+
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  userForPasswordResetModal: PropTypes.object,
+
 };
 
 export default withTranslation()(PasswordResetModalWrapper);

src/client/js/components/Admin/Users/UserInviteModal.jsx

@@ -87,7 +87,7 @@ class UserInviteModal extends React.Component {
         <div>
           <button
             type="button"
-            className="btn btn-outline-danger rounded-pill mr-2"
+            className="btn btn-outline-secondary mr-2"
             onClick={this.onToggleModal}
           >
             Cancel
@@ -95,7 +95,7 @@ class UserInviteModal extends React.Component {
 
           <button
             type="button"
-            className="btn btn-outline-primary rounded-pill"
+            className="btn btn-primary"
             onClick={this.handleSubmit}
             disabled={!this.validEmail()}
           >
@@ -116,7 +116,7 @@ class UserInviteModal extends React.Component {
         </label>
         <button
           type="button"
-          className="btn btn-outline-primary"
+          className="btn btn-outline-secondary"
           onClick={this.onToggleModal}
         >
           Close
@@ -193,7 +193,7 @@ class UserInviteModal extends React.Component {
 
 
     return (
-      <Modal isOpen={adminUsersContainer.state.isUserInviteModalShown} toggle={this.onToggleModal}>
+      <Modal isOpen={adminUsersContainer.state.isUserInviteModalShown}>
         <ModalHeader tag="h4" toggle={this.onToggleModal} className="modal-header">
           {t('admin:user_management.invite_users') }
         </ModalHeader>

src/client/js/components/Admin/Users/UserTable.jsx

@@ -42,7 +42,7 @@ class UserTable extends React.Component {
         text = 'Active';
         break;
       case 3:
-        additionalClassName = 'badge-secondary';
+        additionalClassName = 'badge-warning';
         text = 'Suspended';
         break;
       case 4:
@@ -56,7 +56,7 @@ class UserTable extends React.Component {
     }
 
     return (
-      <span className={`badge ${additionalClassName}`}>
+      <span className={`badge badge-pill ${additionalClassName}`}>
         {text}
       </span>
     );
@@ -71,7 +71,7 @@ class UserTable extends React.Component {
     const { t } = this.props;
 
     if (isAdmin) {
-      return <span className="badge badge-primary ml-2">{t('admin:user_management.user_table.administrator')}</span>;
+      return <span className="badge badge-primary badge-pill ml-2">{t('admin:user_management.user_table.administrator')}</span>;
     }
   }
 

src/client/js/components/BookmarkButton.jsx

@@ -64,7 +64,7 @@ class BookmarkButton extends React.Component {
         href="#"
         title="Bookmark"
         onClick={this.handleClick}
-        className={`btn btn-circle btn-outline-warning btn-bookmark border-0 ${`btn-${this.props.size}`} ${this.state.isBookmarked && 'active'}`}
+        className={`btn rounded-circle btn-outline-warning btn-bookmark border-0 ${`btn-${this.props.size}`} ${this.state.isBookmarked && 'active'}`}
       >
         <i className="icon-star"></i>
       </button>

src/client/js/components/LikeButton.jsx

@@ -43,7 +43,7 @@ class LikeButton extends React.Component {
       <button
         type="button"
         onClick={this.handleClick}
-        className={`btn btn-circle btn-outline-info btn-like border-0 ${this.state.isLiked ? 'active' : ''}`}
+        className={`btn rounded-circle btn-outline-info btn-like border-0 ${this.state.isLiked ? 'active' : ''}`}
       >
         <i className="icon-like"></i>
       </button>

src/client/js/components/Me/ApiSettings.jsx

@@ -38,13 +38,13 @@ class ApiSettings extends React.Component {
     return (
       <React.Fragment>
 
-        <div className="mb-5 container-fluid">
+        <div className="container-fluid my-4">
           <h2 className="border-bottom">{ t('API Token Settings') }</h2>
         </div>
 
         <div className="row mb-3">
-          <label htmlFor="apiToken" className="col-3 text-right">{t('Current API Token')}</label>
-          <div className="col-6">
+          <label htmlFor="apiToken" className="col-md-3 text-md-right">{t('Current API Token')}</label>
+          <div className="col-md-6">
             {personalContainer.state.apiToken != null
             ? (
               <input
@@ -65,7 +65,7 @@ class ApiSettings extends React.Component {
 
 
         <div className="row">
-          <div className="offset-3 col-6">
+          <div className="offset-lg-1 col-lg-7">
 
             <p className="alert alert-warning">
               { t('page_me_apitoken.notice.update_token1') }<br />
@@ -79,7 +79,7 @@ class ApiSettings extends React.Component {
           <div className="offset-4 col-5">
             <button
               type="button"
-              className="btn btn-primary"
+              className="btn btn-primary text-nowrap"
               onClick={this.onClickSubmit}
             >
               {t('Update API Token')}

src/client/js/components/Me/AssociateModal.jsx

@@ -70,7 +70,7 @@ class AssociateModal extends React.Component {
     const { t } = this.props;
 
     return (
-      <Modal isOpen={this.props.isOpen} toggle={this.props.onClose} className="mw-100 m-4">
+      <Modal isOpen={this.props.isOpen} toggle={this.props.onClose} size="lg">
         <ModalHeader className="bg-info" toggle={this.props.onClose}>
           { t('Create External Account') }
         </ModalHeader>

src/client/js/components/Me/BasicInfoSettings.jsx

@@ -71,7 +71,7 @@ class BasicInfoSettings extends React.Component {
           </div>
           {registrationWhiteList.length !== 0 && (
             <div className="col-sm-offset-2 col-sm-10">
-              <div className="help-block">
+              <div className="form-text text-muted">
                 {t('page_register.form_help.email')}
                 <ul>
                   {registrationWhiteList.map(data => <li key={data}><code>{data}</code></li>)}

src/client/js/components/Me/ExternalAccountLinkedMe.jsx

@@ -67,7 +67,7 @@ class ExternalAccountLinkedMe extends React.Component {
 
     return (
       <Fragment>
-        <div className="container-fluid p-0 my-4">
+        <div className="container-fluid my-4">
           <h2 className="border-bottom">
             <button type="button" className="btn btn-outline-secondary btn-sm pull-right" onClick={this.openAssociateModal}>
               <i className="icon-plus" aria-hidden="true" />
@@ -77,31 +77,27 @@ class ExternalAccountLinkedMe extends React.Component {
           </h2>
         </div>
 
-        <div className="row">
-          <div className="col-md-12">
-            <table className="table table-bordered table-user-list">
-              <thead>
-                <tr>
-                  <th width="120px">Authentication Provider</th>
-                  <th>
-                    <code>accountId</code>
-                  </th>
-                  <th width="200px">{ t('Created') }</th>
-                  <th width="150px">{ t('Admin') }</th>
-                </tr>
-              </thead>
-              <tbody>
-                {externalAccounts !== 0 && externalAccounts.map(account => (
-                  <ExternalAccountRow
-                    account={account}
-                    key={account._id}
-                    openDisassociateModal={this.openDisassociateModal}
-                  />
+        <table className="table table-bordered table-user-list">
+          <thead>
+            <tr>
+              <th width="120px">Authentication Provider</th>
+              <th>
+                <code>accountId</code>
+              </th>
+              <th width="200px">{ t('Created') }</th>
+              <th width="150px">{ t('Admin') }</th>
+            </tr>
+          </thead>
+          <tbody>
+            {externalAccounts !== 0 && externalAccounts.map(account => (
+              <ExternalAccountRow
+                account={account}
+                key={account._id}
+                openDisassociateModal={this.openDisassociateModal}
+              />
                 ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
+          </tbody>
+        </table>
 
         <AssociateModal
           isOpen={this.state.isAssociateModalOpen}

src/client/js/components/Me/PasswordSettings.jsx

@@ -68,7 +68,7 @@ class PasswordSettings extends React.Component {
     return (
       <React.Fragment>
         {(!personalContainer.state.isPasswordSet) && <div className="alert alert-warning m-t-10">{ t('Password is not set') }</div>}
-        <div className="mb-5 container-fluid">
+        <div className="container-fluid my-4">
           {(personalContainer.state.isPasswordSet)
             ? <h2 className="border-bottom">{t('personal_settings.update_password')}</h2>
           : <h2 className="border-bottom">{t('personal_settings.set_new_password')}</h2>}
@@ -76,8 +76,8 @@ class PasswordSettings extends React.Component {
         {(personalContainer.state.isPasswordSet)
         && (
           <div className="row mb-3">
-            <label htmlFor="oldPassword" className="col-3 text-right">{ t('personal_settings.current_password') }</label>
-            <div className="col-6">
+            <label htmlFor="oldPassword" className="col-md-3 text-md-right">{ t('personal_settings.current_password') }</label>
+            <div className="col-md-5">
               <input
                 className="form-control"
                 type="password"
@@ -89,8 +89,8 @@ class PasswordSettings extends React.Component {
           </div>
         )}
         <div className="row mb-3">
-          <label htmlFor="newPassword" className="col-3 text-right">{t('personal_settings.new_password') }</label>
-          <div className="col-6">
+          <label htmlFor="newPassword" className="col-md-3 text-md-right">{t('personal_settings.new_password') }</label>
+          <div className="col-md-5">
             <input
               className="form-control"
               type="password"
@@ -101,8 +101,8 @@ class PasswordSettings extends React.Component {
           </div>
         </div>
         <div className={`row mb-3 ${isIncorrectConfirmPassword && 'has-error'}`}>
-          <label htmlFor="newPasswordConfirm" className="col-3 text-right">{t('personal_settings.new_password_confirm') }</label>
-          <div className="col-6">
+          <label htmlFor="newPasswordConfirm" className="col-md-3 text-md-right">{t('personal_settings.new_password_confirm') }</label>
+          <div className="col-md-5">
             <input
               className="form-control"
               type="password"
@@ -111,19 +111,21 @@ class PasswordSettings extends React.Component {
               onChange={(e) => { this.onChangeNewPasswordConfirm(e.target.value) }}
             />
 
-            <p className="help-block">{t('page_register.form_help.password') }</p>
+            <p className="form-text text-muted">{t('page_register.form_help.password') }</p>
           </div>
         </div>
 
-        <div className="my-3 text-center">
-          <button
-            type="button"
-            className="btn btn-primary"
-            onClick={this.onClickSubmit}
-            disabled={this.state.retrieveError != null || isIncorrectConfirmPassword}
-          >
-            {t('Update')}
-          </button>
+        <div className="row my-3">
+          <div className="offset-5">
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={this.onClickSubmit}
+              disabled={this.state.retrieveError != null || isIncorrectConfirmPassword}
+            >
+              {t('Update')}
+            </button>
+          </div>
         </div>
       </React.Fragment>
     );

src/client/js/components/Me/UserSettings.jsx

@@ -13,15 +13,15 @@ class UserSettings extends React.Component {
 
     return (
       <Fragment>
-        <div className="mb-5 container-fluid">
+        <div className="container-fluid my-4">
           <h2 className="border-bottom">{t('Basic Info')}</h2>
-          <BasicInfoSettings />
         </div>
+        <BasicInfoSettings />
 
-        <div className="mb-5 container-fluid">
+        <div className="container-fluid my-4">
           <h2 className="border-bottom">{t('Set Profile Image')}</h2>
-          <ProfileImageSettings />
         </div>
+        <ProfileImageSettings />
 
       </Fragment>
     );

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import { isTrashPage } from '../../../../lib/util/path-utils';
+import { isTrashPage } from '@commons/util/path-utils';
+
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import RevisionPath from '../Page/RevisionPath';
@@ -15,56 +16,77 @@ import PageCreator from './PageCreator';
 import RevisionAuthor from './RevisionAuthor';
 
 const GrowiSubNavigation = (props) => {
-  const isPageForbidden = document.querySelector('#grw-subnav').getAttribute('data-is-forbidden-page');
+  const isPageForbidden = document.querySelector('#grw-subnav').getAttribute('data-is-forbidden-page') === 'true';
   const { appContainer, pageContainer } = props;
   const {
-    pageId, path, createdAt, creator, updatedAt, revisionAuthor, isCompactMode,
+    pageId, path, createdAt, creator, updatedAt, revisionAuthor, isHeaderSticky, isSubnavCompact,
   } = pageContainer.state;
-  const compactClassName = isCompactMode ? 'grw-compact-subnavbar' : null;
 
-  // Display only the RevisionPath if the page is trash or forbidden
-  if (isTrashPage(path) || isPageForbidden) {
+  const isPageNotFound = pageId == null;
+  const isPageInTrash = isTrashPage(path);
+
+  // Display only the RevisionPath
+  if (isPageNotFound || isPageForbidden || isPageInTrash) {
     return (
-      <div className="d-flex align-items-center">
-        <div className="title-container mr-auto">
-          <h1>
-            <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
-          </h1>
-        </div>
+      <div className="d-flex align-items-center px-3 py-3 grw-subnavbar">
+        <h1 className="m-0">
+          <RevisionPath
+            behaviorType={appContainer.config.behaviorType}
+            pageId={pageId}
+            pagePath={pageContainer.state.path}
+            isPageNotFound={isPageNotFound}
+            isPageForbidden={isPageForbidden}
+            isPageInTrash={isPageInTrash}
+          />
+        </h1>
       </div>
     );
   }
 
+  const additionalClassNames = ['grw-subnavbar'];
+  if (isHeaderSticky) {
+    additionalClassNames.push('grw-subnavbar-sticky');
+  }
+  if (isSubnavCompact) {
+    additionalClassNames.push('grw-subnavbar-compact');
+  }
+
   return (
-    <div className={`row px-3 py-1 align-items-center ${compactClassName}`}>
+    <div className={`d-flex align-items-center justify-content-between px-3 py-1 ${additionalClassNames.join(' ')}`}>
 
       {/* Page Path */}
-      <div className="title-container mr-auto">
-        <h1>
+      <div>
+        <h1 className="m-0">
           <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
         </h1>
-        <TagLabels />
+        { !isPageNotFound && !isPageForbidden && (
+          <TagLabels />
+        ) }
       </div>
 
-      {/* Header Button */}
-      <div className="mr-2">
-        <LikeButton pageId={pageId} isLiked={pageContainer.state.isLiked} />
-      </div>
-      <div>
-        <BookmarkButton pageId={pageId} crowi={appContainer} />
-      </div>
+      <div className="d-flex align-items-center">
+        {/* Header Button */}
+        <div className="mr-2">
+          <LikeButton pageId={pageId} isLiked={pageContainer.state.isLiked} />
+        </div>
+        <div>
+          <BookmarkButton pageId={pageId} crowi={appContainer} />
+        </div>
 
-      {/* Page Authors */}
-      <ul className="authors text-nowrap d-none d-lg-block">
-        {creator != null && <li><PageCreator creator={creator} createdAt={createdAt} isCompactMode={isCompactMode} /></li>}
-        { revisionAuthor != null
-          && (
+        {/* Page Authors */}
+        <ul className="authors text-nowrap d-none d-lg-block">
+          { creator != null && (
+            <li>
+              <PageCreator creator={creator} createdAt={createdAt} isCompactMode={isSubnavCompact} />
+            </li>
+          ) }
+          { revisionAuthor != null && (
             <li className="mt-1">
-              <RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} isCompactMode={isCompactMode} />
+              <RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} isCompactMode={isSubnavCompact} />
             </li>
-          )
-        }
-      </ul>
+          ) }
+        </ul>
+      </div>
 
     </div>
   );

src/client/js/components/Navbar/GrowiSubNavigationForUserPage.jsx

@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
-import { throttle } from 'throttle-debounce';
 
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
@@ -14,55 +13,47 @@ import UserPicture from '../User/UserPicture';
 const GrowiSubNavigationForUserPage = (props) => {
   const pageUser = JSON.parse(document.querySelector('#grw-subnav-for-user-page').getAttribute('data-page-user'));
   const { appContainer, pageContainer } = props;
-  const { pageId } = pageContainer.state;
-  const [isCompactMode, setIsCompactMode] = useState(false);
-  const scrollAmountForFixed = 50;
-  const layoutType = appContainer.getConfig().layoutType;
-
-  useEffect(() => {
-    window.addEventListener('scroll', throttle(300, () => {
-      setIsCompactMode(window.pageYOffset > scrollAmountForFixed);
-    }));
-  }, []);
+  const { pageId, isHeaderSticky, isSubnavCompact } = pageContainer.state;
+
+  const additionalClassNames = ['grw-subnavbar', 'grw-subnavbar-user-page'];
+  if (isHeaderSticky) {
+    additionalClassNames.push('grw-subnavbar-sticky');
+  }
+  if (isSubnavCompact) {
+    additionalClassNames.push('py-2 grw-subnavbar-compact');
+  }
+  else {
+    additionalClassNames.push('py-3');
+  }
 
   return (
-    <div className={`row px-3 py-1 ${(isCompactMode && layoutType === 'growi') && 'grw-compact-subnavbar'}`}>
-
-      <div className="col-12">
-        {/* Page Path */}
-        <h4>
-          <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
-        </h4>
-
-        <div className="d-flex">
-          <div className="users-info d-flex align-items-center mr-auto">
-            <UserPicture user={pageUser} />
-
-            <div className="users-meta">
-              <div className="d-flex align-items-center">
-                <h1>
-                  {pageUser.name}
-                </h1>
-              </div>
-              <div className="user-page-meta">
-                <ul>
-                  <li className="user-page-username"><i className="icon-user mr-1"></i>{pageUser.username}</li>
-                  <li className="user-page-email">
-                    <i className="icon-envelope mr-1"></i>
-                    {pageUser.isEmailPublished ? pageUser.email : '*****'}
-                  </li>
-                  {pageUser.introduction && <li className="user-page-introduction"><p>{pageUser.introduction}</p></li>}
-                </ul>
-              </div>
-            </div>
+    <div className={`px-3 ${additionalClassNames.join(' ')}`}>
+      <h4 className="grw-user-page-path">
+        <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
+      </h4>
+
+      <div className="d-flex align-items-center justify-content-between">
+
+        <div className="users-info d-flex align-items-center">
+          <UserPicture user={pageUser} />
+
+          <div className="users-meta">
+            <h1>
+              {pageUser.name}
+            </h1>
+            <ul className="user-page-meta mt-1 mb-0">
+              <li className="user-page-username"><i className="icon-user mr-1"></i>{pageUser.username}</li>
+              <li className="user-page-email">
+                <i className="icon-envelope mr-1"></i>
+                {pageUser.isEmailPublished ? pageUser.email : '*****'}
+              </li>
+              {pageUser.introduction && <li className="user-page-introduction"><p>{pageUser.introduction}</p></li>}
+            </ul>
           </div>
-
-          {/* Header Button */}
-          <BookmarkButton pageId={pageId} crowi={appContainer} size="lg" />
         </div>
-      </div>
-
 
+        <BookmarkButton pageId={pageId} crowi={appContainer} size="lg" />
+      </div>
     </div>
   );
 

src/client/js/components/Navbar/NavbarToggler.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+
+const NavbarToggler = (props) => {
+
+  // eslint-disable-next-line no-unused-vars
+  const { appContainer } = props;
+
+  return (
+    <button className="navbar-toggler grw-navbar-toggler border-0" type="button" aria-expanded="false" aria-label="Toggle navigation">
+      <i className="icon-menu"></i>
+    </button>
+  );
+
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const NavbarTogglerWrapper = (props) => {
+  return createSubscribedElement(NavbarToggler, props, [AppContainer]);
+};
+
+
+NavbarToggler.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withTranslation()(NavbarTogglerWrapper);

src/client/js/components/Navbar/PersonalDropdown.jsx

@@ -59,7 +59,7 @@ const PersonalDropdown = (props) => {
       {/* remove .dropdown-toggle for hide caret */}
       {/* See https://stackoverflow.com/a/44577512/13183572 */}
       <a className="nav-link waves-effect waves-light" data-toggle="dropdown">
-        <UserPicture user={user} withoutLink />&nbsp;{user.name}
+        <UserPicture user={user} withoutLink /><span className="d-none d-sm-inline-block">&nbsp;{user.name}</span>
       </a>
 
       {/* Menu */}

src/client/js/components/Page/RevisionPath.jsx

@@ -16,7 +16,6 @@ class RevisionPath extends React.Component {
       pages: [],
       isListPage: false,
       isLinkToListPage: true,
-      isInTrash: false,
     };
 
     // retrieve xss library from window
@@ -60,12 +59,6 @@ class RevisionPath extends React.Component {
     const pages = [];
     const pagePaths = [];
     splitted.forEach((pageName) => {
-      // skip trash
-      if (pageName === 'trash' && splitted.length > 1) {
-        this.setState({ isInTrash: true });
-        return;
-      }
-
       pagePaths.push(encodeURIComponent(pageName));
       pages.push({
         pagePath: urljoin('/', ...pagePaths),
@@ -109,10 +102,10 @@ class RevisionPath extends React.Component {
       padding: '0 2px',
     };
 
-    const { isInTrash } = this.state;
+    const { isPageInTrash, isPageForbidden } = this.props;
     const pageLength = this.state.pages.length;
 
-    const rootElement = isInTrash
+    const rootElement = isPageInTrash
       ? (
         <>
           <span className="path-segment">
@@ -159,9 +152,11 @@ class RevisionPath extends React.Component {
 
         <CopyDropdown t={this.props.t} pagePath={this.props.pagePath} pageId={this.props.pageId} buttonStyle={buttonStyle}></CopyDropdown>
 
-        <a href="#edit" className="d-block btn btn-outline-secondary btn-edit text-muted" style={buttonStyle}>
-          <i className="icon-note" />
-        </a>
+        { !isPageInTrash && !isPageForbidden && (
+          <a href="#edit" className="d-block text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
+            <i className="icon-note" />
+          </a>
+        ) }
       </span>
     );
   }
@@ -173,6 +168,15 @@ RevisionPath.propTypes = {
   behaviorType: PropTypes.string.isRequired,
   pagePath: PropTypes.string.isRequired,
   pageId: PropTypes.string,
+  isPageNotFound: PropTypes.bool,
+  isPageForbidden: PropTypes.bool,
+  isPageInTrash: PropTypes.bool,
+};
+
+RevisionPath.defaultProps = {
+  isPageNotFound: false,
+  isPageForbidden: false,
+  isPageInTrash: false,
 };
 
 export default withTranslation()(RevisionPath);

src/client/js/components/Page/TagEditor.jsx

@@ -46,7 +46,7 @@ export default class TagEditor extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={this.state.isOpenModal} toggle={this.closeModalHandler} id="editTagModal">
+      <Modal isOpen={this.state.isOpenModal} toggle={this.closeModalHandler} id="edit-tag-modal">
         <ModalHeader tag="h4" toggle={this.closeModalHandler} className="bg-primary">
           <span className="text-white">Edit Tags</span>
         </ModalHeader>

src/client/js/components/Page/TagLabels.jsx

@@ -108,7 +108,7 @@ class TagLabels extends React.Component {
     });
 
     return (
-      <div className={`tag-viewer ${pageId ? 'existed-page' : 'new-page'}`}>
+      <div className="tag-labels">
         {tags.length === 0 && (
           <a className="btn btn-link btn-edit-tags no-tags p-0 text-muted" onClick={this.showEditor}>
             { t('Add tags for this page') } <i className="manage-tags ml-2 icon-plus"></i>

src/client/js/components/PageComment/CommentEditor.jsx

@@ -219,9 +219,6 @@ class CommentEditor extends React.Component {
     const commentPreview = this.state.isMarkdown ? this.getCommentHtml() : null;
     const emojiStrategy = appContainer.getEmojiStrategy();
 
-    const layoutType = this.props.appContainer.getConfig().layoutType;
-    const isBaloonStyle = layoutType.match(/crowi-plus|growi|kibela/);
-
     const errorMessage = <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>;
     const cancelButton = (
       <Button outline color="danger" size="xs" className="btn btn-outline-danger rounded-pill" onClick={this.toggleEditor}>
@@ -242,11 +239,9 @@ class CommentEditor extends React.Component {
     return (
       <div className="form page-comment-form">
         <div className="comment-form">
-          { isBaloonStyle && (
-            <div className="comment-form-user">
-              <UserPicture user={appContainer.currentUser} />
-            </div>
-          ) }
+          <div className="comment-form-user">
+            <UserPicture user={appContainer.currentUser} />
+          </div>
           <div className="comment-form-main">
             <div className="comment-write">
               <Nav tabs>
@@ -271,7 +266,7 @@ class CommentEditor extends React.Component {
                     isGfmMode={this.state.isMarkdown}
                     lineNumbers={false}
                     isMobile={appContainer.isMobile}
-                    isUploadable={this.state.isUploadable && layoutType !== 'crowi'} // disabled upload with crowi layout
+                    isUploadable={this.state.isUploadable}
                     isUploadableFile={this.state.isUploadableFile}
                     emojiStrategy={emojiStrategy}
                     onChange={this.updateState}
@@ -289,7 +284,7 @@ class CommentEditor extends React.Component {
             <div className="comment-submit">
               <div className="d-flex">
                 <label className="mr-2">
-                  { isBaloonStyle && activeTab === 1 && (
+                  {activeTab === 1 && (
                     <span className="custom-control custom-checkbox">
                       <input
                         type="checkbox"

src/client/js/components/PageComment/CommentEditorLazyRenderer.jsx

@@ -30,9 +30,6 @@ class CommentEditorLazyRenderer extends React.Component {
     const user = appContainer.currentUser;
     const isLoggedIn = user != null;
 
-    const layoutType = this.props.appContainer.getConfig().layoutType;
-    const isBaloonStyle = layoutType.match(/crowi-plus|growi|kibela/);
-
     if (!isLoggedIn) {
       return <React.Fragment></React.Fragment>;
     }
@@ -43,16 +40,14 @@ class CommentEditorLazyRenderer extends React.Component {
         { !this.state.isEditorShown && (
           <div className="form page-comment-form">
             <div className="comment-form">
-              { isBaloonStyle && (
-                <div className="comment-form-user">
-                  <UserPicture user={user} />
-                </div>
-              ) }
+              <div className="comment-form-user">
+                <UserPicture user={user} />
+              </div>
               <div className="comment-form-main">
                 { !this.state.isEditorShown && (
                   <button
                     type="button"
-                    className={`btn btn-lg ${isBaloonStyle ? 'btn-link' : 'btn-primary'} center-block`}
+                    className="btn btn-lg btn-link center-block"
                     onClick={this.showCommentFormBtnClickHandler}
                   >
                     <i className="icon-bubble"></i> Add Comment

src/client/js/components/PageComment/ReplayComments.jsx

@@ -40,15 +40,8 @@ class ReplayComments extends React.PureComponent {
 
   render() {
 
-    const layoutType = this.props.appContainer.getConfig().layoutType;
-    const isBaloonStyle = layoutType.match(/crowi-plus|growi|kibela/);
-
     const isAllReplyShown = this.props.appContainer.getConfig().isAllReplyShown || false;
-
-    let replyList = this.props.replyList;
-    if (!isBaloonStyle) {
-      replyList = replyList.slice().reverse();
-    }
+    const replyList = this.props.replyList;
 
     if (isAllReplyShown) {
       return (

src/client/js/components/PageComments.jsx

@@ -180,15 +180,7 @@ class PageComments extends React.Component {
   render() {
     const topLevelComments = [];
     const allReplies = [];
-
-    const layoutType = this.props.appContainer.getConfig().layoutType;
-    const isBaloonStyle = layoutType.match(/crowi-plus|growi|kibela/);
-
-    let comments = this.props.commentContainer.state.comments;
-    if (isBaloonStyle) {
-      // replace with asc order array
-      comments = comments.slice().reverse(); // non-destructive reverse
-    }
+    const comments = this.props.commentContainer.state.comments;
 
     comments.forEach((comment) => {
       if (comment.replyTo === undefined) {

src/client/js/components/PageEditor/CodeMirrorEditor.jsx

@@ -552,7 +552,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   renderCheatsheetModalButton() {
     return (
-      <button type="button" className="btn-link gfm-cheatsheet-modal-link small p-0" onClick={() => { this.markdownHelpButtonClickedHandler() }}>
+      <button type="button" className="btn-link gfm-cheatsheet-modal-link small" onClick={() => { this.markdownHelpButtonClickedHandler() }}>
         <i className="icon-question" /> Markdown
       </button>
     );
@@ -567,13 +567,13 @@ export default class CodeMirrorEditor extends AbstractEditor {
           ? (
             <div className="text-right">
               {cheatsheetModalButton}
-              <div className="mt-2">
+              <div className="mb-2">
                 <SimpleCheatsheet />
               </div>
             </div>
           )
           : (
-            <div className="mr-4">
+            <div className="mr-4 mb-2">
               {cheatsheetModalButton}
             </div>
           )

src/client/js/components/PageEditor/DrawioModal.jsx

@@ -134,7 +134,7 @@ class DrawioModal extends React.PureComponent {
 
   render() {
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} className="drawio-modal" bssize="large" keyboard={false}>
+      <Modal isOpen={this.state.show} toggle={this.cancel} className="drawio-modal" size="xl" keyboard={false}>
         <ModalBody className="p-0">
           {/* Loading spinner */}
           <div className="w-100 h-100 position-absolute d-flex">

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  Button, ButtonGroup,
   Collapse,
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
@@ -437,15 +436,21 @@ export default class HandsontableModal extends React.PureComponent {
         <ModalHeader tag="h4" toggle={this.cancel} close={buttons}>Edit Table</ModalHeader>
         <ModalBody className="p-0 d-flex flex-column">
           <div className="px-4 py-3 modal-navbar bg-light">
-            <Button className="mr-4 data-import-button bg-light" onClick={this.toggleDataImportArea}>
+            <button
+              type="button"
+              className="mr-4 data-import-button btn btn-secondary"
+              data-toggle="collapse"
+              data-target="#collapseDataImport"
+              aria-expanded={this.state.isDataImportAreaExpanded}
+              onClick={this.toggleDataImportArea}
+            >
               <span className="mr-3">Data Import</span><i className={this.state.isDataImportAreaExpanded ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
-
-            </Button>
-            <ButtonGroup>
-              <Button onClick={() => { this.alignButtonHandler('l') }}><i className="ti-align-left"></i></Button>
-              <Button onClick={() => { this.alignButtonHandler('c') }}><i className="ti-align-center"></i></Button>
-              <Button onClick={() => { this.alignButtonHandler('r') }}><i className="ti-align-right"></i></Button>
-            </ButtonGroup>
+            </button>
+            <div role="group" className="btn-group">
+              <button type="button" className="btn btn-secondary" onClick={() => { this.alignButtonHandler('l') }}><i className="ti-align-left"></i></button>
+              <button type="button" className="btn btn-secondary" onClick={() => { this.alignButtonHandler('c') }}><i className="ti-align-center"></i></button>
+              <button type="button" className="btn btn-secondary" onClick={() => { this.alignButtonHandler('r') }}><i className="ti-align-right"></i></button>
+            </div>
             <Collapse isOpen={this.state.isDataImportAreaExpanded}>
               <div className="mt-4">
                 <MarkdownTableDataImportForm onCancel={this.toggleDataImportArea} onImport={this.importData} />
@@ -468,10 +473,10 @@ export default class HandsontableModal extends React.PureComponent {
           </div>
         </ModalBody>
         <ModalFooter className="grw-modal-footer">
-          <Button color="danger" onClick={this.reset}>Reset</Button>
+          <button type="button" className="btn btn-danger" onClick={this.reset}>Reset</button>
           <div className="ml-auto">
-            <Button className="mr-2" color="secondary" onClick={this.cancel}>Cancel</Button>
-            <Button color="primary" onClick={this.save}>Done</Button>
+            <button type="button" className="mr-2 btn btn-secondary" onClick={this.cancel}>Cancel</button>
+            <button type="button" className="btn btn-primary" onClick={this.save}>Done</button>
           </div>
         </ModalFooter>
       </Modal>

src/client/js/components/PageEditor/OptionsSelector.jsx

@@ -110,7 +110,7 @@ class OptionsSelector extends React.Component {
 
     return (
       <div className="my-0 form-group">
-        <label>Theme:</label>
+        <label className="mr-2">Theme:</label>
         <div className="btn-group btn-group-sm dropup">
           <button className="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {selectedTheme}
@@ -137,7 +137,7 @@ class OptionsSelector extends React.Component {
 
     return (
       <div className="my-0 form-group">
-        <label>Keymap:</label>
+        <label className="mr-2">Keymap:</label>
         <div className="btn-group btn-group-sm dropup">
           <button className="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {selectedKeymapMode}

src/client/js/components/PageHistory/RevisionDiff.jsx

@@ -39,7 +39,7 @@ export default class RevisionDiff extends React.Component {
 
     const diffView = { __html: diffViewHTML };
     // eslint-disable-next-line react/no-danger
-    return <div className="revision-history-diff" dangerouslySetInnerHTML={diffView} />;
+    return <div className="revision-history-diff d-table w-100" dangerouslySetInnerHTML={diffView} />;
   }
 
 }

src/client/js/components/Sidebar.jsx

@@ -15,7 +15,6 @@ import Drawer from '@atlaskit/drawer';
 import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
-import GrowiLogo from './GrowiLogo';
 import SidebarNav from './Sidebar/SidebarNav';
 import History from './Sidebar/History';
 import CustomSidebar from './Sidebar/CustomSidebar';
@@ -56,9 +55,6 @@ class Sidebar extends React.Component {
 
   renderGlobalNavigation = () => (
     <>
-      <div className="grw-logo">
-        <a href="/"><GrowiLogo /></a>
-      </div>
       <SidebarNav currentContentsId={this.state.currentContentsId} onItemSelected={this.itemSelectedHandler} />
       <Drawer onClose={this.closeDrawer} isOpen={this.state.isDrawerOpen} width="wide">
         <code>Drawer contents</code>
@@ -99,6 +95,7 @@ class Sidebar extends React.Component {
           // experimental_fullWidthFlyout
           shouldHideGlobalNavShadow
           showContextualNavigation
+          topOffset={50}
         >
         </LayoutManager>
       </ThemeProvider>

src/client/js/components/Sidebar/CustomSidebar.jsx

@@ -3,12 +3,9 @@ import React from 'react';
 
 import { withTranslation } from 'react-i18next';
 
-import { JiraWordmark } from '@atlaskit/logo';
-
 import {
   HeaderSection,
   MenuSection,
-  Wordmark,
 } from '@atlaskit/navigation-next';
 
 import { createSubscribedElement } from '../UnstatedUtils';
@@ -22,19 +19,25 @@ class CustomSidebar extends React.Component {
   state = {
   };
 
+  renderHeaderWordmark() {
+    return <h3>Custom Sidebar</h3>;
+  }
+
   render() {
     return (
       <>
         <HeaderSection>
           { () => (
-            <div className="grw-product-nav-header">
-              <Wordmark wordmark={JiraWordmark} />
+            <div className="grw-sidebar-header-container">
+              {this.renderHeaderWordmark()}
             </div>
           ) }
         </HeaderSection>
         <MenuSection>
           { () => (
-            <span>(TBD) CustomSidebar Contents</span>
+            <div className="grw-sidebar-content-container">
+              <span>(TBD) CustomSidebar Contents</span>
+            </div>
           ) }
         </MenuSection>
       </>

src/client/js/components/Sidebar/History.jsx

@@ -3,12 +3,9 @@ import React from 'react';
 
 import { withTranslation } from 'react-i18next';
 
-import { JiraWordmark } from '@atlaskit/logo';
-
 import {
   HeaderSection,
   MenuSection,
-  Wordmark,
 } from '@atlaskit/navigation-next';
 
 import { createSubscribedElement } from '../UnstatedUtils';
@@ -22,19 +19,25 @@ class History extends React.Component {
   state = {
   };
 
+  renderHeaderWordmark() {
+    return <h3>History</h3>;
+  }
+
   render() {
     return (
       <>
         <HeaderSection>
           { () => (
-            <div className="grw-product-nav-header">
-              <Wordmark wordmark={JiraWordmark} />
+            <div className="grw-sidebar-header-container">
+              {this.renderHeaderWordmark()}
             </div>
           ) }
         </HeaderSection>
         <MenuSection>
           { () => (
-            <span>(TBD) History Contents</span>
+            <div className="grw-sidebar-content-container">
+              <span>(TBD) History Contents</span>
+            </div>
           ) }
         </MenuSection>
       </>

src/client/js/components/Sidebar/SidebarNav.jsx

@@ -3,11 +3,9 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import EditIcon from '@atlaskit/icon/glyph/edit';
-import TrayIcon from '@atlaskit/icon/glyph/tray';
-
 import {
   GlobalNav,
+  GlobalItem,
 } from '@atlaskit/navigation-next';
 
 import { createSubscribedElement } from '../UnstatedUtils';
@@ -31,24 +29,55 @@ class SidebarNav extends React.Component {
     }
   }
 
-  generateSidebarItemObj(id, icon, label) {
+  generatePrimaryItemObj(id, label, icon) {
+    const isSelected = this.props.currentContentsId === id;
+
+    return {
+      id,
+      component: ({ className }) => (
+        <div className={`${className} grw-global-item-container ${isSelected ? 'active' : ''}`}>
+          <GlobalItem
+            icon={icon}
+            label={label}
+            isSelected={isSelected}
+            onClick={() => this.itemSelectedHandler(id)}
+          />
+        </div>
+      ),
+    };
+  }
+
+  generateSecondaryItemObj(id, label, icon, href) {
     return {
       id,
-      icon,
-      label,
-      isSelected: this.props.currentContentsId === id,
-      onClick: () => this.itemSelectedHandler(id),
+      component: ({ className }) => (
+        <div className={`${className} grw-global-item-container d-block d-md-none`}>
+          <a href={href}>
+            <GlobalItem
+              icon={icon}
+              label={label}
+            />
+          </a>
+        </div>
+      ),
     };
   }
 
+  generateIconFactory(classNames) {
+    return () => <i className={classNames}></i>;
+  }
+
   render() {
     return (
       <GlobalNav
         primaryItems={[
-          this.generateSidebarItemObj('custom', EditIcon, 'Custom Sidebar'),
-          this.generateSidebarItemObj('history', TrayIcon, 'History'),
+          this.generatePrimaryItemObj('custom', 'Custom Sidebar', this.generateIconFactory('fa fa-code')),
+          this.generatePrimaryItemObj('history', 'History', this.generateIconFactory('icon-clock')),
+        ]}
+        secondaryItems={[
+          this.generateSecondaryItemObj('admin', 'Admin', this.generateIconFactory('icon-settings'), '/admin'),
+          this.generateSecondaryItemObj('help', 'Help', this.generateIconFactory('icon-question'), 'https://docs.growi.org'),
         ]}
-        secondaryItems={[]}
       />
     );
   }

src/client/js/components/TableOfContents.jsx

@@ -60,11 +60,6 @@ class TableOfContents extends React.Component {
   }
 
   init() {
-    const { layoutType } = this.props.appContainer.config;
-    if (layoutType === 'crowi') {
-      return;
-    }
-
     /*
      * set event listener
      */

src/client/js/services/AdminUsersContainer.js

@@ -183,7 +183,10 @@ export default class AdminUsersContainer extends Container {
    * @memberOf AdminUsersContainer
    */
   async hidePasswordResetModal() {
-    await this.setState({ isPasswordResetModalShown: false });
+    await this.setState({
+      isPasswordResetModalShown: false,
+      userForPasswordResetModal: null,
+    });
   }
 
   /**

src/client/js/services/PageContainer.js

@@ -5,10 +5,10 @@ import loggerFactory from '@alias/logger';
 import * as entities from 'entities';
 import * as toastr from 'toastr';
 
-import { throttle } from 'throttle-debounce';
-
 const logger = loggerFactory('growi:services:PageContainer');
-const scrollAmountForFixed = 50;
+const scrollThresForSticky = 0;
+const scrollThresForCompact = 30;
+const scrollThresForThrottling = 100;
 
 /**
  * Service container related to Page
@@ -58,7 +58,9 @@ export default class PageContainer extends Container {
       pageIdOnHackmd: mainContent.getAttribute('data-page-id-on-hackmd') || null,
       hasDraftOnHackmd: !!mainContent.getAttribute('data-page-has-draft-on-hackmd'),
       isHackmdDraftUpdatingInRealtime: false,
-      isCompactMode: false,
+
+      isHeaderSticky: false,
+      isSubnavCompact: false,
     };
 
     this.initStateMarkdown();
@@ -69,9 +71,19 @@ export default class PageContainer extends Container {
     this.addWebSocketEventHandlers = this.addWebSocketEventHandlers.bind(this);
     this.addWebSocketEventHandlers();
 
-    window.addEventListener('scroll', throttle(300, () => {
-      this.setState({ isCompactMode: window.pageYOffset > scrollAmountForFixed });
-    }));
+    window.addEventListener('scroll', () => {
+      const currentYOffset = window.pageYOffset;
+
+      // original throttling
+      if (this.state.isSubnavCompact && scrollThresForThrottling < currentYOffset) {
+        return;
+      }
+
+      this.setState({
+        isHeaderSticky: scrollThresForSticky < currentYOffset,
+        isSubnavCompact: scrollThresForCompact < currentYOffset,
+      });
+    });
   }
 
   /**

src/client/js/services/PersonalContainer.js

@@ -70,6 +70,9 @@ export default class PersonalContainer extends Container {
    * define a function for uploaded picture
    */
   getUploadedPictureSrc(user) {
+    if (user == null) {
+      return DEFAULT_IMAGE;
+    }
     if (user.image) {
       this.setState({ isUploadedPicture: true });
       return user.image;

src/client/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -1,10 +1,3 @@
-.top-left-part {
-  .logo-mark,
-  .logo-text {
-    fill: white;
-  }
-}
-
 /*
  * Button
  */

src/client/styles/agile-admin/inverse/colors/antarctic.scss

@@ -91,10 +91,6 @@ table,
  * Accentcolor (yellow)
  */
 
-header.affix {
-  border-bottom: 4px solid $accentcolor;
-}
-
 .modal {
   .modal-header {
     border-bottom: 4px solid $accentcolor;

src/client/styles/agile-admin/inverse/colors/spring.scss

@@ -49,14 +49,6 @@ $wikilinktext-hover: gba(171, 224, 174, 0.9);
   border-top-color: $third-main-color;
 }
 
-/*
- * Accentcolor (green)
- */
-
-header.affix {
-  border-bottom: 4px solid $accentcolor;
-}
-
 .modal {
   .modal-header {
     border-bottom: 4px solid $accentcolor;

src/client/styles/scss/_admin.scss

@@ -1,4 +1,8 @@
 .admin-page {
+  header.grw-header {
+    height: unset;
+  }
+
   .admin-user-menu {
     .dropdown-menu {
       right: 0;

src/client/styles/scss/_layout.scss

@@ -1,5 +1,24 @@
 @import 'layout_variable';
 
+%fukidashi-for-active {
+  position: relative;
+
+  // speech balloon
+  &:after {
+    position: absolute;
+    top: 0.5em;
+    right: -1em;
+    display: block;
+    width: 0;
+    content: '';
+    border: 1em solid transparent;
+    border-left-width: 0;
+
+    // @include media-breakpoint-down(xs) {
+    // }
+  }
+}
+
 // FIXME: replace with mt-2 or mt-3
 .grw-mt-10px {
   margin-top: 10px !important;
@@ -32,38 +51,67 @@
 
 .grw-sidebar {
   .ak-navigation-resize-button {
-    top: 110px;
+    top: calc(50vh - 20px);
   }
-}
 
-/*
-  * header
-  */
-.grw-subnav {
-  overflow: unset;
+  // override @atlaskit/navigation-next styles
+  div[class$='-NavigationContainer'] {
+    // Adjust to be on top of the growi subnavigation
+    z-index: $zindex-sticky + 5;
+  }
+
+  // override @atlaskit/navigation-next styles
+  div[class$='-Outer'] {
+    div[class$='-Shadow'] {
+      background: unset;
+      border-right: 1px solid $border;
+    }
+  }
+
+  .grw-global-item-container {
+    i {
+      font-size: 1.5em;
+    }
+
+    // icon opacity
+    &:not(.active) {
+      i {
+        opacity: 0.4;
+      }
+      &:hover,
+      &:focus {
+        i {
+          opacity: 0.7;
+        }
+      }
+    }
+
+    &.active {
+      button {
+        @extend %fukidashi-for-active;
+      }
+    }
+  }
 }
 
-.grw-modal-head {
-  font-size: 1em;
-  border-bottom: 1px solid $grw-line-gray;
+#page-wrapper {
+  margin-top: $grw-navbar-height;
 }
 
-header#page-header {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.grw-sidebar-header-container {
+  padding: 10px;
 
-  line-height: 1em;
-  // the container of h1
-  div.title-container {
-    padding-right: 5px;
-    padding-left: 5px;
-    margin-right: auto;
+  h3 {
+    margin-bottom: 0;
   }
+}
 
-  h1 {
-    @include variable-font-size(28px);
-    line-height: 1.1em;
-  }
+.grw-sidebar-content-container {
+}
+
+.grw-modal-head {
+  font-size: 1em;
+  border-bottom: 1px solid $grw-line-gray;
 }
 
 .main {
@@ -114,6 +162,18 @@ header#page-header {
   }
 }
 
+.grw-fixed-controls-container {
+  position: fixed;
+  right: 1em;
+  bottom: 3em;
+
+  transition: all 200ms linear;
+
+  .grw-fixed-controls-button-container {
+    box-shadow: 0 3px 4px rgba($black, 0.3);
+  }
+}
+
 // printable style
 @media print {
   padding: 30px;

src/client/styles/scss/_layout_kibela.scss

@@ -1,39 +1,8 @@
-@import '../scss/theme/layout_kibela_variable';
-
 body.kibela {
-  .icon-link,
-  .CodeMirror-hint-active,
-  .grw-nav-main-left-tab,
-  .tav-pane,
-  .active {
-    color: #5882fa;
-  }
-
-  .bg-white {
-    background: #fefffe !important;
-  }
-
-  .bg-primary {
-    background-color: $primary !important;
-  }
-
-  /* h element */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: $color-header;
-    margin: 10px 0;
-  }
-
+  /* Logo */
   .logo {
-    background: transparent;
-
     .logo-mark {
       height: 50px;
-      background-color: white;
       box-shadow: none;
 
       svg {
@@ -43,10 +12,6 @@ body.kibela {
   }
 
   /* header */
-  .background-t {
-    background-color: transparent;
-  }
-
   .authors {
     padding-top: 10px;
 
@@ -55,28 +20,12 @@ body.kibela {
     }
   }
 
-  .search-input-group,
-  .search-typeahead {
-    .btn {
-      background-color: transparent;
-    }
-  }
-
   .panel-heading {
     border-radius: 0 !important;
   }
 
-  .btn-open-dropzone {
-    background: rgb(243, 245, 247);
-  }
-
   /* page list */
-  .page-list {
-    background: white;
-  }
-
   .page-attachments-row {
-    background-color: #e5ecf1 !important;
     border: 0px;
   }
 
@@ -86,7 +35,6 @@ body.kibela {
 
   .round-corner-top {
     z-index: absolute;
-    border-top: solid 0.4em #5584e1;
     border-radius: 0.35em;
   }
 
@@ -97,16 +45,14 @@ body.kibela {
     bottom: 0px;
     left: 0px;
     z-index: absolute;
-    height: 11em;
     max-width: 840px;
+    height: 11em;
     margin: auto;
-    border-top: solid 0.4em #5584e1;
     border-radius: 0.35em;
   }
 
   .grw-subnav {
     position: relative;
-    background: transparent;
     border: none;
 
     svg {
@@ -142,108 +88,23 @@ body.kibela {
     .list-group-item + .list-group-item.active {
       margin-top: 2px;
     }
-
-    .list-group-item.active {
-      color: #fff;
-      background: #1256a3;
-    }
-
-    .list-group-item {
-      &:hover {
-        background: #eee;
-      }
-    }
-  }
-
-  /* search page */
-  .search-result-list,
-  .page-list-li {
-    background: #f4f5f6;
   }
 
   /* Tabs */
   .nav.nav-tabs {
     > .nav-item {
-      color: #5882fa;
       cursor: pointer;
-      background: transparent;
-
-      &:hover,
-      &:focus {
-        > .nav-link {
-          color: #7a94d9;
-        }
-      }
 
       > .nav-link {
-        color: #5882fa;
         border: none;
         border-radius: 3px;
       }
-
-      > .nav-link.active {
-        background: transparent !important;
-        border-bottom: solid 2.7px #5584e1;
-      }
-    }
-
-    .wiki {
-      h1 {
-        border-bottom: solid 2px #5584e1 !important;
-      }
-
-      h2 {
-        border-color: solid 1px #5584e1;
-      }
-    }
-  }
-
-  /* Modal */
-  .modal-content {
-    background-color: $themelight;
-
-    .modal-header.bg-primary {
-      color: white;
-
-      .close {
-        color: white;
-      }
-    }
-  }
-
-  /* Inline Code */
-  :not(.hljs) > code:not(.hljs) {
-    background-color: $bgcolor-inline-code;
-    color: $color-inline-code;
-  }
-
-  /* Card */
-  .card {
-    border: 1px solid $border;
-
-    .card-header {
-      background-color: $lightthemecolor;
-      border-bottom: 1px solid $border;
-    }
-
-    .card-body {
-      background-color: $themelight;
-    }
-
-    .card-footer {
-      background: white;
-      border-top: 1px solid $border
     }
   }
 
   /* button */
   .btn {
-    border-radius: $radius;
-  }
-
-  .btn-primary {
-    background: $primary;
-    border: 1px solid $primary;
+    // border-radius: $radius;
   }
 
   /* Custom Control */
@@ -262,8 +123,6 @@ body.kibela {
 
   /* edit */
   .CodeMirror {
-    border: solid 1.2px #d8d8d8;
-    border-top: solid 0.3em #5584e1 !important;
     border-radius: 0.35em;
   }
 
@@ -304,7 +163,6 @@ body.kibela {
     .page-editor-preview-container {
       padding-right: 0px !important;
       padding-left: 2em;
-      background: white !important;
     }
 
     .page-editor-footer {

src/client/styles/scss/_layout_variable.scss

@@ -1,30 +1,8 @@
 /* color variables */
 
-/* green */
-$grw-base-green: rgb(7, 146, 72);
-$grw-mos-green: rgb(5, 70, 35);
-$grw-light-green: rgb(204, 238, 220);
-$grw-white-green: #f8fffb;
-$grw-sea-green: seagreen;
-
-.bg-grw-green {
-  background: $grw-base-green;
-}
-
-.bg-grw-mos-green {
-  background: $grw-mos-green;
-}
-
-.bg-grw-light-green {
-  background: $grw-light-green;
-}
-
 /* blue */
 $grw-alice-blue: aliceblue;
 
 /* gray */
 $grw-line-gray: #dee2e6;
 $grw-line-light-gray: #ddd;
-
-/* white */
-$grw-floral-white: floralwhite;

src/client/styles/scss/_me.scss

@@ -0,0 +1,5 @@
+.user-settings-page {
+  header.grw-header {
+    height: unset;
+  }
+}

src/client/styles/scss/_mixins.scss

@@ -72,7 +72,7 @@
         .hackmd-preinit,
         .hackmd-error,
         #iframe-hackmd-container > iframe {
-          width: 100vw;
+          width: 100%;
           height: calc(100vh - #{$header-plus-footer});
           min-height: calc(100vh - #{$header-plus-footer}); // for IE11
         }

src/client/styles/scss/_navbar.scss

@@ -1,4 +1,9 @@
 .grw-navbar {
+  .grw-navbar-toggler {
+    padding: 0.5rem;
+    font-size: 1.5em;
+  }
+
   .nav-link,
   .nav-item.confidential {
     display: flex;

src/client/styles/scss/_on-edit.scss

@@ -72,8 +72,8 @@ body.on-edit {
     }
   }
 
-  // show compact subnav
-  .grw-compact-subnav {
+  // show revision path
+  .grw-revision-path-for-edit {
     display: block !important;
   }
 
@@ -97,7 +97,7 @@ body.on-edit {
 
     background: none;
 
-    > .grw-title-bar {
+    > .grw-subnav-container {
       width: 100%; //   for crowi layout
       padding: 0; //    for crowi layout
       pointer-events: initial; // enable pointer-events
@@ -117,7 +117,7 @@ body.on-edit {
       }
     }
 
-    .tag-viewer.new-page {
+    .tag-labels.new-page {
       display: block;
     }
   }
@@ -197,10 +197,6 @@ body.on-edit {
     }
 
     #page-editor-options-selector {
-      label {
-        margin-right: 0.5em;
-      }
-
       .grw-editor-configuration-dropdown {
         .icon-container {
           display: inline-block;

src/client/styles/scss/_override-bootstrap-variables.scss

@@ -18,7 +18,7 @@ $dark: #3e4d6c !default;
 //## Font, line-height, and color for body text, headings, and more.
 $font-family-sans-serif:  Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 $font-family-serif:       Georgia, "Times New Roman", Times, serif;
-$font-family-monospace: Osaka-Mono, 'MS Gothic', Monaco, Menlo, Consolas, 'Courier New', monospace;
+$font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
 $font-family-base:        $font-family-sans-serif;
 
 $font-size-root: 14px;

src/client/styles/scss/_override-bootstrap.scss

@@ -44,6 +44,11 @@
     line-height: 10px;
   }
 
+  code {
+    padding: 2px 4px;
+    font-size: 90%;
+  }
+
   // Navs
   .nav-tabs {
     .nav-item {

src/client/styles/scss/_override-rbt.scss

@@ -9,6 +9,14 @@
     }
   }
 }
+
+.rbt-input-wrapper {
+  .close.rbt-close {
+    // default bootstrap .close has padding 0
+    padding: 3px 7px;
+  }
+}
+
 // hide loading icon
 .rbt-aux {
   display: none;

src/client/styles/scss/_page.scss

@@ -25,7 +25,7 @@
     }
   }
 
-  .tag-viewer.new-page {
+  .tag-labels.new-page {
     display: none;
   }
 }
@@ -70,6 +70,7 @@
       .revision-history-diff {
         padding-left: 40px;
         color: #333;
+        table-layout: fixed;
       }
     }
 

src/client/styles/scss/_page_growi.scss

@@ -1,41 +0,0 @@
-.growi {
-  header {
-    // Adjust to be on top of the growi subnavigation
-    z-index: $zindex-sticky - 100;
-    ul.authors {
-      padding-left: 1.5em;
-      margin: 0;
-
-      li {
-        font-size: 12px;
-        list-style: none;
-      }
-
-      .picture {
-        width: 22px;
-        height: 22px;
-        border: 1px solid #ccc;
-
-        &.picture-xs {
-          width: 14px;
-          height: 14px;
-        }
-      }
-    }
-    .grw-compact-subnavbar {
-      h2 {
-        font-size: 20px;
-        line-height: 1.1em;
-        @include media-breakpoint-down(md) {
-          font-size: 18px;
-        }
-        @include media-breakpoint-down(sm) {
-          font-size: 14px;
-        }
-        @include media-breakpoint-down(xs) {
-          font-size: 12px;
-        }
-      }
-    }
-  }
-}

src/client/styles/scss/_page_header.scss

@@ -1,10 +0,0 @@
-#page-header {
-  &:hover {
-    .btn-copy,
-    .btn-edit,
-    .btn-edit-tags {
-      // change button opacity
-      opacity: unset;
-    }
-  }
-}

src/client/styles/scss/_subnav.scss

@@ -0,0 +1,100 @@
+$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
+
+%transitionForCompactMode {
+  // set transition-duration (normal -> compact)
+  transition: all 300ms $easeInOutCubic;
+}
+
+/*
+ * layout for sticky
+ */
+header.grw-header {
+  top: $grw-navbar-height;
+
+  // Adjust to be on top of the growi subnavigation
+  z-index: $zindex-sticky;
+
+  height: 80px;
+  pointer-events: none; // disable pointer events for sticky
+
+  .grw-subnav {
+    overflow: unset;
+    pointer-events: all; // enable pointer events
+  }
+}
+
+/*
+ * Compact Mode Switching
+ */
+.grw-subnavbar {
+  &.grw-subnavbar-compact {
+    @extend %transitionForCompactMode;
+
+    h1 {
+      @include variable-font-size(18px);
+      @extend %transitionForCompactMode;
+    }
+  }
+}
+
+/*
+ * Sticky Mode Switching
+ */
+.grw-subnavbar {
+  &.grw-subnavbar-sticky {
+    // set transition-duration (init -> sticky)
+    transition: all 400ms linear !important;
+  }
+}
+
+/*
+ * Styles
+ */
+
+.grw-header {
+  .title {
+    padding: 0.5rem 15px;
+
+    line-height: 1em;
+
+    @include variable-font-size(28px);
+    line-height: 1.1em;
+  }
+}
+
+.grw-subnavbar {
+  &:hover {
+    .btn-copy,
+    .btn-edit,
+    .btn-edit-tags {
+      // change button opacity
+      opacity: unset;
+    }
+  }
+
+  h1 {
+    @include variable-font-size(28px);
+    line-height: 1.1em;
+  }
+
+  ul.authors {
+    padding-left: 1.5em;
+    margin: 0;
+
+    li {
+      font-size: 12px;
+      list-style: none;
+    }
+
+    .picture {
+      width: 22px;
+      height: 22px;
+      border: 1px solid #ccc;
+
+      &.picture-xs {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+}

src/client/styles/scss/_tag.scss

@@ -1,4 +1,14 @@
-.tag-viewer {
+.tags-page {
+  header.grw-header {
+    height: unset;
+  }
+
+  .list-tag-count {
+    background: rgba(0, 0, 0, 0.08);
+  }
+}
+
+.tag-labels {
   .manage-tags {
     font-size: 10px;
     cursor: pointer;
@@ -19,13 +29,7 @@
   }
 }
 
-#tags-page {
-  .list-tag-count {
-    background: rgba(0, 0, 0, 0.08);
-  }
-}
-
-#editTagModal {
+#edit-tag-modal {
   .form-control {
     height: auto;
   }

src/client/styles/scss/_user.scss

@@ -1,4 +1,49 @@
-.user-page-header {
+$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
+
+%transitionForCompactMode {
+  // set transition-duration (normal -> compact)
+  transition: all 300ms $easeInOutCubic;
+}
+
+.grw-header.grw-header-user-page {
+  height: 150px;
+}
+
+/*
+ * Compact Mode Switching
+ */
+.grw-subnavbar.grw-subnavbar-user-page {
+  &.grw-subnavbar-compact {
+    .grw-user-page-path {
+      margin-bottom: 0;
+      font-size: 14px;
+
+      @extend %transitionForCompactMode;
+    }
+    .picture {
+      width: 62px;
+      height: 62px;
+
+      @extend %transitionForCompactMode;
+    }
+    h1 {
+      font-size: 1.5em;
+      line-height: 30px;
+
+      @extend %transitionForCompactMode;
+    }
+    .users-meta {
+      margin-left: 15px;
+
+      @extend %transitionForCompactMode;
+    }
+  }
+}
+
+/*
+ * Styles
+ */
+.grw-subnavbar-user-page {
   #revision-path {
     margin-bottom: 0;
   }
@@ -14,19 +59,16 @@
   }
 
   .picture {
-    width: 64px;
-    height: 64px;
+    width: 72px;
+    height: 72px;
   }
 
-  .user-page-meta {
+  ul.user-page-meta {
+    padding-left: 0;
     color: #999;
 
-    ul {
-      padding-left: 0;
-
-      li {
-        list-style: none;
-      }
+    li {
+      list-style: none;
     }
 
     .user-page-username {
@@ -46,32 +88,15 @@
     }
   }
 
-  .btn-like,
-  .btn-bookmark {
+  .btn.btn-bookmark {
     &.btn-lg {
-      padding: 8px;
+      width: 50px;
+      height: 50px;
       font-size: 1.5em;
     }
   }
 }
 
-// affix
-.user-page-header.affix {
-  .users-meta {
-    margin-left: 15px;
-  }
-
-  h1 {
-    font-size: 1.5em;
-    line-height: 30px;
-  }
-
-  .picture {
-    width: 48px;
-    height: 48px;
-  }
-}
-
 .draft-list-item {
   .icon-container {
     .icon-copy,

src/client/styles/scss/_user_growi.scss

@@ -1,11 +1,4 @@
 .growi .user-page {
-  // affix
-  .user-page-header.affix {
-    #revision-path {
-      display: none;
-    }
-  }
-
   .revision-toc {
     position: sticky;
     top: 105px;

src/client/styles/scss/_variables.scss

@@ -6,8 +6,8 @@ $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', Mei
 
 //== Layout
 $grw-navbar-height: 50px;
-$grw-logo-width: 60px;
-$grw-logomark-width: 32px;
+$grw-logo-width: 64px;
+$grw-logomark-width: 40px;
 
 // fix tab width to 95 pixels
 // see also '_on-edit.scss'

src/client/styles/scss/atoms/_buttons.scss

@@ -1,37 +1,7 @@
-.btn-circle {
-  width: 30px;
-  height: 30px;
-  padding: 6px 0;
-  font-size: 12px;
-  line-height: 1.428571429;
-  text-align: center;
-  border-radius: 15px;
-}
-
-.btn-circle.btn-lg {
-  width: 50px;
-  height: 50px;
-  padding: 10px 16px;
-  font-size: 18px;
-  line-height: 1.33;
-  border-radius: 25px;
-}
-
-.btn-circle.btn-xl {
-  width: 70px;
-  height: 70px;
-  padding: 10px 16px;
-  font-size: 24px;
-  line-height: 1.33;
-  border-radius: 35px;
-}
-
-.btn-like,
-.btn-bookmark {
-  font-size: 1.2em;
-  line-height: 0.8em;
-
-  &.active {
+.btn.btn-like,
+.btn.btn-bookmark {
+  &.active,
+  &:hover {
     // header buttons are always white for active
     color: white !important;
   }
@@ -39,6 +9,8 @@
   &:not(:hover):not(.active) {
     background-color: transparent;
   }
+  width: 35px;
+  height: 35px;
 }
 
 .btn-copy,

src/client/styles/scss/style-app.scss

@@ -41,16 +41,16 @@
 @import 'layout_kibela';
 @import 'layout_variable';
 @import 'login';
+@import 'me';
 @import 'navbar';
 @import 'navbar_kibela';
 @import 'notification';
 @import 'on-edit';
 @import 'page_list';
 @import 'page';
-@import 'page_header';
-@import 'page_growi';
 @import 'search';
 @import 'shortcuts';
+@import 'subnav';
 @import 'tag';
 @import 'user';
 @import 'user_growi';

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -1,10 +1,3 @@
-.logo {
-  .logo-mark,
-  .logo-text {
-    fill: white;
-  }
-}
-
 /*
  * Button
  */
@@ -111,15 +104,6 @@ textarea.form-control {
   // border: 1px solid $border;
 }
 
-/*
- * GROWI header
- */
-header.affix {
-  .logo-mark {
-    fill: white;
-  }
-}
-
 /*
  * GROWI page list
  */
@@ -139,9 +123,24 @@ header.affix {
 /*
  * GROWI subnavigation
  */
-.grw-compact-subnavbar {
-  background-color: rgba(darken($bgcolor-global, 90%), 0.9);
-  box-shadow: 0 0 2px darken($bgcolor-global, 5%);
+.admin-page,
+.user-settings-page,
+.tags-page {
+  .grw-header {
+    background-color: rgba(darken($bgcolor-global, 90%), 0.9);
+  }
+}
+
+.grw-subnavbar {
+  background-color: rgba(darken($bgcolor-global, 90%), 1);
+
+  &.grw-subnavbar-sticky {
+    background-color: rgba(darken($bgcolor-global, 90%), 0.9);
+    box-shadow: 0 3px 2px -2px darken($bgcolor-global, 5%);
+  }
+}
+
+.grw-subnavbar-sticky {
 }
 
 /*

src/client/styles/scss/theme/_apply-colors-kibela.scss

@@ -0,0 +1,203 @@
+body.kibela {
+  .icon-link,
+  .CodeMirror-hint-active,
+  .grw-nav-main-left-tab,
+  .tav-pane,
+  .active {
+    color: $subthemecolor;
+  }
+
+  .bg-white {
+    background: #fefffe !important;
+  }
+
+  .bg-primary {
+    background-color: $primary !important;
+  }
+
+  /* kibela block */
+  .kibela-block {
+    border-top: solid 0.4em $thickborder;
+  }
+
+  /* page wrapper */
+  #page-wrapper {
+    background-color: $bgcolor-global;
+  }
+
+  /* header*/
+  .background-t {
+    background-color: transparent;
+  }
+
+  .search-input-group,
+  .search-typeahead {
+    .btn {
+      background-color: transparent;
+    }
+  }
+
+  .btn-open-dropzone {
+    background: $themelight;
+  }
+
+  /* page list */
+  .page-list {
+    background: white;
+  }
+
+  .page-attachments-row {
+    background-color: #e5ecf1;
+  }
+
+  /* round */
+  .round-corner-top {
+    border-top: solid 0.4em $thickborder;
+  }
+
+  /* admin navigation */
+  .admin-navigation {
+    .list-group-item {
+      background-color: transparent;
+
+      &:hover {
+        background: #eee;
+      }
+    }
+
+    .list-group-item.active {
+      color: white;
+      background: $bgcolor-navbar-active;
+    }
+  }
+
+  /* search page */
+  .search-result-list,
+  .page-list-li {
+    background: $themelight;
+  }
+
+  /* Tabs */
+  .nav.nav-tabs {
+    > .nav-item {
+      color: $color-link;
+      background: transparent;
+
+      &:hover,
+      &:focus {
+        > .nav-link {
+          color: $color-link-hover;
+        }
+      }
+
+      > .nav-link {
+        color: $color-link;
+      }
+
+      > .nav-link.active {
+        background: transparent !important;
+        border-bottom: solid 2.7px $thickborder;
+      }
+    }
+  }
+
+  /* wiki */
+  .wiki {
+    h1 {
+      border-bottom: solid 2px $thickborder !important;
+    }
+
+    h2 {
+      border-color: solid 1px $thickborder;
+    }
+
+    // change color of highlighted header in wiki (default: orange)
+    .code-line.revision-head.highlighted {
+      color: $themelight;
+      background-color: lighten($bgcolor-theme, 20%);
+
+      .icon-note,
+      .icon-link {
+        color: $themelight;
+      }
+    }
+  }
+
+  /* Modal */
+  .modal-content {
+    background-color: $themelight;
+
+    .modal-header.bg-primary {
+      color: white;
+
+      .close {
+        color: white;
+      }
+    }
+  }
+
+  /* Inline Code */
+  :not(.hljs) > code:not(.hljs) {
+    color: $color-inline-code;
+    background-color: $bgcolor-inline-code;
+  }
+
+  /* Card */
+  .card {
+    border: 1px solid $border-color-theme;
+
+    .card-header {
+      background-color: $lightthemecolor;
+      border-bottom: 1px solid $border-color-theme;
+    }
+
+    .card-body {
+      background-color: $themelight;
+    }
+
+    .card-footer {
+      background: white;
+      border-top: 1px solid $border-color-theme;
+    }
+  }
+
+  /* button */
+  .btn-primary {
+    background: $primary;
+    border: 1px solid $primary;
+  }
+
+  /* edit */
+  .CodeMirror {
+    border: solid 1.2px #d8d8d8;
+    border-top: solid 0.3em $thickborder !important;
+  }
+
+  &.on-edit {
+    .page-editor-preview-container {
+      background: white !important;
+    }
+  }
+
+  /* subnav */
+  .grw-subnav {
+    background: transparent;
+  }
+
+  /* navbar */
+  .grw-navbar {
+    .nav-item > .nav-link:hover {
+      color: $color-link-nabvar-hover;
+    }
+  }
+
+  /* h */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $color-header;
+  }
+}