Merge pull request #2143 from weseek/support/apply-bootstrap4

Support/apply bootstrap4

config/webpack.common.js

@@ -39,7 +39,7 @@ module.exports = (options) => {
       // '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-halloween':       './src/client/styles/scss/theme/halloween.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',

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

@@ -11,46 +11,112 @@ const AdminNavigation = (props) => {
     return (pathname.startsWith(urljoin('/admin', path)));
   };
 
+  const getListGroupItemOrDropdownItemList = (isListGroupItems) => {
+    const pageTransitionClassName = isListGroupItems ? 'list-group-item list-group-item-action border-0 round-corner' : 'dropdown-item';
+    return (
+      <>
+        <a
+          href="/admin"
+          className={`${pageTransitionClassName} ${pathname === '/admin' && 'active'}`}
+        >
+          <i className="icon-fw icon-home"></i> {t('Management Wiki Home')}
+        </a>
+        <a
+          href="/admin/app"
+          className={`${pageTransitionClassName} ${isActiveMenu('/app') && 'active'}`}
+        >
+          <i className="icon-fw icon-settings"></i> {t('App Settings')}
+        </a>
+        <a
+          href="/admin/security"
+          className={`${pageTransitionClassName} ${isActiveMenu('/security') && 'active'}`}
+        >
+          <i className="icon-fw icon-shield"></i> {t('security_settings')}
+        </a>
+        <a
+          href="/admin/markdown"
+          className={`${pageTransitionClassName} ${isActiveMenu('/markdown') && 'active'}`}
+        >
+          <i className="icon-fw icon-note"></i> {t('Markdown Settings')}
+        </a>
+        <a
+          href="/admin/customize"
+          className={`${pageTransitionClassName} ${isActiveMenu('/customize') && 'active'}`}
+        >
+          <i className="icon-fw icon-wrench"></i> {t('Customize')}
+        </a>
+        <a
+          href="/admin/importer"
+          className={`${pageTransitionClassName} ${isActiveMenu('/importer') && 'active'}`}
+        >
+          <i className="icon-fw icon-cloud-upload"></i> {t('Import Data')}
+        </a>
+        <a
+          href="/admin/export"
+          className={`${pageTransitionClassName} ${isActiveMenu('/export') && 'active'}`}
+        >
+          <i className="icon-fw icon-cloud-download"></i> {t('Export Archive Data')}
+        </a>
+        <a
+          href="/admin/notification"
+          className={`${pageTransitionClassName} ${(isActiveMenu('/notification') || isActiveMenu('/global-notification')) && 'active'}`}
+        >
+          <i className="icon-fw icon-bell"></i> {t('Notification Settings')}
+        </a>
+        <a
+          href="/admin/users"
+          className={`${pageTransitionClassName} ${(isActiveMenu('/users')) && 'active'}`}
+        >
+          <i className="icon-fw icon-user"></i> {t('User_Management')}
+        </a>
+        <a
+          href="/admin/user-groups"
+          className={`${pageTransitionClassName} ${isActiveMenu('/user-group') && 'active'}`}
+        >
+          <i className="icon-fw icon-people"></i> {t('UserGroup Management')}
+        </a>
+        <a
+          href="/admin/search"
+          className={`${pageTransitionClassName} ${isActiveMenu('/search') && 'active'}`}
+        >
+          <i className="icon-fw icon-magnifier"></i> {t('Full Text Search Management')}
+        </a>
+      </>
+    );
+  };
+
   return (
-    <div className="list-group admin-navigation">
-      <a href="/admin" className={`list-group-item list-group-item-action border-0 round-corner ${pathname === '/admin' && 'active'}`}>
-        <i className="icon-fw icon-home"></i> {t('Management Wiki Home')}
-      </a>
-      <a href="/admin/app" className={`list-group-item list-group-item-action border-0 round-corner ${isActiveMenu('/app') && 'active'}`}>
-        <i className="icon-fw icon-settings"></i> {t('App Settings')}
-      </a>
-      <a href="/admin/security" className={`list-group-item list-group-item-action border-0 round-corner  ${isActiveMenu('/security') && 'active'}`}>
-        <i className="icon-fw icon-shield"></i> {t('security_settings')}
-      </a>
-      <a href="/admin/markdown" className={`list-group-item list-group-item-action border-0 round-corner ${isActiveMenu('/markdown') && 'active'}`}>
-        <i className="icon-fw icon-note"></i> {t('Markdown Settings')}
-      </a>
-      <a href="/admin/customize" className={`list-group-item list-group-item-action border-0 round-corner ${isActiveMenu('/customize') && 'active'}`}>
-        <i className="icon-fw icon-wrench"></i> {t('Customize')}
-      </a>
-      <a href="/admin/importer" className={`list-group-item list-group-item-action border-0 round-corner ${isActiveMenu('/importer') && 'active'}`}>
-        <i className="icon-fw icon-cloud-upload"></i> {t('Import Data')}
-      </a>
-      <a href="/admin/export" className={`list-group-item list-group-item-action border-0 round-corner ${isActiveMenu('/export') && 'active'}`}>
-        <i className="icon-fw icon-cloud-download"></i> {t('Export Archive Data')}
-      </a>
-      <a
-        href="/admin/notification"
-        className={
-          `list-group-item list-group-item-action border-0 round-corner ${(isActiveMenu('/notification') || isActiveMenu('/global-notification')) && 'active'}`
-        }
-      >
-        <i className="icon-fw icon-bell"></i> {t('Notification Settings')}
-      </a>
-      <a href="/admin/users" className={`list-group-item list-group-item-action border-0 round-corner ${(isActiveMenu('/users')) && 'active'}`}>
-        <i className="icon-fw icon-user"></i> {t('User_Management')}
-      </a>
-      <a href="/admin/user-groups" className={`list-group-item list-group-item-action border-0 round-corner ${isActiveMenu('/user-group') && 'active'}`}>
-        <i className="icon-fw icon-people"></i> {t('UserGroup Management')}
-      </a>
-      <a href="/admin/search" className={`list-group-item list-group-item-action border-0 round-corner ${isActiveMenu('/search') && 'active'}`}>
-        <i className="icon-fw icon-magnifier"></i> {t('Full Text Search Management')}
-      </a>
+    <div>
+      <div className="list-group admin-navigation d-none d-md-block">
+        {getListGroupItemOrDropdownItemList(true)}
+      </div>
+      <div className="dropdown d-block d-md-none">
+        <button
+          className="btn btn-outline-secondary dropdown-toggle col-12 text-right"
+          type="button"
+          id="dropdown-admin-navigation"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <span className="float-left"><i className="icon-fw icon-home"></i>
+            {pathname === '/admin' && t('Management Wiki Home')}
+            {pathname === '/admin/app' && t('App Settings')}
+            {pathname === '/admin/security' && t('security_settings')}
+            {pathname === '/admin/markdown' && t('Markdown Settings')}
+            {pathname === '/admin/customize' && t('Customize')}
+            {pathname === '/admin/importer' && t('Import Data')}
+            {pathname === '/admin/export' && t('Export Archive Data')}
+            {pathname === ('/admin/notification' || '/admin/global-notification') && t('Notification Settings')}
+            {pathname === '/admin/users' && t('User_Management')}
+            {pathname === '/admin/user-groups' && t('UserGroup Management')}
+            {pathname === '/admin/search' && t('Full Text Search Management')}
+          </span>
+        </button>
+        <div className="dropdown-menu" aria-labelledby="dropdown-admin-navigation">
+          {getListGroupItemOrDropdownItemList(false)}
+        </div>
+      </div>
     </div>
   );
 };

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

@@ -10,7 +10,6 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 import { toastError } from '../../../util/apiNotification';
 
 import CustomizeLayoutSetting from './CustomizeLayoutSetting';
-import CustomizeBehaviorSetting from './CustomizeBehaviorSetting';
 import CustomizeFunctionSetting from './CustomizeFunctionSetting';
 import CustomizeHighlightSetting from './CustomizeHighlightSetting';
 import CustomizeCssSetting from './CustomizeCssSetting';
@@ -52,9 +51,6 @@ class Customize extends React.Component {
         <div className="mb-5">
           <CustomizeLayoutSetting />
         </div>
-        <div className="mb-5">
-          <CustomizeBehaviorSetting />
-        </div>
         <div className="mb-5">
           <CustomizeFunctionSetting />
         </div>

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

@@ -1,99 +0,0 @@
-/* eslint-disable react/no-danger */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-import { toastSuccess, toastError } from '../../../util/apiNotification';
-
-import AppContainer from '../../../services/AppContainer';
-
-import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
-import CustomizeBehaviorOption from './CustomizeBehaviorOption';
-import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
-
-
-class CustomizeBehaviorSetting extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.onClickSubmit = this.onClickSubmit.bind(this);
-  }
-
-  async onClickSubmit() {
-    const { t, adminCustomizeContainer } = this.props;
-
-    try {
-      await adminCustomizeContainer.updateCustomizeBehavior();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.behavior') }));
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }
-
-  render() {
-    const { t, adminCustomizeContainer } = this.props;
-
-    return (
-      <React.Fragment>
-        <div className="row">
-          <div className="col-12">
-            <h2 className="admin-setting-header">{t('admin:customize_setting.behavior')}</h2>
-            <div className="row">
-              <div className="col-md-6">
-                <CustomizeBehaviorOption
-                  behaviorType="growi"
-                  isSelected={adminCustomizeContainer.state.currentBehavior === 'growi'}
-                  onSelected={() => adminCustomizeContainer.switchBehaviorType('growi')}
-                  labelHtml={`GROWI Simplified Behavior <small class="text-success">${t('admin:customize_setting.recommended')}</small>`}
-                >
-                  <ul>
-                    <li><span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.behavior_desc.growi_text1') }} /></li>
-                    <li><span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.behavior_desc.growi_text2') }} /></li>
-                    <li><span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.behavior_desc.growi_text3') }} /></li>
-                  </ul>
-                </CustomizeBehaviorOption>
-              </div>
-
-              <div className="col-md-6">
-                <CustomizeBehaviorOption
-                  behaviorType="crowi-plus"
-                  isSelected={adminCustomizeContainer.state.currentBehavior === 'crowi-plus'}
-                  onSelected={() => adminCustomizeContainer.switchBehaviorType('crowi-plus')}
-                  labelHtml="Crowi Classic Behavior"
-                >
-                  <ul>
-                    <li><span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.behavior_desc.crowi_text1') }} /></li>
-                    <li><span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.behavior_desc.crowi_text2') }} /></li>
-                    <ul>
-                      <li><span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.behavior_desc.crowi_text3') }} /></li>
-                    </ul>
-                    <li><span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.behavior_desc.crowi_text4') }} /></li>
-                    <li><span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.behavior_desc.crowi_text5') }} /></li>
-                  </ul>
-                </CustomizeBehaviorOption>
-              </div>
-            </div>
-
-            <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
-          </div>
-        </div>
-      </React.Fragment>
-    );
-  }
-
-}
-
-const CustomizeBehaviorSettingWrapper = (props) => {
-  return createSubscribedElement(CustomizeBehaviorSetting, props, [AppContainer, AdminCustomizeContainer]);
-};
-
-CustomizeBehaviorSetting.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
-};
-
-export default withTranslation()(CustomizeBehaviorSettingWrapper);

src/client/js/services/AdminCustomizeContainer.js

@@ -22,7 +22,6 @@ export default class AdminCustomizeContainer extends Container {
       retrieveError: null,
       currentTheme: '',
       currentLayout: '',
-      currentBehavior: '',
       isEnabledTimeline: false,
       isSavedStatesOfTabChanges: false,
       isEnabledAttachTitleHeader: false,
@@ -71,7 +70,6 @@ export default class AdminCustomizeContainer extends Container {
       this.setState({
         currentTheme: customizeParams.themeType,
         currentLayout: customizeParams.layoutType,
-        currentBehavior: customizeParams.behaviorType,
         isEnabledTimeline: customizeParams.isEnabledTimeline,
         isSavedStatesOfTabChanges: customizeParams.isSavedStatesOfTabChanges,
         isEnabledAttachTitleHeader: customizeParams.isEnabledAttachTitleHeader,
@@ -119,13 +117,6 @@ export default class AdminCustomizeContainer extends Container {
     }
   }
 
-  /**
-   * Switch behaviorType
-   */
-  switchBehaviorType(behaviorName) {
-    this.setState({ currentBehavior: behaviorName });
-  }
-
   /**
    * Switch enabledTimeLine
    */
@@ -266,26 +257,6 @@ export default class AdminCustomizeContainer extends Container {
     }
   }
 
-  /**
-   * Update behavior
-   * @memberOf AdminCustomizeContainer
-   */
-  async updateCustomizeBehavior() {
-    try {
-      const response = await this.appContainer.apiv3.put('/customize-setting/behavior', {
-        behaviorType: this.state.currentBehavior,
-      });
-      const { customizedParams } = response.data;
-      this.setState({
-        behaviorType: customizedParams.behaviorType,
-      });
-    }
-    catch (err) {
-      logger.error(err);
-      throw new Error('Failed to update data');
-    }
-  }
-
   /**
    * Update function
    * @memberOf AdminCustomizeContainer

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

@@ -20,7 +20,7 @@ body.kibela {
   }
 
   /* kibela block */
-  .kibela-block {
+  .kibela-border-top {
     border-top: solid 0.4em $thickborder;
   }
 
@@ -161,8 +161,13 @@ body.kibela {
 
   /* navbar */
   .grw-navbar {
-    .nav-item > .nav-link:hover {
-      color: $color-link-nabvar-hover;
+    .nav-item > .nav-link {
+      &:hover {
+        color: $color-link-nabvar-hover;
+      }
+      &:focus {
+        color: $color-link-nabvar;
+      }
     }
   }
 

src/client/styles/scss/theme/antarctic.scss

@@ -43,12 +43,13 @@ $accentcolor: #ffd700;
 
 //== Light Mode
 //
-html[light] {
+html[light],
+html[dark] {
   $primary: $themecolor;
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-navbar: #334455;
+  $bgcolor-navbar: $themecolor;
   $bgcolor-inline-code: #f9f2f4;
   $bgcolor-card: #f5f5f5;
 
@@ -56,7 +57,7 @@ html[light] {
   $color-global: black;
   $color-reversal: #eeeeee;
   // $color-header: #2b2b2b;
-  $color-link: lighten($primary, 20%);
+  $color-link: lighten($color-global, 20%);
   $color-link-hover: lighten($color-link, 20%);
   $color-link-wiki: lighten($primary, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
@@ -72,7 +73,7 @@ html[light] {
 
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
-  $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
+  $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
   // Icon colors
   $color-editor-icons: $color-global;
@@ -98,65 +99,69 @@ html[light] {
 
   @import 'apply-colors';
   @import 'apply-colors-light';
+
+  .table {
+    background-color: $themelight;
+  }
 }
 
 //== Dark Mode
 //
-html[dark] {
-  $primary: #d65a31;
-
-  $basecolor: #222831;
-
-  // Background colors
-  $bgcolor-global: $basecolor;
-  $bgcolor-navbar: #151515;
-  $bgcolor-inline-code: darken($basecolor, 5%);
-  $bgcolor-card: darken($basecolor, 5%);
-
-  // Font colors
-  $color-global: #eeeeee;
-  $color-reversal: #333333;
-  // $color-header: desaturate($primary, 20%);
-  $color-link: $primary;
-  $color-link-hover: lighten($color-link, 10%);
-  $color-link-wiki: lighten($basecolor, 50%);
-  $color-link-wiki-hover: darken($color-link-wiki, 5%);
-  $color-link-nabvar: $color-global;
-  $color-inline-code: #c7254e;
-
-  // List Group colors
-  $color-list: $color-global;
-  $bgcolor-list: $bgcolor-global;
-  $color-list-active: $color-reversal;
-  $bgcolor-list-active: $primary;
-  $color-list-hover: $color-reversal;
-
-  // Logo colors
-  $bgcolor-logo: $bgcolor-navbar;
-  $fillcolor-logo-mark: #444;
-
-  // Icon colors
-  $color-editor-icons: darken($accentcolor, 15%);
-
-  // Border colors
-  $border-color-theme: black; // former: `$navbar-border: #ccc;`
-
-  // Dropdown colors
-  $bgcolor-dropdown-link-active: $primary;
-  $color-dropdown-link-active: $color-global;
-  $color-dropdown-link-hover: $color-reversal;
-
-  // alert
-  $color-alert: $color-global;
-
-  // badge
-  $color-badge: $color-global;
-
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
-
-  @import 'apply-colors';
-  @import 'apply-colors-dark';
-}
+// html[dark] {
+//   $primary: #d65a31;
+
+//   $basecolor: #222831;
+
+//   // Background colors
+//   $bgcolor-global: $basecolor;
+//   $bgcolor-navbar: #151515;
+//   $bgcolor-inline-code: darken($basecolor, 5%);
+//   $bgcolor-card: darken($basecolor, 5%);
+
+//   // Font colors
+//   $color-global: #eeeeee;
+//   $color-reversal: #333333;
+//   // $color-header: desaturate($primary, 20%);
+//   $color-link: $primary;
+//   $color-link-hover: lighten($color-link, 10%);
+//   $color-link-wiki: lighten($basecolor, 50%);
+//   $color-link-wiki-hover: darken($color-link-wiki, 5%);
+//   $color-link-nabvar: $color-global;
+//   $color-inline-code: #c7254e;
+
+//   // List Group colors
+//   $color-list: $color-global;
+//   $bgcolor-list: $bgcolor-global;
+//   $color-list-active: $color-reversal;
+//   $bgcolor-list-active: $primary;
+//   $color-list-hover: $color-reversal;
+
+//   // Logo colors
+//   $bgcolor-logo: $bgcolor-navbar;
+//   $fillcolor-logo-mark: #444;
+
+//   // Icon colors
+//   $color-editor-icons: darken($accentcolor, 15%);
+
+//   // Border colors
+//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
+
+//   // Dropdown colors
+//   $bgcolor-dropdown-link-active: $primary;
+//   $color-dropdown-link-active: $color-global;
+//   $color-dropdown-link-hover: $color-reversal;
+
+//   // alert
+//   $color-alert: $color-global;
+
+//   // badge
+//   $color-badge: $color-global;
+
+//   // Sidebar
+//   $bgcolor-sidebar: $bgcolor-navbar;
+//   $color-sidebar-context: $color-global;
+//   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+
+//   @import 'apply-colors';
+//   @import 'apply-colors-dark';
+// }

src/client/styles/scss/theme/halloween.scss

@@ -1,8 +1,115 @@
-// import colors
-@import '../../agile-admin/inverse/colors/halloween';
+@import '../variables';
+@import '../override-bootstrap-variables';
 
-// apply agile-admin theme
-@import '../../agile-admin/inverse/style';
+$themecolor: #aa4a04;
+$themelight: #f0f8ff;
+$accentcolor: #ffd700;
+$bordercolor: #7e0d7e;
 
-// override
-@import 'override-agileadmin';
+// == Define Bootstrap theme colors
+//
+
+// colors for overriding bootstrap $theme-colors
+$primary: $themecolor;
+$light: lighten($secondary, 10%);
+
+// $info: #;
+// $success: #;
+// $warning: #;
+// $danger: #;
+// $dark: #;
+
+.growi:not(.login-page) {
+  #wrapper > .navbar {
+    background-image: url(/images/themes/halloween/halloween-navbar.jpg);
+  }
+  // add background-image
+  #page-wrapper,
+  .page-editor-preview-container {
+    background-image: url('/images/themes/halloween/halloween.jpg');
+  }
+}
+
+//== Light Mode
+//
+html[light],
+html[dark] {
+  // Background colors
+  $bgcolor-global: #050000;
+  $bgcolor-navbar: #334455;
+  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-card: #f5f5f5;
+
+  // Font colors
+  $color-global: #e9af2b;
+  $color-reversal: #eeeeee;
+  // $color-header: #2b2b2b;
+  $color-link: lighten($primary, 20%);
+  $color-link-hover: lighten($color-link, 20%);
+  $color-link-wiki: lighten($primary, 20%);
+  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
+  $color-link-nabvar: $color-reversal;
+  $color-inline-code: #c7254e;
+
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: transparent;
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $primary;
+  $color-list-hover: $themecolor;
+
+  // Logo colors
+  $bgcolor-logo: darken($themecolor, 10%);
+  $fillcolor-logo-mark: lighten($accentcolor, 15%);
+
+  // Icon colors
+  $color-editor-icons: $color-global;
+
+  // Border colors
+  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+
+  // Dropdown colors
+  $bgcolor-dropdown-link-active: $primary;
+  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-hover: $color-global;
+
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
+  @import 'apply-colors';
+  @import 'apply-colors-dark';
+
+  // Table
+  .table {
+    color: $color-global;
+  }
+  .table-bordered {
+    th,
+    td {
+      border: 1px solid $themecolor;
+    }
+  }
+
+  // Nav
+  .nav-tabs {
+    border-bottom: $bordercolor 1px solid;
+    .nav-link {
+      &:hover {
+        border: $bordercolor 1px solid;
+      }
+      &.active {
+        color: lighten($themecolor, 5%);
+        background-color: transparent;
+        border: $bordercolor 1px solid;
+      }
+    }
+  }
+}

src/server/routes/apiv3/customize-setting.js

@@ -29,12 +29,6 @@ const ErrorV3 = require('../../models/vo/error-apiv3');
  *            type: string
  *          themeType:
  *            type: string
- *      CustomizeBehavior:
- *        description: CustomizeBehavior
- *        type: object
- *        properties:
- *          behaviorType:
- *            type: string
  *      CustomizeFunction:
  *        description: CustomizeFunction
  *        type: object
@@ -105,9 +99,6 @@ module.exports = (crowi) => {
         'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'future', 'blue-night', 'halloween', 'spring',
       ]),
     ],
-    behavior: [
-      body('behaviorType').isString().isIn(['growi', 'crowi-plus']),
-    ],
     function: [
       body('isEnabledTimeline').isBoolean(),
       body('isSavedStatesOfTabChanges').isBoolean(),
@@ -261,48 +252,6 @@ module.exports = (crowi) => {
     }
   });
 
-  /**
-   * @swagger
-   *
-   *    /customize-setting/behavior:
-   *      put:
-   *        tags: [CustomizeSetting]
-   *        operationId: updateBehaviorCustomizeSetting
-   *        summary: /customize-setting/behavior
-   *        description: Update behavior
-   *        requestBody:
-   *          required: true
-   *          content:
-   *            application/json:
-   *              schema:
-   *                $ref: '#/components/schemas/CustomizeBehavior'
-   *        responses:
-   *          200:
-   *            description: Succeeded to update behavior
-   *            content:
-   *              application/json:
-   *                schema:
-   *                  $ref: '#/components/schemas/CustomizeBehavior'
-   */
-  router.put('/behavior', loginRequiredStrictly, adminRequired, csrf, validator.behavior, ApiV3FormValidator, async(req, res) => {
-    const requestParams = {
-      'customize:behavior': req.body.behaviorType,
-    };
-
-    try {
-      await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestParams);
-      const customizedParams = {
-        behaviorType: await crowi.configManager.getConfig('crowi', 'customize:behavior'),
-      };
-      return res.apiv3({ customizedParams });
-    }
-    catch (err) {
-      const msg = 'Error occurred in updating behavior';
-      logger.error('Error', err);
-      return res.apiv3Err(new ErrorV3(msg, 'update-behavior-failed'));
-    }
-  });
-
   /**
    * @swagger
    *

src/server/views/layout-kibela/base/layout.html

@@ -11,9 +11,9 @@
 
   <div class="row body m-0 p-0">
 
-    <div id="main" class="main col-12 kibela-block round-corner border-0 {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
+    <div id="main" class="main col-12 kibela-block round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
       <div class="row grw-subnav d-edit-none">
-        <div class="col px-0 mx-0 kibela-block">
+        <div class="col px-0 mx-0 bg-white kibela-border-top round-corner">
           {% block content_header %} {% endblock %}
         </div>
         <div class="col-xl-3 col-lg-4"></div>

src/server/views/layout/layout.html

@@ -110,7 +110,7 @@
       <li class="nav-item d-none d-md-block">
         <a class="nav-link create-page" href="#" data-target="#create-page" data-toggle="modal">
           <i class="icon-pencil mr-2"></i>
-          {{ t('New') }}
+          <span>{{ t('New') }}</span>
         </a>
       </li>
       <li class="nav-item d-none d-md-block">