fix: position overlay over loading elements

Pyotato · Apr 17, 2024 · 7c707ab · 7c707ab
1 parent b7dae58
commit 7c707ab
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/src/app/mypage/layout.tsx b/src/app/mypage/layout.tsx
@@ -1,13 +1,18 @@
 import { Container } from '@mantine/core';
 
+import PageFooter from '@/components/shared/layouts/PageFooter';
+
 import { MyPageProps } from '@/types/user';
 
 const PostLayout = (props: MyPageProps) => {
   return (
-    <Container py='xl'>
-      <Container py='xl'>{props.info}</Container>
-      <Container py='xl'>{props.roadmaps}</Container>
-    </Container>
+    <>
+      <Container py='xl'>
+        <Container py='xl'>{props.info}</Container>
+        <Container py='xl'>{props.roadmaps}</Container>
+      </Container>
+      <PageFooter />
+    </>
   );
 };
 

diff --git a/src/components/shared/Overlay.tsx b/src/components/shared/Overlay.tsx
@@ -1,21 +1,21 @@
 'use client';
-import { Box, LoadingOverlay } from '@mantine/core';
+import { LoadingOverlay } from '@mantine/core';
 
 import { theme } from '@/styles/theme';
 
 const OverLay = () => {
   return (
-    <Box pos='relative' h='100vh'>
-      <LoadingOverlay
-        visible={true}
-        zIndex={100000}
-        overlayProps={{ radius: 'sm', blur: 2 }}
-        loaderProps={{
-          color: theme.colors.color_grey2,
-          type: 'bars',
-        }}
-      />
-    </Box>
+    // <Box pos='relative' h='100vh'>
+    <LoadingOverlay
+      visible={true}
+      zIndex={100000}
+      overlayProps={{ radius: 'sm', blur: 2 }}
+      loaderProps={{
+        color: theme.colors.color_grey2,
+        type: 'bars',
+      }}
+    />
+    // </Box>
   );
 };
 export default OverLay;
diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts
@@ -96,11 +96,11 @@ export const GlobalStyle = createGlobalStyle`
 
 
 	.footer {
-  margin-top: rem(120px);
-  padding-top: calc(var(--mantine-spacing-xl) * 2);
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-}
+    margin-top: 2rem !important;
+    padding-top: calc(var(--mantine-spacing-xl) * 2);
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  }
 
 .logo {
   max-width: rem(200px);
@@ -280,6 +280,7 @@ iframe {
   }
   .logo-img{
     width: 30px;
+    height: 30px;
   }
   .align-ctr{
     align-items: center ;