Merge pull request #1152 from davidyaha/fix/max-width

Set content max-width to 1000px on UserPage and ResearchItemDetail #1137

src/pages/Research/Content/ResearchDescription.tsx

@@ -1,5 +1,5 @@
 import { format } from 'date-fns'
-import * as React from 'react';
+import * as React from 'react'
 import { Box, Flex, Image } from 'rebass'
 import ArrowIcon from 'src/assets/icons/icon-arrow-select.svg'
 import { Button } from 'src/components/Button'

src/pages/Research/Content/ResearchItemDetail.tsx

@@ -1,5 +1,6 @@
 import { observer } from 'mobx-react'
 import * as React from 'react'
+import { RouteComponentProps } from 'react-router'
 import { Box, Flex } from 'rebass'
 import { Button } from 'src/components/Button'
 import { Link } from 'src/components/Links'
@@ -10,9 +11,7 @@ import { isAllowToEditContent } from 'src/utils/helpers'
 import ResearchDescription from './ResearchDescription'
 import Update from './Update'
 
-interface IProps {
-  slug: string
-}
+type IProps = RouteComponentProps<{ slug: string }>
 
 const ResearchItemDetail = observer((props: IProps) => {
   const store = useResearchStore()
@@ -28,8 +27,8 @@ const ResearchItemDetail = observer((props: IProps) => {
   }
 
   React.useEffect(() => {
-    ;(async () => {
-      const { slug } = props
+    (async () => {
+      const { slug } = props.match.params
       await store.setActiveResearchItem(slug)
       setIsLoading(false)
     })()
@@ -47,7 +46,7 @@ const ResearchItemDetail = observer((props: IProps) => {
       !!store.activeUser && isAllowToEditContent(item, store.activeUser)
 
     return (
-      <>
+      <Box maxWidth="1000px" width="100%" alignSelf="center">
         <ResearchDescription
           research={item}
           isEditable={isEditable}
@@ -76,7 +75,7 @@ const ResearchItemDetail = observer((props: IProps) => {
             </Link>
           </Flex>
         )}
-      </>
+      </Box>
     )
   } else {
     return isLoading ? <Loader /> : <NotFoundPage />

src/pages/Research/index.tsx

@@ -3,14 +3,15 @@ import {
   ResearchStoreContext,
 } from 'src/stores/Research/research.store'
 import { AuthRoute } from '../common/AuthRoute'
+import { IPageMeta } from '../PageList'
 import ResearchRoutes from './research.routes'
 
 /**
  * Default export format used for integrating with the platform
  * @description The research module enables users to share ongoing updates for
  * experimental projects
  */
-export const ResearchModule = {
+export const ResearchModule: IPageMeta = {
   path: '/research',
   component: <ResearchModuleContainer />,
   title: 'Research',

src/pages/Research/research.routes.tsx

@@ -43,9 +43,7 @@ const routes = () => (
       <AuthRoute
         path="/research/:slug"
         roleRequired="beta-tester"
-        render={routeProps => (
-          <ResearchItemDetail slug={routeProps.match.params.slug as string} />
-        )}
+        component={ResearchItemDetail}
       />
     </Switch>
   </Suspense>

src/pages/User/content/UserPage/UserPage.tsx

@@ -142,6 +142,9 @@ const ProfileWrapper = styled(Box)`
   border: 2px solid black;
   border-radius: 10px;
   overflow: hidden;
+  max-width: 1000px;
+  width: 100%;
+  align-self: center;
 `
 
 const ProfileWrapperCarousel = styled.div``

src/pages/common/Layout/Main.tsx

@@ -11,8 +11,9 @@ type IProps = FlexProps & ILayoutProps
 
 const Main = (props: IProps) => (
   <Flex {...(props as any)} flexDirection="column">
-    <Box
+    <Flex
       width="100%"
+      flexDirection="column"
       className="main-container"
       css={props.customStyles}
       sx={
@@ -29,7 +30,7 @@ const Main = (props: IProps) => (
       }
     >
       {props.children}
-    </Box>
+    </Flex>
   </Flex>
 )