fix: header & articleBanner align center

Author: mydearxym

containers/ArticleBanner/index.js

@@ -11,16 +11,16 @@ import TimeAgo from 'timeago-react'
 
 import { connectStore, buildLog } from '@utils'
 
+import FavoritesCats from '@containers/FavoritesCats'
 import DotDivider from '@components/DotDivider'
 import Maybe from '@components/Maybe'
 import { Space } from '@components/BaseStyled'
-import FavoritesCats from '../FavoritesCats'
 
 import Title from './Title'
 import ReactionNumbers from './ReactionNumbers'
 import MiddleInfo from './MiddleInfo'
 
-import { Wrapper, BannerContent, Brief, Desc } from './styles'
+import { Wrapper, InnerWrapper, BannerContent, Brief, Desc } from './styles'
 import { useInit } from './logic'
 
 /* eslint-disable-next-line */
@@ -45,41 +45,43 @@ const ArticleBannerContainer = ({
     <Wrapper>
       <FavoritesCats />
       {!R.isNil(viewingData.id) && (
-        <BannerContent>
-          <Brief>
-            <Title thread={activeThread} data={viewingData} />
-            <MiddleInfo thread={activeThread} data={viewingData} />
-            <Desc>
-              发布于:
-              <Space left="3px" right="3px" />
-              <TimeAgo datetime={viewingData.insertedAt} locale="zh_CN" />
-              <Maybe test={showWordCount}>
-                <React.Fragment>
-                  <DotDivider />
-                  字数: {viewingData.length}
-                </React.Fragment>
-              </Maybe>
-              <Maybe test={showLastSync}>
-                <React.Fragment>
-                  <DotDivider />
-                  最后同步:
-                  <Space left="3px" right="3px" />
-                  {viewingData.lastSync ? (
-                    <TimeAgo datetime={viewingData.lastSync} locale="zh_CN" />
-                  ) : (
-                    <span>--</span>
-                  )}
-                </React.Fragment>
-              </Maybe>
-            </Desc>
-          </Brief>
-          <ReactionNumbers
-            data={viewingData}
-            starLoading={starLoading}
-            favoriteLoading={favoriteLoading}
-            showStar={showStar}
-          />
-        </BannerContent>
+        <InnerWrapper>
+          <BannerContent>
+            <Brief>
+              <Title thread={activeThread} data={viewingData} />
+              <MiddleInfo thread={activeThread} data={viewingData} />
+              <Desc>
+                发布于:
+                <Space left="3px" right="3px" />
+                <TimeAgo datetime={viewingData.insertedAt} locale="zh_CN" />
+                <Maybe test={showWordCount}>
+                  <React.Fragment>
+                    <DotDivider />
+                    字数: {viewingData.length}
+                  </React.Fragment>
+                </Maybe>
+                <Maybe test={showLastSync}>
+                  <React.Fragment>
+                    <DotDivider />
+                    最后同步:
+                    <Space left="3px" right="3px" />
+                    {viewingData.lastSync ? (
+                      <TimeAgo datetime={viewingData.lastSync} locale="zh_CN" />
+                    ) : (
+                      <span>--</span>
+                    )}
+                  </React.Fragment>
+                </Maybe>
+              </Desc>
+            </Brief>
+            <ReactionNumbers
+              data={viewingData}
+              starLoading={starLoading}
+              favoriteLoading={favoriteLoading}
+              showStar={showStar}
+            />
+          </BannerContent>
+        </InnerWrapper>
       )}
     </Wrapper>
   )

containers/ArticleBanner/styles/index.js

@@ -4,7 +4,6 @@ import { theme, cs } from '@utils'
 
 export const Wrapper = styled.nav`
   ${cs.flexColumn('justify-center')};
-
   position: relative;
   background: ${theme('banner.bg')};
   border-bottom: ${theme('banner.spliter')};
@@ -16,14 +15,19 @@ export const Wrapper = styled.nav`
     min-height: 100px;
   `};
 `
+export const InnerWrapper = styled.div`
+  ${cs.flex('justify-center')};
+  width: 100%;
+`
 export const BannerContent = styled.div`
   ${cs.flex()};
-  margin-left: 8%;
-  margin-right: 8%;
+  max-width: ${cs.MAX_CONTENT_WIDTH};
+  width: 100%;
+  padding: 0 6vw;
 
   ${cs.media.mobile`
-    margin-left: 4%;
-    margin-right: 3%;
+    padding: 0;
+    padding-right: 10px;
   `};
 `
 export const Brief = styled.div`

containers/Header/styles/header.js

@@ -16,11 +16,11 @@ export const Wrapper = styled.header.attrs(props => ({
 `
 export const InnerWrapper = styled.div`
   ${cs.flex()};
-  max-width: ${cs.MEDIA_MAX_WIDTH};
+  max-width: ${cs.MAX_CONTENT_WIDTH};
+  padding: 0 6vw;
   width: 100%;
   height: 33px;
   align-items: center;
-  padding: 0 5vw;
   transition: all 0.2s;
 
   ${cs.media.mobile`padding-right: 0`};

containers/Header/styles/user_account.js

@@ -4,13 +4,11 @@ import Img from '@components/Img'
 import { theme, cs } from '@utils'
 
 export const Wrapper = styled.div`
-  margin-right: 20px;
-
   ${cs.media.mobile`
-    margin-right: 0;
+    padding: 0;
+    padding-right: 10px;
   `};
 `
-
 export const PopMenu = styled.div`
   ${cs.flexColumn()};
 `
@@ -71,7 +69,6 @@ export const AvatarIcon = styled.img`
   width: 20px;
   height: 20px;
   cursor: pointer;
-  margin-right: 12px;
   border-radius: 3px;
   opacity: ${theme('avatarOpacity')};
 `