change button type to "btn-outline-secondary" from "light"

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

@@ -13,7 +13,7 @@ class ArchiveFilesTableMenu extends React.Component {
 
     return (
       <div className="btn-group admin-user-menu">
-        <button type="button" className="btn btn-sm btn-light dropdown-toggle" data-toggle="dropdown">
+        <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
           <i className="icon-settings"></i> <span className="caret"></span>
         </button>
         <ul className="dropdown-menu" role="menu">

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

@@ -183,10 +183,10 @@ class SelectCollectionsModal extends React.Component {
           <ModalBody>
             <div className="row">
               <div className="col-sm-12">
-                <button type="button" className="btn btn-sm btn-light mr-2" onClick={this.checkAll}>
+                <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={this.checkAll}>
                   <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}
                 </button>
-                <button type="button" className="btn btn-sm btn-light mr-2" onClick={this.uncheckAll}>
+                <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={this.uncheckAll}>
                   <i className="fa fa-square-o"></i> {t('admin:export_management.uncheck_all')}
                 </button>
               </div>
@@ -219,7 +219,7 @@ class SelectCollectionsModal extends React.Component {
           </ModalBody>
 
           <ModalFooter>
-            <button type="button" className="btn btn-sm btn-light" onClick={this.props.onClose}>{t('export_management.cancel')}</button>
+            <button type="button" className="btn btn-sm btn-outline-secondary" onClick={this.props.onClose}>{t('export_management.cancel')}</button>
             <button type="submit" className="btn btn-sm btn-primary" disabled={!this.validateForm()}>{t('export_management.export')}</button>
           </ModalFooter>
         </form>

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

@@ -213,7 +213,7 @@ class ExportArchiveDataPage extends React.Component {
       <Fragment>
         <h2>{t('Export Archive Data')}</h2>
 
-        <button type="button" className="btn btn-light" disabled={isExporting} onClick={this.openExportModal}>
+        <button type="button" className="btn btn-outline-secondary" disabled={isExporting} onClick={this.openExportModal}>
           {t('admin:export_management.create_new_archive_data')}
         </button>
 

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

@@ -213,7 +213,7 @@ class ImportCollectionConfigurationModal extends React.Component {
         </ModalBody>
 
         <ModalFooter>
-          <button type="button" className="btn btn-sm btn-light" onClick={this.props.onClose}>{t('Cancel')}</button>
+          <button type="button" className="btn btn-sm btn-outline-secondary" onClick={this.props.onClose}>{t('Cancel')}</button>
           <button type="button" className="btn btn-sm btn-primary" onClick={this.updateOption}>{t('Update')}</button>
         </ModalFooter>
       </Modal>

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

@@ -149,7 +149,7 @@ export default class ImportCollectionItem extends React.Component {
     return (
       <button
         type="button"
-        className="btn btn-light btn-sm p-1 ml-2"
+        className="btn btn-outline-secondary btn-sm p-1 ml-2"
         disabled={isImporting || !isConfigButtonAvailable}
         onClick={isConfigButtonAvailable ? this.configButtonClickedHandler : null}
       >

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

@@ -455,12 +455,12 @@ class ImportForm extends React.Component {
       <>
         <form className="form-inline">
           <div className="form-group">
-            <button type="button" className="btn btn-sm btn-light mr-2" onClick={this.checkAll}>
+            <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={this.checkAll}>
               <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}
             </button>
           </div>
           <div className="form-group">
-            <button type="button" className="btn btn-sm btn-light mr-2" onClick={this.uncheckAll}>
+            <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={this.uncheckAll}>
               <i className="fa fa-square-o"></i> {t('admin:export_management.uncheck_all')}
             </button>
           </div>
@@ -472,7 +472,7 @@ class ImportForm extends React.Component {
         {this.renderOthers()}
 
         <div className="mt-4 text-center">
-          <button type="button" className="btn btn-light mx-1" onClick={this.props.onDiscard}>
+          <button type="button" className="btn btn-outline-secondary mx-1" onClick={this.props.onDiscard}>
             {t('admin:importer_management.growi_settings.discard')}
           </button>
           <button type="button" className="btn btn-primary mx-1" onClick={this.import} disabled={!canImport || isImporting}>

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-light btn-esa"
+                    className="btn btn-outline-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-light btn-qiita"
+                    className="btn btn-outline-secondary btn-qiita"
                     onClick={this.qiitaHandleSubmitTest}
                     value={t('admin:importer_management.qiita_settings.test_connection')}
                   />

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

@@ -99,7 +99,7 @@ class GlobalNotification extends React.Component {
 
         <h2 className="border-bottom mb-5">{t('notification_setting.notification_list')}
           <a href="/admin/global-notification/new">
-            <p className="btn btn-light pull-right">{t('notification_setting.add_notification')}</p>
+            <p className="btn btn-outline-secondary pull-right">{t('notification_setting.add_notification')}</p>
           </a>
         </h2>
 

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

@@ -131,7 +131,7 @@ class GlobalNotificationList extends React.Component {
               <td className="td-abs-center">
                 <div className="dropdown">
                   <button
-                    className="btn btn-light dropdown-toggle"
+                    className="btn btn-outline-secondary dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
                     data-toggle="dropdown"

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

@@ -22,7 +22,7 @@ class UserNotificationRow extends React.PureComponent {
             {notification.channel}
           </td>
           <td>
-            <button type="submit" className="btn btn-light" onClick={() => { this.props.onClickDeleteBtn(notification._id) }}>{t('Delete')}</button>
+            <button type="submit" className="btn btn-outline-secondary" onClick={() => { this.props.onClickDeleteBtn(notification._id) }}>{t('Delete')}</button>
           </td>
         </tr>
       </React.Fragment>

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

@@ -128,7 +128,7 @@ class LdapSecuritySetting extends React.Component {
               <div className="col-6">
                 <div className="dropdown">
                   <button
-                    className="btn btn-light dropdown-toggle"
+                    className="btn btn-outline-secondary dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
                     data-toggle="dropdown"
@@ -425,7 +425,7 @@ class LdapSecuritySetting extends React.Component {
                 >
                   {t('Update')}
                 </button>
-                <button type="button" className="btn btn-light ml-2" onClick={this.openLdapAuthTestModal}>{t('security_setting.ldap.test_config')}</button>
+                <button type="button" className="btn btn-outline-secondary ml-2" onClick={this.openLdapAuthTestModal}>{t('security_setting.ldap.test_config')}</button>
               </div>
             </div>
 

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

@@ -106,7 +106,7 @@ class LocalSecuritySetting extends React.Component {
               <div className="col-6">
                 <div className="dropdown">
                   <button
-                    className="btn btn-light dropdown-toggle"
+                    className="btn btn-outline-secondary dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
                     data-toggle="dropdown"

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

@@ -64,7 +64,7 @@ class SecuritySetting extends React.Component {
           <div className="col-6">
             <div className="dropdown">
               <button
-                className={`btn btn-light dropdown-toggle ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}`}
+                className={`btn btn-outline-secondary dropdown-toggle ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}`}
                 type="button"
                 id="dropdownMenuButton"
                 data-toggle="dropdown"
@@ -144,7 +144,7 @@ class SecuritySetting extends React.Component {
           <div className="col-9">
             <div className="dropdown">
               <button
-                className="btn btn-light dropdown-toggle"
+                className="btn btn-outline-secondary dropdown-toggle"
                 type="button"
                 id="dropdownMenuButton"
                 data-toggle="dropdown"

src/client/js/components/Admin/UserGroup/UserGroupCreateForm.jsx

@@ -70,7 +70,7 @@ class UserGroupCreateForm extends React.Component {
         <p>
           {this.props.isAclEnabled
             ? (
-              <button type="button" data-toggle="collapse" className="btn btn-light" href="#createGroupForm">
+              <button type="button" data-toggle="collapse" className="btn btn-outline-secondary" href="#createGroupForm">
                 {t('admin:user_group_management.create_group')}
               </button>
             )

src/client/js/components/Admin/UserGroup/UserGroupTable.jsx

@@ -81,7 +81,7 @@ class UserGroupTable extends React.Component {
                           <button
                             type="button"
                             id={`admin-group-menu-button-${group._id}`}
-                            className="btn btn-light btn-sm dropdown-toggle"
+                            className="btn btn-outline-secondary btn-sm dropdown-toggle"
                             data-toggle="dropdown"
                           >
                             <i className="icon-settings"></i>

src/client/js/components/Admin/UserGroupDetail/UserGroupDetailPage.jsx

@@ -16,7 +16,7 @@ class UserGroupDetailPage extends React.Component {
 
     return (
       <div>
-        <a href="/admin/user-groups" className="btn btn-light">
+        <a href="/admin/user-groups" className="btn btn-outline-secondary">
           <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
           {t('admin:user_group_management.back_to_list')}
         </a>

src/client/js/components/Admin/UserGroupDetail/UserGroupUserTable.jsx

@@ -67,7 +67,7 @@ class UserGroupUserTable extends React.Component {
                     <button
                       type="button"
                       id={`admin-group-menu-button-${relatedUser._id}`}
-                      className="btn btn-light btn-sm dropdown-toggle"
+                      className="btn btn-outline-secondary btn-sm dropdown-toggle"
                       data-toggle="dropdown"
                     >
                       <i className="icon-settings"></i>
@@ -91,7 +91,7 @@ class UserGroupUserTable extends React.Component {
           <tr>
             <td></td>
             <td className="text-center">
-              <button className="btn btn-light" type="button" onClick={adminUserGroupDetailContainer.openUserGroupUserModal}>
+              <button className="btn btn-outline-secondary" type="button" onClick={adminUserGroupDetailContainer.openUserGroupUserModal}>
                 <i className="ti-plus"></i>
               </button>
             </td>

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

@@ -14,7 +14,7 @@ class InviteUserControl extends React.Component {
 
     return (
       <Fragment>
-        <button type="button" className="btn btn-light" onClick={adminUsersContainer.toggleUserInviteModal}>
+        <button type="button" className="btn btn-outline-secondary" onClick={adminUsersContainer.toggleUserInviteModal}>
           {t('admin:user_management.invite_users')}
         </button>
         <UserInviteModal />

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

@@ -81,7 +81,7 @@ class UserMenu extends React.Component {
     return (
       <Fragment>
         <div className="btn-group admin-user-menu" role="group">
-          <button id="userMenu" type="button" className="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown">
+          <button id="userMenu" type="button" className="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
             <i className="icon-settings"></i>
           </button>
           <div className="dropdown-menu" aria-labelledby="userMenu">

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

@@ -69,7 +69,7 @@ class ExternalAccountLinkedMe extends React.Component {
       <Fragment>
         <div className="container-fluid p-0 my-4">
           <h2 className="border-bottom">
-            <button type="button" className="btn btn-light btn-sm pull-right" onClick={this.openAssociateModal}>
+            <button type="button" className="btn btn-outline-secondary btn-sm pull-right" onClick={this.openAssociateModal}>
               <i className="icon-plus" aria-hidden="true" />
             Add
             </button>

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

@@ -159,7 +159,7 @@ 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-default btn-edit text-muted" style={buttonStyle}>
+        <a href="#edit" className="d-block btn btn-outline-secondary btn-edit text-muted" style={buttonStyle}>
           <i className="icon-note" />
         </a>
       </span>

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

@@ -339,7 +339,7 @@ export default class Editor extends AbstractEditor {
           && (
           <button
             type="button"
-            className="btn btn-light btn-block btn-open-dropzone"
+            className="btn btn-outline-secondary btn-block btn-open-dropzone"
             onClick={() => { this.dropzone.open() }}
           >
             <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;

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

@@ -112,7 +112,7 @@ class OptionsSelector extends React.Component {
       <div className="my-0 form-group">
         <label>Theme:</label>
         <div className="btn-group btn-group-sm dropup">
-          <button className="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <button className="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {selectedTheme}
           </button>
           <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
@@ -139,7 +139,7 @@ class OptionsSelector extends React.Component {
       <div className="my-0 form-group">
         <label>Keymap:</label>
         <div className="btn-group btn-group-sm dropup">
-          <button className="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <button className="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {selectedKeymapMode}
           </button>
           <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">

src/client/js/components/PageEditorByHackmd.jsx

@@ -294,7 +294,7 @@ class PageEditorByHackmd extends React.Component {
 
           <div className="text-center hackmd-discard-button-container mb-3">
             <button
-              className="btn btn-light btn-lg waves-effect waves-light"
+              className="btn btn-outline-secondary btn-lg waves-effect waves-light"
               type="button"
               onClick={() => { return this.discardChanges() }}
             >

src/client/js/components/SearchPage/SearchPageForm.jsx

@@ -42,7 +42,7 @@ class SearchPageForm extends React.Component {
           />
         </div>
         <div className="input-group-append">
-          <button className="btn btn-light" type="button" id="button-addon2" onClick={this.search}>
+          <button className="btn btn-outline-secondary" type="button" id="button-addon2" onClick={this.search}>
             <i className="icon-magnifier"></i>
           </button>
         </div>

src/client/js/components/SearchPage/SearchResult.jsx

@@ -202,7 +202,7 @@ class SearchResult extends React.Component {
     if (this.state.deletionMode) {
       deletionModeButtons = (
         <div className="btn-group">
-          <button type="button" className="btn btn-light btn-sm rounded-pill-weak" onClick={() => { return this.handleDeletionModeChange() }}>
+          <button type="button" className="btn btn-outline-secondary btn-sm rounded-pill-weak" onClick={() => { return this.handleDeletionModeChange() }}>
             <i className="icon-ban" /> Cancel
           </button>
           <button
@@ -231,7 +231,7 @@ class SearchResult extends React.Component {
     else {
       deletionModeButtons = (
         <div className="btn-group">
-          <button type="button" className="btn btn-light rounded-pill btn-sm" onClick={() => { return this.handleDeletionModeChange() }}>
+          <button type="button" className="btn btn-outline-secondary rounded-pill btn-sm" onClick={() => { return this.handleDeletionModeChange() }}>
             <i className="ti-check-box" /> DeletionMode
           </button>
         </div>

src/server/views/widget/page_alerts.html

@@ -43,7 +43,7 @@
       <form role="form" id="unlink-page-form" onsubmit="return false;">
         <input type="hidden" name="_csrf" value="{{ csrf() }}">
         <input type="hidden" name="path" value="{{ path }}">
-        <button type="submit" class="btn btn-light btn-sm float-right">
+        <button type="submit" class="btn btn-outline-secondary btn-sm float-right">
           <i class="ti-unlink" aria-hidden="true"></i>
           Unlink
         </button>
@@ -90,7 +90,7 @@
       </div>
       {% if page.isDeleted() and user %}
       <div>
-        <button href="#" class="btn btn-light rounded-pill btn-sm mr-2" data-target="#putBackPage" data-toggle="modal"><i class="icon-action-undo" aria-hidden="true"></i> {{ t('Put Back') }}</button>
+        <button href="#" class="btn btn-outline-secondary rounded-pill btn-sm mr-2" data-target="#putBackPage" data-toggle="modal"><i class="icon-action-undo" aria-hidden="true"></i> {{ t('Put Back') }}</button>
         <button href="#" class="btn btn-danger rounded-pill btn-sm mr-2" {% if !user.canDeleteCompletely(page.creator._id) %} disabled="disabled" {% endif %} data-target="#deletePage" data-toggle="modal"><i class="icon-fire" aria-hidden="true"></i> {{ t('Delete Completely') }}</button>
       {# /.float-right #}
       </div>