rename shadow-inset to custom-card

apps/app/src/components/Admin/App/FileUploadSetting.tsx

@@ -27,7 +27,7 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
 
   return (
     <>
-      <p className="card bg-light shadow-inset my-3">
+      <p className="card custom-card my-3">
         {t('admin:app_setting.file_upload')}
         <br />
         <br />

apps/app/src/components/Admin/App/MaintenanceMode.tsx

@@ -54,7 +54,7 @@ export const MaintenanceMode: FC = () => {
         onConfirm={onConfirmHandler}
         onCancel={() => closeModal()}
       />
-      <p className="card bg-light shadow-inset">
+      <p className="card custom-card">
         {t('admin:maintenance_mode.description')}
         <br />
         <br />

apps/app/src/components/Admin/App/QuestionnaireSettings.tsx

@@ -49,7 +49,7 @@ const QuestionnaireSettings = (): JSX.Element => {
 
   return (
     <div id="questionnaire-settings" className="mb-5">
-      <p className="card bg-light shadow-inset">
+      <p className="card custom-card">
         <div className="mb-4">{t('app_setting.questionnaire_settings_explanation')}</div>
         <span>
           <div className="mb-2">

apps/app/src/components/Admin/App/SiteUrlSetting.tsx

@@ -35,7 +35,7 @@ const SiteUrlSetting = (props: Props) => {
 
   return (
     <React.Fragment>
-      <p className="card bg-light shadow-inset">{t('site_url.desc')}</p>
+      <p className="card custom-card">{t('site_url.desc')}</p>
       {!adminAppContainer.state.isSetSiteUrl
           && (<p className="alert alert-danger"><i className="icon-exclamation"></i> {t('site_url.warn')}</p>)}
 

apps/app/src/components/Admin/App/V5PageMigration.tsx

@@ -133,7 +133,7 @@ const V5PageMigration: FC<Props> = (props: Props) => {
         onConfirm={onConfirm}
         onCancel={() => setIsV5PageMigrationModalShown(false)}
       />
-      <p className="card bg-light shadow-inset">
+      <p className="card custom-card">
         {t('admin:v5_page_migration.migration_desc')}
         <br />
         <br />

apps/app/src/components/Admin/Customize/CustomizeCssSetting.tsx

@@ -34,7 +34,7 @@ const CustomizeCssSetting = (props: Props): JSX.Element => {
         <div className="col-12">
           <h2 className="admin-setting-header">{t('admin:customize_settings.custom_css')}</h2>
 
-          <Card className="card bg-light shadow-inset my-3">
+          <Card className="card custom-card my-3">
             <CardBody className="px-0 py-2">
               { t('admin:customize_settings.write_css') }<br />
               { t('admin:customize_settings.reflect_change') }

apps/app/src/components/Admin/Customize/CustomizeFunctionSetting.tsx

@@ -37,7 +37,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
       <div className="row">
         <div className="col-12">
           <h2 className="admin-setting-header">{t('admin:customize_settings.function')}</h2>
-          <Card className="card bg-light shadow-inset my-3">
+          <Card className="card custom-card my-3">
             <CardBody className="px-0 py-2">
               {t('admin:customize_settings.function_desc')}
             </CardBody>

apps/app/src/components/Admin/Customize/CustomizeNoscriptSetting.tsx

@@ -36,7 +36,7 @@ const CustomizeNoscriptSetting = (props: Props): JSX.Element => {
         <div className="col-12">
           <h2 className="admin-setting-header">{t('admin:customize_settings.custom_noscript')}</h2>
 
-          <Card className="card bg-light shadow-inset my-3">
+          <Card className="card custom-card my-3">
             <CardBody className="px-0 py-2">
               <span
                 // eslint-disable-next-line react/no-danger

apps/app/src/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -35,7 +35,7 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
       <div className="row">
         <div className="col-12">
           <h2 className="admin-setting-header">{t('admin:customize_settings.custom_script')}</h2>
-          <Card className="card bg-light shadow-inset">
+          <Card className="card custom-card">
             <CardBody className="px-0 py-2">
               {t('admin:customize_settings.write_java')}<br />
               {t('admin:customize_settings.reflect_change')}

apps/app/src/components/Admin/Customize/CustomizeSidebarSetting.tsx

@@ -35,7 +35,7 @@ const CustomizeSidebarsetting = (): JSX.Element => {
 
           <h2 className="admin-setting-header">{t('customize_settings.default_sidebar_mode.title')}</h2>
 
-          <Card className="card bg-light shadow-inset my-3">
+          <Card className="card custom-card my-3">
             <CardBody className="px-0 py-2">
               {t('customize_settings.default_sidebar_mode.desc')}
             </CardBody>
@@ -70,7 +70,7 @@ const CustomizeSidebarsetting = (): JSX.Element => {
             </div>
           </div>
 
-          <Card className="card bg-light shadow-inset my-5">
+          <Card className="card custom-card my-5">
             <CardBody className="px-0 py-2">
               {t('customize_settings.default_sidebar_mode.dock_mode_default_desc')}
             </CardBody>

apps/app/src/components/Admin/Customize/CustomizeTitle.tsx

@@ -37,7 +37,7 @@ export const CustomizeTitle: FC = () => {
         </div>
 
         <div className="col-12">
-          <Card className="card bg-light shadow-inset">
+          <Card className="card custom-card">
             <CardBody className="px-0 py-2">
               {/* eslint-disable react/no-danger */}
               <p dangerouslySetInnerHTML={{ __html: t('admin:customize_settings.custom_title_detail') }} />

apps/app/src/components/Admin/ExportArchiveData/SelectCollectionsModal.tsx

@@ -103,7 +103,7 @@ const SelectCollectionsModal = (props: Props): JSX.Element => {
     const html = t('admin:export_management.desc_password_seed');
 
     // eslint-disable-next-line react/no-danger
-    return <div className="card bg-light shadow-inset" dangerouslySetInnerHTML={{ __html: html }}></div>;
+    return <div className="card custom-card" dangerouslySetInnerHTML={{ __html: html }}></div>;
   }, [selectedCollections, t]);
 
   const renderCheckboxes = useCallback((collectionNames, color?) => {

apps/app/src/components/Admin/G2GDataTransferExportForm.tsx

@@ -212,7 +212,7 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
         </div>
       </form>
 
-      <div className="card bg-light shadow-inset small my-4">
+      <div className="card custom-card small my-4">
         <ul>
           <li>{t('admin:importer_management.growi_settings.description_of_import_mode.about')}</li>
           <ul>

apps/app/src/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -459,7 +459,7 @@ class ImportForm extends React.Component {
           </div>
         </form>
 
-        <div className="card bg-light shadow-inset small my-4">
+        <div className="card custom-card small my-4">
           <ul>
             <li>{t('admin:importer_management.growi_settings.description_of_import_mode.about')}</li>
             <ul>

apps/app/src/components/Admin/ImportData/GrowiArchiveSection.jsx

@@ -93,7 +93,7 @@ class GrowiArchiveSection extends React.Component {
     return (
       <Fragment>
         <h2>{t('importer_management.import_growi_archive')}</h2>
-        <div className="card bg-light shadow-inset mb-4 small">
+        <div className="card custom-card mb-4 small">
           <ul>
             <li>{t('importer_management.skip_username_and_email_when_overlapped')}</li>
             <li>{t('importer_management.prepare_new_account_for_migration')}</li>

apps/app/src/components/Admin/ImportData/ImportDataPageContents.jsx

@@ -57,7 +57,7 @@ class ImportDataPageContents extends React.Component {
               </tbody>
             </table>
 
-            <div className="card bg-light shadow-inset mb-0 small">
+            <div className="card custom-card mb-0 small">
               <ul>
                 <li>{t('importer_management.page_skip')}</li>
               </ul>
@@ -163,7 +163,7 @@ class ImportDataPageContents extends React.Component {
                 </tr>
               </tbody>
             </table>
-            <div className="card bg-light shadow-inset mb-0 small">
+            <div className="card custom-card mb-0 small">
               <ul>
                 <li>{t('importer_management.page_skip')}</li>
               </ul>

apps/app/src/components/Admin/LegacySlackIntegration/SlackConfiguration.jsx

@@ -101,7 +101,7 @@ class SlackConfiguration extends React.Component {
             <React.Fragment>
               <h2 className="border-bottom mb-5">{t('notification_settings.slack_app_configuration')}</h2>
 
-              <div className="card bg-light shadow-inset">
+              <div className="card custom-card">
                 <span className="text-danger"><i className="icon-fw icon-exclamation"></i>NOT RECOMMENDED</span>
                 <br />
                 {/* eslint-disable-next-line react/no-danger */}

apps/app/src/components/Admin/MarkdownSetting/MarkDownSettingContents.tsx

@@ -43,21 +43,21 @@ const MarkDownSettingContents = React.memo((props: Props): JSX.Element => {
     <div data-testid="admin-markdown">
       {/* Line Break Setting */}
       <h2 className="admin-setting-header">{t('markdown_settings.lineBreak_header')}</h2>
-      <Card className="card bg-light shadow-inset my-3">
+      <Card className="card custom-card my-3">
         <CardBody className="px-0 py-2">{ t('markdown_settings.lineBreak_desc') }</CardBody>
       </Card>
       <LineBreakForm />
 
       {/* Indent Setting */}
       <h2 className="admin-setting-header">{t('markdown_settings.indent_header')}</h2>
-      <Card className="card bg-light shadow-inset my-3">
+      <Card className="card custom-card my-3">
         <CardBody className="px-0 py-2">{t('markdown_settings.indent_desc') }</CardBody>
       </Card>
       <IndentForm />
 
       {/* XSS Setting */}
       <h2 className="admin-setting-header">{ t('markdown_settings.xss_header') }</h2>
-      <Card className="card bg-light shadow-inset my-3">
+      <Card className="card custom-card my-3">
         <CardBody className="px-0 py-2">{ t('markdown_settings.xss_desc') }</CardBody>
       </Card>
       <XssForm />

apps/app/src/components/Admin/Notification/GlobalNotification.jsx

@@ -36,7 +36,7 @@ const GlobalNotification = (props) => {
     <>
       <h2 className="border-bottom my-4">{t('notification_settings.valid_page')}</h2>
 
-      <p className="card bg-light shadow-inset">
+      <p className="card custom-card">
         {/* eslint-disable-next-line react/no-danger */}
         <span dangerouslySetInnerHTML={{ __html: t('notification_settings.link_notification_help') }} />
       </p>

apps/app/src/components/Admin/Security/FacebookSecuritySetting.jsx

@@ -18,7 +18,7 @@ class FacebookSecurityManagement extends React.Component {
           Facebook OAuth { t('admin:security_settings.configuration') }
         </h2>
 
-        <p className="card bg-light shadow-inset">(TBD)</p>
+        <p className="card custom-card">(TBD)</p>
       </>
     );
   }

apps/app/src/components/Admin/Security/LdapSecuritySettingContents.jsx

@@ -177,7 +177,7 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
               <div className="col-md-6">
                 {(adminLdapSecurityContainer.state.isUserBind) ? (
-                  <p className="card bg-light shadow-inset passport-ldap-userbind">
+                  <p className="card custom-card passport-ldap-userbind">
                     <small>
                       {t('security_settings.ldap.bind_DN_password_user_detail')}
                     </small>
@@ -185,7 +185,7 @@ class LdapSecuritySettingContents extends React.Component {
                 )
                   : (
                     <>
-                      <p className="card bg-light shadow-inset passport-ldap-managerbind">
+                      <p className="card custom-card passport-ldap-managerbind">
                         <small>
                           {t('security_settings.ldap.bind_DN_password_manager_detail')}
                         </small>

apps/app/src/components/Admin/Security/SamlSecuritySettingContents.jsx

@@ -204,7 +204,7 @@ class SamlSecurityManagementContents extends React.Component {
                     <div>
                       <small>
                         e.g.
-                        <pre className="card bg-light shadow-inset">{`-----BEGIN CERTIFICATE-----
+                        <pre className="card custom-card">{`-----BEGIN CERTIFICATE-----
 MIICBzCCAXACCQD4US7+0A/b/zANBgkqhkiG9w0BAQsFADBIMQswCQYDVQQGEwJK
 UDEOMAwGA1UECAwFVG9reW8xFTATBgNVBAoMDFdFU0VFSywgSW5jLjESMBAGA1UE
 ...

apps/app/src/components/Admin/Security/SecuritySetting.jsx

@@ -280,7 +280,7 @@ class SecuritySetting extends React.Component {
                   </button>
                   <Collapse isOpen={expantDeleteOptionsState}>
                     <div className="pb-4">
-                      <p className="card bg-light shadow-inset">
+                      <p className="card custom-card">
                         <span className="text-warning">
                           <i className="icon-info"></i>
                           {/* eslint-disable-next-line react/no-danger */}
@@ -490,7 +490,7 @@ class SecuritySetting extends React.Component {
             />
             {/* eslint-disable-next-line react/no-danger */}
             <p className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('security_settings.max_age_desc') }} />
-            <p className="card bg-light shadow-inset">
+            <p className="card custom-card">
               <span className="text-warning">
                 <i className="icon-info"></i> {t('security_settings.max_age_caution')}
               </span>

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

@@ -48,7 +48,7 @@ const UserGroupUserModal = (props: Props): JSX.Element => {
         {t('admin:user_group_management.add_modal.add_user') }
       </ModalHeader>
       <ModalBody>
-        <p className="card bg-light shadow-inset">{t('admin:user_group_management.add_modal.description')}</p>
+        <p className="card custom-card">{t('admin:user_group_management.add_modal.description')}</p>
         <div className="p-3">
           <UserGroupUserFormByInput
             userGroup={userGroup}

apps/app/src/components/ErrorBoudary.jsx

@@ -36,7 +36,7 @@ class ErrorBoundary extends React.Component {
           <div className="card-header">Error occured in {firstStack}</div>
           <div className="card-body">
             <h5>{error && error.toString()}</h5>
-            <details className="card bg-light shadow-inset small mb-0" style={{ whiteSpace: 'pre-wrap' }}>
+            <details className="card custom-card small mb-0" style={{ whiteSpace: 'pre-wrap' }}>
               {errorInfo.componentStack}
             </details>
           </div>

apps/app/src/components/Page/CopyDropdown.jsx

@@ -19,7 +19,7 @@ const { encodeSpaces } = pagePathUtils;
 const DropdownItemContents = ({ title, contents }) => (
   <>
     <div className="h6 mt-1 mb-2"><strong>{title}</strong></div>
-    <div className="card bg-light shadow-inset mb-1 p-2">{contents}</div>
+    <div className="card custom-card mb-1 p-2">{contents}</div>
   </>
 );
 /* eslint-enable react/prop-types */

apps/app/src/components/PageComment/DeleteCommentModal.tsx

@@ -56,7 +56,7 @@ export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element
     return (
       <>
         <UserPicture user={comment.creator} size="xs" /> <strong><Username user={comment.creator}></Username></strong> wrote on {commentDate}:
-        <p className="card bg-light shadow-inset comment-body mt-2 p-2">{commentBodyElement}</p>
+        <p className="card custom-card comment-body mt-2 p-2">{commentBodyElement}</p>
       </>
     );
   };

apps/app/src/components/PageEditor/LinkEditModal.tsx

@@ -296,7 +296,7 @@ export const LinkEditModal = (): JSX.Element => {
 
   const renderPathFormatForm = (): JSX.Element => {
     return (
-      <div className="card bg-light shadow-inset pt-3">
+      <div className="card custom-card pt-3">
         <form className="mb-0">
           <div className="mb-0 row">
             <label className="form-label col-sm-3">{t('link_edit.path_format')}</label>

apps/app/src/components/PageEditorByHackmd.tsx

@@ -504,7 +504,7 @@ export const PageEditorByHackmd = (): JSX.Element => {
           <div className="bg-box p-5 text-center">
             <h2 className="text-warning"><i className="icon-fw icon-exclamation"></i> {t('hackmd.integration_failed')}</h2>
             <h4>{errorMessage}</h4>
-            <p className="card bg-light shadow-inset text-danger">
+            <p className="card custom-card text-danger">
               {errorReason}
             </p>
             {/* eslint-disable-next-line react/no-danger */}

apps/app/src/components/RevisionComparer/RevisionComparer.tsx

@@ -17,7 +17,7 @@ const { encodeSpaces } = pagePathUtils;
 const DropdownItemContents = ({ title, contents }) => (
   <>
     <div className="h6 mt-1 mb-2"><strong>{title}</strong></div>
-    <div className="card bg-light shadow-inset mb-1 p-2">{contents}</div>
+    <div className="card custom-card mb-1 p-2">{contents}</div>
   </>
 );
 

apps/app/src/styles/theme/apply-colors.scss

@@ -400,7 +400,10 @@ ul.pagination {
 /*
  * cards
  */
-.card.shadow-inset {
+.card.custom-card {
+  color: var(--color-global);
+  background-color: var(--bgcolor-card);
+  border-color: var(--light);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 

packages/core/scss/bootstrap/_override.scss

@@ -82,7 +82,7 @@
 // }
 
 // // Well (substitute Well of bootstrap3)
-// .card.shadow-inset {
+// .card.custom-card {
 //   min-height: 20px;
 //   padding: $card-spacer-y $card-spacer-x;
 // }