replace btn-light as page-link

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

@@ -203,7 +203,7 @@ class ImportCollectionConfigurationModal extends React.Component {
         </ModalBody>
 
         <ModalFooter>
-          <button type="button" className="btn btn-sm page-link text-dark d-inline-block" onClick={this.props.onClose}>{t('Cancel')}</button>
+          <button type="button" className="btn btn-sm btn-light" 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 page-link text-dark d-inline-block btn-sm p-1 ml-2"
+        className="btn btn-light btn-sm p-1 ml-2"
         disabled={isImporting || !isConfigButtonAvailable}
         onClick={isConfigButtonAvailable ? this.configButtonClickedHandler : null}
       >

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

@@ -455,33 +455,33 @@ class ImportForm extends React.Component {
       <>
         <form className="form-inline">
           <div className="form-group">
-            <button type="button" className="btn btn-sm page-link text-dark d-inline-block mr-2" onClick={this.checkAll}>
+            <button type="button" className="btn btn-sm btn-light mr-2" onClick={this.checkAll}>
               <i className="fa fa-check-square-o"></i> {t('export_management.check_all')}
             </button>
           </div>
           <div className="form-group">
-            <button type="button" className="btn btn-sm page-link text-dark d-inline-block mr-2" onClick={this.uncheckAll}>
+            <button type="button" className="btn btn-sm btn-light mr-2" onClick={this.uncheckAll}>
               <i className="fa fa-square-o"></i> {t('export_management.uncheck_all')}
             </button>
           </div>
         </form>
 
-        { this.renderGroups(GROUPS_PAGE, 'Page', warnForPageGroups, { wellContent: t('importer_management.growi_settings.overwrite_documents') }) }
-        { this.renderGroups(GROUPS_USER, 'User', warnForUserGroups) }
-        { this.renderGroups(GROUPS_CONFIG, 'Config', warnForConfigGroups) }
-        { this.renderOthers() }
+        {this.renderGroups(GROUPS_PAGE, 'Page', warnForPageGroups, { wellContent: t('importer_management.growi_settings.overwrite_documents') })}
+        {this.renderGroups(GROUPS_USER, 'User', warnForUserGroups)}
+        {this.renderGroups(GROUPS_CONFIG, 'Config', warnForConfigGroups)}
+        {this.renderOthers()}
 
         <div className="mt-4 text-center">
-          <button type="button" className="btn page-link text-dark d-inline-block mx-1" onClick={this.props.onDiscard}>
-            { t('importer_management.growi_settings.discard') }
+          <button type="button" className="btn btn-light mx-1" onClick={this.props.onDiscard}>
+            {t('importer_management.growi_settings.discard')}
           </button>
           <button type="button" className="btn btn-primary mx-1" onClick={this.import} disabled={!canImport || isImporting}>
-            { t('importer_management.import') }
+            {t('importer_management.import')}
           </button>
         </div>
 
-        { this.renderConfigurationModal() }
-        { this.renderErrorsViewer() }
+        {this.renderConfigurationModal()}
+        {this.renderErrorsViewer()}
       </>
     );
   }

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

@@ -216,7 +216,7 @@ class ImportDataPage extends React.Component {
                     name="Esa"
                     type="button"
                     id="importFromEsa"
-                    className="btn page-link text-dark d-inline-block btn-esa"
+                    className="btn btn-light btn-esa"
                     onClick={this.esaHandleSubmitTest}
                     value={t('importer_management.esa_settings.test_connection')}
                   />
@@ -309,7 +309,7 @@ class ImportDataPage extends React.Component {
                     name="Qiita"
                     type="button"
                     id="importFromQiita"
-                    className="btn page-link text-dark d-inline-block btn-qiita"
+                    className="btn btn-light btn-qiita"
                     onClick={this.qiitaHandleSubmitTest}
                     value={t('importer_management.qiita_settings.test_connection')}
                   />

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

@@ -63,9 +63,9 @@
   background: $extralight;
 }
 
-// page-link (substitute for btn-default of bootstrap3)  (agile-admin style)
-.page-link.text-dark.d-inline-block,
-.page-link.text-dark.d-inline-block.disabled {
+// btn-light (substitute for btn-default of bootstrap3)  (agile-admin style)
+.btn-light,
+.btn-light.disabled {
   color: $bodytext;
   $this-color: $btn-default-bgcolor;
   background: $this-color;
@@ -85,7 +85,7 @@
   }
 }
 
-.page-link.text-dark.d-inline-block.btn-outline {
+.btn-light.btn-outline {
   background-color: transparent;
 
   &:hover,

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

@@ -8,7 +8,7 @@
 /*
  * Button
  */
-.page-link.text-dark.d-inline-block {
+.btn-light {
   &:hover,
   &:focus,
   &.active,
@@ -139,7 +139,7 @@ header.affix {
  */
 .search-page {
   .input-group-btn {
-    .page-link.text-dark.d-inline-block {
+    .btn-light {
       border: 1px solid darken($border, 30%); // fit to input.form-control
     }
   }