Browse Source

Create PageHeader.module.scss &apply styles

Shun Miyazawa 2 years ago
parent
commit
04153ac4f6

+ 8 - 0
apps/app/src/components/PageHeader/PageHeader.module.scss

@@ -0,0 +1,8 @@
+.page-header :global {
+  .page-path-header-buttons {
+    button {
+      width: 25px;
+      height: 20px;
+    }
+  }
+}

+ 4 - 2
apps/app/src/components/PageHeader/PageHeader.tsx

@@ -5,6 +5,8 @@ import { useSWRxCurrentPage } from '~/stores/page';
 import { PagePathHeader } from './PagePathHeader';
 import { PageTitleHeader } from './PageTitleHeader';
 
+import styles from './PageHeader.module.scss';
+
 
 export const PageHeader: FC = () => {
   const { data: currentPage } = useSWRxCurrentPage();
@@ -14,13 +16,13 @@ export const PageHeader: FC = () => {
   }
 
   return (
-    <>
+    <div className={`${styles['page-header']}`}>
       <PagePathHeader
         currentPage={currentPage}
       />
       <PageTitleHeader
         currentPage={currentPage}
       />
-    </>
+    </div>
   );
 };

+ 1 - 1
apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -111,7 +111,7 @@ export const PagePathHeader: FC<Props> = (props) => {
           )
         }
 
-        <div className={`d-flex align-items-center ${isButtonsShown ? '' : 'd-none'}`}>
+        <div className={`page-path-header-buttons d-flex align-items-center ${isButtonsShown ? '' : 'd-none'}`}>
           <button
             type="button"
             className="btn btn-sm text-muted border border-secondary me-2 d-flex align-items-center justify-content-center"