Merge pull request #99 from tdu-logcation/fix/header

軽微なデザインの修正

.eslintignore

@@ -3,3 +3,4 @@ public/*.js
 out/*
 sslServer.js
 templates/*.jinja
+@types/react-table-config.d.ts

components/History.tsx

@@ -54,7 +54,7 @@ import {colors} from '../utils/colors';
 import {TableData} from '../@types/historyTable';
 import {tableShow, tableInit, maxDay} from '../utils/table';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
-import {OtherPage} from './OtherPage';
+import {OtherPage} from './common/OtherPage';
 import {HistorySettings} from './HistorySettings';
 import {DB} from '../utils/db';
 

components/Setting.tsx

@@ -3,7 +3,7 @@
  *
  * Copyright (C) 2021 logcation
  */
-import {OtherPage} from './OtherPage';
+import {OtherPage} from './common/OtherPage';
 import {DeleteData} from './settings/DeleteData';
 import {ReadLog} from './settings/ReadLog';
 import {

components/Top.tsx

@@ -10,7 +10,7 @@ import {IoSettingsSharp} from 'react-icons/io5';
 import QrCode from './QrCode';
 import {colors} from '../utils/colors';
 import {Direct} from './Directly';
-import {PageJump} from './OtherPage';
+import {PageJump} from './common/OtherPage';
 import {Twitter} from './Share';
 import LogoLight from '../assets/svgs/logcation.svg';
 import LogoDark from '../assets/svgs/logcation_dark.svg';

components/Footer.tsx → components/common/Footer.tsx

@@ -5,12 +5,12 @@
  */
 
 import {Box, Text, Center, Flex, Spacer, Link} from '@chakra-ui/react';
-import {colors} from '../utils/colors';
-import {v} from '../utils/version';
+import {colors} from '../../utils/colors';
+import {v} from '../../utils/version';
 
 export const Footer = () => {
   return (
-    <Box margin="1rem 0 1rem 0">
+    <Box margin="1rem 0 2rem 0">
       <Center>
         <Flex width="20rem" justifyContent="center" alignItems="center">
           <Box>

components/OtherPage.tsx → components/common/OtherPage.tsx

@@ -14,11 +14,11 @@ import {
   Center,
   ButtonProps,
 } from '@chakra-ui/react';
-import {colors} from '../utils/colors';
+import {colors} from '../../utils/colors';
 import {IoHomeSharp} from 'react-icons/io5';
 import Link from 'next/link';
 import {useRecoilState} from 'recoil';
-import {useCameraState, qrReadState} from '../utils/recoilAtoms';
+import {useCameraState, qrReadState} from '../../utils/recoilAtoms';
 
 export const OtherPage: React.FC<{title: string}> = props => {
   return (

components/common/Page.tsx

@@ -0,0 +1,20 @@
+/**!
+ * @author Yuto Watanabe
+ *
+ * Copyright (C) 2021 logcation
+ */
+
+import React from 'react';
+import {Footer} from './Footer';
+import {Flex, Box} from '@chakra-ui/react';
+
+export const Page: React.FC = props => {
+  return (
+    <Flex flexDirection="column" minHeight="100vh">
+      <Box>{props.children}</Box>
+      <Box marginTop="auto">
+        <Footer />
+      </Box>
+    </Flex>
+  );
+};

pages/_app.tsx

@@ -10,12 +10,15 @@ import {RecoilRoot} from 'recoil';
 import React from 'react';
 import theme from '../utils/theme';
 import NoSSR from 'react-no-ssr';
+import {Page} from '../components/common/Page';
 
 const MyApp = ({Component, pageProps}: AppProps) => (
   <RecoilRoot>
     <NoSSR>
       <ChakraProvider theme={theme}>
-        <Component {...pageProps} />
+        <Page>
+          <Component {...pageProps} />
+        </Page>
       </ChakraProvider>
     </NoSSR>
   </RecoilRoot>

pages/_document.tsx

@@ -28,7 +28,10 @@ class MyDocument extends Document {
           <meta name="msapplication-TileColor" content="#000" />
           {/* safari */}
           <meta name="apple-mobile-web-app-capable" content="yes" />
-          <meta name="apple-mobile-web-app-status-bar-style" content="#fff" />
+          <meta
+            name="apple-mobile-web-app-status-bar-style"
+            content="black-translucent"
+          />
           <meta name="apple-mobile-web-app-title" content="Logcation" />
           <link
             rel="apple-touch-icon"

pages/history.tsx

@@ -5,15 +5,12 @@
  */
 import {Box} from '@chakra-ui/react';
 import {History} from '../components/History';
-import {Page} from '../components/Page';
 
 const HistoryPage = () => {
   return (
-    <Page>
-      <Box margin="2.3rem .1rem 1rem .1rem">
-        <History />
-      </Box>
-    </Page>
+    <Box margin="2.3rem .1rem 1rem .1rem">
+      <History />
+    </Box>
   );
 };
 

pages/index.tsx

@@ -8,19 +8,16 @@ import React from 'react';
 
 import Top from '../components/Top';
 import {Box} from '@chakra-ui/react';
-import {Page} from '../components/Page';
 import {MoveIndexedDB} from '../components/moveIndexedDB';
 import Version from '../components/Version';
 
 const Index = () => {
   return (
-    <Page>
-      <Box margin="2.3rem 1.6rem 1rem 1.6rem">
-        <MoveIndexedDB />
-        <Version />
-        <Top />
-      </Box>
-    </Page>
+    <Box margin="2.3rem 1.6rem 1rem 1.6rem">
+      <MoveIndexedDB />
+      <Version />
+      <Top />
+    </Box>
   );
 };
 

pages/setting.tsx

@@ -6,16 +6,13 @@
 
 import React from 'react';
 import {Box} from '@chakra-ui/react';
-import {Page} from '../components/Page';
 import {Setting} from '../components/Setting';
 
 const SettingPage = () => {
   return (
-    <Page>
-      <Box margin="2.3rem .1rem 1rem .1rem">
-        <Setting />
-      </Box>
-    </Page>
+    <Box margin="2.3rem .1rem 1rem .1rem">
+      <Setting />
+    </Box>
   );
 };