refactor(css): rm un-need flex-wrap property

groupher · Sep 23, 2023 · d5a8f37 · d5a8f37
1 parent c9ffcc8
commit d5a8f37
Show file tree

Hide file tree

Showing 53 changed files with 59 additions and 105 deletions.
diff --git a/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx b/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx
@@ -53,8 +53,7 @@ export const Value = styled.div`
 `
 
 export const UserList = styled.div`
-  ${css.column()};
-  flex-wrap: wrap;
+  ${css.columnWrap()};
   gap: 10px 0;
 `
 

diff --git a/src/containers/content/LandingPage/styles/feature_wall/index.ts b/src/containers/content/LandingPage/styles/feature_wall/index.ts
@@ -59,8 +59,7 @@ export const FeatList = styled.div`
 `
 
 export const MobileIntroLists = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 16px 0;
   padding-left: 10px;
   margin-top: -25px;

diff --git a/src/containers/content/LandingPage/styles/feature_wall/user_voice.ts b/src/containers/content/LandingPage/styles/feature_wall/user_voice.ts
@@ -10,8 +10,7 @@ import TreesSVG from '@/icons/Trees'
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
 }))<TTestable>`
-  ${css.row('align-both')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-both')};
   gap: 40px 25px;
   height: auto;
   margin-top: 80px;

diff --git a/src/containers/content/LandingPage/styles/tech_stacks/index.ts b/src/containers/content/LandingPage/styles/tech_stacks/index.ts
@@ -71,8 +71,7 @@ export const CADBackground = styled(Img)`
   `};
 `
 export const TechsWrapper = styled.div`
-  ${css.row('align-both')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-both')};
   gap: 15px 50px;
   height: 440px;
   width: 100%;

diff --git a/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts b/src/containers/content/UserContent/styles/sidebar/community_editor_info.ts
@@ -3,10 +3,9 @@ import styled from 'styled-components'
 import css, { theme } from '@/css'
 
 export const Wrapper = styled.div`
-  ${css.row('align-center')};
+  ${css.rowWrap('align-center')};
   margin-top: 10px;
   color: ${theme('banner.desc')};
-  flex-wrap: wrap;
 `
 
 export const Text = styled.div`

diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts
@@ -18,8 +18,7 @@ export const Wrapper = styled.div`
 `
 export const InnerWrapper = styled.div`
   width: calc(100% + 148px);
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 16px 0;
 `
 export const InnerWrapperColumn = styled.div`

diff --git a/src/containers/editor/CoverEditor/styles/toolbox/light_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/light_block.ts
@@ -11,8 +11,7 @@ export const Wrapper = styled.div`
 `
 export const Block = styled.div`
   ${css.size(48)};
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 3px;
   padding: 4px;
   border-radius: 2px;

diff --git a/src/containers/editor/CoverEditor/styles/toolbox/position_block.ts b/src/containers/editor/CoverEditor/styles/toolbox/position_block.ts
@@ -11,8 +11,7 @@ export const Wrapper = styled.div`
 `
 export const Block = styled.div`
   ${css.size(47)};
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   border-radius: 2px;
   border: 1px solid;
   border-color: ${theme('divider')};

diff --git a/src/containers/editor/PassportEditor/styles/selects.ts b/src/containers/editor/PassportEditor/styles/selects.ts
@@ -7,8 +7,7 @@ import CheckSVG from '@/icons/Check'
 
 export const Wrapper = styled.div`
   width: 100%;
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 10px 0;
   position: relative;
 `

diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts b/src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts
@@ -6,9 +6,8 @@ import css, { animate, theme } from '@/css'
 import PenSVG from '@/icons/EditPen'
 
 export const Wrapper = styled.div`
-  ${css.row()};
+  ${css.rowWrap()};
   width: calc(100% + 30px);
-  flex-wrap: wrap;
   gap: 0 12px;
   margin-top: 10px;
 

diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts b/src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts
@@ -7,9 +7,8 @@ import CheckedSVG from '@/icons/CheckBold'
 import CircleArrowSVG from '@/icons/CircleArrow'
 
 export const Wrapper = styled.div<{ showMore: boolean }>`
-  ${css.row()};
+  ${css.rowWrap()};
   width: calc(100% + 30px);
-  flex-wrap: wrap;
   gap: 15px 16px;
   margin-top: 10px;
   position: relative;

diff --git a/src/containers/thread/AboutThread/styles/extra_info.ts b/src/containers/thread/AboutThread/styles/extra_info.ts
@@ -3,8 +3,7 @@ import styled from 'styled-components'
 import css, { theme } from '@/css'
 
 export const Wrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   height: auto;
   width: 600px;
   padding-top: 10px;

diff --git a/src/containers/thread/DashboardThread/styles/doc/block_layout/index.ts b/src/containers/thread/DashboardThread/styles/doc/block_layout/index.ts
@@ -8,8 +8,7 @@ export const Wrapper = styled.div`
   margin-top: 10px;
 `
 export const CatsWrapper = styled.div`
-  ${css.row('justify-start')};
-  flex-wrap: wrap;
+  ${css.rowWrap('justify-start')};
   gap: 15px 20px;
 
   flex-grow: 1;

diff --git a/src/containers/thread/DashboardThread/styles/footer/editors/group/index.ts b/src/containers/thread/DashboardThread/styles/footer/editors/group/index.ts
@@ -18,8 +18,7 @@ export const PlusIcon = styled(PlusSVG)`
   margin-right: 6px;
 `
 export const LinkGroup = styled.div`
-  ${css.row('justify-start')};
-  flex-wrap: wrap;
+  ${css.rowWrap('justify-start')};
   width: calc(100% + 50px);
   gap: 30px;
 `

diff --git a/src/containers/thread/DashboardThread/styles/header/editors/index.ts b/src/containers/thread/DashboardThread/styles/header/editors/index.ts
@@ -69,9 +69,8 @@ export const PlusIcon = styled(PlusSVG)`
 `
 
 export const LinkGroup = styled.div`
-  ${css.row('justify-start')};
+  ${css.rowWrap('justify-start')};
   margin-top: 30px;
-  flex-wrap: wrap;
   width: calc(100% + 50px);
   gap: 30px;
 `

diff --git a/src/containers/thread/DashboardThread/styles/layout/doc_layout/faq_template.ts b/src/containers/thread/DashboardThread/styles/layout/doc_layout/faq_template.ts
@@ -11,8 +11,7 @@ export const FlatLayoutWrapper = styled.div`
   width: 100%;
 `
 export const FlatLists = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 22px 0;
   width: 100%;
   margin-top: 15px;

diff --git a/src/containers/thread/DashboardThread/styles/layout/doc_layout/main_template.ts b/src/containers/thread/DashboardThread/styles/layout/doc_layout/main_template.ts
@@ -10,8 +10,7 @@ import ToolSVG from '@/icons/Heart'
 export { Bar, Circle } from '..'
 
 export const CardssLayoutWrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 10px;
   width: 100%;
 `
@@ -26,8 +25,7 @@ export const FooterMore = styled.div`
   width: 80%;
 `
 export const BlocksLayoutWrapper = styled.div<{ withDivider?: boolean }>`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 22px 0;
   border-right: ${({ withDivider }) => (withDivider ? '1px solid' : 'none')};
   border-right-color: ${theme('divider')};

diff --git a/src/containers/thread/DashboardThread/styles/threads/doc_thread.ts b/src/containers/thread/DashboardThread/styles/threads/doc_thread.ts
@@ -3,8 +3,7 @@ import styled from 'styled-components'
 import css, { theme } from '@/css'
 
 export const Wrapper = styled.div`
-  ${css.row('justify-between')};
-  flex-wrap: wrap;
+  ${css.rowWrap('justify-between')};
 
   border-left: 2px solid;
   border-left-color: ${theme('divider')};

diff --git a/src/containers/thread/DashboardThread/styles/widgets/base_setting.ts b/src/containers/thread/DashboardThread/styles/widgets/base_setting.ts
@@ -23,8 +23,7 @@ export const TheColor = styled.div<{ color: TColorName }>`
 
 // threads
 export const ThreadsWrapper = styled.div`
-  ${css.row('justify-between')};
-  flex-wrap: wrap;
+  ${css.rowWrap('justify-between')};
 
   border: 1px solid;
   border-color: ${theme('divider')};

diff --git a/src/containers/thread/DocThread/styles/blocks_layout/index.ts b/src/containers/thread/DocThread/styles/blocks_layout/index.ts
@@ -15,8 +15,7 @@ export const Wrapper = styled.div<{ bannerLayout: TBannerLayout }>`
       : 'width: auto;'}
 `
 export const CatsWrapper = styled(MainWrapper)`
-  ${css.row('justify-between')};
-  flex-wrap: wrap;
+  ${css.rowWrap('justify-between')};
 
   flex-grow: 1;
   width: 100%;

diff --git a/src/containers/thread/DocThread/styles/cards_layout/index.ts b/src/containers/thread/DocThread/styles/cards_layout/index.ts
@@ -10,8 +10,7 @@ export const Wrapper = styled.div`
   margin-left: -30px;
 `
 export const CatsWrapper = styled(MainWrapper)`
-  ${css.row('justify-between')};
-  flex-wrap: wrap;
+  ${css.rowWrap('justify-between')};
   flex-grow: 1;
   gap: 20px 10px;
 

diff --git a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts
@@ -27,8 +27,7 @@ export const TotalNum = styled.span<{ highlight: boolean }>`
   margin-right: 4px;
 `
 export const UsersWrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
 `
 export const Avatar = styled(Img)`
   ${css.circle(20)};

diff --git a/src/containers/tool/CollectionFolder/styles/setter.ts b/src/containers/tool/CollectionFolder/styles/setter.ts
@@ -39,8 +39,7 @@ export const Artiment = styled.div`
   margin-right: 5px;
 `
 export const ListWrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   flex-grow: 1;
   padding-top: 35px;
   padding-right: 15px;

diff --git a/src/containers/tool/CommunityTagSetter/styles/community_setter/body.ts b/src/containers/tool/CommunityTagSetter/styles/community_setter/body.ts
@@ -10,6 +10,5 @@ export const Wrapper = styled.div`
   min-height: 400px;
 `
 export const InnerWrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
 `
diff --git a/src/containers/tool/CommunityTagSetter/styles/community_setter/list.ts b/src/containers/tool/CommunityTagSetter/styles/community_setter/list.ts
@@ -6,8 +6,7 @@ export const Wrapper = styled.div`
   margin-bottom: 8px;
 `
 export const InnerWrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
 `
 export const HintTitle = styled.div<{ highlight: boolean }>`
   font-size: 13px;

diff --git a/src/containers/tool/CommunityTagSetter/styles/tag_setter/body.ts b/src/containers/tool/CommunityTagSetter/styles/tag_setter/body.ts
@@ -10,6 +10,5 @@ export const Wrapper = styled.div`
   min-height: 300px;
 `
 export const InnerWrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
 `
diff --git a/src/containers/tool/CommunityTagSetter/styles/tag_setter/group_tags.ts b/src/containers/tool/CommunityTagSetter/styles/tag_setter/group_tags.ts
@@ -6,8 +6,7 @@ export const Wrapper = styled.div`
   margin-bottom: 8px;
 `
 export const InnerWrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
 `
 export const HintTitle = styled.div`
   font-size: 13px;

diff --git a/src/containers/tool/Share/styles/panel/platform.ts b/src/containers/tool/Share/styles/panel/platform.ts
@@ -38,8 +38,7 @@ export const Article = styled.div`
   margin-right: 5px;
 `
 export const InnerWrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
 
   ${css.media.mobile`
     justify-content: space-between;

diff --git a/src/containers/user/UserLister/styles/list/normal_layout.ts b/src/containers/user/UserLister/styles/list/normal_layout.ts
@@ -6,8 +6,7 @@ import css, { theme } from '@/css'
 import CitySVG from '@/icons/City'
 
 export const Wrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
 `
 
 export const UserWrapper = styled.div`

diff --git a/src/containers/user/UserLister/styles/user_list.ts b/src/containers/user/UserLister/styles/user_list.ts
@@ -4,8 +4,7 @@ import Img from '@/Img'
 import css, { theme } from '@/css'
 
 export const TableWrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
 `
 // background: ${theme('drawer.articleBg')};
 

diff --git a/src/widgets/ArticlesFilter/styles/selected_filters.ts b/src/widgets/ArticlesFilter/styles/selected_filters.ts
@@ -3,8 +3,7 @@ import styled from 'styled-components'
 import css from '@/css'
 
 export const Wrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
 
   margin-left: 15px;
   margin-top: -1px;

diff --git a/src/widgets/ContributorList/styles/index.ts b/src/widgets/ContributorList/styles/index.ts
@@ -5,8 +5,7 @@ import css from '@/css'
 import Img from '@/Img'
 
 export const Wrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   margin-top: 15px;
 `
 export const AvatarLink = styled.a``

diff --git a/src/widgets/FaIcons/styles/panel.ts b/src/widgets/FaIcons/styles/panel.ts
@@ -51,8 +51,7 @@ export const Title = styled.div`
 `
 
 export const ColorWrapper = styled.div`
-  ${css.row('align-both')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-both')};
   margin-top: 8px;
   padding-bottom: 14px;
   gap: 6px 10px;

diff --git a/src/widgets/FaqList/styles/flat.ts b/src/widgets/FaqList/styles/flat.ts
@@ -41,8 +41,7 @@ export const BrandText = styled.div<{ large: boolean }>`
   `};
 `
 export const Content = styled.div<{ large: boolean }>`
-  ${css.row('justify-between')};
-  flex-wrap: wrap;
+  ${css.rowWrap('justify-between')};
   gap: ${({ large }) => (large ? '45px' : '50px')};
 
   ${css.media.mobile`

diff --git a/src/widgets/GalleryHub/styles/directory_gallery.ts b/src/widgets/GalleryHub/styles/directory_gallery.ts
@@ -4,8 +4,7 @@ import Img from '@/Img'
 import css, { theme } from '@/css'
 
 export const Wrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   color: ${theme('article.digest')};
   width: 100%;
 `

diff --git a/src/widgets/GalleryHub/styles/friends_gallery.ts b/src/widgets/GalleryHub/styles/friends_gallery.ts
@@ -7,8 +7,7 @@ export const Wrapper = styled.div`
   ${css.column('align-center')};
 `
 export const BlockWrapper = styled.div`
-  ${css.row('justify-start')};
-  flex-wrap: wrap;
+  ${css.rowWrap('justify-start')};
   color: ${theme('article.digest')};
   width: 100%;
   min-height: 500px;

diff --git a/src/widgets/GalleryHub/styles/image_gallery/index.ts b/src/widgets/GalleryHub/styles/image_gallery/index.ts
@@ -8,8 +8,7 @@ export const Wrapper = styled.div`
 `
 // GalleryWrapper base
 export const WrapperBase = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   color: ${theme('article.digest')};
   width: 100%;
 `

diff --git a/src/widgets/GalleryHub/styles/inline_tags.ts b/src/widgets/GalleryHub/styles/inline_tags.ts
@@ -4,8 +4,7 @@ import styled from 'styled-components'
 import css from '@/css'
 
 export const Wrapper = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   margin-top: 18px;
 `
 export const Tag = styled.div`