chore(clean-up): remove unneeded align-items style (#1030)

mydearxym · web-flow · commit 3bf128d8d255 · 2021-03-25T23:41:35.000+08:00
diff --git a/src/components/Buttons/styles/publish_button.ts b/src/components/Buttons/styles/publish_button.ts
@@ -9,8 +9,7 @@ const commonHoverAffix = `
   content: '';
   position: absolute;
   top: 0;
-  display: flex;
-  align-items: center;
+  ${css.flex('align-center')};
   height: 100%;
   transition: 0.25s linear;
   z-index: 1;
diff --git a/src/components/BuyMeChuanChuan/styles/payment_footer.ts b/src/components/BuyMeChuanChuan/styles/payment_footer.ts
@@ -4,11 +4,9 @@ import Img from '@/Img'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div`
-  ${css.flex('justify-between')};
-  align-items: center;
+  ${css.flex('justify-between', 'align-center')};
   margin-right: 5px;
 `
-
 export const PayDesc = styled.div`
   ${css.flex()};
   font-size: 0.8rem;
diff --git a/src/components/ContentFilter/styles/index.ts b/src/components/ContentFilter/styles/index.ts
@@ -36,7 +36,6 @@ export const LabelDivider = styled.div`
 export const SelectIcon = styled(Img)<{ reverse: boolean }>`
   fill: ${theme('banner.title')};
   ${css.size(15)};
-  align-items: center;
   margin-right: 3px;
   transform: ${({ reverse }) => (reverse ? 'rotate(180deg)' : '')};
 `
diff --git a/src/components/FaqPeekList/styles/index.ts b/src/components/FaqPeekList/styles/index.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import type { TTestable, TActive } from '@/spec'
 import Img from '@/Img'
-import { theme } from '@/utils'
+import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
@@ -37,9 +37,8 @@ export const ArrowIcon = styled(Img)`
   transform: rotate(-90deg);
 `
 export const ContentWrapper = styled.div<TActive>`
+  ${css.flex('align-center', 'justify-start')};
   display: ${({ active }) => (active ? 'flex' : 'none')};
-  align-items: center;
-  justify-content: flex-start;
   height: 100%;
   background: ;
 `
diff --git a/src/components/FiltersMenu/styles/index.ts b/src/components/FiltersMenu/styles/index.ts
@@ -25,10 +25,9 @@ type TItem = TActive & {
   topMargin: boolean
 }
 export const Item = styled.div<TItem>`
-  ${css.flex()};
+  ${css.flex('align-center')};
   justify-content: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')};
   fill: ${theme('thread.articleDigest')};
-  align-items: center;
   color: ${({ active }) =>
     active ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   font-size: ${({ active }) => (active ? '15px' : '14px')};
diff --git a/src/components/GithubRepoPage/styles/states_containers.ts b/src/components/GithubRepoPage/styles/states_containers.ts
@@ -11,8 +11,7 @@ export const Wrapper = styled.div`
 `
 type TBox = { grow: boolean; nomargin: boolean; nohover: boolean }
 export const BoxWrapper = styled.div<TBox>`
-  ${css.flexColumn('justify-evenly')};
-  align-items: center;
+  ${css.flexColumn('justify-evenly', 'align-center')};
   flex-grow: ${({ grow }) => (grow ? 1 : 0)};
 
   border-radius: 4px;
diff --git a/src/components/NaviCatalog/styles/index.ts b/src/components/NaviCatalog/styles/index.ts
@@ -17,9 +17,8 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 `
 
 export const Item = styled.div<TItem>`
-  ${css.flex('justify-end')};
+  ${css.flex('justify-end', 'align-center')};
   fill: ${theme('thread.articleDigest')};
-  align-items: center;
   color: ${({ active }) =>
     active ? activeColor : theme('thread.articleDigest')};
   font-size: 14px;
diff --git a/src/components/NaviCatalog/styles/list/index.ts b/src/components/NaviCatalog/styles/list/index.ts
@@ -21,9 +21,8 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   margin-top: ${({ isRootMenu }) => (isRootMenu ? '0' : '-8px')};
 `
 export const Item = styled.div<TItem>`
-  ${css.flex('justify-end')};
+  ${css.flex('justify-end', 'align-center')};
   fill: ${theme('thread.articleDigest')};
-  align-items: center;
   color: ${({ active }) =>
     active ? activeColor : theme('thread.articleDigest')};
   font-size: 14px;
diff --git a/src/components/OauthHinter/styles/index.ts b/src/components/OauthHinter/styles/index.ts
@@ -4,8 +4,7 @@ import { theme, animate, css } from '@/utils'
 import Img from '@/Img'
 
 export const Container = styled.div`
-  ${css.flexColumn('justify-between')};
-  align-items: center;
+  ${css.flexColumn('justify-between', 'align-center')};
 
   height: 100vh;
   background: ${theme('banner.bg')};
diff --git a/src/components/PromotionList/styles/holder.ts b/src/components/PromotionList/styles/holder.ts
@@ -21,8 +21,7 @@ export const Logo = styled(Img)`
   transition-delay: 0.2s;
 `
 export const PartnerInfo = styled.div`
-  ${css.flexColumn('justify-center')};
-  align-items: center;
+  ${css.flexColumn('justify-center', 'align-center')};
   margin-right: 40px;
 `
 export const Title = styled.div`
diff --git a/src/components/PromotionList/styles/index.ts b/src/components/PromotionList/styles/index.ts
@@ -10,8 +10,7 @@ export const Wrapper = styled.div`
   max-width: 180px;
 `
 export const Header = styled.div`
-  ${css.flex('justify-between', 'align-end')};
-  align-items: center;
+  ${css.flex('justify-between', 'align-center')};
   margin-bottom: 12px;
 `
 export const Title = styled.div`
diff --git a/src/components/UserBrief/styles/badge_info.ts b/src/components/UserBrief/styles/badge_info.ts
@@ -4,8 +4,7 @@ import { theme, css } from '@/utils'
 import Img from '@/Img'
 
 export const Wrapper = styled.div`
-  ${css.flexColumn('justify-center')};
-  align-items: center;
+  ${css.flexColumn('justify-center', 'align-center')};
 `
 
 export const BadgeWrapper = styled.div`
diff --git a/src/components/UserCell/styles/index.ts b/src/components/UserCell/styles/index.ts
@@ -3,8 +3,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const UserCellWrapper = styled.div`
-  ${css.flex('justify-start')};
-  align-items: center;
+  ${css.flex('justify-start', 'align-center')};
   margin-left: 10px;
 `
 export const Avatar = styled.img`
diff --git a/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts b/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts
@@ -102,8 +102,7 @@ export const DateItem = styled.div<TActive>`
   background: ${({ active }) => (active ? '#05323e' : '')};
 `
 export const Head = styled.div`
-  ${css.flex('justify-between')};
-  align-items: center;
+  ${css.flex('justify-between', 'align-center')};
   padding-right: 3px;
 `
 export const WeekHint = styled.div`
diff --git a/src/containers/digest/CommunityDigest/styles/index.ts b/src/containers/digest/CommunityDigest/styles/index.ts
@@ -9,10 +9,8 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   width: 100%;
 `
 export const BaseBanner = styled.nav`
-  ${css.flexColumn('justify-center')};
+  ${css.flexColumn('justify-center', 'align-center')};
   position: relative;
-
-  align-items: center;
   min-height: 140px;
   background: ${theme('banner.bg')};
   border-bottom: 1px solid;
diff --git a/src/containers/layout/GlobalLayout/styles/index.ts b/src/containers/layout/GlobalLayout/styles/index.ts
@@ -45,13 +45,11 @@ export const InnerWrapper = styled.div<TInner>`
 `
 type TBody = { layout: string; isMobile: boolean }
 export const BodyWrapper = styled.div<TBody>`
-  display: flex;
+  ${css.flex('align-both')};
   flex-direction: ${({ layout, isMobile }) => {
     if (isMobile) return 'column'
     return layout === C11N.DIGEST ? 'column' : 'row'
   }};
-  justify-content: center;
-  align-items: center;
   width: 100%;
 `
 // 180 is the sidebar full width
diff --git a/src/containers/tool/AvatarAdder/styles/adder_panel.ts b/src/containers/tool/AvatarAdder/styles/adder_panel.ts
@@ -39,8 +39,7 @@ export const AdderIcon = styled(Img)`
   }
 `
 export const AddBtn = styled.div`
-  ${css.flex('justify-center')};
-  align-items: center;
+  ${css.flex('align-both')};
   width: 80px;
   color: ${theme('thread.articleTitle')};
   border: 1px solid;
diff --git a/src/containers/tool/Drawer/styles/add_on.ts b/src/containers/tool/Drawer/styles/add_on.ts
@@ -66,8 +66,7 @@ export const MobileCloser = styled.div`
   }
 `
 export const UploadingTab = styled.div<TActive>`
-  ${css.flexColumn('justify-evenly')};
-  align-items: center;
+  ${css.flexColumn('justify-evenly', 'align-center')};
   opacity: ${({ show }) => (show ? 1 : 0)};
 
   color: ${theme('drawer.font')};
diff --git a/src/containers/unit/ArticleBodyHeader/styles/index.ts b/src/containers/unit/ArticleBodyHeader/styles/index.ts
@@ -4,8 +4,7 @@ import Img from '@/Img'
 import { theme, css } from '@/utils'
 
 export const Wrapper = styled.div`
-  ${css.flex('justify-between')};
-  align-items: center;
+  ${css.flex('justify-between', 'align-center')};
   width: 100%;
 `
 export const LinkSource = styled.div`
diff --git a/src/containers/unit/Header/styles/desktop_view/article_editor_view.ts b/src/containers/unit/Header/styles/desktop_view/article_editor_view.ts
@@ -10,9 +10,8 @@ export const Wrapper = styled(CommunityWrapper)`
   ${css.flex('align-both')};
 `
 export const InnerWrapper = styled.div`
-  ${css.flex('justify-start')};
+  ${css.flex('justify-start', 'align-center')};
   width: ${WIDTH.ARTICLE_EDITOR.CONTENT};
-  align-items: center;
 `
 
 export const Operations = styled.div``
diff --git a/src/containers/unit/Header/styles/desktop_view/article_view.ts b/src/containers/unit/Header/styles/desktop_view/article_view.ts
@@ -9,12 +9,11 @@ export const Wrapper = styled(CommunityWrapper)`
   box-shadow: none;
 `
 export const InnerWrapper = styled.div`
-  ${css.flex('justify-start')};
+  ${css.flex('justify-start', 'align-center')};
   width: ${WIDTH.ARTICLE.PAGE};
   margin-left: ${WIDTH.ARTICLE.CONTENT_OFFSET};
   /* margin-left: 0; */
   height: 33px;
-  align-items: center;
 
   ${css.media.desktopL`
     margin-left: ${WIDTH.ARTICLE.CONTENT_OFFSET_DESKTOPL};
diff --git a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts
@@ -84,10 +84,9 @@ export const MenuItemTitle = styled.div<TMenuItemTitle>`
   transition: opacity 0.25s;
 `
 export const MiniChartWrapper = styled.div<{ pin: boolean }>`
+  ${css.flex('align-both')};
   display: ${({ pin }) => (pin ? 'flex' : 'none')};
   width: 45%;
-  justify-content: center;
-  align-items: center;
   margin-right: 10px;
 
   svg {
diff --git a/src/containers/viewer/VideoViewer/styles/index.js b/src/containers/viewer/VideoViewer/styles/index.js
@@ -14,8 +14,7 @@ export const CommentsWrapper = styled.div`
 `
 
 export const BodyHeaderWrapper = styled.div`
-  ${css.flex('justify-between')};
-  align-items: center;
+  ${css.flex('justify-between', 'align-center')};
   background-color: ${theme('drawer.articleBg')};
   width: 100%;
   padding: 8px 32px;

Original file line number	Diff line number	Diff line change
@@ -36,7 +36,6 @@ export const LabelDivider = styled.div`
`36`	`36`	export const SelectIcon = styled(Img)<{ reverse: boolean }>`
`37`	`37`	`fill: ${theme('banner.title')};`
`38`	`38`	`${css.size(15)};`
`39`		`- align-items: center;`
`40`	`39`	`margin-right: 3px;`
`41`	`40`	`transform: ${({ reverse }) => (reverse ? 'rotate(180deg)' : '')};`
`42`	`41`	`
Original file line number	Diff line number	Diff line change
@@ -11,8 +11,7 @@ export const Wrapper = styled.div`
`11`	`11`	`
`12`	`12`	`type TBox = { grow: boolean; nomargin: boolean; nohover: boolean }`
`13`	`13`	export const BoxWrapper = styled.div<TBox>`
`14`		`- ${css.flexColumn('justify-evenly')};`
`15`		`- align-items: center;`
	`14`	`+ ${css.flexColumn('justify-evenly', 'align-center')};`
`16`	`15`	`flex-grow: ${({ grow }) => (grow ? 1 : 0)};`
`17`	`16`
`18`	`17`	`border-radius: 4px;`
Original file line number	Diff line number	Diff line change
@@ -21,8 +21,7 @@ export const Logo = styled(Img)`
`21`	`21`	`transition-delay: 0.2s;`
`22`	`22`	`
`23`	`23`	export const PartnerInfo = styled.div`
`24`		`- ${css.flexColumn('justify-center')};`
`25`		`- align-items: center;`
	`24`	`+ ${css.flexColumn('justify-center', 'align-center')};`
`26`	`25`	`margin-right: 40px;`
`27`	`26`	`
`28`	`27`	export const Title = styled.div`