Merge pull request #6829 from weseek/feat/106970-deleted-display-style

feat: Attach scss module styles for DeleteAttachmentModal

packages/app/src/components/PageAttachment/DeleteAttachmentModal.module.scss

@@ -0,0 +1,9 @@
+.attachment-delete-modal :global {
+  .attachment-delete-image {
+    text-align: center;
+
+    img {
+      max-width: 100%;
+    }
+  }
+}

packages/app/src/components/PageAttachment/DeleteAttachmentModal.tsx

@@ -10,6 +10,8 @@ import {
 
 import Username from '../User/Username';
 
+import styles from './DeleteAttachmentModal.module.scss';
+
 
 function iconNameByFormat(format: string): string {
   if (format.match(/image\/.+/i)) {
@@ -74,7 +76,13 @@ export const DeleteAttachmentModal = (props: Props): JSX.Element => {
 
 
   return (
-    <Modal isOpen={isOpen} className="attachment-delete-modal" size="lg" aria-labelledby="contained-modal-title-lg" fade={false}>
+    <Modal
+      isOpen={isOpen}
+      className={`${styles['attachment-delete-modal']} attachment-delete-modal`}
+      size="lg"
+      aria-labelledby="contained-modal-title-lg"
+      fade={false}
+    >
       <ModalHeader tag="h4" toggle={toggle} className="bg-danger text-light">
         <span id="contained-modal-title-lg">Delete attachment?</span>
       </ModalHeader>

packages/app/src/pages/trash.page.tsx

@@ -5,9 +5,14 @@ import { NextPage, GetServerSideProps, GetServerSidePropsContext } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 
+import { GrowiSubNavigation } from '~/components/Navbar/GrowiSubNavigation';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
+import { ISidebarConfig } from '~/interfaces/sidebar-config';
 import type { IUserUISettings } from '~/interfaces/user-ui-settings';
 import type { UserUISettingsModel } from '~/server/models/user-ui-settings';
+import {
+  useCurrentProductNavWidth, useCurrentSidebarContents, useDrawerMode, usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed,
+} from '~/stores/ui';
 
 import { BasicLayout } from '../components/Layout/BasicLayout';
 import {
@@ -19,9 +24,6 @@ import {
 import {
   CommonProps, getServerSideCommonProps, getNextI18NextConfig, useCustomTitle,
 } from './utils/commons';
-import { useCurrentProductNavWidth, useCurrentSidebarContents, useDrawerMode, usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed } from '~/stores/ui';
-import { GrowiSubNavigation } from '~/components/Navbar/GrowiSubNavigation';
-import { ISidebarConfig } from '~/interfaces/sidebar-config';
 
 const TrashPageList = dynamic(() => import('~/components/TrashPageList').then(mod => mod.TrashPageList), { ssr: false });
 const EmptyTrashModal = dynamic(() => import('~/components/EmptyTrashModal'), { ssr: false });

packages/app/src/styles/_attachments.scss

@@ -1,13 +1,3 @@
-.attachment-delete-modal {
-  .attachment-delete-image {
-    text-align: center;
-
-    img {
-      max-width: 100%;
-    }
-  }
-}
-
 .attachment-userpicture .picture {
   vertical-align: text-bottom;
 }