fix(style): fix style issue in index page & about page (#163)

* fix(about page): fix style issue in about page

* fix(index page): fix style issue in index page

* style(about page): reformat style issue

src/pages/about.tsx

@@ -1,12 +1,16 @@
 import aboutContent from '../../README.md';
 import styled from 'styled-components';
 
+const PageWrapper = styled.div`
+  background-color: ${(props) =>
+    (props.theme.light as boolean) ? '#ffffff' : '#707070'};
+`;
+
 const Content = styled.div`
   text-align: justify;
-  margin-left: 25%;
-  margin-right: 25%;
-  margin-top: 4%;
-  margin-bottom: 8%;
+  margin-left: 20%;
+  margin-right: 20%;
+  margin-bottom: 5%;
   font-family: 'Roboto', sans-serif;
   color: ${(props) => ((props.theme.light as boolean) ? '#333333' : '#c9c9c9')};
   a:link {
@@ -26,9 +30,11 @@ const Content = styled.div`
 export default function AboutPage(): React.ReactElement {
   return (
     <>
-      <Content>
-        <div dangerouslySetInnerHTML={{ __html: aboutContent as string }} />
-      </Content>
+      <PageWrapper>
+        <Content>
+          <div dangerouslySetInnerHTML={{ __html: aboutContent as string }} />
+        </Content>
+      </PageWrapper>
     </>
   );
   // return aboutContent as React.ReactElement

src/pages/index.tsx

@@ -17,7 +17,7 @@ import RestorePopup from '../components/RestoreComponents/restorePopUp';
 const SimulatorContainer = styled.div`
   position: relative;
   left: 21rem;
-  top: 6rem;
+  top: 1rem;
   width: calc(100vw - 22rem);
   height: calc(100vh - 7rem);
   z-index: 0;