From 796a4ad6634e3cb40c55689af24d931599fc42eb Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 13 Mar 2021 20:16:56 +0800 Subject: [PATCH 1/2] refactor(ts-workflow): styled-component workflow --- package.json | 3 +- src/components/AlertBar/styles/index.ts | 7 +- .../ArticleActionsPanel/styles/index.ts | 8 ++- .../styles/copyright_selector.ts | 5 +- .../ArticleItemPrefixLabel/styles/index.ts | 2 +- src/components/AvatarsRow/styles/index.ts | 10 +-- src/components/AvatarsRow/styles/more_item.ts | 5 +- ...rizontalButton.js => HorizontalButton.tsx} | 50 +++++-------- src/components/Buttons/styles/arrow_button.ts | 17 +++-- src/components/Buttons/styles/arrow_link.ts | 8 ++- src/components/Buttons/styles/button.ts | 11 +-- .../styles/dropdown_button/option_panel.ts | 8 +-- .../Buttons/styles/follow_button/index.ts | 2 +- .../Buttons/styles/notify_button/index.ts | 9 +-- .../styles/or_button/horizontal_button.ts | 9 +-- .../styles/or_button/vertical_button.ts | 3 +- .../BuyMeChuanChuan/styles/chuan_selector.ts | 3 +- src/components/Charger/styles/index.ts | 7 +- src/components/Checker/styles/index.ts | 13 ++-- src/components/CollapseMenu/styles/group.ts | 4 +- src/components/CollapseMenu/styles/index.ts | 4 +- src/components/CollapseMenu/styles/item.ts | 5 +- src/components/Common/index.ts | 6 +- .../CommunityFaceLogo/styles/index.ts | 2 +- src/components/CommunityList/styles/index.ts | 8 ++- .../CommunityStatesPad/styles/index.ts | 9 ++- .../CommunityStatesPad/styles/number_group.ts | 2 +- .../ContentBanner/styles/reaction_numbers.ts | 6 +- .../ContentFilter/styles/filter_result.ts | 3 +- src/components/ContentFilter/styles/index.ts | 7 +- .../ContentFilter/styles/selected_tags.ts | 2 +- .../ContentSourceCard/styles/desktop_view.ts | 2 +- .../ContentSourceCard/styles/mobile_view.ts | 2 +- src/components/CrashErrorHint/styles/index.ts | 21 +++--- .../styles/horizontal_scroller.ts | 15 +++- src/components/CustomScroller/styles/index.ts | 6 +- .../styles/vertical_scroller.ts | 10 ++- src/components/DigestSentence/styles/index.ts | 7 +- src/components/DivideText/styles/index.ts | 7 +- src/components/DotDivider/styles/index.ts | 3 +- src/components/Dropdown/styles/index.ts | 7 +- .../styles/default_layout/index.ts | 7 +- .../EmailSubscriber/styles/email_hint_icon.ts | 7 +- .../EmailSubscriber/styles/index.ts | 9 ++- .../EmailSubscriber/styles/simple_layout.ts | 7 +- src/components/EmptyLabel/styles/index.ts | 4 +- src/components/ErrorPage/index.tsx | 2 +- .../ErrorPage/styles/code_snippets.ts | 9 +-- src/components/ErrorPage/styles/index.ts | 23 +++--- .../ErrorPage/styles/spin_planet.ts | 7 +- src/components/ExpandIcon/styles/index.ts | 26 +++++-- src/components/FaqPeekList/index.js | 12 ++-- src/components/FaqPeekList/styles/index.ts | 9 +-- .../FiltersMenu/styles/filter/index.ts | 12 ++-- src/components/FiltersMenu/styles/header.ts | 11 +-- src/components/FiltersMenu/styles/index.ts | 13 +++- src/components/FocusLine/styles/index.ts | 3 +- src/components/Folder/styles/index.ts | 7 +- src/components/FormItem/styles/index.ts | 9 +-- .../GalleryHub/styles/directory_gallery.ts | 8 ++- .../GalleryHub/styles/friends_gallery.ts | 2 +- .../GalleryHub/styles/image_gallery/index.ts | 2 +- .../image_gallery/main_column_gallery.ts | 2 +- .../styles/people_gallery/card_header.ts | 2 +- .../GalleryHub/styles/people_gallery/index.ts | 3 +- .../GalleryHub/styles/product_gallery.ts | 3 +- .../GalleryHub/styles/snippet_gallery.ts | 3 +- .../GalleryHub/styles/sponsor_gallery.ts | 9 +-- src/components/GithubRepoPage/styles/index.ts | 5 +- .../styles/states_containers.ts | 5 +- src/components/GotoTop/styles/index.ts | 7 +- src/components/IconText/styles/index.ts | 17 +++-- src/components/Img/{index.js => index.tsx} | 72 +++++++++++-------- src/components/Img/styles/index.ts | 2 +- src/components/ImgFallback/styles/avatar.ts | 15 ++-- src/components/ImgFallback/styles/index.ts | 8 ++- src/components/ImgFallback/styles/work.ts | 7 +- src/components/InlineTags/styles/index.ts | 2 +- src/components/Input/styles/index.ts | 18 +++-- src/components/Input/styles/textarea.ts | 9 ++- src/components/JobItem/styles/index.ts | 3 +- src/components/LinksCard/index.js | 24 +++---- src/components/LinksCard/styles/index.ts | 9 +-- src/components/Modal/styles/index.ts | 14 +++- .../NaviCatalog/styles/dashboard.ts | 4 +- src/components/NaviCatalog/styles/header.ts | 11 +-- src/components/NaviCatalog/styles/index.ts | 14 ++-- .../NaviCatalog/styles/list/index.ts | 17 +++-- src/components/NaviIntro/styles/index.ts | 7 +- src/components/Navigator/styles/index.ts | 3 +- .../Navigator/styles/main_entries.ts | 9 +-- .../Navigator/styles/more_panel/index.ts | 6 +- .../styles/more_panel/mobile_view.ts | 2 +- src/components/Pagi/styles/index.ts | 6 +- src/components/Pagi/styles/next/bottom.ts | 4 +- src/components/Pagi/styles/next/center.ts | 4 +- src/components/Pagi/styles/perv/bottom.ts | 4 +- src/components/Pagi/styles/perv/center.ts | 4 +- .../PostItem/styles/digest_view/body.ts | 2 +- src/components/PostItem/styles/index.ts | 8 ++- src/components/PromptIcon/styles/index.ts | 2 +- src/components/RepoItem/styles/index.ts | 2 +- src/components/SectionLabel/styles/index.ts | 3 +- src/components/Select/styles/index.ts | 10 +-- src/components/Sticky/styles/index.ts | 8 ++- src/components/SubTitle/styles/index.ts | 7 +- src/components/Switcher/Tabs/TabIcon.js | 2 +- .../Switcher/styles/icon_selector.ts | 11 +-- .../pagi_option_selector/gallery_base.ts | 3 +- .../pagi_option_selector/main_column.ts | 2 +- src/components/Switcher/styles/radio.ts | 17 +++-- .../Switcher/styles/tabs/drawer_view.ts | 9 +-- src/components/Switcher/styles/tabs/index.ts | 18 +++-- .../styles/tabs/mobile_view/expand_view.ts | 7 +- .../styles/tabs/mobile_view/normal_view.ts | 7 +- .../Switcher/styles/tabs/tab_icon.ts | 5 +- .../Switcher/styles/tabs/tab_item.ts | 13 +++- .../TabBar/styles/desktop_view/brief_view.ts | 3 +- src/components/TabSelector/styles/index.ts | 5 +- src/components/Tag/styles/index.ts | 7 +- .../TheAvatar/styles/article_author_avatar.ts | 7 +- src/components/TheAvatar/styles/index.ts | 7 +- .../TheAvatar/styles/post_item_avatar.ts | 7 +- .../ThemeSelector/styles/card_selector.ts | 5 +- .../ThemeSelector/styles/gallery_selector.ts | 12 ++-- src/components/ThemeSelector/styles/index.ts | 4 +- src/components/ThreadSelector/styles/panel.ts | 3 +- src/components/Tooltip/styles/index.ts | 2 +- src/components/UserBrief/styles/index.ts | 9 +-- src/components/VideoItem/styles/index.ts | 2 +- .../VideoSourceInfo/styles/index.ts | 2 +- src/components/WorksCard/styles/index.ts | 7 +- .../content/CommunityContent/styles/index.ts | 10 +-- .../CoolGuideContent/styles/filter_bar.ts | 11 +-- .../content/CoolGuideContent/styles/index.ts | 9 +-- .../content/DiscoveryContent/styles/banner.ts | 9 +-- .../DiscoveryContent/styles/community_card.ts | 4 +- .../content/DiscoveryContent/styles/index.ts | 8 +-- .../DiscoveryContent/styles/search_box.ts | 3 +- .../DiscoveryContent/styles/sidebar.ts | 3 +- .../content/FriendsContent/styles/index.ts | 11 +-- .../content/HaveADrinkContent/logic.js | 2 +- .../HaveADrinkContent/styles/body/catalog.ts | 3 +- .../HaveADrinkContent/styles/body/index.ts | 2 +- .../HaveADrinkContent/styles/body/setting.ts | 3 +- .../styles/header/running_timer.ts | 15 ++-- .../HelpCenterContent/styles/digest.ts | 4 +- .../content/HelpCenterContent/styles/index.ts | 9 +-- .../MeetupsContent/styles/activity_card.ts | 6 +- .../MeetupsContent/styles/card/date.ts | 6 +- .../styles/date_selector/calendar_card.ts | 3 +- .../styles/date_selector/cell.ts | 6 +- .../styles/illustrations/air_balloon.ts | 8 ++- .../styles/illustrations/index.ts | 11 +-- .../styles/illustrations/rocket.ts | 11 +-- .../styles/illustrations/ufo.ts | 9 +-- .../content/MembershipContent/styles/index.ts | 18 ++--- .../styles/monthly_warning.ts | 9 +-- .../MembershipContent/styles/price_tag.ts | 10 +-- .../content/MembershipContent/styles/qa.ts | 7 +- .../MembershipContent/styles/support.ts | 6 +- .../PostContent/styles/desktop_view.ts | 4 +- .../RecipesContent/styles/filter_bar.ts | 11 +-- .../content/RecipesContent/styles/index.ts | 9 +-- .../content/SponsorContent/styles/banner.ts | 14 +++- .../content/SponsorContent/styles/index.ts | 11 +-- .../styles/sponsor_type_title.ts | 9 +-- .../SubscribeContent/styles/actions/index.ts | 7 +- .../content/SubscribeContent/styles/index.ts | 7 +- .../content/TrendingContent/styles/index.ts | 2 +- .../content/UserContent/styles/index.ts | 4 +- .../WorksContent/styles/banner/backgrounds.ts | 11 ++- .../content/WorksContent/styles/brand.ts | 19 ++--- .../content/WorksContent/styles/index.ts | 13 ++-- .../WorksContent/styles/list/option_tab.ts | 7 +- .../styles/right_sidebar/index.ts | 9 +-- .../styles/right_sidebar/interviews_list.ts | 7 +- .../styles/right_sidebar/linkers.ts | 7 +- .../styles/desktop_view/index.ts | 2 +- .../styles/mobile_view/state_info.ts | 2 +- .../ArticleDigest/styles/reaction_numbers.ts | 10 +-- .../digest/CommunityDigest/logic.js | 2 +- .../styles/digest_view/column_view/index.ts | 24 ++++--- .../styles/digest_view/row_view/index.ts | 9 ++- .../CommunityDigest/styles/expand_texts.ts | 9 ++- .../digest/CommunityDigest/styles/index.ts | 7 +- .../CommunityDigest/styles/social_list.ts | 4 +- .../AccountEditor/styles/sex_inputer.ts | 4 +- .../AccountEditor/styles/social_inputer.ts | 7 +- .../styles/editor/header/adder.ts | 7 +- .../styles/editor/header/deleter.ts | 7 +- .../styles/editor/header/index.ts | 15 ++-- .../editor/ArticleEditor/styles/index.ts | 9 +-- .../CommunityEditor/styles/banner/index.ts | 9 +-- .../styles/banner/input_box.ts | 5 +- .../styles/banner/select_type/index.ts | 2 +- .../styles/banner/select_type/type_boxes.ts | 3 +- .../styles/banner/setup_domain/index.ts | 2 +- .../styles/content/fake_browser/content.ts | 2 +- .../styles/content/fake_browser/index.ts | 2 +- .../editor/CommunityEditor/styles/index.ts | 4 +- .../editor/JobEditor/styles/index.ts | 7 +- .../editor/PostEditor/styles/index.ts | 7 +- .../VideoEditor/styles/source_options.ts | 9 ++- .../styles/content/article_part/index.ts | 7 +- .../content/basic_info_part/cover_uploader.ts | 7 +- .../styles/content/basic_info_part/index.ts | 7 +- .../styles/content/common_questions.ts | 7 +- .../WorksEditor/styles/content/index.ts | 7 +- .../WorksEditor/styles/content/launch_part.ts | 7 +- .../WorksEditor/styles/content/name_part.ts | 7 +- .../styles/content/tech_stack_part/index.ts | 7 +- .../editor/WorksEditor/styles/index.ts | 9 +-- .../editor/WorksEditor/styles/preview.ts | 7 +- .../editor/WorksEditor/styles/steps.ts | 11 +-- src/containers/layout/GlobalLayout/index.tsx | 2 +- .../layout/GlobalLayout/styles/index.ts | 17 +++-- .../layout/ThemePalette/GlobalStyle.ts | 55 +++++++------- src/containers/layout/ThemePalette/index.js | 6 +- .../thread/PostsThread/styles/city_card.ts | 2 +- .../thread/PostsThread/styles/index.ts | 5 +- .../thread/RoadmapThread/styles/index.ts | 7 +- .../RoadmapThread/styles/todo_list/up_vote.ts | 2 +- .../UsersThread/styles/num_dashboard.ts | 11 +-- .../ArticleSticker/styles/article_sticker.ts | 5 +- .../ArticleSticker/styles/comment_sticker.ts | 5 +- .../tool/ArticleSticker/styles/index.ts | 7 +- .../styles/left_sticker/index.ts | 7 +- .../ArticleSticker/styles/left_sticker/toc.ts | 7 +- .../styles/gerneral_settings.ts | 7 +- .../tool/C11NSettingPanel/styles/index.ts | 7 +- .../C11NSettingPanel/styles/theme_settings.ts | 7 +- src/containers/tool/Cashier/PaymentSidebar.js | 4 +- .../tool/Cashier/styles/payment_sidebar.ts | 11 +-- .../tool/CommunityJoinBadge/styles/index.ts | 7 +- src/containers/tool/Doraemon/styles/index.ts | 13 ++-- .../tool/Doraemon/styles/input_editor.ts | 7 +- .../tool/Doraemon/styles/results_list.ts | 13 ++-- .../tool/Doraemon/styles/suggest_icon.ts | 6 +- .../tool/Doraemon/styles/thread_select_bar.ts | 3 +- .../tool/Drawer/Content/DesktopView.js | 2 +- .../tool/Drawer/Content/MobileView.js | 2 +- src/containers/tool/Drawer/styles/add_on.ts | 5 +- .../tool/Drawer/styles/header/close_line.ts | 6 +- src/containers/tool/Drawer/styles/index.ts | 29 ++++++-- .../tool/FavoritesCats/styles/editor.ts | 3 +- .../tool/FavoritesCats/styles/setter.ts | 3 +- src/containers/tool/JoinModal/styles/index.ts | 7 +- src/containers/tool/MailBox/styles/index.ts | 11 +-- .../ArticleFooter/styles/actions/index.ts | 15 ++-- .../ArticleFooter/styles/author_info/index.ts | 7 +- .../unit/ArticleFooter/styles/index.ts | 7 +- .../unit/ArticleFooter/styles/tag_list.ts | 2 +- .../ArticleViewerHeader/styles/reaction.ts | 3 +- .../Comments/styles/comment/delete_mask.ts | 3 +- .../Comments/styles/comment/desktop_view.ts | 2 +- .../styles/comment/mobile_view/index.ts | 2 +- .../unit/Comments/styles/comment/up_info.ts | 2 +- .../unit/Comments/styles/comment_editor.ts | 5 +- .../unit/Comments/styles/comments_filter.ts | 11 +-- .../unit/Comments/styles/words_counter.ts | 2 +- .../Footer/styles/desktop_view/brief_view.ts | 4 +- .../desktop_view/digest_view/contact_bar.ts | 2 +- .../styles/desktop_view/digest_view/index.ts | 8 ++- src/containers/unit/Footer/styles/index.ts | 8 ++- .../styles/desktop_view/community_view.ts | 30 +++++--- src/containers/unit/Header/styles/index.ts | 8 ++- .../unit/Header/styles/user_account.ts | 7 +- src/containers/unit/Labeler/styles/options.ts | 3 +- .../unit/ModeLine/TopBar/DesktopView.js | 4 +- .../TopBar/MobileView/ArticleBar/index.js | 4 +- .../TopBar/MobileView/CommunityBar/index.js | 4 +- src/containers/unit/ModeLine/index.tsx | 2 +- .../ModeLine/styles/bottom_bar/arrow_block.ts | 13 ++-- .../styles/bottom_bar/community_info.ts | 4 +- .../unit/ModeLine/styles/bottom_bar/index.ts | 14 ++-- .../ModeLine/styles/top_bar/desktop_view.ts | 17 ++--- .../top_bar/mobile_view/article_bar/index.ts | 7 +- .../mobile_view/community_bar/index.ts | 7 +- .../mobile_view/community_bar/tag_block.ts | 6 +- .../styles/filter_menu/content.ts | 9 +-- .../ModeLineMenu/styles/filter_menu/header.ts | 7 +- .../ModeLineMenu/styles/filter_menu/index.ts | 7 +- .../styles/filter_menu/sort_column/index.ts | 9 +-- .../styles/filter_menu/sort_column/options.ts | 7 +- .../styles/global_menu/home_navi.ts | 7 +- .../styles/global_menu/main_menu.ts | 7 +- .../unit/ModeLineMenu/styles/index.ts | 7 +- .../unit/ModeLineMenu/styles/more_menu.ts | 7 +- .../unit/ModeLineMenu/styles/navi_button.ts | 7 +- .../unit/ModeLineMenu/styles/search_menu.ts | 7 +- src/containers/unit/Sidebar/styles/footer.ts | 7 +- src/containers/unit/Sidebar/styles/header.ts | 6 +- src/containers/unit/Sidebar/styles/index.ts | 12 ++-- .../unit/Sidebar/styles/loading_blocks.ts | 7 +- .../unit/Sidebar/styles/menu_list/menu_bar.ts | 15 ++-- .../unit/Sidebar/styles/pull_button.ts | 2 +- .../unit/TagsBar/styles/card_view.ts | 5 +- .../TagsBar/styles/desktop_view/folder.ts | 4 +- .../TagsBar/styles/desktop_view/goback_tag.ts | 3 +- .../TagsBar/styles/desktop_view/tag_count.ts | 12 ++-- .../TagsBar/styles/desktop_view/tag_item.ts | 7 +- .../user/UserBilling/styles/upgrade_menu.ts | 2 +- .../user/UserBilling/styles/xxx_plan.ts | 4 +- .../styles/activities/brief_info.ts | 2 +- .../styles/activities/detail_info.ts | 4 +- .../user/UserProfile/styles/contribute_map.ts | 2 +- .../user/UserProfile/styles/index.ts | 7 +- .../styles/subscribed_communities.ts | 7 +- src/types/index.ts | 46 +++++++++++- utils/css/index.ts | 4 +- yarn.lock | 23 ++++-- 312 files changed, 1449 insertions(+), 996 deletions(-) rename src/components/Buttons/OrButton/{HorizontalButton.js => HorizontalButton.tsx} (50%) rename src/components/Img/{index.js => index.tsx} (58%) diff --git a/package.json b/package.json index 20ddc83cc..84cfea6f7 100644 --- a/package.json +++ b/package.json @@ -144,6 +144,7 @@ "@types/mocha": "^8.2.1", "@types/ramda": "^0.27.38", "@types/react": "^17.0.3", + "@types/styled-components": "^5.1.8", "@typescript-eslint/eslint-plugin": "^4.17.0", "@typescript-eslint/parser": "^4.17.0", "babel-eslint": "^10.0.2", @@ -161,7 +162,7 @@ "jest": "26.2.2", "npm-run-all": "^4.1.1", "plop": "2.7.4", - "prettier": "2.0.5", + "prettier": "2.2.1", "pretty-quick": "^1.10.0", "react-test-renderer": "16.10.0", "shelljs": "0.8.4", diff --git a/src/components/AlertBar/styles/index.ts b/src/components/AlertBar/styles/index.ts index cd814f4f8..d7aa920c8 100755 --- a/src/components/AlertBar/styles/index.ts +++ b/src/components/AlertBar/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' // import Img from '@/Img' // import { theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` font-size: 14px; font-variant: tabular-nums; line-height: 1.5; diff --git a/src/components/ArticleActionsPanel/styles/index.ts b/src/components/ArticleActionsPanel/styles/index.ts index 5b65e0708..35457dda0 100755 --- a/src/components/ArticleActionsPanel/styles/index.ts +++ b/src/components/ArticleActionsPanel/styles/index.ts @@ -9,7 +9,7 @@ export const Wrapper = styled.div` padding-left: 10px; padding-bottom: 0; ` -export const Option = styled.div` +export const Option = styled.div<{ red: boolean }>` ${css.flex('align-center')}; color: ${theme('banner.desc')}; margin-bottom: 8px; @@ -20,7 +20,11 @@ export const Option = styled.div` cursor: pointer; } ` -export const OptionIcon = styled(Img)` +type TOptionIcon = { + red: boolean + reverse: boolean +} +export const OptionIcon = styled(Img)` fill: ${theme('banner.desc')}; ${css.size(18)}; margin-right: 6px; diff --git a/src/components/ArticleEditToolbar/styles/copyright_selector.ts b/src/components/ArticleEditToolbar/styles/copyright_selector.ts index c53aaf8c6..1ed258df8 100755 --- a/src/components/ArticleEditToolbar/styles/copyright_selector.ts +++ b/src/components/ArticleEditToolbar/styles/copyright_selector.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' import Img from '@/Img' @@ -14,12 +15,12 @@ export const Selector = styled.div` color: ${theme('editor.title')}; } ` -export const CheckIcon = styled(Img)` +export const CheckIcon = styled(Img)` fill: ${theme('editor.content')}; ${css.size(18)}; margin-top: 2px; margin-left: 3px; - visibility: ${({ active }) => (active ? 'visiable' : 'hidden')}; + visibility: ${({ active }) => (active ? 'visible' : 'hidden')}; ` export const CheckText = styled.div` color: ${theme('editor.content')}; diff --git a/src/components/ArticleItemPrefixLabel/styles/index.ts b/src/components/ArticleItemPrefixLabel/styles/index.ts index 3b16d894a..42a6bab8a 100755 --- a/src/components/ArticleItemPrefixLabel/styles/index.ts +++ b/src/components/ArticleItemPrefixLabel/styles/index.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import { theme, css, pixelAdd } from '@/utils' import PinSVG from '@/SvgIcons/PinSVG' -export const ReadedLabel = styled.div` +export const ReadedLabel = styled.div<{ topOffset: string }>` background: ${theme('thread.articleDigest')}; width: 8px; height: 3px; diff --git a/src/components/AvatarsRow/styles/index.ts b/src/components/AvatarsRow/styles/index.ts index dafba48ea..fc1615bee 100755 --- a/src/components/AvatarsRow/styles/index.ts +++ b/src/components/AvatarsRow/styles/index.ts @@ -6,7 +6,7 @@ import { theme, css } from '@/utils' import ImgFallback from '@/components/ImgFallback' import { getLiSize, getAvatarSize, getUlMarginRight } from './metric' -export const Wrapper = styled.ul` +export const Wrapper = styled.ul<{ total: number }>` ${css.flex('align-center')}; flex-direction: row-reverse; list-style-type: none; @@ -15,7 +15,8 @@ export const Wrapper = styled.ul` margin-right: ${({ total }) => getUlMarginRight(total)}; ` // height: 49px; -const BaseAvatarItem = styled.li` +type TBaseAvatarItem = { size: string; noHoverMargin: string } +const BaseAvatarItem = styled.li` margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: relative; @@ -44,7 +45,7 @@ export const AvatarsItem = styled(BaseAvatarItem)` export const TotalOneOffset = styled.span` margin-right: 10px; ` -export const AvatarsImg = styled(Img)` +export const AvatarsImg = styled(Img)<{ size: string }>` border: 2px solid; border-color: ${theme('thread.commentsUserBorder')}; border-radius: 100px 100px 100px 100px; @@ -59,7 +60,8 @@ export const AvatarsImg = styled(Img)` text-align: center; ` -export const AvatarsMore = styled.span` +type TAvatarsMore = { size: string; total: number } +export const AvatarsMore = styled.span` ${css.flex('align-both')}; font-size: 14px; border-color: #113744; diff --git a/src/components/AvatarsRow/styles/more_item.ts b/src/components/AvatarsRow/styles/more_item.ts index 0dbc2a234..5f69405b1 100644 --- a/src/components/AvatarsRow/styles/more_item.ts +++ b/src/components/AvatarsRow/styles/more_item.ts @@ -5,7 +5,7 @@ import { css, theme } from '@/utils' import { Wrapper as BaseWrapper, AvatarsMore } from './index' import { getAvatarSize, getMoreTextWidth } from './metric' -const BaseAvatarItem = styled.li` +const BaseAvatarItem = styled.li<{ size: string }>` margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: relative; @@ -21,7 +21,8 @@ const BaseAvatarItem = styled.li` export const Wrapper = styled(BaseAvatarItem)` ${css.media.mobile`display: none`}; ` -export const NumbersMore = styled(AvatarsMore)` +type TNumbersMore = { size: string; total: number } +export const NumbersMore = styled(AvatarsMore)` height: ${({ size }) => getAvatarSize(size)}; width: ${({ total }) => getMoreTextWidth(total)}; font-weight: 400; diff --git a/src/components/Buttons/OrButton/HorizontalButton.js b/src/components/Buttons/OrButton/HorizontalButton.tsx similarity index 50% rename from src/components/Buttons/OrButton/HorizontalButton.js rename to src/components/Buttons/OrButton/HorizontalButton.tsx index f42fb5a41..d4319c2ac 100644 --- a/src/components/Buttons/OrButton/HorizontalButton.js +++ b/src/components/Buttons/OrButton/HorizontalButton.tsx @@ -1,7 +1,7 @@ import React from 'react' -import T from 'prop-types' import { SIZE } from '@/constant' +import { TButtonSize } from '@/types' import { Wrapper, @@ -10,8 +10,22 @@ import { RightButton, } from '../styles/or_button/horizontal_button' -// const OrButton = ({ children, onClick, size }) => { -const HorizontalButton = ({ onClick, size, activeKey, group }) => { +type TProps = { + activeKey: string + size?: TButtonSize + onClick: (key: string) => void + group: { + key: string + title: string + }[] +} + +const HorizontalButton: React.FC = ({ + onClick, + size = SIZE.SMALL as TButtonSize, + activeKey, + group, +}) => { return ( { ) } -HorizontalButton.propTypes = { - size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]), - onClick: T.func, - activeKey: T.string, - group: T.arrayOf( - T.shape({ - key: T.string, - title: T.string, - }), - ), -} - -HorizontalButton.defaultProps = { - // children: 'Button', - size: SIZE.MEDIUM, - // eslint-disable-next-line no-console - onClick: console.log, - activeKey: 'hello', - group: [ - { - key: 'hello', - title: 'hello', - }, - { - key: 'cps', - title: 'cps', - }, - ], -} - export default HorizontalButton diff --git a/src/components/Buttons/styles/arrow_button.ts b/src/components/Buttons/styles/arrow_button.ts index 20d05e9ae..063ffd070 100755 --- a/src/components/Buttons/styles/arrow_button.ts +++ b/src/components/Buttons/styles/arrow_button.ts @@ -11,7 +11,13 @@ import { getSimpleMargin, } from './metircs/arrow_button' -export const Wrapper = styled.div` +type TWrapper = { + disabled: boolean + dimWhenIdle: boolean + size: string + width: number +} +export const Wrapper = styled.div` ${css.flex('align-center')}; opacity: ${({ dimWhenIdle, disabled }) => dimWhenIdle || disabled ? '0.65' : 1}; @@ -23,18 +29,19 @@ export const Wrapper = styled.div` } transition: all 0.25s; ` -export const Text = styled.div` +export const Text = styled.div<{ size: string }>` font-size: ${({ size }) => getFontSize(size)}; color: #327ca1; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)<{ size: string }>` fill: #327ca1; width: ${({ size }) => getIconSize(size)}; height: ${({ size }) => getIconSize(size)}; display: block; transition: all 0.2s; ` -export const LeftIcon = styled(Icon)` +type TIcon = { size: string; arrowStyle: string; disabled: boolean } +export const LeftIcon = styled(Icon)` margin-right: ${({ size, arrowStyle }) => arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)}; @@ -51,7 +58,7 @@ export const LeftIcon = styled(Icon)` fill: #327ca1; } ` -export const RightIcon = styled(Icon)` +export const RightIcon = styled(Icon)` margin-left: ${({ size, arrowStyle }) => arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)}; diff --git a/src/components/Buttons/styles/arrow_link.ts b/src/components/Buttons/styles/arrow_link.ts index 4913d8b6f..ff0ba243e 100644 --- a/src/components/Buttons/styles/arrow_link.ts +++ b/src/components/Buttons/styles/arrow_link.ts @@ -12,7 +12,8 @@ export const Wrapper = styled.a` transition: all 0.25s; ` -export const Text = styled.div` +type TText = { hoverColor: string; size: string } +export const Text = styled.div` color: ${({ color }) => color || theme('thread.articleDigest')}; font-size: ${({ size }) => getTextSize(size)}; @@ -21,7 +22,8 @@ export const Text = styled.div` visibility: visible; } ` -const Icon = styled(Img)` +type TIcon = { color: string; size: string } +const Icon = styled(Img)` fill: ${({ color }) => color || theme('thread.articleDigest')}; width: ${({ size }) => getIconSize(size)}; height: ${({ size }) => getIconSize(size)}; @@ -29,7 +31,7 @@ const Icon = styled(Img)` transition: all 0.2s; opacity: 0.8; ` -export const RightIcon = styled(Icon)` +export const RightIcon = styled(Icon)<{ hoverColor: string }>` transform: rotate(180deg); margin-left: 6px; visibility: hidden; diff --git a/src/components/Buttons/styles/button.ts b/src/components/Buttons/styles/button.ts index 80f8380c8..74ead49b8 100644 --- a/src/components/Buttons/styles/button.ts +++ b/src/components/Buttons/styles/button.ts @@ -2,6 +2,7 @@ import styled from 'styled-components' import { lighten } from 'polished' import { css, theme } from '@/utils' +import { TButtonSize, TButton } from '@/types' import { getColor, @@ -12,7 +13,7 @@ import { getFontSize, } from './metircs/button' -export const Wrapper = styled.button` +export const Wrapper = styled.button` ${css.flex('align-both')}; -webkit-appearance: button; outline: none; @@ -66,21 +67,21 @@ export const Wrapper = styled.button` opacity: 1; } ` -export const ChildrenWrapper = styled.div` +export const ChildrenWrapper = styled.div<{ size: TButtonSize }>` ${css.flex('align-both')}; font-size: ${({ size }) => getFontSize(size)}; position: relative; z-index: 2; ` -export const RealChildren = styled.div` +export const RealChildren = styled.div<{ loading: boolean }>` ${css.flex('align-both')}; opacity: ${({ loading }) => (loading ? 0 : 1)}; ` -export const LoadingText = styled.div` +export const LoadingText = styled.div<{ loading: boolean }>` opacity: ${({ loading }) => (!loading ? 0 : 1)}; position: absolute; ` -export const LoadingMask = styled.div` +export const LoadingMask = styled.div<{ width: string }>` position: absolute; width: ${({ width }) => width}; height: 100%; diff --git a/src/components/Buttons/styles/dropdown_button/option_panel.ts b/src/components/Buttons/styles/dropdown_button/option_panel.ts index 68ae917a1..4dface858 100644 --- a/src/components/Buttons/styles/dropdown_button/option_panel.ts +++ b/src/components/Buttons/styles/dropdown_button/option_panel.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ panelMinWidth: string }>` ${css.flexColumn()}; width: 100%; min-width: ${({ panelMinWidth }) => panelMinWidth}; @@ -34,12 +34,12 @@ export const IconWrapper = styled.div` ${css.flex('justify-center')}; width: 28px; ` -export const Icon = styled(Img)` +/* width: ${({ bigger }) => (bigger ? '24px' : '18px')}; + height: ${({ bigger }) => (bigger ? '24px' : '18px')}; */ +export const Icon = styled(Img)<{ index: number }>` fill: ${theme('button.primary')}; ${css.size(16)}; margin-top: 4px; - /* width: ${({ bigger }) => (bigger ? '24px' : '18px')}; - height: ${({ bigger }) => (bigger ? '24px' : '18px')}; */ display: block; opacity: ${({ index }) => (index === 0 ? 1 : 0)}; diff --git a/src/components/Buttons/styles/follow_button/index.ts b/src/components/Buttons/styles/follow_button/index.ts index 1fb6fac4f..bec3e5917 100644 --- a/src/components/Buttons/styles/follow_button/index.ts +++ b/src/components/Buttons/styles/follow_button/index.ts @@ -23,7 +23,7 @@ export const Popinfo = styled.div` padding: 5px 8px; ` -export const LoadingIcon = styled(BtnIcon)` +export const LoadingIcon = styled(BtnIcon)<{ light: boolean }>` fill: ${({ light }) => light ? theme('button.fg') : theme('thread.articleTitle')}; diff --git a/src/components/Buttons/styles/notify_button/index.ts b/src/components/Buttons/styles/notify_button/index.ts index 96861597d..2dd01a2a6 100644 --- a/src/components/Buttons/styles/notify_button/index.ts +++ b/src/components/Buttons/styles/notify_button/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn()}; ` export const Main = styled.div` @@ -26,7 +27,7 @@ export const NotifyOffIcon = styled(NotifyIcon)` fill: ${theme('thread.articleTitle')}; } ` -export const Title = styled.div` +export const Title = styled.div<{ active: boolean }>` color: ${({ active }) => active ? theme('thread.articleTitle') : theme('thread.articleDigest')}; font-size: 13px; diff --git a/src/components/Buttons/styles/or_button/horizontal_button.ts b/src/components/Buttons/styles/or_button/horizontal_button.ts index 6d0bfbc4a..27f6b1054 100644 --- a/src/components/Buttons/styles/or_button/horizontal_button.ts +++ b/src/components/Buttons/styles/or_button/horizontal_button.ts @@ -1,16 +1,17 @@ import styled from 'styled-components' // import { lighten } from 'polished' +import { TButton, TButtonSize } from '@/types' import { theme, css } from '@/utils' import { Wrapper as BaseBtnWrapper } from '../button' import { OrSignBase } from './index' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ size: TButtonSize }>` ${css.flex('align-center')}; position: relative; ` -const BaseButton = styled(BaseBtnWrapper)` +const BaseButton = styled(BaseBtnWrapper)` ${css.flex('align-both')}; width: 50%; color: ${({ active }) => (active ? theme('button.fg') : '#99b9bf')}; @@ -26,14 +27,14 @@ const BaseButton = styled(BaseBtnWrapper)` active ? theme('button.hoverBg') : '#065061'}; } ` -export const LeftButton = styled(BaseButton)` +export const LeftButton = styled(BaseButton)` border-top-right-radius: 0; border-bottom-right-radius: 0; /* border-color: #024250; */ ` export const OrSign = styled(OrSignBase)`` -export const RightButton = styled(BaseButton)` +export const RightButton = styled(BaseButton)` border-color: #024250; margin-left: 3px; border-top-left-radius: 0; diff --git a/src/components/Buttons/styles/or_button/vertical_button.ts b/src/components/Buttons/styles/or_button/vertical_button.ts index f3462937f..4ebcfeff8 100644 --- a/src/components/Buttons/styles/or_button/vertical_button.ts +++ b/src/components/Buttons/styles/or_button/vertical_button.ts @@ -1,6 +1,7 @@ import styled from 'styled-components' // import { lighten } from 'polished' +import { TActive } from '@/types' import { css, theme } from '@/utils' import { Wrapper as BaseBtnWrapper } from '../button' @@ -10,7 +11,7 @@ export const Wrapper = styled.div` ${css.flexColumn('align-center')}; position: relative; ` -const BaseButton = styled(BaseBtnWrapper)` +const BaseButton = styled(BaseBtnWrapper)` ${css.flexColumn('align-both')}; width: 32px; min-height: 70px; diff --git a/src/components/BuyMeChuanChuan/styles/chuan_selector.ts b/src/components/BuyMeChuanChuan/styles/chuan_selector.ts index 5ca185378..f4ab322bf 100755 --- a/src/components/BuyMeChuanChuan/styles/chuan_selector.ts +++ b/src/components/BuyMeChuanChuan/styles/chuan_selector.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { animate, theme, css } from '@/utils' import Img from '@/Img' @@ -38,7 +39,7 @@ export const By = styled.div` margin-left: -10px; ` -export const Circle = styled.div` +export const Circle = styled.div` ${css.flex('align-both')}; ${css.circle(38)}; border: 1px solid; diff --git a/src/components/Charger/styles/index.ts b/src/components/Charger/styles/index.ts index 97a20650b..aeeab9b02 100755 --- a/src/components/Charger/styles/index.ts +++ b/src/components/Charger/styles/index.ts @@ -1,5 +1,6 @@ import styled, { css as styledCss, keyframes } from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' @@ -105,9 +106,9 @@ const liquid2Rule = styledCss` ${liquid2} ${DURATION} infinite; ` -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` text-align: center; position: relative; height: 28px; diff --git a/src/components/Checker/styles/index.ts b/src/components/Checker/styles/index.ts index 61183d058..22969e388 100755 --- a/src/components/Checker/styles/index.ts +++ b/src/components/Checker/styles/index.ts @@ -1,15 +1,18 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' import { getIconSize, getFontSize, getBorderRadius } from './metric' -export const Wrapper = styled.div` +type TItem = { checked: boolean; size: string } + +export const Wrapper = styled.div` ${css.flex('align-center')}; - visibility: ${({ show }) => (show ? 'visiable' : 'hidden')}; + visibility: ${({ show }) => (show ? 'visible' : 'hidden')}; ` -export const IconWrapper = styled.div` +export const IconWrapper = styled.div` position: relative; background: ${({ checked }) => (checked ? '#114759' : '#00262F')}; width: ${({ size }) => getIconSize(size)}; @@ -22,7 +25,7 @@ export const IconWrapper = styled.div` transition: all 0.2s; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` position: absolute; fill: #327faf; display: ${({ checked }) => (checked ? 'block' : 'none')}; @@ -32,7 +35,7 @@ export const Icon = styled(Img)` left: -1px; cursor: pointer; ` -export const ChildWrapper = styled.div` +export const ChildWrapper = styled.div` color: ${theme('thread.articleDigest')}; opacity: ${({ checked }) => (checked ? 1 : 0.9)}; font-size: ${({ size }) => getFontSize(size)}; diff --git a/src/components/CollapseMenu/styles/group.ts b/src/components/CollapseMenu/styles/group.ts index 46afb4f75..d7c5c53b4 100644 --- a/src/components/CollapseMenu/styles/group.ts +++ b/src/components/CollapseMenu/styles/group.ts @@ -16,7 +16,7 @@ export const Header = styled.div` /* opacity: 0.65; */ } ` -export const ArrowIcon = styled(Img)` +export const ArrowIcon = styled(Img)<{ isOpen: boolean }>` fill: ${theme('tags.text')}; ${css.size(16)}; opacity: 0.5; @@ -38,7 +38,7 @@ export const Title = styled.div` opacity: 0.65; } ` -export const Content = styled.div` +export const Content = styled.div<{ isOpen: boolean }>` display: ${({ isOpen }) => (isOpen ? 'block' : 'none')}; width: 100%; margin-bottom: 15px; diff --git a/src/components/CollapseMenu/styles/index.ts b/src/components/CollapseMenu/styles/index.ts index 46afb4f75..d7c5c53b4 100755 --- a/src/components/CollapseMenu/styles/index.ts +++ b/src/components/CollapseMenu/styles/index.ts @@ -16,7 +16,7 @@ export const Header = styled.div` /* opacity: 0.65; */ } ` -export const ArrowIcon = styled(Img)` +export const ArrowIcon = styled(Img)<{ isOpen: boolean }>` fill: ${theme('tags.text')}; ${css.size(16)}; opacity: 0.5; @@ -38,7 +38,7 @@ export const Title = styled.div` opacity: 0.65; } ` -export const Content = styled.div` +export const Content = styled.div<{ isOpen: boolean }>` display: ${({ isOpen }) => (isOpen ? 'block' : 'none')}; width: 100%; margin-bottom: 15px; diff --git a/src/components/CollapseMenu/styles/item.ts b/src/components/CollapseMenu/styles/item.ts index 060401801..8666c3a9b 100644 --- a/src/components/CollapseMenu/styles/item.ts +++ b/src/components/CollapseMenu/styles/item.ts @@ -1,8 +1,9 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div` ${css.flex('align-center')}; margin-bottom: 3px; padding: 5px; @@ -12,7 +13,7 @@ export const Wrapper = styled.div` background: ${({ active }) => (!active ? 'transparent' : '#0e303d')}; ` -export const Title = styled.div` +export const Title = styled.div` color: ${theme('tags.text')}; ${css.cutFrom('200px')}; font-size: 14px; diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts index dedbe3878..4f407281d 100755 --- a/src/components/Common/index.ts +++ b/src/components/Common/index.ts @@ -1,10 +1,12 @@ import styled from 'styled-components' -export const Br = styled.div` +import { TSpace } from '@/types' + +export const Br = styled.div` margin-top: ${({ top }) => `${top}px` || 0}; margin-bottom: ${({ bottom }) => `${bottom}px` || 0}; ` -export const Space = styled.span` +export const Space = styled.span` margin-left: ${({ left }) => `${left}px` || 0}; margin-right: ${({ right }) => `${right}px` || 0}; ` diff --git a/src/components/CommunityFaceLogo/styles/index.ts b/src/components/CommunityFaceLogo/styles/index.ts index 0c53e0bb3..6416c7e95 100755 --- a/src/components/CommunityFaceLogo/styles/index.ts +++ b/src/components/CommunityFaceLogo/styles/index.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import { theme } from '@/utils' import Img from '@/Img' -export const Logo = styled(Img)` +export const Logo = styled(Img)<{ nonFill: boolean }>` fill: ${({ nonFill }) => (nonFill ? '' : theme('banner.desc'))}; display: block; ` diff --git a/src/components/CommunityList/styles/index.ts b/src/components/CommunityList/styles/index.ts index c05946eb6..dbba1e7a4 100755 --- a/src/components/CommunityList/styles/index.ts +++ b/src/components/CommunityList/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TSpace } from '@/types' import { css, theme } from '@/utils' import Img from '@/Img' @@ -7,7 +8,7 @@ export const Wrapper = styled.div` ${css.flex('align-center')}; flex-wrap: wrap; ` -export const Linker = styled.a` +export const Linker = styled.a` margin-bottom: ${({ bottom }) => `${bottom}px`}; margin-right: ${({ right }) => `${right}px`}; display: block; @@ -15,7 +16,7 @@ export const Linker = styled.a` text-decoration: underline; } ` -export const Logo = styled(Img)` +export const Logo = styled(Img)<{ size: string }>` fill: ${theme('thread.articleTitle')}; width: ${({ size }) => `${size}px`}; height: ${({ size }) => `${size}px`}; @@ -41,7 +42,8 @@ export const PopCommunityDesc = styled.div` color: ${theme('thread.articleDigest')}; font-size: 0.8rem; ` -export const MoreWrapper = styled.div` +type TMoreWrapper = TSpace & { size: string } +export const MoreWrapper = styled.div` ${css.flex('align-center')} color: ${theme('thread.articleDigest')}; width: ${({ size }) => size}; diff --git a/src/components/CommunityStatesPad/styles/index.ts b/src/components/CommunityStatesPad/styles/index.ts index 56427d4d8..423bd67c8 100755 --- a/src/components/CommunityStatesPad/styles/index.ts +++ b/src/components/CommunityStatesPad/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' // import Img from '@/Img' import { theme, css } from '@/utils' @@ -10,7 +11,8 @@ export const Wrapper = styled.div` margin-top: -4px; `}; ` -export const NumberSection = styled.div` +type TNumberSection = TActive & { readOnly: boolean } +export const NumberSection = styled.div` ${css.flexColumn('align-end')}; background-color: ${({ active }) => active ? theme('banner.numberHoverBg') : ''}; @@ -26,7 +28,7 @@ export const NumberSection = styled.div` export const ContentSection = styled(NumberSection)` ${css.media.mobile`display: none`}; ` -export const VolunteerSection = styled(NumberSection)` +export const VolunteerSection = styled(NumberSection)<{ alignCenter: boolean }>` align-items: ${({ alignCenter }) => (alignCenter ? 'center' : 'flex-end')}; ${css.media.mobile`display: none`}; ` @@ -34,8 +36,9 @@ export const ChargeSection = styled(NumberSection)` ${css.flexColumn('align-center', 'justify-between')}; ${css.media.mobile`display: none`}; ` +type TNumberTitle = { small: boolean; readOnly: boolean } // text-decoration: ${({ readOnly }) => (readOnly ? '' : 'underline')}; -export const NumberTitle = styled.div` +export const NumberTitle = styled.div` color: ${theme('banner.numberDesc')}; font-size: ${({ small }) => (small ? '11px' : '12px')}; margin-top: ${({ small }) => (small ? '4px' : '0')}; diff --git a/src/components/CommunityStatesPad/styles/number_group.ts b/src/components/CommunityStatesPad/styles/number_group.ts index 11940c926..06f061e2a 100644 --- a/src/components/CommunityStatesPad/styles/number_group.ts +++ b/src/components/CommunityStatesPad/styles/number_group.ts @@ -24,7 +24,7 @@ export const PlusSign = styled.div` margin-right: 2px; ` // text-decoration: ${({ readOnly }) => (readOnly ? '' : 'underline')}; -export const NumberItem = styled.div` +export const NumberItem = styled.div<{ readOnly: boolean }>` font-size: 16px; color: ${theme('banner.number')}; &:hover { diff --git a/src/components/ContentBanner/styles/reaction_numbers.ts b/src/components/ContentBanner/styles/reaction_numbers.ts index 369b88b80..faa0a57d5 100755 --- a/src/components/ContentBanner/styles/reaction_numbers.ts +++ b/src/components/ContentBanner/styles/reaction_numbers.ts @@ -10,7 +10,7 @@ export const NumbersInfo = styled(NumbersWrapper)` margin-top: 0; ` // background: ${theme('banner.numberHoverBg')}; -export const NumberSection = styled.div` +export const NumberSection = styled.div<{ readOnly: boolean }>` ${css.flexColumn('justify-center')}; padding: 0 5px; @@ -22,7 +22,7 @@ export const NumberSection = styled.div` cursor: ${({ readOnly }) => (readOnly ? '' : 'pointer')}; } ` -export const NumberTitle = styled.div` +export const NumberTitle = styled.div<{ readOnly: boolean }>` color: ${theme('banner.numberDesc')}; text-align: center; &:hover { @@ -31,7 +31,7 @@ export const NumberTitle = styled.div` animation: ${animate.pulse} 0.4s linear; } ` -export const NumberItem = styled.div` +export const NumberItem = styled.div<{ readOnly: boolean }>` font-size: 1.5rem; text-align: center; diff --git a/src/components/ContentFilter/styles/filter_result.ts b/src/components/ContentFilter/styles/filter_result.ts index c4924f3b7..459f131bd 100755 --- a/src/components/ContentFilter/styles/filter_result.ts +++ b/src/components/ContentFilter/styles/filter_result.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' export const Wrapper = styled.div` @@ -18,7 +19,7 @@ export const ResultDivider = styled.div` export const MoreOptionWrapper = styled.div` ${css.flex('align-center')}; ` -export const FaqText = styled.div` +export const FaqText = styled.div` background-color: #104456; border-radius: 3px; padding: 0 6px; diff --git a/src/components/ContentFilter/styles/index.ts b/src/components/ContentFilter/styles/index.ts index f0e52549a..c20436c1d 100755 --- a/src/components/ContentFilter/styles/index.ts +++ b/src/components/ContentFilter/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' import Img from '@/Img' @@ -32,7 +33,7 @@ export const LabelDivider = styled.div` margin-bottom: 10px; opacity: 0.6; ` -export const SelectIcon = styled(Img)` +export const SelectIcon = styled(Img)<{ reverse: boolean }>` fill: ${theme('banner.title')}; ${css.size(15)}; align-items: center; @@ -45,11 +46,11 @@ export const SelectTitle = styled.div` font-weight: bold; width: 80%; ` -export const LeftAlignWrapper = styled.div` +export const LeftAlignWrapper = styled.div<{ offset: string }>` text-align: left; margin-left: ${({ offset }) => offset || 0}; ` -export const SelectItem = styled.div` +export const SelectItem = styled.div` font-size: 0.9rem; margin-bottom: 10px; color: ${({ active }) => (active ? theme('font') : theme('banner.desc'))}; diff --git a/src/components/ContentFilter/styles/selected_tags.ts b/src/components/ContentFilter/styles/selected_tags.ts index 934c39190..97ae254e2 100755 --- a/src/components/ContentFilter/styles/selected_tags.ts +++ b/src/components/ContentFilter/styles/selected_tags.ts @@ -10,6 +10,6 @@ export const Wrapper = styled.div` margin-top: -1px; max-width: 80%; ` -export const TagWrapper = styled.div` +export const TagWrapper = styled.div<{ margin: boolean }>` margin-bottom: ${({ margin }) => (margin ? '5px' : 0)}; ` diff --git a/src/components/ContentSourceCard/styles/desktop_view.ts b/src/components/ContentSourceCard/styles/desktop_view.ts index 9021d578f..959b9822e 100644 --- a/src/components/ContentSourceCard/styles/desktop_view.ts +++ b/src/components/ContentSourceCard/styles/desktop_view.ts @@ -14,7 +14,7 @@ export const Title = styled.div` color: ${theme('thread.articleTitle')}; font-size: 1em; ` -export const Desc = styled.div` +export const Desc = styled.div<{ column: boolean }>` ${css.flex()}; margin-top: 15px; margin-bottom: 20px; diff --git a/src/components/ContentSourceCard/styles/mobile_view.ts b/src/components/ContentSourceCard/styles/mobile_view.ts index a94169fc9..82926c8c2 100644 --- a/src/components/ContentSourceCard/styles/mobile_view.ts +++ b/src/components/ContentSourceCard/styles/mobile_view.ts @@ -15,7 +15,7 @@ export const Title = styled.div` color: ${theme('thread.articleTitle')}; font-size: 14px; ` -export const Desc = styled.div` +export const Desc = styled.div<{ column: boolean }>` ${css.flex()}; margin-top: 10px; margin-bottom: 10px; diff --git a/src/components/CrashErrorHint/styles/index.ts b/src/components/CrashErrorHint/styles/index.ts index ea0c88da8..1629db3bd 100755 --- a/src/components/CrashErrorHint/styles/index.ts +++ b/src/components/CrashErrorHint/styles/index.ts @@ -1,14 +1,19 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme, themeSkins } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type TThemeName = { + t: string +} + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-center', 'justify-between')}; height: 100vh; width: 100%; - color: #6B7F83; + color: #6b7f83; background: #072d3a; /* background: ${theme('thread.bg')}; */ @@ -21,22 +26,22 @@ export const HintIcon = styled.img` ${css.size(40)}; margin-right: 15px; ` -export const Title = styled.div` +export const Title = styled.div` font-size: 30px; color: ${({ t }) => themeSkins[t].thread.articleTitle}; padding-bottom: 12px; ` -export const Desc = styled.p` +export const Desc = styled.p` color: ${({ t }) => themeSkins[t].baseColor.red}; ` -export const UL = styled.ul` +export const UL = styled.ul` margin-left: -22px; color: ${({ t }) => themeSkins[t].thread.articleDigest}; ` export const Li = styled.li` margin-top: 4px; ` -export const Action = styled.span` +export const Action = styled.span<{ t: string; noUnderline: boolean }>` color: ${({ t }) => themeSkins[t].link}; margin-left: 3px; margin-right: 3px; diff --git a/src/components/CustomScroller/styles/horizontal_scroller.ts b/src/components/CustomScroller/styles/horizontal_scroller.ts index 4428d55fe..4b90eeca5 100755 --- a/src/components/CustomScroller/styles/horizontal_scroller.ts +++ b/src/components/CustomScroller/styles/horizontal_scroller.ts @@ -5,7 +5,16 @@ import { css } from '@/utils' import { getShadowBackground, getShadowSize, getScrollbarThin } from './metrics' import { WrapperBase, ScrollWrapperBase, ShadowBarBase } from './index' -export const Wrapper = styled(WrapperBase)` +type TBar = { + showOnHover: boolean + barSize: string + withBorder: boolean + shadowSize: string + height: string + innerHeight: string +} + +export const Wrapper = styled(WrapperBase)<{ barSize: string }>` .os-theme-dark > .os-scrollbar-horizontal, .os-theme-light > .os-scrollbar-horizontal { height: ${({ barSize }) => @@ -14,14 +23,14 @@ export const Wrapper = styled(WrapperBase)` ` export const ScrollWrapper = styled(ScrollWrapperBase)`` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ innerHeight: string }>` ${css.flex()}; width: 100%; height: ${({ innerHeight }) => innerHeight}; box-sizing: content-box; ` -const ShadowBar = styled(ShadowBarBase)` +const ShadowBar = styled(ShadowBarBase)` top: 1%; height: ${({ height }) => `calc(${height} - 2%)`}; width: ${({ shadowSize }) => getShadowSize(shadowSize)}; diff --git a/src/components/CustomScroller/styles/index.ts b/src/components/CustomScroller/styles/index.ts index ed3cdaaca..639c6092d 100755 --- a/src/components/CustomScroller/styles/index.ts +++ b/src/components/CustomScroller/styles/index.ts @@ -1,8 +1,10 @@ import styled from 'styled-components' +import { TActive } from '@/types' // import { getShadowWidth } from './helpers' -export const WrapperBase = styled.div` +type TBox = { width: string; height: string } +export const WrapperBase = styled.div` width: ${({ width }) => width}; height: ${({ height }) => height}; ` @@ -10,7 +12,7 @@ export const ScrollWrapperBase = styled.div` width: 100%; height: 100%; ` -export const ShadowBarBase = styled.div` +export const ShadowBarBase = styled.div` position: absolute; z-index: 1; opacity: 0; diff --git a/src/components/CustomScroller/styles/vertical_scroller.ts b/src/components/CustomScroller/styles/vertical_scroller.ts index f35add401..74ccd914c 100755 --- a/src/components/CustomScroller/styles/vertical_scroller.ts +++ b/src/components/CustomScroller/styles/vertical_scroller.ts @@ -4,7 +4,13 @@ import styled from 'styled-components' import { WrapperBase, ScrollWrapperBase, ShadowBarBase } from './index' import { getShadowBackground, getShadowSize, getScrollbarThin } from './metrics' -export const Wrapper = styled(WrapperBase)` +type TBar = { + showOnHover: boolean + barSize: string + withBorder: boolean + shadowSize: string +} +export const Wrapper = styled(WrapperBase)` position: relative; .os-host:not(:hover) { @@ -18,7 +24,7 @@ export const Wrapper = styled(WrapperBase)` } ` export const ScrollWrapper = styled(ScrollWrapperBase)`` -const ShadowBar = styled(ShadowBarBase)` +const ShadowBar = styled(ShadowBarBase)` left: 0px; height: ${({ shadowSize }) => getShadowSize(shadowSize)}; width: 100%; diff --git a/src/components/DigestSentence/styles/index.ts b/src/components/DigestSentence/styles/index.ts index 10ce5676e..04e0a4869 100755 --- a/src/components/DigestSentence/styles/index.ts +++ b/src/components/DigestSentence/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable, TSpace } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` color: ${theme('thread.articleDigest')}; font-size: 13px; diff --git a/src/components/DivideText/styles/index.ts b/src/components/DivideText/styles/index.ts index 82e792516..bec60b8ed 100755 --- a/src/components/DivideText/styles/index.ts +++ b/src/components/DivideText/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' // import Img from '@/Img' import { css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; width: 100%; ` diff --git a/src/components/DotDivider/styles/index.ts b/src/components/DotDivider/styles/index.ts index 3a0d90c68..4b44042f5 100755 --- a/src/components/DotDivider/styles/index.ts +++ b/src/components/DotDivider/styles/index.ts @@ -1,7 +1,8 @@ import styled from 'styled-components' import { theme } from '@/utils' -export const Wrapper = styled.div` +type TDot = { radius: string; space: string } +export const Wrapper = styled.div` width: ${({ radius }) => `${radius}px`}; height: ${({ radius }) => `${radius}px`}; border-radius: 100%; diff --git a/src/components/Dropdown/styles/index.ts b/src/components/Dropdown/styles/index.ts index 1b0fec53a..692183dc9 100755 --- a/src/components/Dropdown/styles/index.ts +++ b/src/components/Dropdown/styles/index.ts @@ -3,7 +3,8 @@ import styled from 'styled-components' import Img from '@/Img' import { theme, css } from '@/utils' -export const Wrapper = styled.div` +type TSize = { size: string } +export const Wrapper = styled.div` ${css.flex()}; font-size: ${({ size }) => size}; background: ${theme('dropdown.bg')}; @@ -13,7 +14,7 @@ export const Wrapper = styled.div` ` // export const Title = styled.div`` -export const IconWrapper = styled.span` +export const IconWrapper = styled.span` ${css.flex('align-center')}; max-width: 0; ${Wrapper}:hover & { @@ -23,7 +24,7 @@ export const IconWrapper = styled.span` transition: all 0.3s; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` fill: ${theme('thread.articleTitle')}; display: block; width: ${({ size }) => size}; diff --git a/src/components/EmailSubscriber/styles/default_layout/index.ts b/src/components/EmailSubscriber/styles/default_layout/index.ts index 63a6ca2ee..6172612b1 100644 --- a/src/components/EmailSubscriber/styles/default_layout/index.ts +++ b/src/components/EmailSubscriber/styles/default_layout/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('justify-center')}; position: relative; width: 100%; diff --git a/src/components/EmailSubscriber/styles/email_hint_icon.ts b/src/components/EmailSubscriber/styles/email_hint_icon.ts index 4650fb5a7..ba71d48a4 100644 --- a/src/components/EmailSubscriber/styles/email_hint_icon.ts +++ b/src/components/EmailSubscriber/styles/email_hint_icon.ts @@ -1,13 +1,14 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { theme, css, animate } from '@/utils' import { Wrapper as ParentWrapper } from './index' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; ` export const MailIcon = styled(Img)` diff --git a/src/components/EmailSubscriber/styles/index.ts b/src/components/EmailSubscriber/styles/index.ts index 61419c1d5..0eeaef18f 100755 --- a/src/components/EmailSubscriber/styles/index.ts +++ b/src/components/EmailSubscriber/styles/index.ts @@ -1,6 +1,9 @@ import styled from 'styled-components' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))`` +import { TTestable } from '@/types' + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))`` + export const holder = 1 diff --git a/src/components/EmailSubscriber/styles/simple_layout.ts b/src/components/EmailSubscriber/styles/simple_layout.ts index d01c46139..3243d960c 100644 --- a/src/components/EmailSubscriber/styles/simple_layout.ts +++ b/src/components/EmailSubscriber/styles/simple_layout.ts @@ -1,12 +1,13 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import Input from '@/components/Input' import { css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; background: #022a34; border-radius: 10px; diff --git a/src/components/EmptyLabel/styles/index.ts b/src/components/EmptyLabel/styles/index.ts index a33d61a9d..8a0823881 100755 --- a/src/components/EmptyLabel/styles/index.ts +++ b/src/components/EmptyLabel/styles/index.ts @@ -9,12 +9,12 @@ export const Wrapper = styled.div` color: ${theme('banner.desc')}; height: 200px; ` -export const Title = styled.div` +export const Title = styled.div<{ size: string }>` margin-top: 10px; font-size: ${({ size }) => (size === 'default' ? '1rem' : '1.2rem;')}; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)<{ size: string }>` fill: ${theme('banner.desc')}; width: ${({ size }) => (size === 'default' ? '70px' : '100px')}; height: ${({ size }) => (size === 'default' ? '70px' : '100px')}; diff --git a/src/components/ErrorPage/index.tsx b/src/components/ErrorPage/index.tsx index cbf73d228..15c1a9eaa 100755 --- a/src/components/ErrorPage/index.tsx +++ b/src/components/ErrorPage/index.tsx @@ -68,7 +68,7 @@ const ErrorPage: React.FC = ({ {errorCode === 404 ? ( ) : ( - 服务器发生错误 + 服务器发生错误 )} diff --git a/src/components/ErrorPage/styles/code_snippets.ts b/src/components/ErrorPage/styles/code_snippets.ts index 32e68f5c9..0cf571821 100644 --- a/src/components/ErrorPage/styles/code_snippets.ts +++ b/src/components/ErrorPage/styles/code_snippets.ts @@ -1,17 +1,18 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme, css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start')}; color: ${theme('thread.articleTitle')}; line-height: 24px; font-size: 15px; opacity: 0.8; ` -export const Indent = styled.div` +export const Indent = styled.div<{ errorBg: string }>` position: relative; margin-left: ${({ errorBg }) => (errorBg ? '0' : '15px')}; background: ${({ errorBg }) => (errorBg ? '#653227' : 'transparent')}; diff --git a/src/components/ErrorPage/styles/index.ts b/src/components/ErrorPage/styles/index.ts index 0a32f1c01..fa5fd6610 100755 --- a/src/components/ErrorPage/styles/index.ts +++ b/src/components/ErrorPage/styles/index.ts @@ -2,28 +2,29 @@ import styled from 'styled-components' import { theme, css } from '@/utils' +import { TTestable } from '@/types' import Img from '@/Img' // import PromptIcon from '@/components/PromptIcon' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-center', 'justify-between')}; height: 100vh; width: 100%; z-index: 1; // background: ${theme('banner.bg')}; - background: rgba(0,59,74, 0.5); + background: rgba(0, 59, 74, 0.5); ` -export const LogoWrapper = styled.a.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const LogoWrapper = styled.a.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; margin-top: 20px; margin-left: 20px; text-decoration: none; ` -export const SiteLogo = styled(Img)` +export const SiteLogo = styled(Img)<{ src: string }>` ${css.size(20)}; fill: ${theme('thread.articleTitle')}; margin-bottom: 5px; @@ -42,9 +43,9 @@ export const TextWrapper = styled.div` margin-top: 80px; margin-left: 115px; ` -export const HintTitle = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const HintTitle = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` color: ${theme('thread.articleTitle')}; text-align: center; font-size: 16px; diff --git a/src/components/ErrorPage/styles/spin_planet.ts b/src/components/ErrorPage/styles/spin_planet.ts index 96e40bfbb..96e9daef2 100644 --- a/src/components/ErrorPage/styles/spin_planet.ts +++ b/src/components/ErrorPage/styles/spin_planet.ts @@ -1,14 +1,15 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { animate } from '@/utils' // import Img from '@/Img' // import PromptIcon from '@/components/PromptIcon' // see prototype in https://codepen.io/wwwebneko/pen/EyVbNe?__cf_chl_jschl_tk__=ea42fea4f3c12831123e6fa4871dc371d884b80f-1605582431-0-AaCbC_IecQcmQJpGB6rg-2q9uxuSjlmFbcwTbWrygu5jSC4fR6LX5l9MIHgbof5AmzFauO0FLQ-L1S9PZh6cdIEobYpUeQvMiWSXIuSZCAfF6BNN08alDBF-232m6NnwzRfU1nF3s8xRfJa0e5e0X8PKBdyDtttVkr8HC1XwZejcBIGKqT7-RoK_PWgLxNGbwAbIeCrgi3xU72sZ3ArdGEaq55Pgk6IAstRXuqm-4gY8eQNa1VAsH7GPsuWgoP5ooQRAaBPyDMaEPDcoLZMNqe7PePPNx9E-N4F_gTA7ERZFLLZEHk32dH-QCkPO4Dy-ewLmmRz4tGpSZYxYZW9b87JVGRL10Lk3R8H4QOsx3b3UcllTeXWtLX5ojMwWwqtdmRDCN2g6gB5-m5ic445Gkwg -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; width: 125px; height: 125px; diff --git a/src/components/ExpandIcon/styles/index.ts b/src/components/ExpandIcon/styles/index.ts index abf00930c..9f53c9d7c 100755 --- a/src/components/ExpandIcon/styles/index.ts +++ b/src/components/ExpandIcon/styles/index.ts @@ -1,7 +1,9 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' + import { getNormalColor, getActiveColor, @@ -10,9 +12,22 @@ import { getNormalIconSize, } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type TIcon = { + active: boolean + type: string + size: string +} + +type TText = { + active: boolean + type: string + size: string + hideTextOnInit: boolean +} + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; /* margin-left: 12px; */ cursor: pointer; @@ -30,7 +45,7 @@ export const Wrapper = styled.div.attrs((props) => ({ transition: all 0.25s; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` fill: ${({ active, type }) => active ? getActiveColor(type) : getNormalColor(type)}; display: block; @@ -50,7 +65,8 @@ export const Icon = styled(Img)` } transition: all 0.25s; ` -export const Text = styled.div` + +export const Text = styled.div` color: ${({ active, type }) => active ? getActiveColor(type) : getNormalColor(type)}; font-size: ${({ size }) => getNormalTextSize(size)}; diff --git a/src/components/FaqPeekList/index.js b/src/components/FaqPeekList/index.js index 65d486d4d..dd2695d15 100755 --- a/src/components/FaqPeekList/index.js +++ b/src/components/FaqPeekList/index.js @@ -52,18 +52,18 @@ const FaqPeekList = ({ active }) => { title="安装使用" items={items} onSelect={console.log} - mBottom={0} - mLeft={5} - mRight={24} + bottom={0} + left={5} + right={24} /> diff --git a/src/components/FaqPeekList/styles/index.ts b/src/components/FaqPeekList/styles/index.ts index 3ec5770b4..f0f03b8b8 100755 --- a/src/components/FaqPeekList/styles/index.ts +++ b/src/components/FaqPeekList/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; max-height: ${({ active }) => (active ? '220px' : '0')}; height: 220px; @@ -35,7 +36,7 @@ export const ArrowIcon = styled(Img)` width: 18px; transform: rotate(-90deg); ` -export const ContentWrapper = styled.div` +export const ContentWrapper = styled.div` display: ${({ active }) => (active ? 'flex' : 'none')}; align-items: center; justify-content: flex-start; diff --git a/src/components/FiltersMenu/styles/filter/index.ts b/src/components/FiltersMenu/styles/filter/index.ts index 23aea03ff..eeaec686f 100755 --- a/src/components/FiltersMenu/styles/filter/index.ts +++ b/src/components/FiltersMenu/styles/filter/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TActive } from '@/types' // import Img from '@/Img' import { css, theme } from '@/utils' const activeColor = '#009C9E' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ revert: boolean }>` ${css.flexColumn()}; align-items: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')}; color: ${theme('thread.articleDigest')}; @@ -12,7 +13,7 @@ export const Wrapper = styled.div` padding: 4px 6px; padding-top: 0; ` -export const RadioWrapper = styled.div` +export const RadioWrapper = styled.div<{ revert: boolean }>` ${css.flexColumn()}; align-items: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')}; margin-top: 5px; @@ -26,7 +27,7 @@ export const RadioItem = styled.div` cursor: pointer; } ` -export const ActiveDot = styled.div` +export const ActiveDot = styled.div` background: #27908f; width: 6px; height: 6px; @@ -37,7 +38,8 @@ export const ActiveDot = styled.div` opacity: ${({ active }) => (active ? 1 : 0)}; transition: opacity 0.25s; ` -export const RadioTitle = styled.div` +type TRadioTitle = TActive & { revert: boolean } +export const RadioTitle = styled.div` font-size: 13px; color: ${({ active }) => active ? activeColor : theme('thread.articleDigest')}; @@ -51,7 +53,7 @@ export const RadioTitle = styled.div` transition: all 0.25s; ` -export const Item = styled.div` +export const Item = styled.div<{ revert: boolean }>` ${css.flex('align-center')}; justify-content: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')}; width: 100%; diff --git a/src/components/FiltersMenu/styles/header.ts b/src/components/FiltersMenu/styles/header.ts index 6ed73ba63..942773404 100644 --- a/src/components/FiltersMenu/styles/header.ts +++ b/src/components/FiltersMenu/styles/header.ts @@ -1,16 +1,17 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center', 'justify-between')} width: 100%; margin-bottom: 8px; ` -export const Title = styled.div` +export const Title = styled.div` position: relative; color: ${theme('thread.articleTitle')}; font-size: 15px; @@ -31,7 +32,7 @@ export const Title = styled.div` export const OperatorsWrapper = styled.div` ${css.flex('align-center')}; ` -export const Operator = styled.div` +export const Operator = styled.div` display: ${({ show }) => (show ? 'block' : 'none')}; ` export const ResetIcon = styled(Img)` diff --git a/src/components/FiltersMenu/styles/index.ts b/src/components/FiltersMenu/styles/index.ts index 8434339d6..801de2dce 100755 --- a/src/components/FiltersMenu/styles/index.ts +++ b/src/components/FiltersMenu/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' @@ -7,7 +8,7 @@ export const Wrapper = styled.div` width: 100%; min-width: 110px; ` -export const ItemWrapper = styled.div` +export const ItemWrapper = styled.div<{ withDivider: boolean }>` ${css.flexColumn()}; border-bottom: ${({ withDivider }) => (withDivider ? '1px solid' : 'none')}; border-bottom-color: ${({ withDivider }) => @@ -17,7 +18,13 @@ export const ItemWrapper = styled.div` border-bottom: none; } ` -export const Item = styled.div` +type TItem = TActive & { + revert: boolean + noFilter: boolean + itemBgHighlight: boolean + topMargin: boolean +} +export const Item = styled.div` ${css.flex()}; justify-content: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')}; fill: ${theme('thread.articleDigest')}; @@ -39,7 +46,7 @@ export const Item = styled.div` } transition: margin-top 0.25s; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` opacity: ${({ active }) => (active ? 1 : 0)}; ${css.size(15)}; diff --git a/src/components/FocusLine/styles/index.ts b/src/components/FocusLine/styles/index.ts index 16b32f876..f1961887f 100755 --- a/src/components/FocusLine/styles/index.ts +++ b/src/components/FocusLine/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' import Img from '@/Img' @@ -13,7 +14,7 @@ export const TextWrapper = styled.div` align-items: baseline; ` export const Text = styled.div`` -export const Icon = styled(Img)` +export const Icon = styled(Img)` fill: ${theme('banner.desc')}; ${css.size(16)}; margin-right: 3px; diff --git a/src/components/Folder/styles/index.ts b/src/components/Folder/styles/index.ts index 0a82c020c..ebf41a609 100755 --- a/src/components/Folder/styles/index.ts +++ b/src/components/Folder/styles/index.ts @@ -1,13 +1,14 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' import { getWidth, getHeight } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; ${css.flexColumn()}; background-color: #004351; diff --git a/src/components/FormItem/styles/index.ts b/src/components/FormItem/styles/index.ts index f711b4d04..64d51311e 100755 --- a/src/components/FormItem/styles/index.ts +++ b/src/components/FormItem/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TSpace } from '@/types' import { theme, css } from '@/utils' import Input from '@/components/Input' // import Img from '@/Img' -export const Inputer = styled(Input)` +export const Inputer = styled(Input)<{ error: string }>` border-left: ${({ error }) => error === 'true' ? '3px solid !important' : ''}; border-right: ${({ error }) => @@ -16,7 +17,7 @@ export const Inputer = styled(Input)` error === 'true' ? theme('baseColor.red') : ''}; ` // TODO: ANTD-CHECK -export const TextAreaInput = styled(Input)` +export const TextAreaInput = styled(Input)<{ error: string }>` border-left: ${({ error }) => error === 'true' ? '3px solid !important' : ''}; border-right: ${({ error }) => @@ -27,12 +28,12 @@ export const TextAreaInput = styled(Input)` error === 'true' ? theme('baseColor.red') : ''}; ` -export const FormItemWrapper = styled.div` +export const FormItemWrapper = styled.div` ${css.flex()}; margin-bottom: ${({ bottom }) => `${bottom}px`}; width: 100%; ` -export const FormLabel = styled.div` +export const FormLabel = styled.div<{ error: boolean }>` font-size: 13px; color: ${({ error }) => error ? theme('baseColor.red') : theme('form.label')}; diff --git a/src/components/GalleryHub/styles/directory_gallery.ts b/src/components/GalleryHub/styles/directory_gallery.ts index d7a4a0bd7..3a3eb5022 100644 --- a/src/components/GalleryHub/styles/directory_gallery.ts +++ b/src/components/GalleryHub/styles/directory_gallery.ts @@ -9,7 +9,9 @@ export const Wrapper = styled.div` color: ${theme('thread.articleDigest')}; width: 100%; ` -export const Block = styled.div` + +type TBlock = { borderRight: boolean; borderTop: boolean; clickable: boolean } +export const Block = styled.div` ${css.flexColumn('justify-between')}; width: 25%; height: 230px; @@ -35,7 +37,7 @@ export const Block = styled.div` export const Header = styled.div` ${css.flexColumn()}; ` -export const IntroHead = styled.div` +export const IntroHead = styled.div<{ clickable: boolean }>` ${css.flex('align-center')}; &:hover { cursor: ${({ clickable }) => (clickable ? 'pointer' : 'normal')}; @@ -50,7 +52,7 @@ export const Title = styled.div` font-size: 18px; margin-left: 12px; ` -export const Footer = styled.div` +export const Footer = styled.div<{ clickable: boolean }>` ${css.flex('align-center', 'justify-between')}; &:hover { cursor: ${({ clickable }) => (clickable ? 'pointer' : 'normal')}; diff --git a/src/components/GalleryHub/styles/friends_gallery.ts b/src/components/GalleryHub/styles/friends_gallery.ts index 07879da00..ba370bac5 100644 --- a/src/components/GalleryHub/styles/friends_gallery.ts +++ b/src/components/GalleryHub/styles/friends_gallery.ts @@ -9,7 +9,7 @@ export const Wrapper = styled.div` color: ${theme('thread.articleDigest')}; width: 100%; ` -export const Block = styled.div` +export const Block = styled.div<{ column: number }>` ${css.flexColumn('justify-between')}; width: ${({ column }) => (column === 4 ? '25%' : '20%')}; max-width: 200px; diff --git a/src/components/GalleryHub/styles/image_gallery/index.ts b/src/components/GalleryHub/styles/image_gallery/index.ts index 2204ba686..37ac37bf1 100755 --- a/src/components/GalleryHub/styles/image_gallery/index.ts +++ b/src/components/GalleryHub/styles/image_gallery/index.ts @@ -13,7 +13,7 @@ export const WrapperBase = styled.div` color: ${theme('thread.articleDigest')}; width: 100%; ` -export const BlockBase = styled.div` +export const BlockBase = styled.div<{ borderTop: boolean }>` ${css.flexColumn('justify-between')}; width: 50%; height: auto; diff --git a/src/components/GalleryHub/styles/image_gallery/main_column_gallery.ts b/src/components/GalleryHub/styles/image_gallery/main_column_gallery.ts index 2dc20d0c4..f0f188253 100755 --- a/src/components/GalleryHub/styles/image_gallery/main_column_gallery.ts +++ b/src/components/GalleryHub/styles/image_gallery/main_column_gallery.ts @@ -38,7 +38,7 @@ export const SubImageWrapper = styled.div` flex-wrap: wrap; width: 412px; ` -export const SubImage = styled(ImageBase)` +export const SubImage = styled(ImageBase)<{ marginBottom: boolean }>` width: 200px; height: 208px; margin-left: 5px; diff --git a/src/components/GalleryHub/styles/people_gallery/card_header.ts b/src/components/GalleryHub/styles/people_gallery/card_header.ts index b92fdc599..c618df6bc 100644 --- a/src/components/GalleryHub/styles/people_gallery/card_header.ts +++ b/src/components/GalleryHub/styles/people_gallery/card_header.ts @@ -14,7 +14,7 @@ export const NationsWrapper = styled.div` transition: all 0.25s; ` -export const NationFlag = styled(Img)` +export const NationFlag = styled(Img)<{ marginRight: boolean }>` width: 16px; display: block; border-radius: 3px; diff --git a/src/components/GalleryHub/styles/people_gallery/index.ts b/src/components/GalleryHub/styles/people_gallery/index.ts index 18142ed88..d4e3f6457 100644 --- a/src/components/GalleryHub/styles/people_gallery/index.ts +++ b/src/components/GalleryHub/styles/people_gallery/index.ts @@ -2,7 +2,8 @@ import styled from 'styled-components' import { css } from '@/utils' -export const Block = styled.div` +type TBlock = { borderRight: boolean; borderTop: boolean } +export const Block = styled.div` ${css.flexColumn('justify-between')}; /* width: 25%; height: 308px; */ diff --git a/src/components/GalleryHub/styles/product_gallery.ts b/src/components/GalleryHub/styles/product_gallery.ts index 90e54d7d7..12b82ce6d 100755 --- a/src/components/GalleryHub/styles/product_gallery.ts +++ b/src/components/GalleryHub/styles/product_gallery.ts @@ -9,7 +9,8 @@ export const Wrapper = styled.div` color: ${theme('thread.articleDigest')}; width: 100%; ` -export const Block = styled.div` +type TBlock = { borderRight: boolean; borderTop: boolean } +export const Block = styled.div` ${css.flexColumn('justify-between')}; width: 33%; height: 230px; diff --git a/src/components/GalleryHub/styles/snippet_gallery.ts b/src/components/GalleryHub/styles/snippet_gallery.ts index a6c49be62..f7b3f1993 100644 --- a/src/components/GalleryHub/styles/snippet_gallery.ts +++ b/src/components/GalleryHub/styles/snippet_gallery.ts @@ -9,7 +9,8 @@ export const Wrapper = styled.div` color: ${theme('thread.articleDigest')}; width: 100%; ` -export const Block = styled.div` +type TBlock = { borderRight: boolean; borderTop: boolean } +export const Block = styled.div` ${css.flexColumn('justify-between')}; width: 33%; height: 300px; diff --git a/src/components/GalleryHub/styles/sponsor_gallery.ts b/src/components/GalleryHub/styles/sponsor_gallery.ts index 73f31c3b2..a078448ab 100755 --- a/src/components/GalleryHub/styles/sponsor_gallery.ts +++ b/src/components/GalleryHub/styles/sponsor_gallery.ts @@ -3,14 +3,15 @@ import styled from 'styled-components' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ center: boolean }>` ${css.flex()}; justify-content: ${({ center }) => (center ? 'center' : 'flex-start')}; flex-wrap: wrap; color: ${theme('thread.articleDigest')}; width: 100%; ` -export const Block = styled.div` +type TBlock = { level: string; column: number } +export const Block = styled.div` ${css.flexColumn('justify-between')}; width: ${({ column }) => (column === 3 ? '33%' : '25%')}; height: ${({ level }) => (level === 'gold' ? '280px' : '130px')}; @@ -46,7 +47,7 @@ export const IntroHead = styled.div` export const Icon = styled(Img)` ${css.circle(20)}; ` -export const Title = styled.div` +export const Title = styled.div<{ level: string }>` color: ${theme('thread.articleTitle')}; border-top: 1px solid; border-color: ${theme('thread.articleTitle')}; @@ -68,7 +69,7 @@ export const IntroImg = styled(Img)` display: block; filter: saturate(0.5); ` -export const Desc = styled.div` +export const Desc = styled.div<{ level: string }>` color: ${theme('thread.articleDigest')}; font-size: ${({ level }) => (level === 'gold' ? '14px' : '13px')}; cursor: pointer; diff --git a/src/components/GithubRepoPage/styles/index.ts b/src/components/GithubRepoPage/styles/index.ts index f10ddd859..fa9e1e8f9 100755 --- a/src/components/GithubRepoPage/styles/index.ts +++ b/src/components/GithubRepoPage/styles/index.ts @@ -1,9 +1,10 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css, animate } from '@/utils' import { Button } from '@/components/Buttons' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ updating: boolean }>` animation: ${({ updating }) => updating ? `${animate.breath} 1.2s linear infinite` : ''}; ` @@ -37,7 +38,7 @@ export const ReadmeWrapper = styled.div` margin-top: 20px; width: 100%; ` -export const Footer = styled.div` +export const Footer = styled.div` display: ${({ show }) => (show ? 'flex' : 'none')}; justify-content: center; margin-top: 30px; diff --git a/src/components/GithubRepoPage/styles/states_containers.ts b/src/components/GithubRepoPage/styles/states_containers.ts index f26630d80..9ea22d656 100755 --- a/src/components/GithubRepoPage/styles/states_containers.ts +++ b/src/components/GithubRepoPage/styles/states_containers.ts @@ -9,7 +9,8 @@ export const Wrapper = styled.div` margin-top: 15px; margin-bottom: 10px; ` -export const BoxWrapper = styled.div` +type TBox = { grow: boolean; nomargin: boolean; nohover: boolean } +export const BoxWrapper = styled.div` ${css.flexColumn('justify-evenly')}; align-items: center; flex-grow: ${({ grow }) => (grow ? 1 : 0)}; @@ -36,7 +37,7 @@ export const Label = styled.div` } transition: color 0.2s; ` -export const Number = styled.div` +export const Number = styled.div<{ small: string }>` font-size: ${({ small }) => (small ? '0.8rem' : '1.3rem')}; color: ${theme('banner.title')}; ` diff --git a/src/components/GotoTop/styles/index.ts b/src/components/GotoTop/styles/index.ts index 9cbe0342d..9caf1fbf7 100755 --- a/src/components/GotoTop/styles/index.ts +++ b/src/components/GotoTop/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-both')}; ${css.size(30)}; position: relative; diff --git a/src/components/IconText/styles/index.ts b/src/components/IconText/styles/index.ts index b0210d00c..6a834dda1 100755 --- a/src/components/IconText/styles/index.ts +++ b/src/components/IconText/styles/index.ts @@ -1,16 +1,23 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' import { getIconSize, getTextSize, getMargin } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type TIcon = { + size: string + margin: string + round: string +} + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` fill: ${theme('thread.articleDigest')}; width: ${({ size }) => getIconSize(size)}; height: ${({ size }) => getIconSize(size)}; @@ -18,7 +25,7 @@ export const Icon = styled(Img)` display: block; border-radius: ${({ round }) => (round ? '100%' : '0')}; ` -export const Text = styled.div` +export const Text = styled.div<{ size: string }>` ${css.flex('align-center')}; color: ${theme('thread.articleDigest')}; font-size: ${({ size }) => getTextSize(size)}; diff --git a/src/components/Img/index.js b/src/components/Img/index.tsx similarity index 58% rename from src/components/Img/index.js rename to src/components/Img/index.tsx index b956e85ba..3f64dd1ee 100755 --- a/src/components/Img/index.js +++ b/src/components/Img/index.tsx @@ -6,7 +6,6 @@ */ import React from 'react' -import T from 'prop-types' import { ReactSVG } from 'react-svg' import { buildLog } from '@/utils' @@ -17,15 +16,28 @@ import LazyLoadImg from './LazyLoadImg' /* eslint-disable-next-line */ const log = buildLog('c:Img') -const Img = ({ - className, +type IProps = { + src: string + alt?: string + className?: string + loading?: boolean + fallback?: React.ReactNode | null + noLazy?: boolean + scrollPosition?: any + // see https://www.npmjs.com/package/react-lazy-load-image-component + visibleByDefault?: boolean + onClick?: () => void +} + +const Img: React.FC = ({ + className = 'img-class', src, - alt, + alt = 'img', loading, - fallback, - noLazy, - scrollPosition, - visibleByDefault, + fallback = null, + noLazy = false, + scrollPosition = null, + visibleByDefault = false, onClick, }) => { if (/\.(svg)$/i.test(src)) { @@ -67,28 +79,28 @@ const Img = ({ ) } -Img.propTypes = { - src: T.string.isRequired, - alt: T.string, - className: T.string, - loading: T.any, - fallback: T.oneOfType([T.node, T.instanceOf(null)]), - noLazy: T.bool, - scrollPosition: T.any, - // see https://www.npmjs.com/package/react-lazy-load-image-component - visibleByDefault: T.bool, - onClick: T.func, -} +// Img.propTypes = { +// src: T.string.isRequired, +// alt: T.string, +// className: T.string, +// loading: T.any, +// fallback: T.oneOfType([T.node, T.instanceOf(null)]), +// noLazy: T.bool, +// scrollPosition: T.any, +// // see https://www.npmjs.com/package/react-lazy-load-image-component +// visibleByDefault: T.bool, +// onClick: T.func, +// } -Img.defaultProps = { - alt: 'img', - className: 'img-class', - loading: null, - fallback: null, - noLazy: false, - scrollPosition: null, - visibleByDefault: false, - onClick: log, -} +// Img.defaultProps = { +// alt: 'img', +// className: 'img-class', +// loading: null, +// fallback: null, +// noLazy: false, +// scrollPosition: null, +// visibleByDefault: false, +// onClick: log, +// } export default React.memo(Img) diff --git a/src/components/Img/styles/index.ts b/src/components/Img/styles/index.ts index a6f75e78b..4a6a15b7e 100644 --- a/src/components/Img/styles/index.ts +++ b/src/components/Img/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -export const Image = styled.img` +export const Image = styled.img<{ loaded: boolean }>` position: ${({ loaded }) => (loaded ? 'relative' : 'absolute')}; opacity: ${({ loaded }) => (loaded ? 1 : 0)}; z-index: ${({ loaded }) => (loaded ? 1 : -1)}; diff --git a/src/components/ImgFallback/styles/avatar.ts b/src/components/ImgFallback/styles/avatar.ts index ffaa1cc1a..97169790a 100644 --- a/src/components/ImgFallback/styles/avatar.ts +++ b/src/components/ImgFallback/styles/avatar.ts @@ -1,12 +1,17 @@ import styled from 'styled-components' -// import Img from '@/Img' +import { TTestable, TSpace } from '@/types' import { css, theme } from '@/utils' import { getFontSize } from './metric/avatar' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type IWrapper = TSpace & { + size: string + quote: string +} + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-both')}; color: ${theme('thread.articleTitle')}; width: ${({ size }) => `${size}px`}; @@ -22,7 +27,7 @@ export const Wrapper = styled.div.attrs((props) => ({ border: ${({ quote }) => (quote ? '2px solid' : 'none')}; border-color: ${({ quote }) => (quote ? theme('avatar.quote') : 'none')}; ` -export const Name = styled.div` +export const Name = styled.div<{ size: number }>` font-family: 'Audiowide', cursive; font-size: ${({ size }) => getFontSize(size)}; ` diff --git a/src/components/ImgFallback/styles/index.ts b/src/components/ImgFallback/styles/index.ts index 6b28e2d43..7f578db3d 100755 --- a/src/components/ImgFallback/styles/index.ts +++ b/src/components/ImgFallback/styles/index.ts @@ -1,9 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' // import Img from '@/Img' // import { theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))`` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))`` + export const Title = styled.div`` diff --git a/src/components/ImgFallback/styles/work.ts b/src/components/ImgFallback/styles/work.ts index 0f4a1a096..ca5e48ef4 100644 --- a/src/components/ImgFallback/styles/work.ts +++ b/src/components/ImgFallback/styles/work.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable, TSpace } from '@/types' // import Img from '@/Img' import { css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-center', 'justify-between')}; width: 70px; height: 70px; diff --git a/src/components/InlineTags/styles/index.ts b/src/components/InlineTags/styles/index.ts index f56f31900..550a9704e 100755 --- a/src/components/InlineTags/styles/index.ts +++ b/src/components/InlineTags/styles/index.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import HashTagSVG from '@/SvgIcons/HashTagSVG' import { theme, css } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ marginLeft: boolean }>` ${css.flex()}; align-items: flex-end; margin-left: ${({ marginLeft }) => (marginLeft ? '8px' : 0)}; diff --git a/src/components/Input/styles/index.ts b/src/components/Input/styles/index.ts index 35a44b8cb..c2738dfc4 100755 --- a/src/components/Input/styles/index.ts +++ b/src/components/Input/styles/index.ts @@ -1,15 +1,21 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type IInput = { + hasPrefix: boolean + hasSuffix: boolean +} + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; width: 100%; ` -const AddOn = styled.div` +const AddOn = styled.div` position: absolute; top: 0; ${css.flex('align-both')}; @@ -24,7 +30,7 @@ export const PrefixWrapper = styled(AddOn)` export const SuffixWrapper = styled(AddOn)` right: 0; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` fill: ${({ active }) => active ? theme('button.primary') : theme('thread.articleDigest')}; ${css.size(14)}; @@ -52,7 +58,7 @@ export const baseInput = ` transition: all 0.25s; -webkit-appearance: none; ` -export const InputWrapper = styled.input` +export const InputWrapper = styled.input` ${baseInput}; padding: 4px 11px; height: 36px; diff --git a/src/components/Input/styles/textarea.ts b/src/components/Input/styles/textarea.ts index 5c674ed82..4286cfdf0 100644 --- a/src/components/Input/styles/textarea.ts +++ b/src/components/Input/styles/textarea.ts @@ -1,13 +1,16 @@ import styled from 'styled-components' import TextareaAutosize from 'react-textarea-autosize' +import { TTestable } from '@/types' import { theme } from '@/utils' import { baseInput } from './index' -export const Wrapper = styled(TextareaAutosize).attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled(TextareaAutosize).attrs( + ({ testid }: TTestable) => ({ + 'data-test-id': testid, + }), +)` ${baseInput}; background-color: #0b2631; border: 1px solid; diff --git a/src/components/JobItem/styles/index.ts b/src/components/JobItem/styles/index.ts index d74751c77..aa704fd5d 100755 --- a/src/components/JobItem/styles/index.ts +++ b/src/components/JobItem/styles/index.ts @@ -3,7 +3,8 @@ import styled from 'styled-components' // import Img from '@/Img' import { theme, css } from '@/utils' -export const Wrapper = styled.article` +type TWrapper = { opacity: number; divider: boolean } +export const Wrapper = styled.article` ${css.flex('align-start')}; position: relative; diff --git a/src/components/LinksCard/index.js b/src/components/LinksCard/index.js index cccb2ad3e..03e897f24 100755 --- a/src/components/LinksCard/index.js +++ b/src/components/LinksCard/index.js @@ -17,17 +17,9 @@ import { Wrapper, Header, Title, ListWrapper, MoreWrapper } from './styles' /* eslint-disable-next-line */ const log = buildLog('c:LinksCard:index') -const LinksCard = ({ - testid, - title, - items, - onSelect, - mLeft, - mRight, - mBottom, -}) => { +const LinksCard = ({ testid, title, items, onSelect, left, right, bottom }) => { return ( - +
{title}
@@ -61,9 +53,9 @@ LinksCard.propTypes = { }), ), onSelect: T.func.isRequired, - mLeft: T.number, - mRight: T.number, - mBottom: T.number, + left: T.number, + right: T.number, + bottom: T.number, } LinksCard.defaultProps = { @@ -71,9 +63,9 @@ LinksCard.defaultProps = { title: '', items: [], - mLeft: 14, - mRight: 12, - mBottom: 40, + left: 14, + right: 12, + bottom: 40, } export default React.memo(LinksCard) diff --git a/src/components/LinksCard/styles/index.ts b/src/components/LinksCard/styles/index.ts index f76ce5638..a9e048c13 100755 --- a/src/components/LinksCard/styles/index.ts +++ b/src/components/LinksCard/styles/index.ts @@ -1,15 +1,16 @@ import styled from 'styled-components' +import { TSpace } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div` width: 280px; min-height: 180px; border-radius: 5px; padding: 10px; - margin-left: ${({ mLeft }) => `${mLeft}px`}; - margin-right: ${({ mRight }) => `${mRight}px`}; - margin-bottom: ${({ mBottom }) => `${mBottom}px`}; + margin-left: ${({ left }) => `${left}px`}; + margin-right: ${({ right }) => `${right}px`}; + margin-bottom: ${({ bottom }) => `${bottom}px`}; /* border-bottom: 1px solid #0f4556; */ ` export const Header = styled.div`` diff --git a/src/components/Modal/styles/index.ts b/src/components/Modal/styles/index.ts index a9777e446..8b1bab9b3 100755 --- a/src/components/Modal/styles/index.ts +++ b/src/components/Modal/styles/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, animate, css } from '@/utils' import Img from '@/Img' // display: ${props => (props.show ? 'block' : 'none')}; -export const Mask = styled.div` +export const Mask = styled.div` position: fixed; overflow: auto; top: 0; @@ -15,7 +16,13 @@ export const Mask = styled.div` display: ${({ show }) => (show ? 'block' : 'none')}; ` -export const Wrapper = styled.div` +type TWrapper = { + background: string + width: string + mode: string + offsetTop: string +} +export const Wrapper = styled.div` position: relative; background-color: ${({ background }) => background === 'default' ? theme('modal.bg') : theme('drawer.bg')}; @@ -42,7 +49,8 @@ export const ChildrenWrapper = styled.div` height: auto; overflow-y: scroll; ` -export const CloseBtn = styled(Img)` +type TCloseBtn = TActive & { mode: string } +export const CloseBtn = styled(Img)` fill: ${({ mode }) => mode === 'default' ? theme('font') : theme('baseColor.red')}; position: absolute; diff --git a/src/components/NaviCatalog/styles/dashboard.ts b/src/components/NaviCatalog/styles/dashboard.ts index a6549ea74..39ed86566 100644 --- a/src/components/NaviCatalog/styles/dashboard.ts +++ b/src/components/NaviCatalog/styles/dashboard.ts @@ -20,7 +20,9 @@ const CatalogCard = styled.div` border-bottom-right-radius: 10px; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 2%); ` -export const ParentCatalogCard = styled(CatalogCard)` +type TParentCatalogCard = { index: number; isFirst: boolean; isLast: boolean } + +export const ParentCatalogCard = styled(CatalogCard)` z-index: ${({ index }) => 100 - index}; height: ${({ isFirst }) => (isFirst ? '36px' : '46px')}; margin-top: ${({ isFirst }) => (isFirst ? '0' : '-10px')}; diff --git a/src/components/NaviCatalog/styles/header.ts b/src/components/NaviCatalog/styles/header.ts index 296b12f9e..76887535c 100644 --- a/src/components/NaviCatalog/styles/header.ts +++ b/src/components/NaviCatalog/styles/header.ts @@ -1,18 +1,19 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' const activeColor = '#009C9E' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center', 'justify-between')} width: 100%; margin-bottom: 8px; ` -export const Title = styled.div` +export const Title = styled.div` position: relative; color: ${({ active }) => active ? activeColor : theme('thread.articleTitle')}; @@ -22,7 +23,7 @@ export const Title = styled.div` export const OperatorsWrapper = styled.div` ${css.flex('align-center')}; ` -export const Operator = styled.div` +export const Operator = styled.div` display: ${({ show }) => (show ? 'block' : 'none')}; margin-left: 6px; ` diff --git a/src/components/NaviCatalog/styles/index.ts b/src/components/NaviCatalog/styles/index.ts index f0df3416a..e4d2815a7 100755 --- a/src/components/NaviCatalog/styles/index.ts +++ b/src/components/NaviCatalog/styles/index.ts @@ -1,18 +1,22 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' import { WIDTH } from './metric' +type TItem = TActive & { withDivider: boolean } + const activeColor = '#009C9E' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` width: ${WIDTH}; ` -export const Item = styled.div` + +export const Item = styled.div` ${css.flex('justify-end')}; fill: ${theme('thread.articleDigest')}; align-items: center; @@ -45,7 +49,7 @@ export const FixedIcon = styled(Img)` ${css.size(14)}; margin-right: 5px; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` display: ${({ active }) => (active ? 'block' : 'none')}; fill: ${({ active }) => active ? activeColor : theme('thread.articleDigest')}; diff --git a/src/components/NaviCatalog/styles/list/index.ts b/src/components/NaviCatalog/styles/list/index.ts index c0a92e8f9..0617664f4 100644 --- a/src/components/NaviCatalog/styles/list/index.ts +++ b/src/components/NaviCatalog/styles/list/index.ts @@ -1,13 +1,16 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' const activeColor = '#009C9E' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type TItem = TActive & { withDivider: boolean; isRootMenu?: boolean } + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` padding-bottom: 10px; /* childMenu style */ @@ -17,7 +20,7 @@ export const Wrapper = styled.div.attrs((props) => ({ border-color: ${({ isRootMenu }) => (isRootMenu ? 'none' : '#09303e')}; margin-top: ${({ isRootMenu }) => (isRootMenu ? '0' : '-8px')}; ` -export const Item = styled.div` +export const Item = styled.div` ${css.flex('justify-end')}; fill: ${theme('thread.articleDigest')}; align-items: center; @@ -51,7 +54,7 @@ export const FixedIcon = styled(Img)` ${css.size(13)}; margin-right: 8px; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` display: ${({ active }) => (active ? 'block' : 'none')}; fill: ${({ active }) => active ? activeColor : theme('thread.articleDigest')}; @@ -62,14 +65,14 @@ export const Icon = styled(Img)` display: block; } ` -export const ActiveDot = styled.div` +export const ActiveDot = styled.div` display: ${({ active }) => (active ? 'block' : 'none')}; background: ${activeColor}; width: 5px; height: 5px; border-radius: 50%; ` -export const TotalNumber = styled.div` +export const TotalNumber = styled.div` font-size: 11px; color: ${({ active }) => active ? activeColor : theme('thread.articleDigest')}; diff --git a/src/components/NaviIntro/styles/index.ts b/src/components/NaviIntro/styles/index.ts index 13ca94a4b..cf39704b7 100755 --- a/src/components/NaviIntro/styles/index.ts +++ b/src/components/NaviIntro/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; margin-bottom: 15px; padding-bottom: 18px; diff --git a/src/components/Navigator/styles/index.ts b/src/components/Navigator/styles/index.ts index a3bfb8747..791a4acee 100755 --- a/src/components/Navigator/styles/index.ts +++ b/src/components/Navigator/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { animate, theme, css } from '@/utils' import CommunityFaceLogo from '@/components/CommunityFaceLogo' @@ -61,7 +62,7 @@ export const UL = styled.ul` clear: both; } ` -export const LI = styled.li` +export const LI = styled.li` float: left; padding: 0 5px; min-width: 15%; diff --git a/src/components/Navigator/styles/main_entries.ts b/src/components/Navigator/styles/main_entries.ts index bfc2b00a9..6086f687f 100755 --- a/src/components/Navigator/styles/main_entries.ts +++ b/src/components/Navigator/styles/main_entries.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import { theme, css } from '@/utils' import Img from '@/Img' import DotDividerBase from '@/components/DotDivider' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ type: string }>` ${css.flex('align-center')}; margin-left: ${({ type }) => (type === 'brief' ? '5px' : '10px')}; @@ -19,9 +20,9 @@ export const DotDivider = styled(DotDividerBase)` width: 4px; height: 4px; ` -export const SiteLink = styled.a.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const SiteLink = styled.a.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; color: ${({ active }) => active ? theme('banner.title') : theme('banner.desc')}; diff --git a/src/components/Navigator/styles/more_panel/index.ts b/src/components/Navigator/styles/more_panel/index.ts index 528b90f0a..a1877659e 100755 --- a/src/components/Navigator/styles/more_panel/index.ts +++ b/src/components/Navigator/styles/more_panel/index.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import { theme, css } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ mobile: boolean }>` ${css.flexColumn('align-center')}; width: ${({ mobile }) => (!mobile ? '455px' : '100%')}; min-height: 300px; @@ -14,7 +14,7 @@ export const BodyWrapper = styled.div` flex-wrap: wrap; margin-top: 25px; ` -export const Entry = styled.div` +export const Entry = styled.div<{ mobile: boolean }>` ${css.flexColumn('align-start')}; width: ${({ mobile }) => (!mobile ? '225px' : '48%')}; height: 75px; @@ -28,7 +28,7 @@ export const Main = styled.a` ${css.flex('align-start')}; text-decoration: none; ` -export const Title = styled.div` +export const Title = styled.div<{ offset: string }>` ${css.flex('align-center')}; color: ${theme('thread.articleTitle')}; font-weight: bold; diff --git a/src/components/Navigator/styles/more_panel/mobile_view.ts b/src/components/Navigator/styles/more_panel/mobile_view.ts index 21c353062..cc66727bd 100644 --- a/src/components/Navigator/styles/more_panel/mobile_view.ts +++ b/src/components/Navigator/styles/more_panel/mobile_view.ts @@ -16,7 +16,7 @@ export const BodyWrapper = styled.div` ${css.flex('align-center')}; flex-wrap: wrap; ` -export const Entry = styled(EntryBase)` +export const Entry = styled(EntryBase)<{ index: number }>` ${css.flex('align-center')}; width: 48%; height: auto; diff --git a/src/components/Pagi/styles/index.ts b/src/components/Pagi/styles/index.ts index ac84cc001..da7f2690d 100755 --- a/src/components/Pagi/styles/index.ts +++ b/src/components/Pagi/styles/index.ts @@ -1,9 +1,13 @@ import styled from 'styled-components' +import { TSpace } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div` +type TMargin = { + margin: TSpace +} +export const Wrapper = styled.div` ${css.flex('align-center', 'justify-between')}; color: #196780; height: 60px; diff --git a/src/components/Pagi/styles/next/bottom.ts b/src/components/Pagi/styles/next/bottom.ts index 32cecfe26..a5dd4ea37 100755 --- a/src/components/Pagi/styles/next/bottom.ts +++ b/src/components/Pagi/styles/next/bottom.ts @@ -4,7 +4,7 @@ import { css } from '@/utils' import { CommonNavi, CommonHint, CommonBottomArrowIcon } from '../index' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ disabled: boolean }>` ${css.flex('align-end')}; color: #196780; @@ -25,7 +25,7 @@ export const Icon = styled(CommonBottomArrowIcon)` fill: #327faf; } ` -export const NaviInfo = styled.div` +export const NaviInfo = styled.div<{ disabled: boolean }>` ${css.flexColumn('align-end')}; margin-right: 10px; diff --git a/src/components/Pagi/styles/next/center.ts b/src/components/Pagi/styles/next/center.ts index 83fc86635..7d69fa11b 100755 --- a/src/components/Pagi/styles/next/center.ts +++ b/src/components/Pagi/styles/next/center.ts @@ -4,7 +4,7 @@ import { css } from '@/utils' import { CommonNavi, CommonHint, CommonCenterArrowIcon } from '../index' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ disabled: boolean }>` ${css.flex('align-center')}; color: #196780; @@ -19,7 +19,7 @@ export const Icon = styled(CommonCenterArrowIcon)` fill: #327faf; } ` -export const NaviInfo = styled.div` +export const NaviInfo = styled.div<{ disabled: boolean }>` ${css.flexColumn('align-center')}; margin-right: 10px; diff --git a/src/components/Pagi/styles/perv/bottom.ts b/src/components/Pagi/styles/perv/bottom.ts index 1cc63743a..5a0a7d2ab 100755 --- a/src/components/Pagi/styles/perv/bottom.ts +++ b/src/components/Pagi/styles/perv/bottom.ts @@ -4,7 +4,7 @@ import { css } from '@/utils' import { CommonNavi, CommonHint, CommonBottomArrowIcon } from '../index' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ disabled: boolean }>` ${css.flex('align-end', 'justify-end')}; color: #196780; @@ -24,7 +24,7 @@ export const Icon = styled(CommonBottomArrowIcon)` fill: #327faf; } ` -export const NaviInfo = styled.div` +export const NaviInfo = styled.div<{ disabled: boolean }>` ${css.flexColumn('align-start')}; margin-left: 8px; diff --git a/src/components/Pagi/styles/perv/center.ts b/src/components/Pagi/styles/perv/center.ts index 8936deb63..c36814435 100755 --- a/src/components/Pagi/styles/perv/center.ts +++ b/src/components/Pagi/styles/perv/center.ts @@ -4,7 +4,7 @@ import { css } from '@/utils' import { CommonNavi, CommonHint, CommonCenterArrowIcon } from '../index' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ disabled: boolean }>` ${css.flex('align-center')}; color: #196780; @@ -21,7 +21,7 @@ export const Icon = styled(CommonCenterArrowIcon)` } ` -export const NaviInfo = styled.div` +export const NaviInfo = styled.div<{ disabled: boolean }>` ${css.flexColumn('align-center')}; margin-left: 10px; ${Wrapper}:hover & { diff --git a/src/components/PostItem/styles/digest_view/body.ts b/src/components/PostItem/styles/digest_view/body.ts index b91b92bec..a8a068189 100644 --- a/src/components/PostItem/styles/digest_view/body.ts +++ b/src/components/PostItem/styles/digest_view/body.ts @@ -44,7 +44,7 @@ export const ViewsIcon = styled(Img)` margin-right: 3px; ` -export const ActiveItemWrapper = styled.div` +export const ActiveItemWrapper = styled.div<{ hasComments: string }>` position: absolute; top: ${({ hasComments }) => (hasComments ? '5px' : '-24px')}; right: 0; diff --git a/src/components/PostItem/styles/index.ts b/src/components/PostItem/styles/index.ts index 9b1673afc..107918243 100755 --- a/src/components/PostItem/styles/index.ts +++ b/src/components/PostItem/styles/index.ts @@ -1,10 +1,16 @@ import styled from 'styled-components' +import { TActive, TUser } from '@/types' import { theme, css } from '@/utils' import { getOpacity } from './metrics' -export const Wrapper = styled.article` +type IPostItemUI = TActive & { accountInfo: TUser } & { + entry: any + divider: boolean +} + +export const Wrapper = styled.article` ${css.flex()}; position: relative; opacity: ${({ entry, active, accountInfo }) => diff --git a/src/components/PromptIcon/styles/index.ts b/src/components/PromptIcon/styles/index.ts index c87c1595f..f0df79ed6 100755 --- a/src/components/PromptIcon/styles/index.ts +++ b/src/components/PromptIcon/styles/index.ts @@ -5,7 +5,7 @@ import Img from '@/Img' export const Wrapper = styled.div`` -export const PlanetDriverIcon = styled(Img)` +export const PlanetDriverIcon = styled(Img)<{ angle: string }>` transform: ${({ angle }) => angle}; display: block; ` diff --git a/src/components/RepoItem/styles/index.ts b/src/components/RepoItem/styles/index.ts index 2a8a33295..5341eee5c 100755 --- a/src/components/RepoItem/styles/index.ts +++ b/src/components/RepoItem/styles/index.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' // import Img from '@/Img' import { theme, css } from '@/utils' -export const Wrapper = styled.article` +export const Wrapper = styled.article<{ opacity: number }>` ${css.flexColumnGrow()}; position: relative; diff --git a/src/components/SectionLabel/styles/index.ts b/src/components/SectionLabel/styles/index.ts index 78eb4800f..48ba0d346 100755 --- a/src/components/SectionLabel/styles/index.ts +++ b/src/components/SectionLabel/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, animate, css } from '@/utils' import Img from '@/Img' @@ -15,7 +16,7 @@ export const Title = styled.div` font-size: 0.9rem; flex-grow: 1; ` -export const AddonWrapper = styled.div` +export const AddonWrapper = styled.div` margin-right: 5%; display: ${({ show }) => (show ? 'flex' : 'none')}; &:active { diff --git a/src/components/Select/styles/index.ts b/src/components/Select/styles/index.ts index c460a4745..19cdc2eac 100755 --- a/src/components/Select/styles/index.ts +++ b/src/components/Select/styles/index.ts @@ -1,13 +1,13 @@ import styled from 'styled-components' -// import Img from '@/Img' +import { TTestable, TActive } from '@/types' import { animate, css, theme } from '@/utils' export { getSelectStyles } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))`` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))`` export const BlinkCursor = styled.div` background-color: #139c9e; @@ -21,7 +21,7 @@ export const BlinkCursor = styled.div` export const OptionRow = styled.div` ${css.flex('align-end')}; ` -export const OptionTitle = styled.div` +export const OptionTitle = styled.div` font-size: 14px; color: ${theme('thread.articleTitle')}; background: ${({ active }) => (active ? '#00343D' : 'transparent')}; diff --git a/src/components/Sticky/styles/index.ts b/src/components/Sticky/styles/index.ts index 6b28e2d43..7f578db3d 100755 --- a/src/components/Sticky/styles/index.ts +++ b/src/components/Sticky/styles/index.ts @@ -1,9 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' // import Img from '@/Img' // import { theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))`` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))`` + export const Title = styled.div`` diff --git a/src/components/SubTitle/styles/index.ts b/src/components/SubTitle/styles/index.ts index 9e2d45ca2..3b34c26c2 100755 --- a/src/components/SubTitle/styles/index.ts +++ b/src/components/SubTitle/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' // import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; ` export const Title = styled.div` diff --git a/src/components/Switcher/Tabs/TabIcon.js b/src/components/Switcher/Tabs/TabIcon.js index ba40de593..2b98d37c3 100644 --- a/src/components/Switcher/Tabs/TabIcon.js +++ b/src/components/Switcher/Tabs/TabIcon.js @@ -8,7 +8,7 @@ const TabIcon = ({ item: { localIcon, icon }, clickableRef, active }) => { const IconCmp = localIcon ? ( ) : ( - + ) const handleClick = useCallback( diff --git a/src/components/Switcher/styles/icon_selector.ts b/src/components/Switcher/styles/icon_selector.ts index ea18151e8..044448f50 100644 --- a/src/components/Switcher/styles/icon_selector.ts +++ b/src/components/Switcher/styles/icon_selector.ts @@ -1,14 +1,15 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' const width = '28px' const height = '25px' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; position: relative; ` @@ -66,7 +67,7 @@ export const HoverText = styled.span` transition: opacity 0.25s; transition-delay: 0.3s; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)<{ checked: boolean }>` fill: ${({ checked }) => checked ? '#66b5e8' : theme('thread.articleDigest')}; width: ${({ checked }) => (checked ? '14px' : '12px')}; @@ -74,7 +75,7 @@ export const Icon = styled(Img)` display: block; transition: all 0.25s; ` -export const Slider = styled.span` +export const Slider = styled.span<{ index: number }>` ${css.flex()}; position: absolute; width: ${width}; diff --git a/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts b/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts index 7a16ef2b5..ca7e52030 100644 --- a/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts +++ b/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { css } from '@/utils' export const SwitchWrapper = styled.div` @@ -9,7 +10,7 @@ export const SwitchWrapper = styled.div` cursor: pointer; transform: scale(0.8); ` -export const SwitchBarBase = styled.div` +export const SwitchBarBase = styled.div` height: 6px; background: ${({ active }) => (active ? '#3680ad' : '#196780')}; opacity: ${({ active }) => (active ? 1 : 0.8)}; diff --git a/src/components/Switcher/styles/pagi_option_selector/main_column.ts b/src/components/Switcher/styles/pagi_option_selector/main_column.ts index 3dd5e2c59..23e322b15 100755 --- a/src/components/Switcher/styles/pagi_option_selector/main_column.ts +++ b/src/components/Switcher/styles/pagi_option_selector/main_column.ts @@ -22,7 +22,7 @@ export const SubBarWrapper = styled.div` height: 100%; margin-left: 3px; ` -export const SubBar = styled(SwitchBarBase)` +export const SubBar = styled(SwitchBarBase)<{ marginBottom: boolean }>` width: 4px; height: 6px; margin-bottom: ${({ marginBottom }) => (marginBottom ? '2px' : 'none')}; diff --git a/src/components/Switcher/styles/radio.ts b/src/components/Switcher/styles/radio.ts index 8c5198826..02973430c 100644 --- a/src/components/Switcher/styles/radio.ts +++ b/src/components/Switcher/styles/radio.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' import { @@ -11,13 +12,19 @@ import { getRadioBoxLeft, } from './metric/radio' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` - /* position: relative; */ +type TLabel = { + size: string + checked: boolean + dimOnActive: boolean +} + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')} ` -export const Label = styled.label` + +export const Label = styled.label` position: relative; font-size: ${({ size }) => getLabelFontsize(size)}; margin-right: ${({ checked }) => (checked ? '16px' : '8px')}; diff --git a/src/components/Switcher/styles/tabs/drawer_view.ts b/src/components/Switcher/styles/tabs/drawer_view.ts index c668821a7..8fc91c12f 100644 --- a/src/components/Switcher/styles/tabs/drawer_view.ts +++ b/src/components/Switcher/styles/tabs/drawer_view.ts @@ -1,17 +1,18 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.nav.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; position: relative; overflow: hidden; width: 100%; ` // #093542 -export const TabItem = styled.div` +export const TabItem = styled.div` ${css.flex('justify-center')}; padding-top: 4px; padding-bottom: 4px; diff --git a/src/components/Switcher/styles/tabs/index.ts b/src/components/Switcher/styles/tabs/index.ts index 4b6540b15..eac2f0882 100755 --- a/src/components/Switcher/styles/tabs/index.ts +++ b/src/components/Switcher/styles/tabs/index.ts @@ -1,10 +1,17 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' -export const Wrapper = styled.nav.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type TSlipBar = { + slipHeight: string + width: string + translateX: number +} + +export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; overflow: hidden; width: auto; @@ -17,7 +24,8 @@ export const Nav = styled.nav` margin: 0 auto; padding: 0; ` -export const SlipBar = styled.span` + +export const SlipBar = styled.span` position: absolute; ${css.flex('justify-center')}; width: ${({ width }) => width}; @@ -28,7 +36,7 @@ export const SlipBar = styled.span` transform: ${({ translateX }) => `translate3d(${translateX}, 0, 0);`}; transition: transform 0.25s; ` -export const RealBar = styled.span` +export const RealBar = styled.span<{ width: string }>` width: ${({ width }) => width}; height: 3px; background: #327faf; diff --git a/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts b/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts index 0e73e220f..a7926565c 100644 --- a/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts +++ b/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts @@ -1,13 +1,14 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' import { Nav as NavBase } from '../index' -export const Wrapper = styled.nav.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; width: 100%; font-size: 13px; diff --git a/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts b/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts index 180d58d17..1fce64f26 100644 --- a/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts +++ b/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' @@ -9,9 +10,9 @@ import { SlipBar as SlipBarBase, } from '../index' -export const Wrapper = styled.nav.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; width: 100%; font-size: 13px; diff --git a/src/components/Switcher/styles/tabs/tab_icon.ts b/src/components/Switcher/styles/tabs/tab_icon.ts index d5814a73a..32aee24ec 100644 --- a/src/components/Switcher/styles/tabs/tab_icon.ts +++ b/src/components/Switcher/styles/tabs/tab_icon.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' @@ -10,9 +11,9 @@ export const Wrapper = styled.div` display: none; `} ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` fill: ${({ active }) => - active === 1 ? theme('tabs.headerActive') : theme('tabs.header')}; + active ? theme('tabs.headerActive') : theme('tabs.header')}; ${css.size(15)}; margin-right: 5px; diff --git a/src/components/Switcher/styles/tabs/tab_item.ts b/src/components/Switcher/styles/tabs/tab_item.ts index 91b8a46a3..9317e6ab3 100644 --- a/src/components/Switcher/styles/tabs/tab_item.ts +++ b/src/components/Switcher/styles/tabs/tab_item.ts @@ -1,10 +1,19 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { css, theme } from '@/utils' import { getMarginRight, getPadding, getMarginBottom } from '../metric/tabs' -export const Wrapper = styled.div` +type TTab = { + size: string + mobileView: boolean + cardView: boolean + wrapMode: boolean + modelineView: boolean +} & TActive + +export const Wrapper = styled.div` ${css.flex('justify-center')}; color: ${theme('thread.articleTitle')}; position: relative; @@ -59,7 +68,7 @@ export const Nav = styled.nav` margin: 0 auto; padding: 0; ` -export const Label = styled.span` +export const Label = styled.span` ${css.flex('align-center')}; white-space: nowrap; diff --git a/src/components/TabBar/styles/desktop_view/brief_view.ts b/src/components/TabBar/styles/desktop_view/brief_view.ts index 9b0f18bd4..1f0bbf1d0 100755 --- a/src/components/TabBar/styles/desktop_view/brief_view.ts +++ b/src/components/TabBar/styles/desktop_view/brief_view.ts @@ -1,12 +1,13 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' export const Wrapper = styled.div` ${css.flex('align-center')}; ` -export const TabItem = styled.div` +export const TabItem = styled.div` ${css.flex('align-center')}; width: 70px; padding: 0 5px; diff --git a/src/components/TabSelector/styles/index.ts b/src/components/TabSelector/styles/index.ts index 28b5d9f7f..ee0e0912d 100755 --- a/src/components/TabSelector/styles/index.ts +++ b/src/components/TabSelector/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' import Img from '@/Img' @@ -20,7 +21,7 @@ export const HeaderDivider = styled.div` margin-bottom: 10px; ` -export const Option = styled.div` +export const Option = styled.div` ${css.flex('align-center')}; color: ${({ active }) => @@ -35,7 +36,7 @@ export const Option = styled.div` font-size: bold; } ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` fill: ${({ active }) => active ? theme('banner.title') : theme('banner.desc')}; ${css.size(18)}; diff --git a/src/components/Tag/styles/index.ts b/src/components/Tag/styles/index.ts index 4c55ca1fe..1de20200d 100755 --- a/src/components/Tag/styles/index.ts +++ b/src/components/Tag/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-both')}; font-size: 14px; font-variant: tabular-nums; diff --git a/src/components/TheAvatar/styles/article_author_avatar.ts b/src/components/TheAvatar/styles/article_author_avatar.ts index 5bbe5a00e..271009477 100644 --- a/src/components/TheAvatar/styles/article_author_avatar.ts +++ b/src/components/TheAvatar/styles/article_author_avatar.ts @@ -1,13 +1,14 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' import { Tail as TailBase } from './index' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` cursor: pointer; ${css.size(36)}; position: relative; diff --git a/src/components/TheAvatar/styles/index.ts b/src/components/TheAvatar/styles/index.ts index a776e9510..85ad4d536 100755 --- a/src/components/TheAvatar/styles/index.ts +++ b/src/components/TheAvatar/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))`` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))`` export const Tail = styled(Img)` position: absolute; diff --git a/src/components/TheAvatar/styles/post_item_avatar.ts b/src/components/TheAvatar/styles/post_item_avatar.ts index ba357de8a..6dee8880b 100644 --- a/src/components/TheAvatar/styles/post_item_avatar.ts +++ b/src/components/TheAvatar/styles/post_item_avatar.ts @@ -1,13 +1,14 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' import { Tail as TailBase } from './index' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` cursor: pointer; ${css.circle(38)}; position: relative; diff --git a/src/components/ThemeSelector/styles/card_selector.ts b/src/components/ThemeSelector/styles/card_selector.ts index 256651c7e..ca2f17611 100755 --- a/src/components/ThemeSelector/styles/card_selector.ts +++ b/src/components/ThemeSelector/styles/card_selector.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' @@ -13,7 +14,7 @@ export const Wrapper = styled.div` export const ThemeDot = styled(Dot)`` /* background: ${({ active }) => (active ? theme('banner.bg') : '')}; */ -export const IntroBox = styled.div` +export const IntroBox = styled.div` ${css.flex()}; border: 1px solid; @@ -41,7 +42,7 @@ export const IntroDesc = styled.div` position: relative; ` -export const ThemeTitle = styled.div` +export const ThemeTitle = styled.div` color: ${theme('banner.title')}; font-size: 1.1rem; font-weight: ${({ active }) => (active ? 'bolder' : '')}; diff --git a/src/components/ThemeSelector/styles/gallery_selector.ts b/src/components/ThemeSelector/styles/gallery_selector.ts index 87dfb71c5..640050e35 100644 --- a/src/components/ThemeSelector/styles/gallery_selector.ts +++ b/src/components/ThemeSelector/styles/gallery_selector.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' import { Dot } from './index' @@ -17,7 +18,8 @@ export const ThemeDot = styled(Dot)` content: ''; } ` -export const IntroBox = styled.div` +type TIntroBox = TActive & { index: number } +export const IntroBox = styled.div` ${css.flex('justify-between')}; margin-right: ${({ index }) => (index % 2 === 0 ? '5%' : 0)}; background: ${({ active }) => (active ? theme('banner.bg') : 'transparent')}; @@ -51,9 +53,9 @@ export const IntroDesc = styled.div` padding-top: 5px; padding-bottom: 20px; ` -export const ThemeTitle = styled.div` +export const ThemeTitle = styled.div` /* color: ${theme('banner.title')}; */ - color: #7B8F90; + color: #7b8f90; font-size: 17px; font-weight: ${({ active }) => (active ? 'bolder' : '')}; cursor: pointer; @@ -64,10 +66,10 @@ export const ThemeTitle = styled.div` font-weight: bold; } ` -export const ThemeDesc = styled.div` +export const ThemeDesc = styled.div` font-size: ${({ active }) => (active ? '15px' : '14px')}; /* color: ${theme('banner.desc')}; */ - color: #7B8F90; + color: #7b8f90; opacity: ${({ active }) => (active ? '1' : '0.6')}; cursor: pointer; ` diff --git a/src/components/ThemeSelector/styles/index.ts b/src/components/ThemeSelector/styles/index.ts index c87f845e6..77b598e48 100755 --- a/src/components/ThemeSelector/styles/index.ts +++ b/src/components/ThemeSelector/styles/index.ts @@ -1,8 +1,10 @@ import styled from 'styled-components' +import { TActive, TThemeName } from '@/types' import { theme, themeCoverMap, themeCoverIndexMap, css } from '@/utils' -export const Dot = styled.div` +type TDot = TActive & { name: TThemeName } +export const Dot = styled.div` ${css.circle(25)}; margin-right: 10px; diff --git a/src/components/ThreadSelector/styles/panel.ts b/src/components/ThreadSelector/styles/panel.ts index ee9cef7fe..f525c9761 100755 --- a/src/components/ThreadSelector/styles/panel.ts +++ b/src/components/ThreadSelector/styles/panel.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' export const Wrapper = styled.div` @@ -18,6 +19,6 @@ export const Item = styled.div` cursor: pointer; } ` -export const DotWrapper = styled.div` +export const DotWrapper = styled.div` display: ${({ active }) => (active ? 'block' : 'none')}; ` diff --git a/src/components/Tooltip/styles/index.ts b/src/components/Tooltip/styles/index.ts index f37fd08a8..261bbdff3 100755 --- a/src/components/Tooltip/styles/index.ts +++ b/src/components/Tooltip/styles/index.ts @@ -18,7 +18,7 @@ export const StyledTippy = styled(Tippy)` export const NoPaddingStyledTippy = styled(StyledTippy)` padding: 0; ` -export const ContentWrapper = styled.div` +export const ContentWrapper = styled.div<{ contentHeight: string }>` position: relative; height: ${({ contentHeight }) => contentHeight}; ` diff --git a/src/components/UserBrief/styles/index.ts b/src/components/UserBrief/styles/index.ts index 802af4499..626c03120 100755 --- a/src/components/UserBrief/styles/index.ts +++ b/src/components/UserBrief/styles/index.ts @@ -7,9 +7,9 @@ import Img from '@/Img' export const Wrapper = styled.div` ${css.flexColumn()}; ` -export const BriefTextWrapper = styled.div` - /* align-items: ${({ view }) => +/* align-items: ${({ view }) => view === VIEW.DESKTOP ? 'center' : 'flex-start'}; */ +export const BriefTextWrapper = styled.div` margin-top: 35px; ` export const UserTitle = styled.div` @@ -23,7 +23,8 @@ export const Bio = styled.div` font-size: 13px; ` -export const UserDesc = styled.div` +type TUserDesc = { clickable: boolean; hide: boolean } +export const UserDesc = styled.div` color: ${theme('banner.desc')}; display: ${({ hide }) => (hide ? 'none' : 'flex')}; font-size: 15px; @@ -63,7 +64,7 @@ export const BackgroundItem = styled.div` export const BackgroundDetailItem = styled(BackgroundItem)` margin-bottom: 8px; ` -export const DetailToggleLabel = styled(DescIconLabel)` +export const DetailToggleLabel = styled(DescIconLabel)<{ reverse: boolean }>` transform: ${({ reverse }) => (reverse ? 'rotate(180deg)' : '')}; ` export const ToggleText = styled.div` diff --git a/src/components/VideoItem/styles/index.ts b/src/components/VideoItem/styles/index.ts index 5369ae152..ea9817b40 100755 --- a/src/components/VideoItem/styles/index.ts +++ b/src/components/VideoItem/styles/index.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import { theme, css } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.article` +export const Wrapper = styled.article<{ opacity: number }>` ${css.flex()}; position: relative; diff --git a/src/components/VideoSourceInfo/styles/index.ts b/src/components/VideoSourceInfo/styles/index.ts index f97e093c2..7d5862f64 100755 --- a/src/components/VideoSourceInfo/styles/index.ts +++ b/src/components/VideoSourceInfo/styles/index.ts @@ -14,7 +14,7 @@ export const LinkIcon = styled(Img)` ${css.size(12)}; margin-right: 3px; ` -export const LogoIcon = styled(Img)` +export const LogoIcon = styled(Img)<{ color: string }>` fill: ${({ color }) => color}; ${css.size(15)}; margin-right: 4px; diff --git a/src/components/WorksCard/styles/index.ts b/src/components/WorksCard/styles/index.ts index d524cfd4d..033045f7d 100755 --- a/src/components/WorksCard/styles/index.ts +++ b/src/components/WorksCard/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` background: ${({ withBg }) => (withBg ? '#0d3440' : 'transparent')}; position: relative; diff --git a/src/containers/content/CommunityContent/styles/index.ts b/src/containers/content/CommunityContent/styles/index.ts index 072cbcf14..5b50944ee 100755 --- a/src/containers/content/CommunityContent/styles/index.ts +++ b/src/containers/content/CommunityContent/styles/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme, css, WIDTH, pixelAdd } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('justify-center')}; min-height: 70vh; width: 100%; @@ -17,8 +18,7 @@ export const Wrapper = styled.div.attrs((props) => ({ padding-right: 0; `}; ` -export const InnerWrapper = styled.div` - /* margin: ${({ cardView }) => (cardView ? '0 2.5%' : '0 5.5%')}; */ +export const InnerWrapper = styled.div<{ cardView: boolean }>` margin-top: 20px; width: 100%; max-width: ${pixelAdd(WIDTH.COMMUNITY.CONTENT, 46)}; diff --git a/src/containers/content/CoolGuideContent/styles/filter_bar.ts b/src/containers/content/CoolGuideContent/styles/filter_bar.ts index a4cb9930b..0e8ae5c4b 100644 --- a/src/containers/content/CoolGuideContent/styles/filter_bar.ts +++ b/src/containers/content/CoolGuideContent/styles/filter_bar.ts @@ -1,14 +1,15 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' import { WIDTH as NAVI_CATALOG_WIDTH } from '@/components/NaviCatalog/styles/metric' import { SIDEBAR_WIDTH } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` width: ${SIDEBAR_WIDTH}; ` export const Divider = styled.div` @@ -22,7 +23,7 @@ export const TopFilter = styled.div` color: ${theme('thread.articleDigest')}; width: ${NAVI_CATALOG_WIDTH}; ` -export const Option = styled.div` +export const Option = styled.div` ${css.flex('align-center')}; font-size: 14px; padding: 6px; @@ -41,7 +42,7 @@ export const Option = styled.div` export const OptionItem = styled.div` flex-grow: 1; ` -const OptionIconBase = styled(Img)` +const OptionIconBase = styled(Img)` ${css.size(12)}; opacity: ${({ active }) => (active ? '1' : '0')}; diff --git a/src/containers/content/CoolGuideContent/styles/index.ts b/src/containers/content/CoolGuideContent/styles/index.ts index 0de20dbbd..f25e89376 100755 --- a/src/containers/content/CoolGuideContent/styles/index.ts +++ b/src/containers/content/CoolGuideContent/styles/index.ts @@ -1,15 +1,16 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' import { SIDEBAR_WIDTH } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-both')} width: 100%; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flex('justify-center')}; margin-top: 30px; width: 100%; diff --git a/src/containers/content/DiscoveryContent/styles/banner.ts b/src/containers/content/DiscoveryContent/styles/banner.ts index 4eb15b287..ede9d03e6 100755 --- a/src/containers/content/DiscoveryContent/styles/banner.ts +++ b/src/containers/content/DiscoveryContent/styles/banner.ts @@ -1,12 +1,13 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme, css } from '@/utils' import Img from '@/Img' -export const BannerContainer = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const BannerContainer = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('justify-center')}; position: relative; @@ -40,7 +41,7 @@ export const IntroDesc = styled.div` margin-left: -10px; opacity: 0.9; ` -export const SloganTextWrapper = styled.div` +export const SloganTextWrapper = styled.div<{ highlight: boolean }>` margin-left: 3px; margin-right: 3px; diff --git a/src/containers/content/DiscoveryContent/styles/community_card.ts b/src/containers/content/DiscoveryContent/styles/community_card.ts index 022ef649c..4cdd4dd68 100755 --- a/src/containers/content/DiscoveryContent/styles/community_card.ts +++ b/src/containers/content/DiscoveryContent/styles/community_card.ts @@ -26,7 +26,7 @@ export const Wrapper = styled(BaseCard)` border: 1px solid #327faf; box-shadow: 0px 7px 20px 10px rgba(0, 0, 0, 0.15); /* same with the popover */ } -/* + /* &:hover { border: 1px solid; border-color: ${theme('content.cardBorderHover')}; @@ -37,7 +37,7 @@ export const Wrapper = styled(BaseCard)` ` // fill only works for non-colored svgs -export const CommunityIcon = styled(Img)` +export const CommunityIcon = styled(Img)<{ nonFill: boolean }>` ${css.size(54)}; fill: ${({ nonFill }) => (nonFill ? '' : theme('banner.desc'))}; margin-bottom: 8px; diff --git a/src/containers/content/DiscoveryContent/styles/index.ts b/src/containers/content/DiscoveryContent/styles/index.ts index c0f9161cf..f1f73a54f 100755 --- a/src/containers/content/DiscoveryContent/styles/index.ts +++ b/src/containers/content/DiscoveryContent/styles/index.ts @@ -7,19 +7,19 @@ export const Wrapper = styled.div` ${css.flexColumn()}; width: 100%; ` -export const ContentWrapper = styled.div` +export const ContentWrapper = styled.div<{ center: boolean }>` ${css.flex('align-both')}; margin-top: 45px; margin-left: ${({ center }) => (center ? '5%' : 'none')}; transition: all 0.25s; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flex()}; width: 100%; height: 100%; ${({ metric }) => css.fitContentWidth(metric)}; ` -export const ContentsWrapper = styled.div` +export const ContentsWrapper = styled.div<{ center: boolean }>` ${css.flexColumn('justify-center')}; width: ${({ center }) => (center ? '100%' : 'calc(100% - 140px)')}; transition: all 0.25s; @@ -33,7 +33,7 @@ export const BtnWrapper = styled.div` ${css.flex('align-center')}; ` -export const PrefixIcon = styled(Img)` +export const PrefixIcon = styled(Img)<{ primary: boolean }>` fill: ${({ primary }) => primary ? theme('button.primary') : theme('button.fg')}; ${css.size(14)}; diff --git a/src/containers/content/DiscoveryContent/styles/search_box.ts b/src/containers/content/DiscoveryContent/styles/search_box.ts index 04e4bfa4d..b88454db8 100755 --- a/src/containers/content/DiscoveryContent/styles/search_box.ts +++ b/src/containers/content/DiscoveryContent/styles/search_box.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' // import Img from '@/Img' import { theme, css } from '@/utils' @@ -30,7 +31,7 @@ export const InputWrapper = styled.div` padding: 8px; `}; ` -export const InputMask = styled.div` +export const InputMask = styled.div` ${css.flex('align-both')}; position: absolute; display: ${({ show }) => (show ? 'flex' : 'none')}; diff --git a/src/containers/content/DiscoveryContent/styles/sidebar.ts b/src/containers/content/DiscoveryContent/styles/sidebar.ts index ea6acc788..00a0e96de 100644 --- a/src/containers/content/DiscoveryContent/styles/sidebar.ts +++ b/src/containers/content/DiscoveryContent/styles/sidebar.ts @@ -1,8 +1,9 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { css } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div` ${css.flexColumn()}; width: 120px; display: ${({ show }) => (show ? 'flex' : 'none')}; diff --git a/src/containers/content/FriendsContent/styles/index.ts b/src/containers/content/FriendsContent/styles/index.ts index 80db8f4c4..0a2f00e80 100755 --- a/src/containers/content/FriendsContent/styles/index.ts +++ b/src/containers/content/FriendsContent/styles/index.ts @@ -1,17 +1,18 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-both')} width: 100%; min-height: 70vh; margin-bottom: 50px; background-image: ${theme('banner.linearGradient')}; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flexColumn('align-both')} ${({ metric }) => css.fitContentWidth(metric)}; padding: 10px 0; @@ -34,7 +35,7 @@ export const Footer = styled.div` color: #0a6488; margin-left: 18px; ` -export const Divider = styled.div` +export const Divider = styled.div<{ width: string }>` width: ${({ width }) => width || '60px'}; height: 1px; background-color: ${theme('thread.articleDigest')}; diff --git a/src/containers/content/HaveADrinkContent/logic.js b/src/containers/content/HaveADrinkContent/logic.js index 6f7b4e07c..9b8979630 100755 --- a/src/containers/content/HaveADrinkContent/logic.js +++ b/src/containers/content/HaveADrinkContent/logic.js @@ -59,7 +59,7 @@ export const setSetting = (key, val) => { const resetAnimation = (elementClassName) => { const elements = document.querySelectorAll(`.${elementClassName}`) - // first timer switch the animate part is not visiable + // first timer switch the animate part is not visible if (elements.length === 0) return elements.forEach((el) => { diff --git a/src/containers/content/HaveADrinkContent/styles/body/catalog.ts b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts index 25822d1b4..af915c865 100755 --- a/src/containers/content/HaveADrinkContent/styles/body/catalog.ts +++ b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' @@ -8,7 +9,7 @@ export const Wrapper = styled.div` flex-wrap: wrap; width: 100%; ` -export const Block = styled.div` +export const Block = styled.div` ${css.flexColumn('align-center', 'justify-between')} color: #708b96; width: 240px; diff --git a/src/containers/content/HaveADrinkContent/styles/body/index.ts b/src/containers/content/HaveADrinkContent/styles/body/index.ts index 35b04835a..912e3dae0 100755 --- a/src/containers/content/HaveADrinkContent/styles/body/index.ts +++ b/src/containers/content/HaveADrinkContent/styles/body/index.ts @@ -9,7 +9,7 @@ export const Wrapper = styled.div` margin-top: 4%; margin-bottom: 3%; ` -export const Sentence = styled.div` +export const Sentence = styled.div<{ fontSize: string }>` color: ${theme('haveADrinkPage.sentence')}; font-size: 24px; font-size: ${({ fontSize }) => fontSize}; diff --git a/src/containers/content/HaveADrinkContent/styles/body/setting.ts b/src/containers/content/HaveADrinkContent/styles/body/setting.ts index 52607efe5..a28d00477 100755 --- a/src/containers/content/HaveADrinkContent/styles/body/setting.ts +++ b/src/containers/content/HaveADrinkContent/styles/body/setting.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' // import Img from '@/Img' import { theme, css } from '@/utils' @@ -21,7 +22,7 @@ export const Title = styled.div` margin-bottom: 16px; ` export const ItemsWrapper = styled.div`` -export const Item = styled.div` +export const Item = styled.div` position: relative; ${css.flex('align-center')}; color: ${theme('thread.articleDigest')}; diff --git a/src/containers/content/HaveADrinkContent/styles/header/running_timer.ts b/src/containers/content/HaveADrinkContent/styles/header/running_timer.ts index e564afc86..97ee246b1 100755 --- a/src/containers/content/HaveADrinkContent/styles/header/running_timer.ts +++ b/src/containers/content/HaveADrinkContent/styles/header/running_timer.ts @@ -1,8 +1,10 @@ -import styled, { css, keyframes } from 'styled-components' +import styled, { css, keyframes, CSSProp } from 'styled-components' // import { css, theme } from '@/utils' // see example: https://codepen.io/HugoGiraudel/pen/BHEwo +type Tinterval = '3s' | '5s' | '10s' + const rota = keyframes` 0% { transform: rotate(0deg); @@ -20,10 +22,10 @@ const opa = keyframes` } ` -const getRotaAnimation = (interval) => css` +const getRotaAnimation = (interval: Tinterval) => css` ${rota} ${interval} linear infinite; ` -const getOpaAnimation = (interval, reverse = false): string => { +const getOpaAnimation = (interval: Tinterval, reverse = false): CSSProp => { return reverse ? css` ${opa} ${interval} steps(1, end) infinite reverse; @@ -78,7 +80,8 @@ const Handler = styled.div` } ` export const TopHandlerBar = styled(Handler)`` -export const PieSpinner = styled.div` + +export const PieSpinner = styled.div<{ interval: Tinterval }>` width: 50%; height: 100%; transform-origin: 100% 50%; @@ -97,7 +100,7 @@ export const PieSpinner = styled.div` animation: ${({ interval }) => getRotaAnimation(interval)}; ` -export const PieFiller = styled.div` +export const PieFiller = styled.div<{ interval: Tinterval }>` position: absolute; width: 50%; height: 100%; @@ -117,7 +120,7 @@ export const PieFiller = styled.div` animation: ${({ interval }) => getOpaAnimation(interval, true)}; border-left: none; ` -export const Mask = styled.div` +export const Mask = styled.div<{ interval: Tinterval }>` position: absolute; width: 50%; height: 100%; diff --git a/src/containers/content/HelpCenterContent/styles/digest.ts b/src/containers/content/HelpCenterContent/styles/digest.ts index 4d15a7fcb..bc6c75b85 100644 --- a/src/containers/content/HelpCenterContent/styles/digest.ts +++ b/src/containers/content/HelpCenterContent/styles/digest.ts @@ -3,14 +3,14 @@ import styled from 'styled-components' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ metric: string }>` ${css.flex('justify-center')}; width: 100%; height: 100px; background: ${theme('banner.bg')}; ${({ metric }) => css.fitPageWidth(metric)}; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flex('align-center')}; width: 100%; height: 100%; diff --git a/src/containers/content/HelpCenterContent/styles/index.ts b/src/containers/content/HelpCenterContent/styles/index.ts index 600416d36..20740e7ff 100755 --- a/src/containers/content/HelpCenterContent/styles/index.ts +++ b/src/containers/content/HelpCenterContent/styles/index.ts @@ -1,15 +1,16 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-center')}; width: 100%; min-height: 80vh; ` -export const ContentWrapper = styled.div` +export const ContentWrapper = styled.div<{ metric: string }>` ${css.flex('justify-center')}; ${({ metric }) => css.fitContentWidth(metric)}; width: 100%; diff --git a/src/containers/content/MeetupsContent/styles/activity_card.ts b/src/containers/content/MeetupsContent/styles/activity_card.ts index acb08d26c..c156f190b 100755 --- a/src/containers/content/MeetupsContent/styles/activity_card.ts +++ b/src/containers/content/MeetupsContent/styles/activity_card.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ finished: boolean }>` ${css.flex('align-center')} position: relative; width: calc(50% - 10px); @@ -48,7 +48,7 @@ export const Date = styled.div` export const Week = styled.div` color: #327faf; ` -export const IntroWrapper = styled.div` +export const IntroWrapper = styled.div<{ finished: boolean }>` ${css.flexColumn('align-start')} width: calc(100% - 20px); position: relative; @@ -58,7 +58,7 @@ export const Title = styled.div` color: ${theme('thread.articleTitle')}; margin-bottom: 5px; ` -export const TitleText = styled.div` +export const TitleText = styled.div<{ finished: boolean }>` text-indent: 35px; font-size: 16px; diff --git a/src/containers/content/MeetupsContent/styles/card/date.ts b/src/containers/content/MeetupsContent/styles/card/date.ts index 4bf10c692..44f48ee33 100644 --- a/src/containers/content/MeetupsContent/styles/card/date.ts +++ b/src/containers/content/MeetupsContent/styles/card/date.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import { GALLERY } from '@/constant' import { css } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ type: string }>` ${css.flexColumn()}; align-items: ${({ type }) => type === GALLERY.TEXT_WITH_IMAGE ? 'flex-end' : 'center'}; @@ -13,7 +13,7 @@ export const Wrapper = styled.div` margin-top: ${({ type }) => type === GALLERY.TEXT_WITH_IMAGE ? '-2px' : '0'}; ` -export const Divider = styled.div` +export const Divider = styled.div<{ type: string }>` height: 1px; width: ${({ type }) => (type === GALLERY.TEXT_WITH_IMAGE ? '26px' : '40%')}; background: #054252; @@ -25,6 +25,6 @@ export const Divider = styled.div` export const WeekName = styled.div` font-size: 13px; ` -export const DateNum = styled.div` +export const DateNum = styled.div<{ size: string }>` font-size: ${({ size }) => (size === 'default' ? '13px' : '11px')}; ` diff --git a/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts b/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts index cdad794bc..0707aab01 100755 --- a/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts +++ b/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' // import Img from '@/Img' import { css, theme } from '@/utils' @@ -91,7 +92,7 @@ export const WeekName = styled.div` border-radius: 100%; color: white; ` -export const DateItem = styled.div` +export const DateItem = styled.div` ${css.flexColumn('justify-between')}; border: 1px solid; border-color: #043a48; diff --git a/src/containers/content/MeetupsContent/styles/date_selector/cell.ts b/src/containers/content/MeetupsContent/styles/date_selector/cell.ts index 4d717d801..ba50715f6 100755 --- a/src/containers/content/MeetupsContent/styles/date_selector/cell.ts +++ b/src/containers/content/MeetupsContent/styles/date_selector/cell.ts @@ -1,9 +1,11 @@ import styled from 'styled-components' +import { TActive } from '@/types' // import Img from '@/Img' import { css } from '@/utils' -export const Wrapper = styled.div` +type TWrapper = TActive & { isLeapMonth: boolean } +export const Wrapper = styled.div` ${css.flexColumn('justify-between')}; border: 1px solid; border-color: #004354; @@ -31,7 +33,7 @@ export const Head = styled.div` ${css.flex('align-center', 'justify-between')}; padding-right: 3px; ` -export const DateText = styled.div` +export const DateText = styled.div` color: ${({ active }) => (active ? '#27908f' : '')}; font-weight: ${({ active }) => (active ? 'bold' : 'normal')}; ` diff --git a/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts b/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts index 2d86183ef..36544215e 100644 --- a/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts +++ b/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts @@ -1,14 +1,16 @@ import styled from 'styled-components' // import { theme, css } from '@/utils' +import { TTestable } from '@/types' + const color = { dark: '#1d667d', light: '#004755', } -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: absolute; left: -30px; top: -108px; diff --git a/src/containers/content/MembershipContent/styles/illustrations/index.ts b/src/containers/content/MembershipContent/styles/illustrations/index.ts index b89ea6532..64cddcdce 100644 --- a/src/containers/content/MembershipContent/styles/illustrations/index.ts +++ b/src/containers/content/MembershipContent/styles/illustrations/index.ts @@ -1,9 +1,10 @@ import styled, { css as styledCss } from 'styled-components' +import { TActive } from '@/types' import { animate, css } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.div` +export const Wrapper = styled.div` ${css.flex('align-both')}; height: 130px; width: 100%; @@ -19,20 +20,20 @@ const color = { beam: '#00CAF9', } -const Star = styled(Img)` +const Star = styled(Img)` position: absolute; ${css.size(20)}; fill: ${color.beam}; display: ${({ active }) => (active ? 'block' : 'none')}; ` -export const Star1 = styled(Star)` +export const Star1 = styled(Star)` top: 0; left: -30px; opacity: 0.6; animation: ${({ active }) => active ? styledCss`${animate.jump} 4s linear infinite alternate` : ''}; ` -export const Star2 = styled(Star)` +export const Star2 = styled(Star)` ${css.size(16, false)}; top: 50px; left: -80px; @@ -40,7 +41,7 @@ export const Star2 = styled(Star)` animation: ${({ active }) => active ? styledCss`${animate.jump} 5.5s linear infinite alternate` : ''}; ` -export const Star3 = styled(Star)` +export const Star3 = styled(Star)` top: 80px; right: -80px; opacity: 0.5; diff --git a/src/containers/content/MembershipContent/styles/illustrations/rocket.ts b/src/containers/content/MembershipContent/styles/illustrations/rocket.ts index 5a8c145f7..c3e131711 100644 --- a/src/containers/content/MembershipContent/styles/illustrations/rocket.ts +++ b/src/containers/content/MembershipContent/styles/illustrations/rocket.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' import Img from '@/Img' @@ -20,9 +21,9 @@ const color = { const height = '140px' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; margin-bottom: 15px; transform: scale(0.52); @@ -31,7 +32,7 @@ export const Wrapper = styled.div.attrs((props) => ({ export const Star1 = styled(Star1Base)`` export const Star2 = styled(Star2Base)`` export const Star3 = styled(Star3Base)`` -export const RocketBody = styled.div` +export const RocketBody = styled.div<{ pink: boolean }>` width: 80px; &:before { @@ -46,7 +47,7 @@ export const RocketBody = styled.div` border-radius: 30% 70% 48% 52% / 2% 0% 100% 98%; } ` -export const Body = styled.div` +export const Body = styled.div<{ pink: boolean }>` position: relative; background-color: ${color.body}; height: ${height}; diff --git a/src/containers/content/MembershipContent/styles/illustrations/ufo.ts b/src/containers/content/MembershipContent/styles/illustrations/ufo.ts index 1dd81728f..8d9218f80 100644 --- a/src/containers/content/MembershipContent/styles/illustrations/ufo.ts +++ b/src/containers/content/MembershipContent/styles/illustrations/ufo.ts @@ -1,5 +1,6 @@ import styled, { css as styledCss } from 'styled-components' +import { TTestable, TActive } from '@/types' import { animate, css } from '@/utils' import { @@ -18,9 +19,9 @@ const color = { const height = '140px' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` width: 200px; height: ${height}; position: relative; @@ -48,7 +49,7 @@ export const Star4 = styled(Star3Base)` top: 20px; ` -export const Light = styled.div` +export const Light = styled.div` height: 45%; width: 2px; background: ${color.body}; diff --git a/src/containers/content/MembershipContent/styles/index.ts b/src/containers/content/MembershipContent/styles/index.ts index 0cd83be1c..63bcfade9 100755 --- a/src/containers/content/MembershipContent/styles/index.ts +++ b/src/containers/content/MembershipContent/styles/index.ts @@ -1,14 +1,16 @@ import styled from 'styled-components' + +import { TTestable, TActive } from '@/types' import { theme, css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('justify-center')}; background-image: ${theme('banner.linearGradient')}; width: 100%; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flexColumn('align-both')} padding: 10px 0; margin-top: 12px; @@ -35,12 +37,12 @@ export const Desc = styled.div` export const PayButtonWrapper = styled.div` position: relative; ` -export const ContentWrapper = styled.div` +export const ContentWrapper = styled.div<{ metric: string }>` ${css.flex('justify-between')}; width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; ` -export const Dashboard = styled.div` +export const Dashboard = styled.div` position: relative; ${css.flexColumn('align-center')}; width: 260px; @@ -62,7 +64,7 @@ export const CheckerWrapper = styled.div` right: 20px; top: 15px; ` -export const TypeDesc = styled.div` +export const TypeDesc = styled.div` text-align: center; font-size: 13px; color: ${theme('thread.articleDigest')}; @@ -88,7 +90,7 @@ export const TitleDivider = styled.div` export const ItemsWrapper = styled.div` text-align: left; ` -export const PayBtnWrapper = styled.div` +export const PayBtnWrapper = styled.div` display: ${({ active }) => (active ? 'block' : 'none')}; ` export const FreeNote = styled.div` diff --git a/src/containers/content/MembershipContent/styles/monthly_warning.ts b/src/containers/content/MembershipContent/styles/monthly_warning.ts index 1b8457916..2fd833dda 100644 --- a/src/containers/content/MembershipContent/styles/monthly_warning.ts +++ b/src/containers/content/MembershipContent/styles/monthly_warning.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' -import { theme, css } from '@/utils' +import { TTestable } from '@/types' +import { theme, css } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: absolute; ${css.flex('align-center')}; color: ${theme('thread.articleTitle')}; diff --git a/src/containers/content/MembershipContent/styles/price_tag.ts b/src/containers/content/MembershipContent/styles/price_tag.ts index c5064aa2f..11708aa9c 100644 --- a/src/containers/content/MembershipContent/styles/price_tag.ts +++ b/src/containers/content/MembershipContent/styles/price_tag.ts @@ -1,15 +1,17 @@ import styled from 'styled-components' + +import { TTestable, TActive } from '@/types' import { theme, css } from '@/utils' import { Dashboard } from './index' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; color: ${theme('thread.articleDigest')}; ` -export const Price = styled.div` +export const Price = styled.div` color: ${({ active }) => active ? theme('thread.articleTitle') : theme('thread.articleDigest')}; font-size: 23px; diff --git a/src/containers/content/MembershipContent/styles/qa.ts b/src/containers/content/MembershipContent/styles/qa.ts index 8ca2bc2f9..d2ba288bb 100644 --- a/src/containers/content/MembershipContent/styles/qa.ts +++ b/src/containers/content/MembershipContent/styles/qa.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme, css } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start')}; margin-top: 80px; ` diff --git a/src/containers/content/MembershipContent/styles/support.ts b/src/containers/content/MembershipContent/styles/support.ts index e7e35f6a1..ac52d52b2 100644 --- a/src/containers/content/MembershipContent/styles/support.ts +++ b/src/containers/content/MembershipContent/styles/support.ts @@ -1,10 +1,12 @@ import styled from 'styled-components' + +import { TActive } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' import { Dashboard } from './index' -export const PkgItem = styled.div` +export const PkgItem = styled.div` ${css.flex('align-center')}; margin-bottom: 7px; @@ -16,7 +18,7 @@ export const PkgItem = styled.div` transition: opacity 0.2s; ` -export const PkgItemTitle = styled.div` +export const PkgItemTitle = styled.div<{ not: boolean }>` color: ${({ not }) => !not ? theme('thread.articleTitle') : theme('thread.articleDigest')}; font-size: 14px; diff --git a/src/containers/content/PostContent/styles/desktop_view.ts b/src/containers/content/PostContent/styles/desktop_view.ts index 5c9221b52..bbd2d0c9c 100644 --- a/src/containers/content/PostContent/styles/desktop_view.ts +++ b/src/containers/content/PostContent/styles/desktop_view.ts @@ -20,7 +20,7 @@ export const InnerWrapper = styled.div` padding-left: 0; padding-right: 0; ` -export const MainWrapper = styled.div` +export const MainWrapper = styled.div<{ metric: string }>` flex-grow: 1; ${({ metric }) => css.fitContentWidth(metric)}; ` @@ -33,7 +33,7 @@ export const ArticleWrapper = styled.div` /* background: ${theme('drawer.articleBg')}; */ /* border-radius: 5px; */ background: transparent; - + min-height: 200px; ` export const BodyHeaderWrapper = styled.div` diff --git a/src/containers/content/RecipesContent/styles/filter_bar.ts b/src/containers/content/RecipesContent/styles/filter_bar.ts index 1ce5af3ce..0a4814bdb 100644 --- a/src/containers/content/RecipesContent/styles/filter_bar.ts +++ b/src/containers/content/RecipesContent/styles/filter_bar.ts @@ -1,14 +1,15 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' import { WIDTH as NAVI_CATALOG_WIDTH } from '@/components/NaviCatalog/styles/metric' import { SIDEBAR_WIDTH, SIDEBAR_MARGIN } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn()}; width: ${SIDEBAR_WIDTH}; margin-top: 12px; @@ -25,7 +26,7 @@ export const TopFilter = styled.div` color: ${theme('thread.articleDigest')}; width: ${NAVI_CATALOG_WIDTH}; ` -export const Option = styled.div` +export const Option = styled.div` ${css.flex('align-center')}; font-size: 14px; padding: 6px; @@ -44,7 +45,7 @@ export const Option = styled.div` export const OptionItem = styled.div` flex-grow: 1; ` -const OptionIconBase = styled(Img)` +const OptionIconBase = styled(Img)` ${css.size(12)}; opacity: ${({ active }) => (active ? '1' : '0')}; diff --git a/src/containers/content/RecipesContent/styles/index.ts b/src/containers/content/RecipesContent/styles/index.ts index 8aa1b89d8..86837c8cf 100755 --- a/src/containers/content/RecipesContent/styles/index.ts +++ b/src/containers/content/RecipesContent/styles/index.ts @@ -1,16 +1,17 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' import { SIDEBAR_WIDTH } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-both')} width: 100%; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric }>` ${css.flex()}; margin-top: 12px; min-height: 100vh; diff --git a/src/containers/content/SponsorContent/styles/banner.ts b/src/containers/content/SponsorContent/styles/banner.ts index a22862c0b..0239e70a6 100644 --- a/src/containers/content/SponsorContent/styles/banner.ts +++ b/src/containers/content/SponsorContent/styles/banner.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { css, theme } from '@/utils' import { ArrowLink } from '@/components/Buttons' @@ -7,7 +8,16 @@ import Img from '@/Img' import { getBorderRadius, getBannerHeight, getBackground } from './metric' -export const SmileWrapper = styled.div` +type TAnchors = { + anchors: { + anchorHEnter: boolean + anchorMEnter: boolean + anchorLEnter: boolean + } + reverse: boolean +} + +export const SmileWrapper = styled.div` position: absolute; left: 0; top: 0; @@ -57,7 +67,7 @@ export const AnchorM = styled(Anchor)` export const AnchorL = styled(Anchor)` top: 80px; ` -export const SponsorBtn = styled(ArrowLink)` +export const SponsorBtn = styled(ArrowLink)` margin-left: 20px; opacity: ${({ show }) => (show ? '1' : '0')}; diff --git a/src/containers/content/SponsorContent/styles/index.ts b/src/containers/content/SponsorContent/styles/index.ts index 8decbd8d0..787dea777 100755 --- a/src/containers/content/SponsorContent/styles/index.ts +++ b/src/containers/content/SponsorContent/styles/index.ts @@ -1,17 +1,18 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-both')} width: 100%; /* min-height: 100vh; */ position: relative; background-image: ${theme('banner.linearGradient')}; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ bannerVisiable: boolean }>` ${css.flexColumn('align-both')} padding: 10px 0; margin-top: 12px; @@ -19,7 +20,7 @@ export const InnerWrapper = styled.div` margin-top: ${({ bannerVisiable }) => (bannerVisiable ? '40vh' : '20vh')}; transition: margin-top 0.25s; ` -export const ContentWrapper = styled.div` +export const ContentWrapper = styled.div<{ metric: string }>` ${css.flexColumn('align-center')}; ${({ metric }) => css.fitContentWidth(metric)}; ` diff --git a/src/containers/content/SponsorContent/styles/sponsor_type_title.ts b/src/containers/content/SponsorContent/styles/sponsor_type_title.ts index 5cebcf864..9f374f918 100644 --- a/src/containers/content/SponsorContent/styles/sponsor_type_title.ts +++ b/src/containers/content/SponsorContent/styles/sponsor_type_title.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-both')} ` export const Title = styled.div` @@ -14,7 +15,7 @@ export const Title = styled.div` margin-left: 10px; margin-right: 10px; ` -export const PrefixIcon = styled(Img)` +export const PrefixIcon = styled(Img)<{ reverse: boolean }>` fill: ${theme('thread.articleDigest')}; ${css.size(15)}; diff --git a/src/containers/content/SubscribeContent/styles/actions/index.ts b/src/containers/content/SubscribeContent/styles/actions/index.ts index 9ae6b33bf..a84cbddc4 100644 --- a/src/containers/content/SubscribeContent/styles/actions/index.ts +++ b/src/containers/content/SubscribeContent/styles/actions/index.ts @@ -1,12 +1,13 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { Button } from '@/components/Buttons' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-both')}; padding-left: 5%; margin-top: 10%; diff --git a/src/containers/content/SubscribeContent/styles/index.ts b/src/containers/content/SubscribeContent/styles/index.ts index dba88ed77..1218b08d2 100755 --- a/src/containers/content/SubscribeContent/styles/index.ts +++ b/src/containers/content/SubscribeContent/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme, WIDTH } from '@/utils' import Sticky from '@/components/Sticky' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start')}; width: 100%; /* 130 means height of (header + footer) */ diff --git a/src/containers/content/TrendingContent/styles/index.ts b/src/containers/content/TrendingContent/styles/index.ts index 3cbbaf266..7c2d80452 100755 --- a/src/containers/content/TrendingContent/styles/index.ts +++ b/src/containers/content/TrendingContent/styles/index.ts @@ -7,7 +7,7 @@ export const Wrapper = styled.div` ${css.flexColumn('align-both')} width: 100%; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flex()}; padding: 10px 0; margin-top: 12px; diff --git a/src/containers/content/UserContent/styles/index.ts b/src/containers/content/UserContent/styles/index.ts index 23dca291d..26568d5d3 100755 --- a/src/containers/content/UserContent/styles/index.ts +++ b/src/containers/content/UserContent/styles/index.ts @@ -7,12 +7,12 @@ export const Wrapper = styled.div` width: 100%; overflow-x: hidden; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flex()}; width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; ` -export const BannerWrapper = styled.div` +export const BannerWrapper = styled.div<{ metric: string }>` position: relative; background: ${theme('banner.bg')}; width: 100%; diff --git a/src/containers/content/WorksContent/styles/banner/backgrounds.ts b/src/containers/content/WorksContent/styles/banner/backgrounds.ts index a47d49361..75d4b4c12 100644 --- a/src/containers/content/WorksContent/styles/banner/backgrounds.ts +++ b/src/containers/content/WorksContent/styles/banner/backgrounds.ts @@ -36,7 +36,16 @@ export const Wrapper = styled.div` height: 240px; /* z-index: 1; */ ` -export const Icon = styled(Img)` +type IIcon = { + top: string + left: string + color: string + size: string + rotate: string + opacity: number +} + +export const Icon = styled(Img)` position: absolute; z-index: 1; fill: ${({ color }) => getColor(color)}; diff --git a/src/containers/content/WorksContent/styles/brand.ts b/src/containers/content/WorksContent/styles/brand.ts index 9dc65cf2f..4183fccb6 100644 --- a/src/containers/content/WorksContent/styles/brand.ts +++ b/src/containers/content/WorksContent/styles/brand.ts @@ -1,25 +1,26 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn()}; width: 100%; margin-bottom: 28px; margin-top: 8px; ` -export const Title = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Title = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` color: ${theme('thread.articleTitle')}; font-size: 18px; font-weight: bold; ` -export const Desc = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Desc = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` color: ${theme('thread.articleDigest')}; font-size: 14px; ` diff --git a/src/containers/content/WorksContent/styles/index.ts b/src/containers/content/WorksContent/styles/index.ts index 75061e548..3a0da3c37 100755 --- a/src/containers/content/WorksContent/styles/index.ts +++ b/src/containers/content/WorksContent/styles/index.ts @@ -1,19 +1,20 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-center')}; width: 100%; min-height: 80vh; margin-top: 30px; ${({ metric }) => css.fitContentWidth(metric)}; ` -export const LeftSidebarWrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const LeftSidebarWrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` width: 182px; ` export const ContentWrapper = styled.div` diff --git a/src/containers/content/WorksContent/styles/list/option_tab.ts b/src/containers/content/WorksContent/styles/list/option_tab.ts index 939b6e792..ef00ec8d8 100644 --- a/src/containers/content/WorksContent/styles/list/option_tab.ts +++ b/src/containers/content/WorksContent/styles/list/option_tab.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' @@ -9,7 +10,7 @@ export const Wrapper = styled.div` margin-top: 5px; margin-left: 16px; ` -export const ItemWrapper = styled.div` +export const ItemWrapper = styled.div` ${css.flex('align-both')}; cursor: pointer; background-color: ${({ active }) => (active ? '#033844' : 'transparent')}; @@ -17,14 +18,14 @@ export const ItemWrapper = styled.div` border-radius: 10px; padding: ${({ active }) => (active ? '2px 12px' : '2px 8px')}; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)` fill: ${theme('thread.articleTitle')}; display: ${({ active }) => (active ? 'block' : 'none')}; ${css.size(14)}; margin-right: 5px; margin-bottom: 1px; ` -export const Text = styled.div` +export const Text = styled.div` opacity: ${({ active }) => (active ? 1 : 0.6)}; color: ${({ active }) => active ? theme('thread.articleTitle') : theme('thread.articleDigest')}; diff --git a/src/containers/content/WorksContent/styles/right_sidebar/index.ts b/src/containers/content/WorksContent/styles/right_sidebar/index.ts index b74af9e35..4bb09f43f 100644 --- a/src/containers/content/WorksContent/styles/right_sidebar/index.ts +++ b/src/containers/content/WorksContent/styles/right_sidebar/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable, TSpace } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn()}; width: 200px; margin-left: 40px; @@ -19,7 +20,7 @@ export const SubDesc = styled.div` line-height: 20px; opacity: 0.8; ` -export const Divider = styled.div` +export const Divider = styled.div` height: 1px; width: 100%; background: #004353; diff --git a/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts b/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts index d2a5d64a4..d873996de 100644 --- a/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts +++ b/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` width: 100%; min-height: 200px; margin-top: 18px; diff --git a/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts index aae2115ca..7373d085b 100644 --- a/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts +++ b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-end', 'justify-between')}; width: 100%; color: ${theme('thread.articleDigest')}; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts index 2f512ff40..bf4af79e1 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts +++ b/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts @@ -24,7 +24,7 @@ export const BannerContent = styled.div` ${css.flex()}; width: 100%; ` -export const Main = styled.div` +export const Main = styled.div<{ metric: string }>` ${({ metric }) => css.fitContentWidth(metric)}; ` export const AuthorWrapper = styled.div` diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/state_info.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/state_info.ts index 39ab54aff..fcc4ce8e2 100644 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/state_info.ts +++ b/src/containers/digest/ArticleDigest/styles/mobile_view/state_info.ts @@ -35,7 +35,7 @@ const Icon = styled(Img)` ` export const ViewdIcon = styled(Icon)`` export const CommentIcon = styled(Icon)`` -export const LikeIcon = styled(Icon)` +export const LikeIcon = styled(Icon)<{ red: boolean }>` fill: ${({ red }) => red ? theme('baseColor.red') : theme('thread.articleDigest')}; ${css.size(12)}; diff --git a/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts b/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts index d878e94b0..940cc1540 100755 --- a/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts +++ b/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { theme, css, animate } from '@/utils' @@ -8,8 +9,9 @@ export const NumbersWrapper = styled.div` margin-top: -10px; ` export const NumbersInfo = styled(NumbersWrapper)`` -// background: ${theme('banner.numberHoverBg')}; -export const NumberSection = styled.div` + +type TNumberSection = TActive & { readOnly: boolean } +export const NumberSection = styled.div` ${css.flexColumn('justify-center')}; padding: 0 5px; @@ -23,7 +25,7 @@ export const NumberSection = styled.div` cursor: ${({ readOnly }) => (readOnly ? '' : 'pointer')}; } ` -export const NumberTitle = styled.div` +export const NumberTitle = styled.div<{ readOnly: boolean }>` color: ${theme('banner.numberDesc')}; text-align: center; &:hover { @@ -34,7 +36,7 @@ export const NumberTitle = styled.div` ${css.media.tablet`font-size: 0.9rem`}; ${css.media.mobile`font-size: 0.9rem`}; ` -export const NumberItem = styled.div` +export const NumberItem = styled.div<{ readOnly: boolean }>` font-size: 1.5rem; text-align: center; diff --git a/src/containers/digest/CommunityDigest/logic.js b/src/containers/digest/CommunityDigest/logic.js index 1a59c69a1..5a4c37319 100755 --- a/src/containers/digest/CommunityDigest/logic.js +++ b/src/containers/digest/CommunityDigest/logic.js @@ -70,7 +70,7 @@ export const toggleDescExpand = () => { const markLoading = (maybe = true) => store.mark({ loading: maybe }) /** - * set digest visiable in current viewport + * set digest visible in current viewport * @param {Boolean} inView */ export const setViewport = (inViewport) => { diff --git a/src/containers/digest/CommunityDigest/styles/digest_view/column_view/index.ts b/src/containers/digest/CommunityDigest/styles/digest_view/column_view/index.ts index 1fd057fb0..9ce96217b 100644 --- a/src/containers/digest/CommunityDigest/styles/digest_view/column_view/index.ts +++ b/src/containers/digest/CommunityDigest/styles/digest_view/column_view/index.ts @@ -2,8 +2,8 @@ import styled from 'styled-components' import { HCN } from '@/constant' import { theme, css, WIDTH } from '@/utils' - import Img from '@/Img' + import CommunityFaceLogo from '@/components/CommunityFaceLogo' import { BaseBanner } from '../../index' @@ -15,11 +15,18 @@ const getMinHeight = (noSocial, isMobile) => { return noSocial ? '128px' : '150px' } -export const Wrapper = styled(BaseBanner)` + +type TWrapper = { + descExpand: boolean + noSocial: boolean + isMobile: boolean + metric?: string +} +export const Wrapper = styled(BaseBanner)` min-height: ${({ descExpand, noSocial, isMobile }) => descExpand ? '300px' : getMinHeight(noSocial, isMobile)}; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div` ${css.flex('justify-center')}; padding-top: 20px; min-height: ${({ descExpand, noSocial, isMobile }) => @@ -40,7 +47,8 @@ export const BaseBannerContent = styled.div` padding-right: 5.5%; `}; ` -export const BannerContentWrapper = styled(BaseBannerContent)` +type TBannerContent = { descExpand: boolean } +export const BannerContentWrapper = styled(BaseBannerContent)` ${css.flexColumn('justify-between')}; align-items: ${({ descExpand }) => (descExpand ? 'flex-start' : 'center')}; ` @@ -65,12 +73,12 @@ export const CommunityBaseInfo = styled.div` ${css.flex('justify-between')}; width: 100%; ` -export const CommunityWrapper = styled.div` +export const CommunityWrapper = styled.div<{ descExpand: string }>` ${css.flexGrow('align-center')}; align-items: ${({ descExpand }) => (descExpand ? 'flex-start' : 'center')}; transition: all 0.5s; ` -export const LogoWrapper = styled.div` +export const LogoWrapper = styled.div<{ raw: string }>` position: relative; width: 55px; /* TODO: use new logo */ @@ -85,7 +93,7 @@ export const LogoWrapper = styled.div` margin-top: -2px; `}; ` -export const CommunityLogo = styled(CommunityFaceLogo)` +export const CommunityLogo = styled(CommunityFaceLogo)<{ small: boolean }>` width: ${({ small }) => (small ? '35px' : '45px')}; height: ${({ small }) => (small ? '35px' : '45px')}; border-radius: 5px; @@ -108,7 +116,7 @@ export const CommunityInfo = styled.div` export const TitleWrapper = styled.div` ${css.flex('align-center')}; ` -export const Title = styled.div` +export const Title = styled.div<{ descExpand: boolean }>` ${css.flex('align-baseline')}; font-size: ${({ descExpand }) => (descExpand ? '21px' : '18px')}; color: ${theme('banner.title')}; diff --git a/src/containers/digest/CommunityDigest/styles/digest_view/row_view/index.ts b/src/containers/digest/CommunityDigest/styles/digest_view/row_view/index.ts index bb7c3571c..a763fb4cf 100644 --- a/src/containers/digest/CommunityDigest/styles/digest_view/row_view/index.ts +++ b/src/containers/digest/CommunityDigest/styles/digest_view/row_view/index.ts @@ -7,7 +7,7 @@ import CommunityFaceLogo from '@/components/CommunityFaceLogo' import { BaseBanner } from '../../index' -export const Wrapper = styled(BaseBanner)` +export const Wrapper = styled(BaseBanner)<{ isHeaderFixed: boolean }>` ${css.flexColumn('justify-start')}; position: relative; width: 280px; @@ -36,10 +36,9 @@ export const BaseBannerContent = styled.div` display: none; `}; ` -export const BannerContentWrapper = styled(BaseBannerContent)` - /* align-items: ${({ descExpand }) => +/* align-items: ${({ descExpand }) => descExpand ? 'flex-start' : 'center'}; */ -` +export const BannerContentWrapper = styled(BaseBannerContent)`` export const BannerContainer = styled(BaseBanner)` min-height: 125px; ` @@ -71,7 +70,7 @@ export const TitleWrapper = styled.div` ${css.flex('align-center')}; margin-bottom: 8px; ` -export const Title = styled.div` +export const Title = styled.div<{ descExpand: boolean }>` ${css.flex('align-baseline')}; font-size: ${({ descExpand }) => (descExpand ? '21px' : '18px')}; color: ${theme('banner.title')}; diff --git a/src/containers/digest/CommunityDigest/styles/expand_texts.ts b/src/containers/digest/CommunityDigest/styles/expand_texts.ts index 4a4d5eaf4..1b40682ce 100644 --- a/src/containers/digest/CommunityDigest/styles/expand_texts.ts +++ b/src/containers/digest/CommunityDigest/styles/expand_texts.ts @@ -3,12 +3,11 @@ import styled from 'styled-components' import Img from '@/Img' import { theme, css } from '@/utils' -export const Wrapper = styled.div` - /* ${css.flex('align-center')}; */ - /* align-items: ${({ descExpand }) => +/* ${css.flex('align-center')}; */ +/* align-items: ${({ descExpand }) => descExpand ? 'flex-start' : 'center'}; */ -` -export const Normal = styled.div` +export const Wrapper = styled.div`` +export const Normal = styled.div<{ margin: string }>` color: ${theme('banner.desc')}; font-size: 14px; max-width: 490px; diff --git a/src/containers/digest/CommunityDigest/styles/index.ts b/src/containers/digest/CommunityDigest/styles/index.ts index f3887e9f4..926f2de0a 100755 --- a/src/containers/digest/CommunityDigest/styles/index.ts +++ b/src/containers/digest/CommunityDigest/styles/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme, css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` width: 100%; ` export const BaseBanner = styled.nav` diff --git a/src/containers/digest/CommunityDigest/styles/social_list.ts b/src/containers/digest/CommunityDigest/styles/social_list.ts index af20ef0b0..6a16b993a 100644 --- a/src/containers/digest/CommunityDigest/styles/social_list.ts +++ b/src/containers/digest/CommunityDigest/styles/social_list.ts @@ -25,7 +25,7 @@ export const SocialWrapper = styled.div` cursor: pointer; } ` -export const Icon = styled(Img)` +export const Icon = styled(Img)<{ size: string }>` fill: ${theme('banner.desc')}; border-radius: 50%; width: ${({ size }) => (size === 'small' ? '14px;' : '17px')}; @@ -38,6 +38,6 @@ export const Icon = styled(Img)` fill: ${theme('banner.active')}; } ` -export const Title = styled.div` +export const Title = styled.div<{ size: string }>` font-size: ${({ size }) => (size === 'small' ? '12px;' : '14px')}; ` diff --git a/src/containers/editor/AccountEditor/styles/sex_inputer.ts b/src/containers/editor/AccountEditor/styles/sex_inputer.ts index 97c6c9abe..b329c8d56 100755 --- a/src/containers/editor/AccountEditor/styles/sex_inputer.ts +++ b/src/containers/editor/AccountEditor/styles/sex_inputer.ts @@ -18,12 +18,12 @@ const SexIcon = styled(Img)` /* props.active === props.item ? theme('font', props) : 'grey'}; */ export const Dude = styled.div`` export const Girl = styled.div`` -export const DudeIcon = styled(SexIcon)` +export const DudeIcon = styled(SexIcon)<{ value: string }>` fill: ${({ value }) => value === 'dude' ? '#869eec' : theme('drawer.divider')}; ` -export const GirlIcon = styled(SexIcon)` +export const GirlIcon = styled(SexIcon)<{ value: string }>` fill: ${({ value }) => (value === 'girl' ? 'pink' : theme('drawer.divider'))}; margin-top: 1px; ` diff --git a/src/containers/editor/AccountEditor/styles/social_inputer.ts b/src/containers/editor/AccountEditor/styles/social_inputer.ts index c413e24e3..07a31e266 100755 --- a/src/containers/editor/AccountEditor/styles/social_inputer.ts +++ b/src/containers/editor/AccountEditor/styles/social_inputer.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' export const Wrapper = styled.div`` -export const InputWrapper = styled.div` +export const InputWrapper = styled.div` display: ${({ show }) => (show ? 'block' : 'none')}; ` @@ -30,7 +31,7 @@ export const SocialIconsWrapper = styled.div` flex-wrap: wrap; width: 250px; ` -export const SocialIcon = styled(Img)` +export const SocialIcon = styled(Img)` fill: ${({ active }) => active ? theme('banner.title') : theme('banner.desc')}; ${css.size(18)}; @@ -38,7 +39,7 @@ export const SocialIcon = styled(Img)` transition: fill 0.3s; opacity: ${({ active }) => (active ? 1 : 0.8)}; ` -export const TogglerWrapper = styled.div` +export const TogglerWrapper = styled.div` display: ${({ show }) => (show ? 'flex' : 'none')}; ` export const TogglerLabelWrapper = styled(TogglerWrapper)` diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts b/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts index 6a5cf0c84..b1debb8ff 100644 --- a/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts +++ b/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts @@ -1,13 +1,14 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' import Img from '@/Img' import { Wrapper as HeaderWrapper } from './index' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: absolute; top: -8px; left: -78px; diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts b/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts index 233cdf583..1ca3f7045 100644 --- a/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts +++ b/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts @@ -1,13 +1,14 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' import Img from '@/Img' import { SubTitleWrapper } from './index' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: absolute; top: 21px; left: -66px; diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/index.ts b/src/containers/editor/ArticleEditor/styles/editor/header/index.ts index 12884e20c..62480b734 100644 --- a/src/containers/editor/ArticleEditor/styles/editor/header/index.ts +++ b/src/containers/editor/ArticleEditor/styles/editor/header/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' import Input from '@/components/Input' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn()}; width: 100%; min-height: 90px; @@ -33,14 +34,14 @@ export const TitleInput = styled(Input)` background: transparent; width: 100%; - &:hover { + &:hover { border: none; - } - &:focus { + } + &:focus { border: none; box-shadow: none; } - &:active { + &:active { border: none; box-shadow: none; } diff --git a/src/containers/editor/ArticleEditor/styles/index.ts b/src/containers/editor/ArticleEditor/styles/index.ts index 019b762a4..f53d5a52a 100755 --- a/src/containers/editor/ArticleEditor/styles/index.ts +++ b/src/containers/editor/ArticleEditor/styles/index.ts @@ -1,15 +1,16 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('justify-center')}; width: 100%; margin-top: 40px; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flexColumn()}; width: 100%; min-height: 50vh; diff --git a/src/containers/editor/CommunityEditor/styles/banner/index.ts b/src/containers/editor/CommunityEditor/styles/banner/index.ts index 02185374e..2f3ad92ae 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/index.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme, css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('justify-center')}; width: 100%; @@ -13,7 +14,7 @@ export const Wrapper = styled.div.attrs((props) => ({ border-bottom: 1px solid; border-bottom: ${theme('banner.spliter')}; ` -export const SloganTextWrapper = styled.div` +export const SloganTextWrapper = styled.div<{ highlight: boolean }>` margin-left: 3px; margin-right: 3px; diff --git a/src/containers/editor/CommunityEditor/styles/banner/input_box.ts b/src/containers/editor/CommunityEditor/styles/banner/input_box.ts index 3285f2a50..8d1939db7 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/input_box.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/input_box.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' // import Img from '@/Img' import { theme, css } from '@/utils' @@ -7,7 +8,7 @@ export const Wrapper = styled.div` display: flex; margin-bottom: 10px; ` -export const InputWrapper = styled.div` +export const InputWrapper = styled.div<{ noRound: boolean }>` position: relative; ${css.flex('align-center')}; border-radius: ${({ noRound }) => (noRound ? '6px' : '20px')}; @@ -31,7 +32,7 @@ export const InputWrapper = styled.div` padding: 8px; `}; ` -export const InputMask = styled.div` +export const InputMask = styled.div` ${css.flex('align-both')}; position: absolute; display: ${({ show }) => (show ? 'flex' : 'none')}; diff --git a/src/containers/editor/CommunityEditor/styles/banner/select_type/index.ts b/src/containers/editor/CommunityEditor/styles/banner/select_type/index.ts index 9b9da42cf..904095df4 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/select_type/index.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/select_type/index.ts @@ -20,7 +20,7 @@ export const IntroTitle = styled.div` margin-bottom: 20px; margin-left: -10px; ` -export const SloganTextWrapper = styled.div` +export const SloganTextWrapper = styled.div<{ highlight: boolean }>` margin-left: 3px; margin-right: 3px; diff --git a/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts b/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts index ed8ce5efb..fe614932e 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { css, theme } from '@/utils' // import Img from '@/Img' @@ -9,7 +10,7 @@ export const Wrapper = styled.div` height: 105px; width: 700px; ` -export const Box = styled.div` +export const Box = styled.div` ${css.flexColumn('align-start', 'justify-between')}; padding: 10px 12px; width: ${({ active }) => (active ? '160px' : '154px')}; diff --git a/src/containers/editor/CommunityEditor/styles/banner/setup_domain/index.ts b/src/containers/editor/CommunityEditor/styles/banner/setup_domain/index.ts index 4e58b26ba..2f07b38f7 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/setup_domain/index.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/setup_domain/index.ts @@ -21,7 +21,7 @@ export const IntroTitle = styled.div` margin-bottom: 20px; margin-left: -10px; ` -export const SloganTextWrapper = styled.div` +export const SloganTextWrapper = styled.div<{ highlight: boolean }>` margin-left: 3px; margin-right: 3px; diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/content.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/content.ts index c87e154c1..bf856e3c2 100755 --- a/src/containers/editor/CommunityEditor/styles/content/fake_browser/content.ts +++ b/src/containers/editor/CommunityEditor/styles/content/fake_browser/content.ts @@ -50,7 +50,7 @@ export const FeedWrapper = styled.div` margin-top: 10px; padding: 20px 30px; ` -export const Feed = styled.div` +export const Feed = styled.div<{ width: string }>` height: 10px; width: ${({ width }) => width}; border-radius: 4px; diff --git a/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts b/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts index 802bcb9ea..18666d15b 100755 --- a/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts +++ b/src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts @@ -106,7 +106,7 @@ export const ToolbarWrapper = styled.div` padding: 4px; height: 24px; ` -export const ToolIcon = styled(Img)` +export const ToolIcon = styled(Img)<{ reverse: boolean }>` fill: ${theme('thread.articleTitle')}; ${css.size(16)}; transform: ${({ reverse }) => (reverse ? 'rotate(180deg)' : '')}; diff --git a/src/containers/editor/CommunityEditor/styles/index.ts b/src/containers/editor/CommunityEditor/styles/index.ts index fe4152853..5c78e8107 100755 --- a/src/containers/editor/CommunityEditor/styles/index.ts +++ b/src/containers/editor/CommunityEditor/styles/index.ts @@ -2,12 +2,12 @@ import styled from 'styled-components' import { css, theme } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ metric: string }>` ${css.flexColumn('align-both')}; width: 100%; ${({ metric }) => css.fitPageWidth(metric)}; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flexColumn('justify-center')}; width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; diff --git a/src/containers/editor/JobEditor/styles/index.ts b/src/containers/editor/JobEditor/styles/index.ts index 2cd457f17..140d29900 100755 --- a/src/containers/editor/JobEditor/styles/index.ts +++ b/src/containers/editor/JobEditor/styles/index.ts @@ -1,14 +1,13 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Input from '@/components/Input' import { theme, css } from '@/utils' -export const ViewerWrapper = styled.div` +export const Wrapper = styled.div`` +export const ViewerWrapper = styled.div` display: ${({ active }) => (active ? 'block' : 'none')}; ` - -export const Wrapper = styled.div`` - export const Header = styled.div` ${css.flex()}; margin-left: 35px; diff --git a/src/containers/editor/PostEditor/styles/index.ts b/src/containers/editor/PostEditor/styles/index.ts index 4aa31b45a..575df94e1 100755 --- a/src/containers/editor/PostEditor/styles/index.ts +++ b/src/containers/editor/PostEditor/styles/index.ts @@ -1,14 +1,13 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Input from '@/components/Input' import { theme, css } from '@/utils' -export const ViewerWrapper = styled.div` +export const Wrapper = styled.div`` +export const ViewerWrapper = styled.div` display: ${({ active }) => (active ? 'block' : 'none')}; ` - -export const Wrapper = styled.div`` - export const Header = styled.div` ${css.flex()}; margin-left: 35px; diff --git a/src/containers/editor/VideoEditor/styles/source_options.ts b/src/containers/editor/VideoEditor/styles/source_options.ts index 24093f99d..c643cf2c3 100755 --- a/src/containers/editor/VideoEditor/styles/source_options.ts +++ b/src/containers/editor/VideoEditor/styles/source_options.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' @@ -11,20 +12,22 @@ export const ItemWrapper = styled.div` ${css.flex('align-center')}; margin-right: 8px; ` -export const Title = styled.div` +type TTitle = TActive & { nohover: boolean } +export const Title = styled.div` color: ${({ active }) => active ? theme('banner.title') : theme('banner.desc')}; cursor: ${({ nohover }) => (nohover ? '' : 'pointer')}; font-size: 0.8rem; ` -export const Icon = styled(Img)` +type TIcon = TActive & { activeColor: string } +export const Icon = styled(Img)` fill: ${({ active, activeColor }) => active ? activeColor || theme('banner.title') : theme('banner.desc')}; ${css.size(16)}; display: block; margin-right: 3px; ` -export const RespectText = styled.div` +export const RespectText = styled.div` color: ${theme('editor.placeholder')}; display: ${({ show }) => (show ? 'block' : 'none')}; ` diff --git a/src/containers/editor/WorksEditor/styles/content/article_part/index.ts b/src/containers/editor/WorksEditor/styles/content/article_part/index.ts index 3e1469e60..c7ee7bb0b 100644 --- a/src/containers/editor/WorksEditor/styles/content/article_part/index.ts +++ b/src/containers/editor/WorksEditor/styles/content/article_part/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start', 'justify-start')}; width: 100%; min-height: 300px; diff --git a/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts b/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts index 481147b9e..e2c0deb80 100644 --- a/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts +++ b/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-start')}; width: 100%; color: ${theme('thread.articleDigest')}; diff --git a/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts b/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts index 951b21784..bd567ca28 100644 --- a/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts +++ b/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' import FormItem from '@/components/FormItem' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start', 'justify-start')}; width: 100%; min-height: 300px; diff --git a/src/containers/editor/WorksEditor/styles/content/common_questions.ts b/src/containers/editor/WorksEditor/styles/content/common_questions.ts index 7d34c4f5f..76123d61e 100644 --- a/src/containers/editor/WorksEditor/styles/content/common_questions.ts +++ b/src/containers/editor/WorksEditor/styles/content/common_questions.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; width: auto; ` diff --git a/src/containers/editor/WorksEditor/styles/content/index.ts b/src/containers/editor/WorksEditor/styles/content/index.ts index 9110b4933..765d75e0f 100644 --- a/src/containers/editor/WorksEditor/styles/content/index.ts +++ b/src/containers/editor/WorksEditor/styles/content/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' import { CONTENT_WIDTH } from '../metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-both')}; height: 100%; width: ${`${CONTENT_WIDTH}px`}; diff --git a/src/containers/editor/WorksEditor/styles/content/launch_part.ts b/src/containers/editor/WorksEditor/styles/content/launch_part.ts index b939be4b3..0b5e1fb42 100644 --- a/src/containers/editor/WorksEditor/styles/content/launch_part.ts +++ b/src/containers/editor/WorksEditor/styles/content/launch_part.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start', 'justify-start')}; width: 100%; min-height: 300px; diff --git a/src/containers/editor/WorksEditor/styles/content/name_part.ts b/src/containers/editor/WorksEditor/styles/content/name_part.ts index 6b66749f0..2b57c0b49 100644 --- a/src/containers/editor/WorksEditor/styles/content/name_part.ts +++ b/src/containers/editor/WorksEditor/styles/content/name_part.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' import { BaseInput } from './index' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-center', 'justify-start')}; width: 100%; height: 300px; diff --git a/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts b/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts index b939be4b3..0b5e1fb42 100644 --- a/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts +++ b/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start', 'justify-start')}; width: 100%; min-height: 300px; diff --git a/src/containers/editor/WorksEditor/styles/index.ts b/src/containers/editor/WorksEditor/styles/index.ts index e8ab576da..b0f644ab3 100755 --- a/src/containers/editor/WorksEditor/styles/index.ts +++ b/src/containers/editor/WorksEditor/styles/index.ts @@ -1,16 +1,17 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('justify-center')}; width: 100%; color: ${theme('thread.articleDigest')}; margin-top: 30px; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flexColumn('align-center')}; width: 100%; min-height: 80vh; diff --git a/src/containers/editor/WorksEditor/styles/preview.ts b/src/containers/editor/WorksEditor/styles/preview.ts index 0450978f5..134bbb5ac 100644 --- a/src/containers/editor/WorksEditor/styles/preview.ts +++ b/src/containers/editor/WorksEditor/styles/preview.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' import { CONTENT_WIDTH, CONTENT_NARROW_WIDTH } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('justify-center')}; width: ${({ narrow }) => narrow ? `${CONTENT_NARROW_WIDTH}px` : `${CONTENT_WIDTH}px`}; diff --git a/src/containers/editor/WorksEditor/styles/steps.ts b/src/containers/editor/WorksEditor/styles/steps.ts index 5ac4124ea..03911b3db 100644 --- a/src/containers/editor/WorksEditor/styles/steps.ts +++ b/src/containers/editor/WorksEditor/styles/steps.ts @@ -1,13 +1,14 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' import { CONTENT_WIDTH } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; ${css.flex('align-center', 'justify-between')}; width: ${`${CONTENT_WIDTH}px`}; @@ -32,7 +33,7 @@ export const Step = styled.div` export const FirstStep = styled(Step)` align-content: flex-start; ` -export const Dot = styled.div` +export const Dot = styled.div` background-color: ${({ active }) => active ? theme('thread.articleDigest') : '#1c4048'}; width: ${({ active }) => (active ? '11px' : '10px')}; @@ -47,7 +48,7 @@ export const Dot = styled.div` transition: all 0.2s; ` -export const Hint = styled.div` +export const Hint = styled.div` font-size: 12px; margin-top: ${({ active }) => (active ? '5px' : '6px')}; diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx index c3ab52d7b..9144661cc 100755 --- a/src/containers/layout/GlobalLayout/index.tsx +++ b/src/containers/layout/GlobalLayout/index.tsx @@ -89,7 +89,7 @@ const GlobalLayoutContainer: React.FC = ({ {!noSidebar && } diff --git a/src/containers/layout/GlobalLayout/styles/index.ts b/src/containers/layout/GlobalLayout/styles/index.ts index e5b0a5d40..db01f6446 100755 --- a/src/containers/layout/GlobalLayout/styles/index.ts +++ b/src/containers/layout/GlobalLayout/styles/index.ts @@ -21,15 +21,17 @@ export const Wrapper = styled.div` opacity: 0.6; } ` -export const InnerWrapper = styled.div` - ${css.flexColumn()}; - ${({ metric }) => css.fitPageWidth(metric)}; - width: 100%; - /* min-width: ${({ minWidth }) => minWidth}; */ + +type TInner = { metric: string; sidebarPin: boolean } +/* min-width: ${({ minWidth }) => minWidth}; */ /* padding-left: ${({ noSidebar }) => (noSidebar ? '0' : '56px')}; margin-left: ${({ sidebarPin }) => (sidebarPin ? '180px' : '0')}; */ +export const InnerWrapper = styled.div` + ${css.flexColumn()}; + ${({ metric }) => css.fitPageWidth(metric)}; + width: 100%; position: relative; height: 100%; min-height: 100vh; @@ -41,7 +43,8 @@ export const InnerWrapper = styled.div` padding-left: 0; `}; ` -export const BodyWrapper = styled.div` +type TBody = { layout: string; isMobile: boolean } +export const BodyWrapper = styled.div` display: flex; flex-direction: ${({ layout, isMobile }) => { if (isMobile) return 'column' @@ -52,7 +55,7 @@ export const BodyWrapper = styled.div` width: 100%; ` // 180 is the sidebar full width -export const ContentWrapper = styled.div` +export const ContentWrapper = styled.div<{ offsetLeft: boolean }>` margin-left: ${({ offsetLeft }) => (offsetLeft ? '180px' : '0')}; /* for global blur */ transition: filter 0.25s; diff --git a/src/containers/layout/ThemePalette/GlobalStyle.ts b/src/containers/layout/ThemePalette/GlobalStyle.ts index a58719a1a..eac7d49e6 100755 --- a/src/containers/layout/ThemePalette/GlobalStyle.ts +++ b/src/containers/layout/ThemePalette/GlobalStyle.ts @@ -1,4 +1,4 @@ -import { createGlobalStyle, css as styledCss } from 'styled-components' +import { createGlobalStyle } from 'styled-components' import { theme, css } from '@/utils' import normalize from './normalize' @@ -145,32 +145,33 @@ const GlobalStyle = createGlobalStyle` top: 10px !important; } - ${({ showCustomScrollbar }) => - showCustomScrollbar || - styledCss` - ::-webkit-scrollbar { - background: transparent; - width: 4px; - } - ::-webkit-scrollbar-button { - background: transparent; - } - ::-webkit-scrollbar-track { - background: transparent; - } - ::-webkit-scrollbar-track-piece { - background: transparent; - } - ::-webkit-scrollbar-thumb { - background: ${theme('banner.title')}; - } - ::-webkit-scrollbar-corner { - background: grey; - } - ::-webkit-resizer { - background: grey; - } - `}; + ` +// ${({ showCustomScrollbar }) => +// showCustomScrollbar || +// styledCss` +// ::-webkit-scrollbar { +// background: transparent; +// width: 4px; +// } +// ::-webkit-scrollbar-button { +// background: transparent; +// } +// ::-webkit-scrollbar-track { +// background: transparent; +// } +// ::-webkit-scrollbar-track-piece { +// background: transparent; +// } +// ::-webkit-scrollbar-thumb { +// background: ${theme('banner.title')}; +// } +// ::-webkit-scrollbar-corner { +// background: grey; +// } +// ::-webkit-resizer { +// background: grey; +// } +// `}; export default GlobalStyle diff --git a/src/containers/layout/ThemePalette/index.js b/src/containers/layout/ThemePalette/index.js index 48770a322..ccc9b4c85 100755 --- a/src/containers/layout/ThemePalette/index.js +++ b/src/containers/layout/ThemePalette/index.js @@ -11,7 +11,6 @@ import NextNprogress from 'nextjs-progressbar' import { ANCHOR } from '@/constant' import { pluggedIn } from '@/utils' -import { usePlatform } from '@/hooks' // import MarkDownStyle from './MarkDownStyle' import CodeSyxHighlight from './CodeSyxHighlight' @@ -20,9 +19,6 @@ import GlobalStyle from './GlobalStyle' import RichEditorStyle from './RichEditorStyle' const ThemeContainer = ({ children, theme: { themeData } }) => { - const { isMacOS, isMobile } = usePlatform() - const showCustomScrollbar = !isMacOS || !isMobile - return ( @@ -41,7 +37,7 @@ const ThemeContainer = ({ children, theme: { themeData } }) => { - + ) } diff --git a/src/containers/thread/PostsThread/styles/city_card.ts b/src/containers/thread/PostsThread/styles/city_card.ts index b310b5021..63087ae1e 100755 --- a/src/containers/thread/PostsThread/styles/city_card.ts +++ b/src/containers/thread/PostsThread/styles/city_card.ts @@ -31,7 +31,7 @@ export const Wrapper = styled.div` `}; ` -export const CommunityIcon = styled(Img)` +export const CommunityIcon = styled(Img)<{ nonFill: boolean }>` ${css.size(54)}; fill: ${({ nonFill }) => (nonFill ? '' : theme('banner.desc'))}; margin-bottom: 8px; diff --git a/src/containers/thread/PostsThread/styles/index.ts b/src/containers/thread/PostsThread/styles/index.ts index 6ad2b6738..64b683b40 100755 --- a/src/containers/thread/PostsThread/styles/index.ts +++ b/src/containers/thread/PostsThread/styles/index.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { css, theme } from '@/utils' export const Wrapper = styled.div` @@ -24,13 +25,13 @@ export const RightPart = styled.div` ${css.media.tablet`display: none;`}; ` -export const PublisherWrapper = styled.div` +export const PublisherWrapper = styled.div` display: ${({ show }) => (show ? 'block' : 'none')}; width: 160px; max-width: 180px; margin-left: 16px; ` -export const BadgeWrapper = styled.div` +export const BadgeWrapper = styled.div` display: ${({ show }) => (show ? 'block' : 'none')}; margin-left: 18px; ` diff --git a/src/containers/thread/RoadmapThread/styles/index.ts b/src/containers/thread/RoadmapThread/styles/index.ts index 37ede45b0..aaee45de0 100755 --- a/src/containers/thread/RoadmapThread/styles/index.ts +++ b/src/containers/thread/RoadmapThread/styles/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex()}; background: ${theme('thread.bg')}; width: 100%; diff --git a/src/containers/thread/RoadmapThread/styles/todo_list/up_vote.ts b/src/containers/thread/RoadmapThread/styles/todo_list/up_vote.ts index b38c7c911..b8d4bbdc0 100755 --- a/src/containers/thread/RoadmapThread/styles/todo_list/up_vote.ts +++ b/src/containers/thread/RoadmapThread/styles/todo_list/up_vote.ts @@ -8,7 +8,7 @@ export const Wrapper = styled.div` color: ${theme('thread.articleTitle')}; width: 32px; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)<{ viewerDid: boolean }>` fill: ${({ viewerDid }) => viewerDid ? theme('comment.didIcon') : theme('comment.icon')}; diff --git a/src/containers/thread/UsersThread/styles/num_dashboard.ts b/src/containers/thread/UsersThread/styles/num_dashboard.ts index 9dbdf4e9f..f3307b9fe 100755 --- a/src/containers/thread/UsersThread/styles/num_dashboard.ts +++ b/src/containers/thread/UsersThread/styles/num_dashboard.ts @@ -1,8 +1,11 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' -export const Wrapper = styled.div` +type TChartBar = TActive & { width: string } + +export const Wrapper = styled.div<{ expand: boolean }>` ${css.flexColumn()}; position: absolute; z-index: 1; @@ -41,14 +44,14 @@ export const DashboardListWrapper = styled.div` export const DashItem = styled.div` ${css.flex('align-center')}; ` -export const Title = styled.div` +export const Title = styled.div` color: ${({ active }) => active ? theme('banner.title') : theme('thread.articleDigest')}; width: 60px; text-align: center; ` -export const Divider = styled.div` +export const Divider = styled.div` display: ${({ show }) => (show ? 'block' : 'none')}; border-bottom: 1px dashed; border-bottom-color: ${theme('thread.articleDigest')}; @@ -67,7 +70,7 @@ export const Num = styled.div` export const Chart = styled.div` ${css.flexGrow()}; ` -export const ChartBar = styled.div` +export const ChartBar = styled.div` height: ${({ active }) => (active ? '4px' : '3px')}; width: ${({ width }) => width}; diff --git a/src/containers/tool/ArticleSticker/styles/article_sticker.ts b/src/containers/tool/ArticleSticker/styles/article_sticker.ts index e66675176..377b67668 100644 --- a/src/containers/tool/ArticleSticker/styles/article_sticker.ts +++ b/src/containers/tool/ArticleSticker/styles/article_sticker.ts @@ -1,9 +1,10 @@ import styled from 'styled-components' +import { TActive, TSpace } from '@/types' import Img from '@/Img' import { theme, css, animate } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div` display: ${({ show }) => (show ? 'block' : 'none')}; /* margin-left: -38px; */ ` @@ -12,7 +13,7 @@ export const ItemWrapper = styled.div` position: relative; width: 100%; ` -export const ItemHint = styled.div` +export const ItemHint = styled.div` color: ${theme('thread.articleDigest')}; position: absolute; right: ${({ right }) => `${right}px` || '-12px'}; diff --git a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts index d13323475..a2b667924 100644 --- a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts +++ b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts @@ -1,16 +1,17 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.div` +export const Wrapper = styled.div` min-height: 100px; margin-left: 35%; padding-bottom: 0; width: 65%; max-width: 200px; flex-wrap: wrap; - visibility: ${({ show }) => (show ? 'visiable' : 'hidden')}; + visibility: ${({ show }) => (show ? 'visible' : 'hidden')}; ` export const Title = styled.div` color: ${theme('thread.articleDigest')}; diff --git a/src/containers/tool/ArticleSticker/styles/index.ts b/src/containers/tool/ArticleSticker/styles/index.ts index 29bb87f1e..4059bfb48 100755 --- a/src/containers/tool/ArticleSticker/styles/index.ts +++ b/src/containers/tool/ArticleSticker/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { animate, theme, css, WIDTH } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-center', 'justify-start')}; width: ${WIDTH.ARTICLE.STICKER}; /* bottom has a go-to-top button */ diff --git a/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts b/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts index 5f5a2de66..a7d29ee3e 100644 --- a/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts +++ b/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts @@ -1,12 +1,13 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' // see https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start', 'justify-start')}; position: fixed; width: 170px; diff --git a/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts b/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts index 835eae8ae..f893a5b6f 100644 --- a/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts +++ b/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts @@ -1,12 +1,13 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' // see https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` width: 100%; margin-top: 15px; ` diff --git a/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts b/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts index dd3d6947b..f077dd406 100644 --- a/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts +++ b/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start', 'justify-start')}; width: auto; height: 100%; diff --git a/src/containers/tool/C11NSettingPanel/styles/index.ts b/src/containers/tool/C11NSettingPanel/styles/index.ts index 423759341..bbbcc8df9 100755 --- a/src/containers/tool/C11NSettingPanel/styles/index.ts +++ b/src/containers/tool/C11NSettingPanel/styles/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start', 'justify-start')}; width: auto; height: 100%; diff --git a/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts b/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts index f7b8b28c1..0abc0a38b 100644 --- a/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts +++ b/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' // import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` margin-top: 16px; /* margin-left: 30px; */ ` diff --git a/src/containers/tool/Cashier/PaymentSidebar.js b/src/containers/tool/Cashier/PaymentSidebar.js index 508c52c0a..1a534759c 100755 --- a/src/containers/tool/Cashier/PaymentSidebar.js +++ b/src/containers/tool/Cashier/PaymentSidebar.js @@ -46,7 +46,7 @@ const PaymentSidebar = ({ 支付宝 @@ -54,7 +54,7 @@ const PaymentSidebar = ({ 微信支付 微信支付 diff --git a/src/containers/tool/Cashier/styles/payment_sidebar.ts b/src/containers/tool/Cashier/styles/payment_sidebar.ts index 3432acd42..ff36dfeb8 100755 --- a/src/containers/tool/Cashier/styles/payment_sidebar.ts +++ b/src/containers/tool/Cashier/styles/payment_sidebar.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' @@ -49,15 +50,15 @@ const OptionWrapper = styled.div` cursor: pointer; } ` -export const WeixinWrapper = styled(OptionWrapper)` +export const WeixinWrapper = styled(OptionWrapper)` color: ${({ active }) => (active ? '#3eb64b' : theme('thread.articleTitle'))}; - display: ${({ display }) => display || 'flex'}; + display: ${({ show }) => (show ? 'block' : 'none')}; ` -export const AliWrapper = styled(OptionWrapper)` +export const AliWrapper = styled(OptionWrapper)` color: ${({ active }) => (active ? '#42abe1' : theme('thread.articleTitle'))}; - display: ${({ display }) => display || 'flex'}; + display: ${({ show }) => (show ? 'block' : 'none')}; ` -export const Holder = styled.div` +export const Holder = styled.div<{ margin: string }>` margin-top: ${({ margin }) => margin || '80px'}; ` export const QuestionWrapper = styled.div` diff --git a/src/containers/tool/CommunityJoinBadge/styles/index.ts b/src/containers/tool/CommunityJoinBadge/styles/index.ts index 1da218b38..c32b8e91a 100755 --- a/src/containers/tool/CommunityJoinBadge/styles/index.ts +++ b/src/containers/tool/CommunityJoinBadge/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' // import Img from '@/Img' import { theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; padding-bottom: 20px; padding-left: 3px; diff --git a/src/containers/tool/Doraemon/styles/index.ts b/src/containers/tool/Doraemon/styles/index.ts index 87ad11f78..c8d584735 100755 --- a/src/containers/tool/Doraemon/styles/index.ts +++ b/src/containers/tool/Doraemon/styles/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import { theme, css } from '@/utils' -export const PageOverlay = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const PageOverlay = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` bottom: 0; left: 0; overflow: auto; @@ -15,9 +16,9 @@ export const PageOverlay = styled.div.attrs((props) => ({ display: ${({ visible }) => (visible ? 'block' : 'none')}; ` // flex-grow example: http://zhoon.github.io/css3/2014/08/23/flex.html -export const PanelContainer = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const PanelContainer = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` display: ${({ visible }) => (visible ? 'block' : 'none')}; box-shadow: 0px 4px 11px 8px rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); diff --git a/src/containers/tool/Doraemon/styles/input_editor.ts b/src/containers/tool/Doraemon/styles/input_editor.ts index 5eff15ccf..abbf6198d 100755 --- a/src/containers/tool/Doraemon/styles/input_editor.ts +++ b/src/containers/tool/Doraemon/styles/input_editor.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme } from '@/utils' import { BaseBar } from './index' @@ -13,9 +14,9 @@ export const EditorBar = styled(BaseBar)` position: relative; height: 58px; ` -export const InputBar = styled.input.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const InputBar = styled.input.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` caret-color: ${theme('shell.searchInput')}; flex-grow: 1; font-family: '.SFNSText-Light', 'SF UI Text', 'Helvetica Neue', 'Arial', diff --git a/src/containers/tool/Doraemon/styles/results_list.ts b/src/containers/tool/Doraemon/styles/results_list.ts index 5f219021e..a396b0a3e 100755 --- a/src/containers/tool/Doraemon/styles/results_list.ts +++ b/src/containers/tool/Doraemon/styles/results_list.ts @@ -1,9 +1,10 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { theme, animate, css } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ empty: boolean }>` position: relative; display: ${({ empty }) => (empty ? 'none' : 'flex')}; flex-direction: column; @@ -19,7 +20,7 @@ export const AddOn = styled.div` margin-left: 15px; width: 25px; ` -export const PageOverlay = styled.div` +export const PageOverlay = styled.div` // background-color: rgba(0, 0, 0, 0.4); bottom: 0; cursor: pointer; @@ -32,7 +33,7 @@ export const PageOverlay = styled.div` display: ${({ visible }) => (visible ? 'block' : 'none')}; ` // flex-grow example: http://zhoon.github.io/css3/2014/08/23/flex.html -export const PanelContainer = styled.div` +export const PanelContainer = styled.div` box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); width: 45vw; max-width: 550px; @@ -65,7 +66,7 @@ export const AlertBar = styled(BaseBar)` color: ${theme('baseColor.red')}; } ` -export const InfoBar = styled(BaseBar)` +export const InfoBar = styled(BaseBar)` padding: 10px; min-height: 65px; background: ${({ active }) => (active ? theme('shell.activeBg') : '')}; @@ -145,12 +146,12 @@ export const RepoStar = styled.div` margin-right: 10px; ` -export const NodeSVGIcon = styled(Img)` +export const NodeSVGIcon = styled(Img)<{ reverse: boolean }>` ${css.size(40)}; transform: ${({ reverse }) => (reverse ? 'rotate(180deg)' : '')}; ` -export const ThemeDot = styled.div` +export const ThemeDot = styled.div<{ bg: string }>` ${css.circle(35)}; background: ${({ bg }) => bg}; ` diff --git a/src/containers/tool/Doraemon/styles/suggest_icon.ts b/src/containers/tool/Doraemon/styles/suggest_icon.ts index 38bb0f884..c396a0676 100755 --- a/src/containers/tool/Doraemon/styles/suggest_icon.ts +++ b/src/containers/tool/Doraemon/styles/suggest_icon.ts @@ -4,6 +4,8 @@ import Img from '@/Img' import CommunityFaceLogo from '@/components/CommunityFaceLogo' import { css } from '@/utils' +type TIcon = { reverse: boolean; round: boolean } + export const Wrapper = styled.div` width: 10%; ${css.media.mobile` @@ -13,7 +15,7 @@ export const Wrapper = styled.div` export const ThemeIconWrapper = styled.div` margin-right: 16px; ` -export const Icon = styled(CommunityFaceLogo)` +export const Icon = styled(CommunityFaceLogo)` ${css.size(35)}; border-radius: ${({ round }) => (round ? '100%' : '4px')}; margin-left: 4px; @@ -22,7 +24,7 @@ export const Icon = styled(CommunityFaceLogo)` margin-right: 10px; `}; ` -export const ThemeDot = styled.div` +export const ThemeDot = styled.div<{ bg: string }>` ${css.circle(35)}; background: ${({ bg }) => bg}; ` diff --git a/src/containers/tool/Doraemon/styles/thread_select_bar.ts b/src/containers/tool/Doraemon/styles/thread_select_bar.ts index 08abbc953..643d1fb1c 100755 --- a/src/containers/tool/Doraemon/styles/thread_select_bar.ts +++ b/src/containers/tool/Doraemon/styles/thread_select_bar.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' // import Img from '@/Img' import { theme, css } from '@/utils' import { BaseBar } from './index' @@ -13,7 +14,7 @@ export const Wrapper = styled(BaseBar)` padding-right: 20px; ` -export const Selector = styled.div` +export const Selector = styled.div` font-size: 0.9rem; padding-bottom: 2px; color: ${({ active }) => diff --git a/src/containers/tool/Drawer/Content/DesktopView.js b/src/containers/tool/Drawer/Content/DesktopView.js index e169de870..32414d557 100644 --- a/src/containers/tool/Drawer/Content/DesktopView.js +++ b/src/containers/tool/Drawer/Content/DesktopView.js @@ -9,7 +9,7 @@ const Content = ({ visible, type, attachment, attUser }) => { const ref = useRef(null) /* - * reset when content visiable + * reset when content visible * scroll to top always */ useEffect(() => { diff --git a/src/containers/tool/Drawer/Content/MobileView.js b/src/containers/tool/Drawer/Content/MobileView.js index cc5828945..58e66acc7 100644 --- a/src/containers/tool/Drawer/Content/MobileView.js +++ b/src/containers/tool/Drawer/Content/MobileView.js @@ -15,7 +15,7 @@ const Content = ({ visible, options, type, attachment, attUser, mmType }) => { const [topHeaderTextTimer, setTopHeaderTextTimer] = useState(null) /* - * reset when content visiable + * reset when content visible * scroll to top always */ useEffect(() => { diff --git a/src/containers/tool/Drawer/styles/add_on.ts b/src/containers/tool/Drawer/styles/add_on.ts index 109457fec..dfddccf04 100755 --- a/src/containers/tool/Drawer/styles/add_on.ts +++ b/src/containers/tool/Drawer/styles/add_on.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { TYPE } from '@/constant' import { theme, animate, css } from '@/utils' @@ -15,7 +16,7 @@ export const Wrapper = styled.div` ` const closeWith = '40px' -export const CloseTab = styled.div` +export const CloseTab = styled.div<{ type: string }>` float: right; width: ${closeWith}; height: ${closeWith}; @@ -64,7 +65,7 @@ export const MobileCloser = styled.div` font-weight: lighter; } ` -export const UploadingTab = styled.div` +export const UploadingTab = styled.div` ${css.flexColumn('justify-evenly')}; align-items: center; opacity: ${({ show }) => (show ? 1 : 0)}; diff --git a/src/containers/tool/Drawer/styles/header/close_line.ts b/src/containers/tool/Drawer/styles/header/close_line.ts index 3b718e3d3..14d106f50 100644 --- a/src/containers/tool/Drawer/styles/header/close_line.ts +++ b/src/containers/tool/Drawer/styles/header/close_line.ts @@ -10,7 +10,7 @@ export const Wrapper = styled.div` top: 16px; ` -export const LineBase = styled.span` +export const LineBase = styled.span<{ curve: boolean }>` position: absolute; float: right; top: 0; @@ -34,7 +34,7 @@ export const LineBase = styled.span` transform: ${({ curve }) => (curve ? 'rotate(-15deg)' : '')}; } ` -export const LeftLine = styled(LineBase)` +export const LeftLine = styled(LineBase)<{ curve: boolean }>` left: 0; transform: rotate(15deg); &:after { @@ -42,7 +42,7 @@ export const LeftLine = styled(LineBase)` transform: ${({ curve }) => (curve ? 'rotate(-15deg)' : '')}; } ` -export const RightLine = styled(LineBase)` +export const RightLine = styled(LineBase)<{ curve: boolean }>` left: ${({ curve }) => (!curve ? '18px' : '19px')}; transform: rotate(-15deg); diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts index 4208812ce..e337d24c0 100755 --- a/src/containers/tool/Drawer/styles/index.ts +++ b/src/containers/tool/Drawer/styles/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' - import { contains } from 'ramda' +import { TTestable, TActive } from '@/types' import { theme, css } from '@/utils' import { @@ -14,7 +14,21 @@ import { getDim, } from './metrics' -export const DrawerOverlay = styled.div` +type TSwipe = { + swipeUpY: number + swipeDownY: number + options: Record +} + +type TDrawer = TTestable & + TActive & + TSwipe & { + mobile: boolean + rightOffset: string + type: string + } + +export const DrawerOverlay = styled.div` bottom: 0; left: 0; overflow: auto; @@ -31,13 +45,13 @@ export const DrawerOverlay = styled.div` // - Use styled components for static styles and dynamic styles that don't change very often; // - Use inline styles (through .attrs) for styles that change frequently, like for animations. export const DrawerWrapper = styled.div.attrs( - ({ testid, visible, mobile, swipeUpY, swipeDownY, options }) => ({ + ({ testid, visible, mobile, swipeUpY, swipeDownY, options }: TDrawer) => ({ 'data-test-id': testid, style: { transform: getTransform(visible, mobile, swipeUpY, swipeDownY, options), }, }), -)` +)` ${css.flex()}; position: fixed; right: ${({ rightOffset }) => rightOffset}; @@ -86,7 +100,8 @@ export const DrawerContent = styled.div` height: 100vh; box-shadow: ${theme('drawer.shadow')}; ` -export const DrawerMobileContent = styled.div` +type TDrawerMobile = { options: Record; bgColor: string } +export const DrawerMobileContent = styled.div` width: 100%; height: ${({ options }) => getMobileContentHeight(options)}; box-shadow: ${theme('drawer.shadow')}; @@ -95,12 +110,12 @@ export const DrawerMobileContent = styled.div` ` export const MobileInnerContent = styled.div.attrs( - ({ swipeUpY, swipeDownY, options }) => ({ + ({ swipeUpY, swipeDownY, options }: TSwipe) => ({ style: { filter: getDim(swipeUpY, swipeDownY, options), }, }), -)` +)` width: 100%; max-height: calc(100% - 30px); margin-top: ${({ options }) => diff --git a/src/containers/tool/FavoritesCats/styles/editor.ts b/src/containers/tool/FavoritesCats/styles/editor.ts index 3ce409cf6..60fc77d7a 100755 --- a/src/containers/tool/FavoritesCats/styles/editor.ts +++ b/src/containers/tool/FavoritesCats/styles/editor.ts @@ -1,8 +1,9 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div` display: ${({ show }) => (show ? 'flex' : 'none')}; flex-direction: column; padding: 15px 25px; diff --git a/src/containers/tool/FavoritesCats/styles/setter.ts b/src/containers/tool/FavoritesCats/styles/setter.ts index 3ce8a9f3f..903465493 100755 --- a/src/containers/tool/FavoritesCats/styles/setter.ts +++ b/src/containers/tool/FavoritesCats/styles/setter.ts @@ -1,8 +1,9 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div` display: ${({ show }) => (show ? 'flex' : 'none')}; flex-direction: column; padding: 15px 25px; diff --git a/src/containers/tool/JoinModal/styles/index.ts b/src/containers/tool/JoinModal/styles/index.ts index 1eed30d3f..b2d9d7890 100755 --- a/src/containers/tool/JoinModal/styles/index.ts +++ b/src/containers/tool/JoinModal/styles/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' // import Img from '@/Img' // import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))`` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))`` export const holder = styled.div`` diff --git a/src/containers/tool/MailBox/styles/index.ts b/src/containers/tool/MailBox/styles/index.ts index 9be465b38..8de8f35b3 100755 --- a/src/containers/tool/MailBox/styles/index.ts +++ b/src/containers/tool/MailBox/styles/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' -import HeaderMailSVG from '@/SvgIcons/HeaderMailSVG' +import { TTestable, TActive } from '@/types' import { css, theme } from '@/utils' +import HeaderMailSVG from '@/SvgIcons/HeaderMailSVG' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; ` export const HeaderMailIcon = styled(HeaderMailSVG)` @@ -14,7 +15,7 @@ export const HeaderMailIcon = styled(HeaderMailSVG)` cursor: pointer; margin-right: 12px; ` -export const NotifyDot = styled.div` +export const NotifyDot = styled.div` position: absolute; display: ${({ active }) => (active ? 'block' : 'none')}; ${css.circle(8, false)}; diff --git a/src/containers/unit/ArticleFooter/styles/actions/index.ts b/src/containers/unit/ArticleFooter/styles/actions/index.ts index f34afe26f..c30bd06ee 100644 --- a/src/containers/unit/ArticleFooter/styles/actions/index.ts +++ b/src/containers/unit/ArticleFooter/styles/actions/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; ` export const Item = styled.div` @@ -25,7 +26,7 @@ export const ReferNum = styled.span` color: #00a59b; margin-right: 3px; ` -export const Text = styled.div` +export const Text = styled.div` color: ${({ active }) => active ? theme('thread.articleTitle') : theme('thread.articleDigest')}; font-size: 12px; @@ -37,9 +38,9 @@ export const Text = styled.div` transition: color 0.25s; ` -export const PanelWrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const PanelWrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn()}; position: relative; border-top: 1px solid; diff --git a/src/containers/unit/ArticleFooter/styles/author_info/index.ts b/src/containers/unit/ArticleFooter/styles/author_info/index.ts index 65ce9717a..895150fa8 100644 --- a/src/containers/unit/ArticleFooter/styles/author_info/index.ts +++ b/src/containers/unit/ArticleFooter/styles/author_info/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('justify-between')}; border-top: 1px solid; border-bottom: 3px solid; diff --git a/src/containers/unit/ArticleFooter/styles/index.ts b/src/containers/unit/ArticleFooter/styles/index.ts index 142d8f469..8de44dc29 100755 --- a/src/containers/unit/ArticleFooter/styles/index.ts +++ b/src/containers/unit/ArticleFooter/styles/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))`` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))`` export const BaseInfo = styled.div` ${css.flex('justify-between', 'align-end')}; diff --git a/src/containers/unit/ArticleFooter/styles/tag_list.ts b/src/containers/unit/ArticleFooter/styles/tag_list.ts index ea638b2ad..e76a2740a 100644 --- a/src/containers/unit/ArticleFooter/styles/tag_list.ts +++ b/src/containers/unit/ArticleFooter/styles/tag_list.ts @@ -19,7 +19,7 @@ export const Tag = styled.div` font-weight: bold; } ` -export const Dot = styled.div` +export const Dot = styled.div<{ bgColor: string }>` background: ${({ bgColor }) => bgColor}; ${css.circle(6)}; margin-right: 6px; diff --git a/src/containers/unit/ArticleViewerHeader/styles/reaction.ts b/src/containers/unit/ArticleViewerHeader/styles/reaction.ts index f76c7ca20..e1c5b4cc8 100755 --- a/src/containers/unit/ArticleViewerHeader/styles/reaction.ts +++ b/src/containers/unit/ArticleViewerHeader/styles/reaction.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { theme, css, animate } from '@/utils' @@ -18,7 +19,7 @@ export const PlainAction = styled.div` ${css.flex('align-center')}; border-radius: 5px; ` -export const ReactionAction = styled(PlainAction)` +export const ReactionAction = styled(PlainAction)` background-color: ${({ active }) => active ? theme('article.reactionHoverBg') : ''}; padding: ${({ active }) => (active ? '2px 5px' : '2px 3px')}; diff --git a/src/containers/unit/Comments/styles/comment/delete_mask.ts b/src/containers/unit/Comments/styles/comment/delete_mask.ts index b75ea68e9..9002d7b69 100755 --- a/src/containers/unit/Comments/styles/comment/delete_mask.ts +++ b/src/containers/unit/Comments/styles/comment/delete_mask.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, animate, css } from '@/utils' export const DeleteHintText = styled.div` @@ -7,7 +8,7 @@ export const DeleteHintText = styled.div` font-size: 1.3em; margin-bottom: 10px; ` -export const DeleteOverlay = styled.div` +export const DeleteOverlay = styled.div` ${css.flexColumn('align-both')}; position: absolute; diff --git a/src/containers/unit/Comments/styles/comment/desktop_view.ts b/src/containers/unit/Comments/styles/comment/desktop_view.ts index f4ddcb18b..730cfb1cd 100644 --- a/src/containers/unit/Comments/styles/comment/desktop_view.ts +++ b/src/containers/unit/Comments/styles/comment/desktop_view.ts @@ -18,7 +18,7 @@ export const Wrapper = styled.div` border-bottom-color: #0b4252; ` // filter: blur(3px); -export const CommentWrapper = styled.div` +export const CommentWrapper = styled.div<{ tobeDelete: boolean }>` ${css.flexGrow()}; filter: ${({ tobeDelete }) => (tobeDelete ? 'blur(3px)' : '')}; ` diff --git a/src/containers/unit/Comments/styles/comment/mobile_view/index.ts b/src/containers/unit/Comments/styles/comment/mobile_view/index.ts index e758fe012..2bf7d5660 100644 --- a/src/containers/unit/Comments/styles/comment/mobile_view/index.ts +++ b/src/containers/unit/Comments/styles/comment/mobile_view/index.ts @@ -18,7 +18,7 @@ export const Wrapper = styled.div` border-bottom-color: #0b4252; ` // filter: blur(3px); -export const CommentWrapper = styled.div` +export const CommentWrapper = styled.div<{ tobeDelete: boolean }>` filter: ${({ tobeDelete }) => (tobeDelete ? 'blur(3px)' : '')}; width: 100%; ` diff --git a/src/containers/unit/Comments/styles/comment/up_info.ts b/src/containers/unit/Comments/styles/comment/up_info.ts index ef0f5bed6..a89c193f9 100755 --- a/src/containers/unit/Comments/styles/comment/up_info.ts +++ b/src/containers/unit/Comments/styles/comment/up_info.ts @@ -14,7 +14,7 @@ export const Wrapper = styled.div` margin-top: 6px; `}; ` -export const Icon = styled(Img)` +export const Icon = styled(Img)<{ viewerDid: boolean }>` fill: ${({ viewerDid }) => viewerDid ? theme('comment.didIcon') : theme('comment.icon')}; diff --git a/src/containers/unit/Comments/styles/comment_editor.ts b/src/containers/unit/Comments/styles/comment_editor.ts index 21d9b73ee..6f9f9759e 100755 --- a/src/containers/unit/Comments/styles/comment_editor.ts +++ b/src/containers/unit/Comments/styles/comment_editor.ts @@ -1,9 +1,10 @@ import styled from 'styled-components' // import Img from '@/Img' +import { TActive } from '@/types' import { theme, css } from '@/utils' -export const Container = styled.div` +export const Container = styled.div` ${css.flexColumn()}; /* background: ${theme('drawer.articleBg')}; */ background: #013340; @@ -19,7 +20,7 @@ export const Container = styled.div` background: #08303c; /* TODO: same as comment background */ `}; ` -export const InputEditorWrapper = styled.div` +export const InputEditorWrapper = styled.div<{ showInputEditor: boolean }>` height: auto; margin: 0 30px; margin-bottom: 30px; diff --git a/src/containers/unit/Comments/styles/comments_filter.ts b/src/containers/unit/Comments/styles/comments_filter.ts index e3f393f0d..010a0cc15 100755 --- a/src/containers/unit/Comments/styles/comments_filter.ts +++ b/src/containers/unit/Comments/styles/comments_filter.ts @@ -1,9 +1,10 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' -export const FilterWraper = styled.div` +export const FilterWraper = styled.div` margin-right: 8px; margin-top: 8px; display: ${({ show }) => (show ? 'block' : 'none')}; @@ -22,7 +23,7 @@ export const Header = styled.div` font-size: 13px; `}; ` -export const FilterIcon = styled(Img)` +export const FilterIcon = styled(Img)<{ reverse: boolean }>` fill: ${theme('comment.title')}; margin-right: 3px; ${css.size(20)}; @@ -38,10 +39,10 @@ export const MenuWrapper = styled.div` margin-top: 10px; ` -export const MenuItem = styled.div` +export const MenuItem = styled.div` margin-bottom: 10px; - color: ${({ active, type }) => - active === type ? theme('comment.filterActive') : theme('comment.filter')}; + color: ${({ active }) => + active ? theme('comment.filterActive') : theme('comment.filter')}; &:hover { cursor: pointer; color: ${theme('comment.filterActive')}; diff --git a/src/containers/unit/Comments/styles/words_counter.ts b/src/containers/unit/Comments/styles/words_counter.ts index a34f20ed2..e7c5def41 100755 --- a/src/containers/unit/Comments/styles/words_counter.ts +++ b/src/containers/unit/Comments/styles/words_counter.ts @@ -23,7 +23,7 @@ const getColor = (num) => { return 'yellowgreen' } -export const CounterCur = styled.div` +export const CounterCur = styled.div<{ num: number }>` margin-right: 5px; font-size: 1em; color: ${({ num }) => getColor(num)}; diff --git a/src/containers/unit/Footer/styles/desktop_view/brief_view.ts b/src/containers/unit/Footer/styles/desktop_view/brief_view.ts index f66782342..a08d267df 100755 --- a/src/containers/unit/Footer/styles/desktop_view/brief_view.ts +++ b/src/containers/unit/Footer/styles/desktop_view/brief_view.ts @@ -11,12 +11,12 @@ export const Wrapper = styled.div` width: 100%; margin-top: 15px; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${({ metric }) => css.fitPageWidth(metric)}; width: 100%; margin-bottom: ${({ metric }) => (metric === 'article' ? '30px' : 0)}; ` -export const MainInfos = styled.footer` +export const MainInfos = styled.footer<{ center: boolean }>` ${css.flexColumn('align-center')}; align-items: ${({ center }) => (center ? 'center' : 'flex-start')}; margin-bottom: 20px; diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts b/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts index 181bc32de..09c13d679 100644 --- a/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts +++ b/src/containers/unit/Footer/styles/desktop_view/digest_view/contact_bar.ts @@ -6,7 +6,7 @@ export const Wrapper = styled.footer` ${css.flexColumn('align-center')}; width: 100%; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ isMobile: boolean }>` ${css.flex('align-center')}; justify-content: ${({ isMobile }) => !isMobile ? 'space-between' : 'center'}; diff --git a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts index f5f5589e3..55622cfd3 100644 --- a/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts +++ b/src/containers/unit/Footer/styles/desktop_view/digest_view/index.ts @@ -7,7 +7,9 @@ import { ArrowLink } from '@/components/Buttons' // import { getPadding } from '../../metrics' -export const Wrapper = styled.footer` +type TItem = { normal: boolean; offsetTop: string } + +export const Wrapper = styled.footer<{ metric: string }>` ${css.flexColumn('align-center')}; width: 100%; margin-top: 30px; @@ -31,7 +33,7 @@ export const MainInfos = styled.div` ${css.media.tablet`display: none;`}; ` -export const Column = styled.div` +export const Column = styled.div<{ margin: string }>` ${css.flexColumn()}; min-width: 100px; margin-right: ${({ margin }) => margin || '50px'}; @@ -82,7 +84,7 @@ export const Body = styled.div` ${css.flexColumn('justify-start')}; color: ${theme('footer.text')}; ` -export const Item = styled.a` +export const Item = styled.a` color: ${theme('footer.text')}; font-size: 14px; diff --git a/src/containers/unit/Footer/styles/index.ts b/src/containers/unit/Footer/styles/index.ts index 769d66a79..ad5415764 100755 --- a/src/containers/unit/Footer/styles/index.ts +++ b/src/containers/unit/Footer/styles/index.ts @@ -1,11 +1,13 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { C11N } from '@/constant' import { css } from '@/utils' -export const Wrapper = styled.footer.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type TWrapper = TTestable & { metric: string; layout: string } +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('justify-center')}; margin-top: ${({ layout }) => (layout === C11N.DIGEST_ROW ? '50px' : '80px')}; ${({ metric }) => css.fitPageWidth(metric)}; diff --git a/src/containers/unit/Header/styles/desktop_view/community_view.ts b/src/containers/unit/Header/styles/desktop_view/community_view.ts index 0f7f8e639..1ff23c514 100644 --- a/src/containers/unit/Header/styles/desktop_view/community_view.ts +++ b/src/containers/unit/Header/styles/desktop_view/community_view.ts @@ -1,11 +1,19 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme, css } from '@/utils' import HeaderSearchSVG from '@/SvgIcons/HeaderSearchSVG' -export const Wrapper = styled.header.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type TPos = { + noBorder: boolean + leftOffset: string +} + +type IWrapper = TPos & TTestable + +export const Wrapper = styled.header.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` width: 100%; height: 33px; ${css.flex('justify-center')}; @@ -16,7 +24,7 @@ export const Wrapper = styled.header.attrs((props) => ({ margin-left: ${({ leftOffset }) => leftOffset}; box-shadow: ${({ noBorder }) => (noBorder ? 'none' : theme('drawer.shadow'))}; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flex('align-center')}; padding: 0 4px; width: 100%; @@ -27,9 +35,11 @@ export const RouterWrapper = styled.div` ${css.flexGrow('align-center')}; height: 100%; ` -export const HeaderSearchIcon = styled(HeaderSearchSVG).attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const HeaderSearchIcon = styled(HeaderSearchSVG).attrs( + ({ testid }: TTestable) => ({ + 'data-test-id': testid, + }), +)` fill: ${theme('header.fg')}; ${css.size(18)}; display: block; @@ -39,8 +49,8 @@ export const HeaderSearchIcon = styled(HeaderSearchSVG).attrs((props) => ({ export const Operations = styled.div` ${css.flex('align-center')}; ` -export const Search = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Search = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` color: ${theme('header.fg')}; ` diff --git a/src/containers/unit/Header/styles/index.ts b/src/containers/unit/Header/styles/index.ts index a57cb4b22..0ce551f5b 100644 --- a/src/containers/unit/Header/styles/index.ts +++ b/src/containers/unit/Header/styles/index.ts @@ -1,8 +1,10 @@ import styled from 'styled-components' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +import { TTestable } from '@/types' + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: relative; ` export const MobileWrapper = styled.div` diff --git a/src/containers/unit/Header/styles/user_account.ts b/src/containers/unit/Header/styles/user_account.ts index 90d6ce040..2c27a646d 100755 --- a/src/containers/unit/Header/styles/user_account.ts +++ b/src/containers/unit/Header/styles/user_account.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.media.mobile` padding: 0; padding-right: 10px; diff --git a/src/containers/unit/Labeler/styles/options.ts b/src/containers/unit/Labeler/styles/options.ts index 63c02a9b1..f5a5f5b26 100755 --- a/src/containers/unit/Labeler/styles/options.ts +++ b/src/containers/unit/Labeler/styles/options.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' @@ -18,7 +19,7 @@ export const OptionItem = styled.div` cursor: pointer; } ` -export const OptionCheckIcon = styled(Img)` +export const OptionCheckIcon = styled(Img)` fill: ${theme('banner.title')}; opacity: ${({ active }) => (active ? '1' : '0')}; ${css.size(12)}; diff --git a/src/containers/unit/ModeLine/TopBar/DesktopView.js b/src/containers/unit/ModeLine/TopBar/DesktopView.js index aef85752d..50985615c 100644 --- a/src/containers/unit/ModeLine/TopBar/DesktopView.js +++ b/src/containers/unit/ModeLine/TopBar/DesktopView.js @@ -11,7 +11,7 @@ import { import { tabOnChange } from '../logic' -const DesktopView = ({ visiable, viewing, leftOffset, hasNoBottomBorder }) => { +const DesktopView = ({ visible, viewing, leftOffset, hasNoBottomBorder }) => { const { community, activeThread } = viewing return ( @@ -19,7 +19,7 @@ const DesktopView = ({ visiable, viewing, leftOffset, hasNoBottomBorder }) => { leftOffset={leftOffset} noBorder={hasNoBottomBorder} testid="modeline-topbar" - visiable={visiable} + visible={visible} > diff --git a/src/containers/unit/ModeLine/TopBar/MobileView/ArticleBar/index.js b/src/containers/unit/ModeLine/TopBar/MobileView/ArticleBar/index.js index 6e2c569c9..44797305c 100644 --- a/src/containers/unit/ModeLine/TopBar/MobileView/ArticleBar/index.js +++ b/src/containers/unit/ModeLine/TopBar/MobileView/ArticleBar/index.js @@ -10,11 +10,11 @@ import { Avatar, } from '../../../styles/top_bar/mobile_view/article_bar' -const ArticleBar = ({ visiable, viewingArticle }) => { +const ArticleBar = ({ visible, viewingArticle }) => { const { author, title } = viewingArticle return ( - + { +const CommunityBar = ({ visible, viewing, leftOffset, hasNoBottomBorder }) => { const { community, activeThread } = viewing return ( @@ -21,7 +21,7 @@ const CommunityBar = ({ visiable, viewing, leftOffset, hasNoBottomBorder }) => { leftOffset={leftOffset} noBorder={hasNoBottomBorder} testid="modeline-topbar" - visiable={visiable} + visible={visible} > diff --git a/src/containers/unit/ModeLine/index.tsx b/src/containers/unit/ModeLine/index.tsx index e2c24f2c3..85cccbc82 100755 --- a/src/containers/unit/ModeLine/index.tsx +++ b/src/containers/unit/ModeLine/index.tsx @@ -53,7 +53,7 @@ const ModeLineContainer: React.FC = ({ diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts b/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts index 14c84a985..355b02532 100644 --- a/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts +++ b/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts @@ -1,9 +1,10 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const MenuLogo = styled(Img)` +export const MenuLogo = styled(Img)` fill: ${({ active }) => (active ? '#2ca1a2' : theme('thread.articleTitle'))}; ${css.size(12)}; ` @@ -11,11 +12,11 @@ export const SiteLogo = styled(MenuLogo)` ${css.size(15)}; margin-top: -1px; ` -export const ExploreLogo = styled(Img)` +export const ExploreLogo = styled(Img)` fill: ${({ active }) => (active ? '#2ca1a2' : theme('thread.articleTitle'))}; ${css.size(14)}; ` -const Block = styled.div` +const Block = styled.div<{ bgColor: string }>` position: relative; ${css.flex('align-center')}; color: ${theme('thread.articleTitle')}; @@ -23,7 +24,7 @@ const Block = styled.div` background: ${({ bgColor }) => bgColor}; padding-left: 10px; ` -export const ArrowShape = styled.div` +export const ArrowShape = styled.div<{ bgColor: string }>` position: absolute; right: -10px; width: 0; @@ -50,12 +51,12 @@ export const AccountWrapper = styled(Block)` padding-left: 6px; padding-right: 10px; ` -export const MenuArrowShape = styled(ArrowShape)` +export const MenuArrowShape = styled(ArrowShape)<{ bgColor: string }>` right: -6px; border-left: 6px solid; border-left-color: ${({ bgColor }) => bgColor}; ` -export const ArrowShapeLeft = styled(ArrowShape)` +export const ArrowShapeLeft = styled(ArrowShape)<{ bgColor: string }>` left: -6px; border-left: 6px solid; border-left-color: ${({ bgColor }) => bgColor}; diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/community_info.ts b/src/containers/unit/ModeLine/styles/bottom_bar/community_info.ts index 8cae4a553..f01346437 100644 --- a/src/containers/unit/ModeLine/styles/bottom_bar/community_info.ts +++ b/src/containers/unit/ModeLine/styles/bottom_bar/community_info.ts @@ -6,7 +6,7 @@ import { css } from '@/utils' export const Wrapper = styled.div` ${css.flex('align-center')}; ` -export const Logo = styled(Img)` +export const Logo = styled(Img)<{ isExpand: boolean }>` width: ${({ isExpand }) => (isExpand ? '12px' : '14px')}; height: ${({ isExpand }) => (isExpand ? '12px' : '14px')}; margin-top: -1px; @@ -14,7 +14,7 @@ export const Logo = styled(Img)` margin-right: ${({ isExpand }) => (isExpand ? '0' : '10px')}; transition: all 0.25s; ` -export const Title = styled.div` +export const Title = styled.div<{ isSubscribed: boolean }>` ${css.cutFrom('50px')}; color: ${({ isSubscribed }) => (isSubscribed ? '#b4e1e2' : '#a0bebf')}; font-size: 12px; diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/index.ts b/src/containers/unit/ModeLine/styles/bottom_bar/index.ts index 59554a376..8edb43390 100644 --- a/src/containers/unit/ModeLine/styles/bottom_bar/index.ts +++ b/src/containers/unit/ModeLine/styles/bottom_bar/index.ts @@ -1,11 +1,14 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type IMenuIcon = { active: boolean; colorTheme: string } + +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: fixed; left: 0; bottom: 0px; @@ -30,8 +33,9 @@ export const ItemsWrapper = styled.div` export const MenuItem = styled.div` ${css.flex('align-center')}; ` -export const MenuIcon = styled(Img)` - fill: ${({ active, colorTheme }) => { + +export const MenuIcon = styled(Img)` + fill: ${({ active, colorTheme }: IMenuIcon) => { if (colorTheme) return theme(colorTheme) return active ? '#2ca1a2' : theme('thread.articleTitle') }}; diff --git a/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts b/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts index eb4bdd304..741d39817 100644 --- a/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts +++ b/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts @@ -1,11 +1,13 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import { css, theme, WIDTH } from '@/utils' -import { getMaxWidth } from '../metrics/top_bar' +// import { getMaxWidth } from '../metrics/top_bar' -export const WrapperBase = styled.header.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +type TWrapper = TTestable & { noBorder: boolean; leftOffset: string } +export const WrapperBase = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` z-index: 2; width: 100%; ${css.flex('justify-center')}; @@ -19,23 +21,22 @@ export const WrapperBase = styled.header.attrs((props) => ({ /* padding: ${({ type, layout }) => getPadding(type, layout)}; */ export const InnerWrapperBase = styled.div` ${css.flex('align-center')}; - /* max-width: ${({ type }) => getMaxWidth(type)}; */ width: 100%; max-width: ${WIDTH.COMMUNITY.CONTENT}; height: 33px; transition: all 0.2s; margin-left: -24px; ` -export const Wrapper = styled.div` +export const Wrapper = styled.div` ${css.flex('justify-center')}; position: fixed; z-index: ${css.zIndex.header}; - top: ${({ visiable }) => (visiable ? '0' : '-33px')}; + top: ${({ visible }) => (visible ? '0' : '-33px')}; width: 100%; max-width: ${WIDTH.COMMUNITY.PAGE}; /* TODO: move namespace to modeline */ background: ${theme('header.fixed')}; - opacity: ${({ visiable }) => (visiable ? 1 : '0')}; + opacity: ${({ visible }) => (visible ? 1 : '0')}; /* border: 1px solid tomato; */ height: 32px; box-shadow: -5px 6px 37px -8px rgba(0, 0, 0, 0.42); diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts index 68fc27606..11194d035 100644 --- a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts +++ b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts @@ -1,17 +1,18 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div` ${css.flex('justify-start')}; position: fixed; z-index: ${css.zIndex.header}; - top: ${({ visiable }) => (visiable ? '0' : '-33px')}; + top: ${({ visible }) => (visible ? '0' : '-33px')}; width: 100%; /* TODO: move namespace to modeline */ background: ${theme('header.fixed')}; - opacity: ${({ visiable }) => (visiable ? 1 : '0')}; + opacity: ${({ visible }) => (visible ? 1 : '0')}; height: 32px; padding-left: 5vw; diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts index b85e9c76c..fe136feb2 100644 --- a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts +++ b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts @@ -1,16 +1,17 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { css, theme } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div` ${css.flex('justify-start')}; position: fixed; z-index: ${css.zIndex.header}; - top: ${({ visiable }) => (visiable ? '0' : '-33px')}; + top: ${({ visible }) => (visible ? '0' : '-33px')}; width: 100%; /* TODO: move namespace to modeline */ background: ${theme('header.fixed')}; - opacity: ${({ visiable }) => (visiable ? 1 : '0')}; + opacity: ${({ visible }) => (visible ? 1 : '0')}; height: 32px; padding-left: 5vw; diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/tag_block.ts b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/tag_block.ts index 5848b71b6..dbe9d7d0e 100644 --- a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/tag_block.ts +++ b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/tag_block.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import { css, theme } from '@/utils' -const Block = styled.div` +const Block = styled.div<{ bgColor: string }>` position: relative; ${css.flex('align-center')}; color: ${theme('thread.articleTitle')}; @@ -10,7 +10,7 @@ const Block = styled.div` background: ${({ bgColor }) => bgColor}; padding-left: 10px; ` -const ArrowShape = styled.div` +const ArrowShape = styled.div<{ bgColor: string }>` position: absolute; right: -10px; width: 0; @@ -25,7 +25,7 @@ export const TagWrapper = styled(Block)` padding-left: 0; padding-right: 0; ` -export const ArrowShapeLeft = styled(ArrowShape)` +export const ArrowShapeLeft = styled(ArrowShape)<{ bgColor: string }>` left: -10px; border-left: 10px solid; border-left-color: ${({ bgColor }) => bgColor}; diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts index a1e417969..1d5d6af58 100644 --- a/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts +++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('justify-between')}; width: 100%; padding: 0; @@ -36,7 +37,7 @@ export const TagWrapper = styled.div` border-left-color: #183d54; border-right-color: #183d54; ` -export const ItemBar = styled.div` +export const ItemBar = styled.div` ${css.flex('align-center', 'justify-between')}; color: ${({ active }) => active ? theme('thread.articleTitle') : theme('thread.articleDigest')}; diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts index 16e959e16..70ad57f5e 100644 --- a/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts +++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' // import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('justify-between')}; width: 100%; /* border-bottom: 1px solid; diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts index 297fbf326..c15f8115a 100644 --- a/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts +++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' // import Img from '@/Img' +import { TTestable } from '@/types' import { css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start')}; margin-top: 25px; width: 100%; diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts index 70546c26b..d2c9b5011 100644 --- a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts +++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts @@ -1,17 +1,18 @@ import styled from 'styled-components' +import { TTestable, TActive } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start')}; width: 32vw; max-width: 32vw; height: 100%; ` -export const ItemBar = styled.div` +export const ItemBar = styled.div` ${css.flexColumn('align-start')}; width: 95%; margin-bottom: 10px; diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts index b13450707..998c5509c 100644 --- a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts +++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-start')}; width: 100%; height: auto; diff --git a/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts b/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts index a7c9e7a6b..9f40acbb1 100644 --- a/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts +++ b/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-center')}; width: 100%; ` diff --git a/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts b/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts index 143bc5714..45781d1dc 100644 --- a/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts +++ b/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('justify-center')}; width: 100%; margin-top: 30px; diff --git a/src/containers/unit/ModeLineMenu/styles/index.ts b/src/containers/unit/ModeLineMenu/styles/index.ts index a40cdd433..78647d7bd 100755 --- a/src/containers/unit/ModeLineMenu/styles/index.ts +++ b/src/containers/unit/ModeLineMenu/styles/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-both')}; height: 100%; padding: 0 6vw; diff --git a/src/containers/unit/ModeLineMenu/styles/more_menu.ts b/src/containers/unit/ModeLineMenu/styles/more_menu.ts index 843a5393d..5b3c0491c 100644 --- a/src/containers/unit/ModeLineMenu/styles/more_menu.ts +++ b/src/containers/unit/ModeLineMenu/styles/more_menu.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { css } from '@/utils' import { L_MENU_HEIGHT } from './metrics/index' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flex('align-both')}; height: ${L_MENU_HEIGHT}; margin-top: -20px; diff --git a/src/containers/unit/ModeLineMenu/styles/navi_button.ts b/src/containers/unit/ModeLineMenu/styles/navi_button.ts index 2af747d2b..497d51a17 100644 --- a/src/containers/unit/ModeLineMenu/styles/navi_button.ts +++ b/src/containers/unit/ModeLineMenu/styles/navi_button.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-both')}; width: 68px; /* height: 74px; */ diff --git a/src/containers/unit/ModeLineMenu/styles/search_menu.ts b/src/containers/unit/ModeLineMenu/styles/search_menu.ts index 846d34f10..3993586bc 100644 --- a/src/containers/unit/ModeLineMenu/styles/search_menu.ts +++ b/src/containers/unit/ModeLineMenu/styles/search_menu.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-center', 'justify-start')}; margin-top: 42px; width: 100%; diff --git a/src/containers/unit/Sidebar/styles/footer.ts b/src/containers/unit/Sidebar/styles/footer.ts index 8d866f8d8..492dd03ef 100755 --- a/src/containers/unit/Sidebar/styles/footer.ts +++ b/src/containers/unit/Sidebar/styles/footer.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' @@ -13,7 +14,7 @@ export const InnerWrapper = styled.div` ${css.flex('align-center')}; height: 5vh; ` -export const OptionWrapper = styled.div` +export const OptionWrapper = styled.div<{ pin: boolean }>` ${css.flex('justify-center')}; opacity: ${({ pin }) => (pin ? '1' : '0')}; justify-content: ${({ pin }) => (pin ? 'center' : '')}; @@ -26,7 +27,7 @@ export const OptionDivider = styled.div` border-right-color: ${theme('sidebar.menuLink')}; opacity: 0.4; ` -export const OptionItem = styled.div` +export const OptionItem = styled.div` ${css.flex('align-center')}; background: ${({ active }) => active ? theme('sidebar.menuHover') : 'transparent'}; @@ -38,7 +39,7 @@ export const OptionIcon = styled(Img)` fill: ${theme('sidebar.menuLink')}; ${css.size(12)}; ` -export const OptionText = styled.div` +export const OptionText = styled.div` font-size: 13px; margin-left: 5px; color: ${({ active }) => diff --git a/src/containers/unit/Sidebar/styles/header.ts b/src/containers/unit/Sidebar/styles/header.ts index 485338035..3b3437833 100755 --- a/src/containers/unit/Sidebar/styles/header.ts +++ b/src/containers/unit/Sidebar/styles/header.ts @@ -25,14 +25,14 @@ export const MenuWrapper = styled.div` visibility: visible; width: 25px; ` -export const MenuLogo = styled(Img)` +export const MenuLogo = styled(Img)<{ pin: boolean }>` fill: ${({ pin }) => pin ? theme('sidebar.pinActive') : theme('banner.title')}; ${css.size(18)}; opacity: 0.5; cursor: pointer; ` -export const PinIcon = styled(Img)` +export const PinIcon = styled(Img)<{ pin: boolean }>` fill: ${({ pin }) => (pin ? theme('sidebar.pinActive') : 'grey')}; margin-right: 10px; width: 23px; @@ -42,7 +42,7 @@ export const PinIcon = styled(Img)` /* transition: visibility 0s, opacity 0.3s linear; */ cursor: pointer; ` -export const SearchWrapper = styled.div` +export const SearchWrapper = styled.div<{ pin: boolean }>` padding-left: 16px; visibility: ${({ pin }) => (pin ? 'visible' : 'hidden')}; opacity: ${({ pin }) => (pin ? 1 : 0)}; diff --git a/src/containers/unit/Sidebar/styles/index.ts b/src/containers/unit/Sidebar/styles/index.ts index d256218e4..95d47edf6 100755 --- a/src/containers/unit/Sidebar/styles/index.ts +++ b/src/containers/unit/Sidebar/styles/index.ts @@ -1,14 +1,15 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme, css } from '@/utils' import { getMainWidth, getShadow, SIDEBAR_WIDTH } from './metric' // 纯css，div隐藏滚动条，保留鼠标滚动效果。 // http://blog.csdn.net/liusaint1992/article/details/51277751 -export const Wrapper = styled.aside.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.aside.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` position: fixed; top: 0; min-width: ${SIDEBAR_WIDTH}; @@ -25,12 +26,13 @@ export const Wrapper = styled.aside.attrs((props) => ({ `}; ${css.media.tablet`display: none`}; ` -export const MainWrapper = styled.div.attrs(({ pin }) => ({ +type TMainWrapper = { pin: boolean; isPulled?: boolean } +export const MainWrapper = styled.div.attrs(({ pin }: TMainWrapper) => ({ style: { width: getMainWidth(pin), 'box-shadow': getShadow(pin), }, -}))` +}))` display: ${({ isPulled }) => (isPulled ? 'flex' : 'none')}; flex-direction: column; diff --git a/src/containers/unit/Sidebar/styles/loading_blocks.ts b/src/containers/unit/Sidebar/styles/loading_blocks.ts index bdcb98776..7c95b5c2c 100644 --- a/src/containers/unit/Sidebar/styles/loading_blocks.ts +++ b/src/containers/unit/Sidebar/styles/loading_blocks.ts @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { animate, css, theme } from '@/utils' import { SIDEBAR_WIDTH } from './metric' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` ${css.flexColumn('align-center')}; background: ${theme('sidebar.bg')}; width: ${SIDEBAR_WIDTH}; diff --git a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts index 85cbb2695..85fc52863 100755 --- a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts +++ b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts @@ -1,9 +1,12 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' import Img from '@/Img' import CommunityFaceLogo from '@/components/CommunityFaceLogo' +type TMenuItemTitle = TActive & { pin: boolean; forceRerender: boolean } + export const Wrapper = styled.div` display: block; position: relative; @@ -11,7 +14,7 @@ export const Wrapper = styled.div` transition: all 0.25s; ` -export const ActiveBar = styled.div` +export const ActiveBar = styled.div` position: absolute; opacity: ${({ active }) => (active ? 1 : 0)}; background: ${theme('sidebar.activeBar')}; @@ -27,7 +30,7 @@ export const ActiveBar = styled.div` transition: opacity 0.25s; ` -export const DragIcon = styled(Img)` +export const DragIcon = styled(Img)` position: absolute; top: 15px; left: 0; @@ -52,19 +55,19 @@ export const MenuItemBar = styled.div` box-sizing: border-box; color: ${theme('sidebar.menuLink')}; ` -export const MenuRow = styled.div` +export const MenuRow = styled.div<{ sortOptActive: boolean }>` ${css.flex('align-center')}; font-size: 1rem; margin-left: ${({ sortOptActive }) => (sortOptActive ? '10px' : '0')}; ` // opacity maybe overwrite by lazy image -export const MenuItemIcon = styled(CommunityFaceLogo)` +export const MenuItemIcon = styled(CommunityFaceLogo)` opacity: ${({ active }) => (active ? '1 !important' : '0.8 !important')}; ${css.size(22)}; margin-right: 10px; transition: opacity 0.2s; ` -export const MenuItemTitle = styled.div` +export const MenuItemTitle = styled.div` /* flex-grow: 1; */ width: ${({ pin }) => (pin ? '100%' : '1px')}; max-width: ${({ pin }) => (pin ? '52%' : '')}; @@ -80,7 +83,7 @@ export const MenuItemTitle = styled.div` } transition: opacity 0.25s; ` -export const MiniChartWrapper = styled.div` +export const MiniChartWrapper = styled.div<{ pin: boolean }>` display: ${({ pin }) => (pin ? 'flex' : 'none')}; width: 45%; justify-content: center; diff --git a/src/containers/unit/Sidebar/styles/pull_button.ts b/src/containers/unit/Sidebar/styles/pull_button.ts index 7917c68f8..473a71ef0 100644 --- a/src/containers/unit/Sidebar/styles/pull_button.ts +++ b/src/containers/unit/Sidebar/styles/pull_button.ts @@ -22,7 +22,7 @@ export const Shape = styled(Img)` left: -48px; transform: rotate(90deg); ` -export const ArrowIcon = styled(Img)` +export const ArrowIcon = styled(Img)<{ isPulled: boolean }>` position: absolute; top: 44px; left: 0; diff --git a/src/containers/unit/TagsBar/styles/card_view.ts b/src/containers/unit/TagsBar/styles/card_view.ts index ff960512c..89f20a305 100644 --- a/src/containers/unit/TagsBar/styles/card_view.ts +++ b/src/containers/unit/TagsBar/styles/card_view.ts @@ -1,8 +1,11 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import { theme, css } from '@/utils' +type TTagDot = TActive & { title: string; color: string } + export const Wrapper = styled.div` ${css.flex()}; flex-wrap: wrap; @@ -23,7 +26,7 @@ const getDotBgColor = (active, title, color) => { return active === title ? color : 'lightgrey' } -export const TagDot = styled.div` +export const TagDot = styled.div` ${css.circle(9)}; margin-right: 8px; diff --git a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts index fa0f6c482..9c37aa0da 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts @@ -13,7 +13,7 @@ export const Header = styled.div` /* opacity: 0.65; */ } ` -export const ArrowIcon = styled(Img)` +export const ArrowIcon = styled(Img)<{ isOpen: boolean }>` fill: ${theme('tags.text')}; ${css.size(16)}; opacity: 0.5; @@ -35,7 +35,7 @@ export const Title = styled.div` opacity: 0.65; } ` -export const Content = styled.div` +export const Content = styled.div<{ isOpen: boolean }>` display: ${({ isOpen }) => (isOpen ? 'block' : 'none')}; width: 100%; margin-bottom: 15px; diff --git a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts index 9d8e44910..6d91038fa 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts @@ -1,9 +1,10 @@ import styled from 'styled-components' +import { TActive } from '@/types' import { theme, css } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.div` +export const Wrapper = styled.div` ${css.flex('align-center')}; margin-bottom: 5px; max-width: 180px; diff --git a/src/containers/unit/TagsBar/styles/desktop_view/tag_count.ts b/src/containers/unit/TagsBar/styles/desktop_view/tag_count.ts index 1e7dc0d15..472e1cc8c 100755 --- a/src/containers/unit/TagsBar/styles/desktop_view/tag_count.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/tag_count.ts @@ -27,11 +27,13 @@ export const Count = styled.div` ` const MAX_WIDTH = 50 -export const ChartBar = styled.div.attrs(({ percent }) => ({ - style: { - width: `${MAX_WIDTH * percent}px`, - }, -}))` +export const ChartBar = styled.div.attrs( + ({ percent }: { percent: number }) => ({ + style: { + width: `${MAX_WIDTH * percent}px`, + }, + }), +)<{ percent: number }>` position: absolute; bottom: -1px; right: 0; diff --git a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts index ec744e550..92adf8f7c 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts @@ -1,12 +1,15 @@ import styled from 'styled-components' +import { TActive } from '@/types' import Img from '@/Img' import HashTagSVG from '@/SvgIcons/HashTagSVG' import { theme, css } from '@/utils' import { TagsWrapper } from './index' -export const Wrapper = styled.div` +type TTag = TActive & { inline: boolean } + +export const Wrapper = styled.div` ${css.flex('align-center')}; margin-bottom: ${({ inline }) => (!inline ? '3px' : 0)}; padding: ${({ inline }) => (!inline ? '5px' : 0)}; @@ -41,7 +44,7 @@ export const HashSign = styled(HashTagSVG)` transform: rotate(18deg); ` -export const TagTitle = styled.div` +export const TagTitle = styled.div` color: ${theme('tags.text')}; font-size: ${({ inline }) => (!inline ? '14.5px' : '13px')}; opacity: 0.9; diff --git a/src/containers/user/UserBilling/styles/upgrade_menu.ts b/src/containers/user/UserBilling/styles/upgrade_menu.ts index 4c210612f..48f71b03f 100755 --- a/src/containers/user/UserBilling/styles/upgrade_menu.ts +++ b/src/containers/user/UserBilling/styles/upgrade_menu.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' // import Img from '@/Img' import { theme } from '@/utils' -export const PlanDivider = styled.div` +export const PlanDivider = styled.div<{ hide: boolean }>` border-bottom: 1px solid; border-color: ${theme('tabs.bottomLine')}; margin: 10px 0; diff --git a/src/containers/user/UserBilling/styles/xxx_plan.ts b/src/containers/user/UserBilling/styles/xxx_plan.ts index 4c62dfaa3..bd9edcfb1 100755 --- a/src/containers/user/UserBilling/styles/xxx_plan.ts +++ b/src/containers/user/UserBilling/styles/xxx_plan.ts @@ -20,7 +20,7 @@ export const GirlTitle = styled(PlanTitle)` ${css.flexColumn()}; color: ${theme('baseColor.pink')}; ` -export const TitleDesc = styled.div` +export const TitleDesc = styled.div<{ pink: boolean }>` color: ${({ pink }) => pink ? theme('baseColor.pinkLite') : theme('thread.articleDigest')}; ` @@ -54,7 +54,7 @@ export const PinkButton = styled(Button)` ${pinkHover}; } ` -export const DescLine = styled.div` +export const DescLine = styled.div<{ green: boolean }>` color: ${({ green }) => (green ? theme('baseColor.green') : '')}; font-size: 0.85rem; margin-bottom: 4px; diff --git a/src/containers/user/UserProfile/styles/activities/brief_info.ts b/src/containers/user/UserProfile/styles/activities/brief_info.ts index acd948aee..da528aebd 100644 --- a/src/containers/user/UserProfile/styles/activities/brief_info.ts +++ b/src/containers/user/UserProfile/styles/activities/brief_info.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import { theme, css } from '@/utils' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ first: boolean }>` ${css.flexColumn('align-start')}; padding: 10px 15px; padding-top: ${({ first }) => (first ? '40px' : '10px')}; diff --git a/src/containers/user/UserProfile/styles/activities/detail_info.ts b/src/containers/user/UserProfile/styles/activities/detail_info.ts index 789f2e09b..fba877afa 100644 --- a/src/containers/user/UserProfile/styles/activities/detail_info.ts +++ b/src/containers/user/UserProfile/styles/activities/detail_info.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' import { theme, css } from '@/utils' import Img from '@/Img' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ first: boolean }>` position: relative; ${css.flexColumn()}; padding: 10px 30px; @@ -14,7 +14,7 @@ export const Wrapper = styled.div` padding-top: ${({ first }) => (first ? '40px' : '10px')}; ` -export const IconWrapper = styled.div` +export const IconWrapper = styled.div<{ first: boolean }>` position: absolute; top: ${({ first }) => (first ? '43px' : '13px')}; left: -13px; diff --git a/src/containers/user/UserProfile/styles/contribute_map.ts b/src/containers/user/UserProfile/styles/contribute_map.ts index 36cc5f3c4..2d22e54ab 100644 --- a/src/containers/user/UserProfile/styles/contribute_map.ts +++ b/src/containers/user/UserProfile/styles/contribute_map.ts @@ -42,7 +42,7 @@ export const DotList = styled.div` margin-left: 5px; margin-right: 3px; ` -export const ColorDot = styled.div` +export const ColorDot = styled.div<{ scale: string }>` ${css.size(8)}; border-radius: 2px; margin-right: 3px; diff --git a/src/containers/user/UserProfile/styles/index.ts b/src/containers/user/UserProfile/styles/index.ts index 5d055ce6f..c25ae95e0 100755 --- a/src/containers/user/UserProfile/styles/index.ts +++ b/src/containers/user/UserProfile/styles/index.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))`` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))`` export const ContributesWrapper = styled.div` width: 100%; max-width: 800px; diff --git a/src/containers/user/UserProfile/styles/subscribed_communities.ts b/src/containers/user/UserProfile/styles/subscribed_communities.ts index ab5cbf34a..d166f52ea 100644 --- a/src/containers/user/UserProfile/styles/subscribed_communities.ts +++ b/src/containers/user/UserProfile/styles/subscribed_communities.ts @@ -1,10 +1,11 @@ import styled from 'styled-components' +import { TTestable } from '@/types' import { theme } from '@/utils' -export const Wrapper = styled.div.attrs((props) => ({ - 'data-test-id': props.testid, -}))` +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` margin-top: 50px; padding: 0 10px; ` diff --git a/src/types/index.ts b/src/types/index.ts index d847eddb4..1bc06c312 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,5 +1,32 @@ import { IRootStore as RootStoreInterface } from '@/stores/RootStore' +export type TThemeName = + | 'cyan' + | 'solarizedDark' + | 'purple' + | 'yellow' + | 'github' + | 'Green' + | 'ironGreen' + | 'monokai' + +export type TTestable = { + testid: string +} + +export type TActive = { + active?: boolean + show?: boolean + visible?: boolean +} + +export type TSpace = { + top?: number + bottom?: number + left?: number + right?: number +} + export type IRootStore = RootStoreInterface // c# like @@ -12,11 +39,13 @@ export type TCommunity = { raw: string } -export type TAccount = { +export type TUser = { id: string login: string nickname: string avatar: string +} +export type TAccount = TUser & { customization?: { theme: string bannerLayout: string @@ -41,7 +70,9 @@ export type TViewing = { post: TArticle } -export type TTheme = ((obj: any) => unknown) | string +// export type TTheme = ((obj: any) => unknown) | string +export type TTheme = any +// export type TTheme = string // google analytis format export type GA_EVENT = { @@ -56,3 +87,14 @@ export type TSEO = { title: string description: string } + +export type TButtonSize = 'tiny' | 'small' | 'medium' | 'large' + +// button +export type TButton = { + size: TButtonSize + active: boolean + ghost?: boolean + disabled?: boolean + noBorder?: boolean +} diff --git a/utils/css/index.ts b/utils/css/index.ts index 5bc97160c..f40fcb83a 100644 --- a/utils/css/index.ts +++ b/utils/css/index.ts @@ -3,7 +3,7 @@ * common styles used in styled-component * */ -import { css as styledCss } from 'styled-components' +import { css as styledCss, CSSProp } from 'styled-components' import { theme } from '../themes' @@ -29,7 +29,7 @@ const cutFrom = (width = '100px'): string => ` text-overflow: ellipsis; ` -const threadTitleHover = (): string => { +const threadTitleHover = (): CSSProp => { return styledCss` color: ${theme('thread.articleTitle')}; text-decoration: underline; diff --git a/yarn.lock b/yarn.lock index 1edcf596b..72515de91 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2119,6 +2119,13 @@ dependencies: "@types/node" "*" +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.npm.taobao.org/@types/hoist-non-react-statics/download/@types/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/inquirer@^6.5.0": version "6.5.0" resolved "https://registry.yarnpkg.com/@types/inquirer/-/inquirer-6.5.0.tgz#b83b0bf30b88b8be7246d40e51d32fe9d10e09be" @@ -2268,6 +2275,14 @@ version "1.0.1" resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" +"@types/styled-components@^5.1.8": + version "5.1.8" + resolved "https://registry.npm.taobao.org/@types/styled-components/download/@types/styled-components-5.1.8.tgz?cache=0&sync_timestamp=1615510556267&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fstyled-components%2Fdownload%2F%40types%2Fstyled-components-5.1.8.tgz#41338fe060c543567ae94ab420036865a9b969d0" + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + "@types/through@*": version "0.0.30" resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.30.tgz#e0e42ce77e897bd6aead6f6ea62aeb135b8a3895" @@ -6936,7 +6951,7 @@ hoist-non-react-statics@^2.3.1: version "2.5.5" resolved "https://registry.npm.taobao.org/hoist-non-react-statics/download/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.2.1: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.npm.taobao.org/hoist-non-react-statics/download/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" dependencies: @@ -10307,9 +10322,9 @@ preserve@^0.2.0: version "0.2.0" resolved "https://registry.npm.taobao.org/preserve/download/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" -prettier@2.0.5: - version "2.0.5" - resolved "https://registry.npm.taobao.org/prettier/download/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4" +prettier@2.2.1: + version "2.2.1" + resolved "https://registry.npm.taobao.org/prettier/download/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5" prettier@^1.18.2: version "1.19.1" From 0db23a79afccbd767d2f3e171df06de3a0e95aaa Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 13 Mar 2021 20:26:51 +0800 Subject: [PATCH 2/2] refactor(ts-workflow): @/types -> @/spec --- .eslintrc.js | 2 +- src/components/AlertBar/styles/index.ts | 2 +- src/components/ArticleEditToolbar/styles/copyright_selector.ts | 2 +- src/components/Buttons/OrButton/HorizontalButton.tsx | 2 +- src/components/Buttons/styles/button.ts | 2 +- src/components/Buttons/styles/metircs/button.ts | 2 +- src/components/Buttons/styles/notify_button/index.ts | 2 +- src/components/Buttons/styles/or_button/horizontal_button.ts | 2 +- src/components/Buttons/styles/or_button/vertical_button.ts | 2 +- src/components/BuyMeChuanChuan/styles/chuan_selector.ts | 2 +- src/components/Charger/styles/index.ts | 2 +- src/components/Checker/styles/index.ts | 2 +- src/components/CollapseMenu/styles/item.ts | 2 +- src/components/Common/index.ts | 2 +- src/components/CommunityList/styles/index.ts | 2 +- src/components/CommunityStatesPad/styles/index.ts | 2 +- src/components/ContentFilter/styles/filter_result.ts | 2 +- src/components/ContentFilter/styles/index.ts | 2 +- src/components/CrashErrorHint/styles/index.ts | 2 +- src/components/CustomScroller/styles/index.ts | 2 +- src/components/DigestSentence/styles/index.ts | 2 +- src/components/DivideText/styles/index.ts | 2 +- src/components/EmailSubscriber/styles/default_layout/index.ts | 2 +- src/components/EmailSubscriber/styles/email_hint_icon.ts | 2 +- src/components/EmailSubscriber/styles/index.ts | 2 +- src/components/EmailSubscriber/styles/simple_layout.ts | 2 +- src/components/ErrorPage/styles/code_snippets.ts | 2 +- src/components/ErrorPage/styles/index.ts | 2 +- src/components/ErrorPage/styles/spin_planet.ts | 2 +- src/components/ExpandIcon/styles/index.ts | 2 +- src/components/ExpandIcon/styles/metric.ts | 2 +- src/components/FaqPeekList/styles/index.ts | 2 +- src/components/FiltersMenu/styles/filter/index.ts | 2 +- src/components/FiltersMenu/styles/header.ts | 2 +- src/components/FiltersMenu/styles/index.ts | 2 +- src/components/FocusLine/styles/index.ts | 2 +- src/components/Folder/styles/index.ts | 2 +- src/components/FormItem/styles/index.ts | 2 +- src/components/GithubRepoPage/styles/index.ts | 2 +- src/components/GotoTop/styles/index.ts | 2 +- src/components/IconText/styles/index.ts | 2 +- src/components/ImgFallback/styles/avatar.ts | 2 +- src/components/ImgFallback/styles/index.ts | 2 +- src/components/ImgFallback/styles/work.ts | 2 +- src/components/Input/styles/index.ts | 2 +- src/components/Input/styles/textarea.ts | 2 +- src/components/LinksCard/styles/index.ts | 2 +- src/components/Modal/styles/index.ts | 2 +- src/components/NaviCatalog/styles/header.ts | 2 +- src/components/NaviCatalog/styles/index.ts | 2 +- src/components/NaviCatalog/styles/list/index.ts | 2 +- src/components/NaviIntro/styles/index.ts | 2 +- src/components/Navigator/styles/index.ts | 2 +- src/components/Navigator/styles/main_entries.ts | 2 +- src/components/Pagi/styles/index.ts | 2 +- src/components/PostItem/styles/index.ts | 2 +- src/components/SectionLabel/styles/index.ts | 2 +- src/components/Select/styles/index.ts | 2 +- src/components/Sticky/styles/index.ts | 2 +- src/components/SubTitle/styles/index.ts | 2 +- src/components/Switcher/styles/icon_selector.ts | 2 +- src/components/Switcher/styles/metric/radio.ts | 2 +- .../Switcher/styles/pagi_option_selector/gallery_base.ts | 2 +- src/components/Switcher/styles/radio.ts | 2 +- src/components/Switcher/styles/tabs/drawer_view.ts | 2 +- src/components/Switcher/styles/tabs/index.ts | 2 +- src/components/Switcher/styles/tabs/mobile_view/expand_view.ts | 2 +- src/components/Switcher/styles/tabs/mobile_view/normal_view.ts | 2 +- src/components/Switcher/styles/tabs/tab_icon.ts | 2 +- src/components/Switcher/styles/tabs/tab_item.ts | 2 +- src/components/TabBar/styles/desktop_view/brief_view.ts | 2 +- src/components/TabSelector/styles/index.ts | 2 +- src/components/Tag/styles/index.ts | 2 +- src/components/TheAvatar/styles/article_author_avatar.ts | 2 +- src/components/TheAvatar/styles/index.ts | 2 +- src/components/TheAvatar/styles/post_item_avatar.ts | 2 +- src/components/ThemeSelector/styles/card_selector.ts | 2 +- src/components/ThemeSelector/styles/gallery_selector.ts | 2 +- src/components/ThemeSelector/styles/index.ts | 2 +- src/components/ThreadSelector/styles/panel.ts | 2 +- src/components/WorksCard/styles/index.ts | 2 +- src/containers/content/CommunityContent/styles/index.ts | 2 +- src/containers/content/CoolGuideContent/styles/filter_bar.ts | 2 +- src/containers/content/CoolGuideContent/styles/index.ts | 2 +- src/containers/content/DiscoveryContent/styles/banner.ts | 2 +- src/containers/content/DiscoveryContent/styles/search_box.ts | 2 +- src/containers/content/DiscoveryContent/styles/sidebar.ts | 2 +- src/containers/content/FriendsContent/styles/index.ts | 2 +- src/containers/content/HaveADrinkContent/styles/body/catalog.ts | 2 +- src/containers/content/HaveADrinkContent/styles/body/setting.ts | 2 +- src/containers/content/HelpCenterContent/Digest.tsx | 2 +- src/containers/content/HelpCenterContent/store.ts | 2 +- src/containers/content/HelpCenterContent/styles/index.ts | 2 +- .../MeetupsContent/styles/date_selector/calendar_card.ts | 2 +- .../content/MeetupsContent/styles/date_selector/cell.ts | 2 +- .../MembershipContent/styles/illustrations/air_balloon.ts | 2 +- .../content/MembershipContent/styles/illustrations/index.ts | 2 +- .../content/MembershipContent/styles/illustrations/rocket.ts | 2 +- .../content/MembershipContent/styles/illustrations/ufo.ts | 2 +- src/containers/content/MembershipContent/styles/index.ts | 2 +- .../content/MembershipContent/styles/monthly_warning.ts | 2 +- src/containers/content/MembershipContent/styles/price_tag.ts | 2 +- src/containers/content/MembershipContent/styles/qa.ts | 2 +- src/containers/content/MembershipContent/styles/support.ts | 2 +- src/containers/content/RecipesContent/styles/filter_bar.ts | 2 +- src/containers/content/RecipesContent/styles/index.ts | 2 +- src/containers/content/SponsorContent/styles/banner.ts | 2 +- src/containers/content/SponsorContent/styles/index.ts | 2 +- .../content/SponsorContent/styles/sponsor_type_title.ts | 2 +- src/containers/content/SubscribeContent/styles/actions/index.ts | 2 +- src/containers/content/SubscribeContent/styles/index.ts | 2 +- src/containers/content/WorksContent/styles/brand.ts | 2 +- src/containers/content/WorksContent/styles/index.ts | 2 +- src/containers/content/WorksContent/styles/list/option_tab.ts | 2 +- .../content/WorksContent/styles/right_sidebar/index.ts | 2 +- .../WorksContent/styles/right_sidebar/interviews_list.ts | 2 +- .../content/WorksContent/styles/right_sidebar/linkers.ts | 2 +- src/containers/digest/ArticleDigest/styles/reaction_numbers.ts | 2 +- src/containers/digest/CommunityDigest/styles/index.ts | 2 +- src/containers/editor/AccountEditor/styles/social_inputer.ts | 2 +- .../editor/ArticleEditor/styles/editor/header/adder.ts | 2 +- .../editor/ArticleEditor/styles/editor/header/deleter.ts | 2 +- .../editor/ArticleEditor/styles/editor/header/index.ts | 2 +- src/containers/editor/ArticleEditor/styles/index.ts | 2 +- src/containers/editor/CommunityEditor/styles/banner/index.ts | 2 +- .../editor/CommunityEditor/styles/banner/input_box.ts | 2 +- .../CommunityEditor/styles/banner/select_type/type_boxes.ts | 2 +- src/containers/editor/JobEditor/styles/index.ts | 2 +- src/containers/editor/PostEditor/styles/index.ts | 2 +- src/containers/editor/VideoEditor/styles/source_options.ts | 2 +- .../editor/WorksEditor/styles/content/article_part/index.ts | 2 +- .../styles/content/basic_info_part/cover_uploader.ts | 2 +- .../editor/WorksEditor/styles/content/basic_info_part/index.ts | 2 +- .../editor/WorksEditor/styles/content/common_questions.ts | 2 +- src/containers/editor/WorksEditor/styles/content/index.ts | 2 +- src/containers/editor/WorksEditor/styles/content/launch_part.ts | 2 +- src/containers/editor/WorksEditor/styles/content/name_part.ts | 2 +- .../editor/WorksEditor/styles/content/tech_stack_part/index.ts | 2 +- src/containers/editor/WorksEditor/styles/index.ts | 2 +- src/containers/editor/WorksEditor/styles/preview.ts | 2 +- src/containers/editor/WorksEditor/styles/steps.ts | 2 +- src/containers/layout/GlobalLayout/index.tsx | 2 +- src/containers/layout/GlobalLayout/store.ts | 2 +- src/containers/thread/PostsThread/styles/index.ts | 2 +- src/containers/thread/RoadmapThread/styles/index.ts | 2 +- src/containers/thread/UsersThread/styles/num_dashboard.ts | 2 +- src/containers/tool/ArticleSticker/styles/article_sticker.ts | 2 +- src/containers/tool/ArticleSticker/styles/comment_sticker.ts | 2 +- src/containers/tool/ArticleSticker/styles/index.ts | 2 +- src/containers/tool/ArticleSticker/styles/left_sticker/index.ts | 2 +- src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts | 2 +- .../tool/C11NSettingPanel/styles/gerneral_settings.ts | 2 +- src/containers/tool/C11NSettingPanel/styles/index.ts | 2 +- src/containers/tool/C11NSettingPanel/styles/theme_settings.ts | 2 +- src/containers/tool/Cashier/styles/payment_sidebar.ts | 2 +- src/containers/tool/CommunityJoinBadge/styles/index.ts | 2 +- src/containers/tool/Doraemon/styles/index.ts | 2 +- src/containers/tool/Doraemon/styles/input_editor.ts | 2 +- src/containers/tool/Doraemon/styles/results_list.ts | 2 +- src/containers/tool/Doraemon/styles/thread_select_bar.ts | 2 +- src/containers/tool/Drawer/styles/add_on.ts | 2 +- src/containers/tool/Drawer/styles/index.ts | 2 +- src/containers/tool/FavoritesCats/styles/editor.ts | 2 +- src/containers/tool/FavoritesCats/styles/setter.ts | 2 +- src/containers/tool/JoinModal/styles/index.ts | 2 +- src/containers/tool/MailBox/styles/index.ts | 2 +- src/containers/unit/ArticleFooter/styles/actions/index.ts | 2 +- src/containers/unit/ArticleFooter/styles/author_info/index.ts | 2 +- src/containers/unit/ArticleFooter/styles/index.ts | 2 +- src/containers/unit/ArticleViewerHeader/styles/reaction.ts | 2 +- src/containers/unit/Comments/styles/comment/delete_mask.ts | 2 +- src/containers/unit/Comments/styles/comment_editor.ts | 2 +- src/containers/unit/Comments/styles/comments_filter.ts | 2 +- src/containers/unit/Footer/styles/index.ts | 2 +- .../unit/Header/styles/desktop_view/community_view.ts | 2 +- src/containers/unit/Header/styles/index.ts | 2 +- src/containers/unit/Header/styles/user_account.ts | 2 +- src/containers/unit/Labeler/styles/options.ts | 2 +- src/containers/unit/ModeLine/store.ts | 2 +- src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts | 2 +- src/containers/unit/ModeLine/styles/bottom_bar/index.ts | 2 +- src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts | 2 +- .../ModeLine/styles/top_bar/mobile_view/article_bar/index.ts | 2 +- .../ModeLine/styles/top_bar/mobile_view/community_bar/index.ts | 2 +- src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts | 2 +- src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts | 2 +- src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts | 2 +- .../unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts | 2 +- .../unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts | 2 +- .../unit/ModeLineMenu/styles/global_menu/home_navi.ts | 2 +- .../unit/ModeLineMenu/styles/global_menu/main_menu.ts | 2 +- src/containers/unit/ModeLineMenu/styles/index.ts | 2 +- src/containers/unit/ModeLineMenu/styles/more_menu.ts | 2 +- src/containers/unit/ModeLineMenu/styles/navi_button.ts | 2 +- src/containers/unit/ModeLineMenu/styles/search_menu.ts | 2 +- src/containers/unit/Sidebar/styles/footer.ts | 2 +- src/containers/unit/Sidebar/styles/index.ts | 2 +- src/containers/unit/Sidebar/styles/loading_blocks.ts | 2 +- src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts | 2 +- src/containers/unit/TagsBar/styles/card_view.ts | 2 +- src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts | 2 +- src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts | 2 +- src/containers/user/UserProfile/styles/contribute_map.ts | 2 +- src/containers/user/UserProfile/styles/index.ts | 2 +- .../user/UserProfile/styles/subscribed_communities.ts | 2 +- src/{types => spec}/index.ts | 0 tsconfig.json | 2 +- utils/analytics.ts | 2 +- utils/scripts/generators/container/store.ts.hbs | 2 +- utils/themes/index.ts | 2 +- 210 files changed, 209 insertions(+), 209 deletions(-) rename src/{types => spec}/index.ts (100%) diff --git a/.eslintrc.js b/.eslintrc.js index 91203c30b..52a474ac8 100755 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -33,7 +33,7 @@ module.exports = { '@/Img': 'src/components/Img', '@/SvgIcons': 'src/components/SvgIcons', '@/i18n': 'i18n', - '@/types': 'src/types', + '@/spec': 'src/spec', }, extensions: ['.js', '.jsx', '.ts', '.tsx'], }, diff --git a/src/components/AlertBar/styles/index.ts b/src/components/AlertBar/styles/index.ts index d7aa920c8..b0e70c242 100755 --- a/src/components/AlertBar/styles/index.ts +++ b/src/components/AlertBar/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' // import Img from '@/Img' // import { theme } from '@/utils' diff --git a/src/components/ArticleEditToolbar/styles/copyright_selector.ts b/src/components/ArticleEditToolbar/styles/copyright_selector.ts index 1ed258df8..08858c3cd 100755 --- a/src/components/ArticleEditToolbar/styles/copyright_selector.ts +++ b/src/components/ArticleEditToolbar/styles/copyright_selector.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' diff --git a/src/components/Buttons/OrButton/HorizontalButton.tsx b/src/components/Buttons/OrButton/HorizontalButton.tsx index d4319c2ac..f75a7ae8f 100644 --- a/src/components/Buttons/OrButton/HorizontalButton.tsx +++ b/src/components/Buttons/OrButton/HorizontalButton.tsx @@ -1,7 +1,7 @@ import React from 'react' import { SIZE } from '@/constant' -import { TButtonSize } from '@/types' +import { TButtonSize } from '@/spec' import { Wrapper, diff --git a/src/components/Buttons/styles/button.ts b/src/components/Buttons/styles/button.ts index 74ead49b8..21fe7ff5f 100644 --- a/src/components/Buttons/styles/button.ts +++ b/src/components/Buttons/styles/button.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import { lighten } from 'polished' import { css, theme } from '@/utils' -import { TButtonSize, TButton } from '@/types' +import { TButtonSize, TButton } from '@/spec' import { getColor, diff --git a/src/components/Buttons/styles/metircs/button.ts b/src/components/Buttons/styles/metircs/button.ts index 5df4adeae..e02663e30 100644 --- a/src/components/Buttons/styles/metircs/button.ts +++ b/src/components/Buttons/styles/metircs/button.ts @@ -1,7 +1,7 @@ import { SIZE } from '@/constant' import { theme } from '@/utils' -import { TTheme } from '@/types' +import { TTheme } from '@/spec' export const getColor = (ghost: boolean, disabled: boolean): TTheme => { if (ghost) { diff --git a/src/components/Buttons/styles/notify_button/index.ts b/src/components/Buttons/styles/notify_button/index.ts index 2dd01a2a6..06e1b6df1 100644 --- a/src/components/Buttons/styles/notify_button/index.ts +++ b/src/components/Buttons/styles/notify_button/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/Buttons/styles/or_button/horizontal_button.ts b/src/components/Buttons/styles/or_button/horizontal_button.ts index 27f6b1054..43941b171 100644 --- a/src/components/Buttons/styles/or_button/horizontal_button.ts +++ b/src/components/Buttons/styles/or_button/horizontal_button.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' // import { lighten } from 'polished' -import { TButton, TButtonSize } from '@/types' +import { TButton, TButtonSize } from '@/spec' import { theme, css } from '@/utils' import { Wrapper as BaseBtnWrapper } from '../button' diff --git a/src/components/Buttons/styles/or_button/vertical_button.ts b/src/components/Buttons/styles/or_button/vertical_button.ts index 4ebcfeff8..5876273aa 100644 --- a/src/components/Buttons/styles/or_button/vertical_button.ts +++ b/src/components/Buttons/styles/or_button/vertical_button.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' // import { lighten } from 'polished' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { css, theme } from '@/utils' import { Wrapper as BaseBtnWrapper } from '../button' diff --git a/src/components/BuyMeChuanChuan/styles/chuan_selector.ts b/src/components/BuyMeChuanChuan/styles/chuan_selector.ts index f4ab322bf..ca76b2a3e 100755 --- a/src/components/BuyMeChuanChuan/styles/chuan_selector.ts +++ b/src/components/BuyMeChuanChuan/styles/chuan_selector.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { animate, theme, css } from '@/utils' import Img from '@/Img' diff --git a/src/components/Charger/styles/index.ts b/src/components/Charger/styles/index.ts index aeeab9b02..74cef1968 100755 --- a/src/components/Charger/styles/index.ts +++ b/src/components/Charger/styles/index.ts @@ -1,6 +1,6 @@ import styled, { css as styledCss, keyframes } from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/components/Checker/styles/index.ts b/src/components/Checker/styles/index.ts index 22969e388..2748263e4 100755 --- a/src/components/Checker/styles/index.ts +++ b/src/components/Checker/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/CollapseMenu/styles/item.ts b/src/components/CollapseMenu/styles/item.ts index 8666c3a9b..d9b264682 100644 --- a/src/components/CollapseMenu/styles/item.ts +++ b/src/components/CollapseMenu/styles/item.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div` diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts index 4f407281d..10c0e5e3e 100755 --- a/src/components/Common/index.ts +++ b/src/components/Common/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TSpace } from '@/types' +import { TSpace } from '@/spec' export const Br = styled.div` margin-top: ${({ top }) => `${top}px` || 0}; diff --git a/src/components/CommunityList/styles/index.ts b/src/components/CommunityList/styles/index.ts index dbba1e7a4..10c3518ad 100755 --- a/src/components/CommunityList/styles/index.ts +++ b/src/components/CommunityList/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TSpace } from '@/types' +import { TSpace } from '@/spec' import { css, theme } from '@/utils' import Img from '@/Img' diff --git a/src/components/CommunityStatesPad/styles/index.ts b/src/components/CommunityStatesPad/styles/index.ts index 423bd67c8..8ed9953f7 100755 --- a/src/components/CommunityStatesPad/styles/index.ts +++ b/src/components/CommunityStatesPad/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' // import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/components/ContentFilter/styles/filter_result.ts b/src/components/ContentFilter/styles/filter_result.ts index 459f131bd..7aa6134f8 100755 --- a/src/components/ContentFilter/styles/filter_result.ts +++ b/src/components/ContentFilter/styles/filter_result.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div` diff --git a/src/components/ContentFilter/styles/index.ts b/src/components/ContentFilter/styles/index.ts index c20436c1d..115cbdddd 100755 --- a/src/components/ContentFilter/styles/index.ts +++ b/src/components/ContentFilter/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' diff --git a/src/components/CrashErrorHint/styles/index.ts b/src/components/CrashErrorHint/styles/index.ts index 1629db3bd..ae358037a 100755 --- a/src/components/CrashErrorHint/styles/index.ts +++ b/src/components/CrashErrorHint/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme, themeSkins } from '@/utils' type TThemeName = { diff --git a/src/components/CustomScroller/styles/index.ts b/src/components/CustomScroller/styles/index.ts index 639c6092d..f46b5aa1b 100755 --- a/src/components/CustomScroller/styles/index.ts +++ b/src/components/CustomScroller/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' // import { getShadowWidth } from './helpers' type TBox = { width: string; height: string } diff --git a/src/components/DigestSentence/styles/index.ts b/src/components/DigestSentence/styles/index.ts index 04e0a4869..e3e4c4038 100755 --- a/src/components/DigestSentence/styles/index.ts +++ b/src/components/DigestSentence/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TSpace } from '@/types' +import { TTestable, TSpace } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/DivideText/styles/index.ts b/src/components/DivideText/styles/index.ts index bec60b8ed..8d37b511b 100755 --- a/src/components/DivideText/styles/index.ts +++ b/src/components/DivideText/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' // import Img from '@/Img' import { css } from '@/utils' diff --git a/src/components/EmailSubscriber/styles/default_layout/index.ts b/src/components/EmailSubscriber/styles/default_layout/index.ts index 6172612b1..c1fdec422 100644 --- a/src/components/EmailSubscriber/styles/default_layout/index.ts +++ b/src/components/EmailSubscriber/styles/default_layout/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/components/EmailSubscriber/styles/email_hint_icon.ts b/src/components/EmailSubscriber/styles/email_hint_icon.ts index ba71d48a4..c2465cb13 100644 --- a/src/components/EmailSubscriber/styles/email_hint_icon.ts +++ b/src/components/EmailSubscriber/styles/email_hint_icon.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { theme, css, animate } from '@/utils' diff --git a/src/components/EmailSubscriber/styles/index.ts b/src/components/EmailSubscriber/styles/index.ts index 0eeaef18f..4816d0b12 100755 --- a/src/components/EmailSubscriber/styles/index.ts +++ b/src/components/EmailSubscriber/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, diff --git a/src/components/EmailSubscriber/styles/simple_layout.ts b/src/components/EmailSubscriber/styles/simple_layout.ts index 3243d960c..21bef937d 100644 --- a/src/components/EmailSubscriber/styles/simple_layout.ts +++ b/src/components/EmailSubscriber/styles/simple_layout.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import Input from '@/components/Input' import { css } from '@/utils' diff --git a/src/components/ErrorPage/styles/code_snippets.ts b/src/components/ErrorPage/styles/code_snippets.ts index 0cf571821..036690d53 100644 --- a/src/components/ErrorPage/styles/code_snippets.ts +++ b/src/components/ErrorPage/styles/code_snippets.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/components/ErrorPage/styles/index.ts b/src/components/ErrorPage/styles/index.ts index fa5fd6610..ec3bf6b59 100755 --- a/src/components/ErrorPage/styles/index.ts +++ b/src/components/ErrorPage/styles/index.ts @@ -2,7 +2,7 @@ import styled from 'styled-components' import { theme, css } from '@/utils' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' // import PromptIcon from '@/components/PromptIcon' diff --git a/src/components/ErrorPage/styles/spin_planet.ts b/src/components/ErrorPage/styles/spin_planet.ts index 96e9daef2..a70c8a2ed 100644 --- a/src/components/ErrorPage/styles/spin_planet.ts +++ b/src/components/ErrorPage/styles/spin_planet.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { animate } from '@/utils' // import Img from '@/Img' // import PromptIcon from '@/components/PromptIcon' diff --git a/src/components/ExpandIcon/styles/index.ts b/src/components/ExpandIcon/styles/index.ts index 9f53c9d7c..e28620d1f 100755 --- a/src/components/ExpandIcon/styles/index.ts +++ b/src/components/ExpandIcon/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/ExpandIcon/styles/metric.ts b/src/components/ExpandIcon/styles/metric.ts index 46dd7bf8a..da20a703d 100644 --- a/src/components/ExpandIcon/styles/metric.ts +++ b/src/components/ExpandIcon/styles/metric.ts @@ -1,7 +1,7 @@ import { theme } from '@/utils' import { SIZE } from '@/constant' -import { TTheme } from '@/types' +import { TTheme } from '@/spec' export const getNormalColor = (type: string): TTheme => { switch (type) { diff --git a/src/components/FaqPeekList/styles/index.ts b/src/components/FaqPeekList/styles/index.ts index f0f03b8b8..b3726dbc4 100755 --- a/src/components/FaqPeekList/styles/index.ts +++ b/src/components/FaqPeekList/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { theme } from '@/utils' diff --git a/src/components/FiltersMenu/styles/filter/index.ts b/src/components/FiltersMenu/styles/filter/index.ts index eeaec686f..dcc022f25 100755 --- a/src/components/FiltersMenu/styles/filter/index.ts +++ b/src/components/FiltersMenu/styles/filter/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' // import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/FiltersMenu/styles/header.ts b/src/components/FiltersMenu/styles/header.ts index 942773404..6fb339b2b 100644 --- a/src/components/FiltersMenu/styles/header.ts +++ b/src/components/FiltersMenu/styles/header.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/FiltersMenu/styles/index.ts b/src/components/FiltersMenu/styles/index.ts index 801de2dce..1993f6120 100755 --- a/src/components/FiltersMenu/styles/index.ts +++ b/src/components/FiltersMenu/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/FocusLine/styles/index.ts b/src/components/FocusLine/styles/index.ts index f1961887f..127c4f4cf 100755 --- a/src/components/FocusLine/styles/index.ts +++ b/src/components/FocusLine/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' diff --git a/src/components/Folder/styles/index.ts b/src/components/Folder/styles/index.ts index ebf41a609..914bea4e3 100755 --- a/src/components/Folder/styles/index.ts +++ b/src/components/Folder/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/FormItem/styles/index.ts b/src/components/FormItem/styles/index.ts index 64d51311e..ebeeb4319 100755 --- a/src/components/FormItem/styles/index.ts +++ b/src/components/FormItem/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TSpace } from '@/types' +import { TSpace } from '@/spec' import { theme, css } from '@/utils' import Input from '@/components/Input' diff --git a/src/components/GithubRepoPage/styles/index.ts b/src/components/GithubRepoPage/styles/index.ts index fa9e1e8f9..639c964ae 100755 --- a/src/components/GithubRepoPage/styles/index.ts +++ b/src/components/GithubRepoPage/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css, animate } from '@/utils' import { Button } from '@/components/Buttons' diff --git a/src/components/GotoTop/styles/index.ts b/src/components/GotoTop/styles/index.ts index 9caf1fbf7..1b44629e0 100755 --- a/src/components/GotoTop/styles/index.ts +++ b/src/components/GotoTop/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/IconText/styles/index.ts b/src/components/IconText/styles/index.ts index 6a834dda1..353a8b18a 100755 --- a/src/components/IconText/styles/index.ts +++ b/src/components/IconText/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/ImgFallback/styles/avatar.ts b/src/components/ImgFallback/styles/avatar.ts index 97169790a..d01536ef0 100644 --- a/src/components/ImgFallback/styles/avatar.ts +++ b/src/components/ImgFallback/styles/avatar.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TSpace } from '@/types' +import { TTestable, TSpace } from '@/spec' import { css, theme } from '@/utils' import { getFontSize } from './metric/avatar' diff --git a/src/components/ImgFallback/styles/index.ts b/src/components/ImgFallback/styles/index.ts index 7f578db3d..553824eb6 100755 --- a/src/components/ImgFallback/styles/index.ts +++ b/src/components/ImgFallback/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' // import Img from '@/Img' // import { theme } from '@/utils' diff --git a/src/components/ImgFallback/styles/work.ts b/src/components/ImgFallback/styles/work.ts index ca5e48ef4..851dca9b1 100644 --- a/src/components/ImgFallback/styles/work.ts +++ b/src/components/ImgFallback/styles/work.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TSpace } from '@/types' +import { TTestable, TSpace } from '@/spec' // import Img from '@/Img' import { css } from '@/utils' diff --git a/src/components/Input/styles/index.ts b/src/components/Input/styles/index.ts index c2738dfc4..44378d779 100755 --- a/src/components/Input/styles/index.ts +++ b/src/components/Input/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/Input/styles/textarea.ts b/src/components/Input/styles/textarea.ts index 4286cfdf0..018a23102 100644 --- a/src/components/Input/styles/textarea.ts +++ b/src/components/Input/styles/textarea.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import TextareaAutosize from 'react-textarea-autosize' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme } from '@/utils' import { baseInput } from './index' diff --git a/src/components/LinksCard/styles/index.ts b/src/components/LinksCard/styles/index.ts index a9e048c13..a835fb116 100755 --- a/src/components/LinksCard/styles/index.ts +++ b/src/components/LinksCard/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TSpace } from '@/types' +import { TSpace } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div` diff --git a/src/components/Modal/styles/index.ts b/src/components/Modal/styles/index.ts index 8b1bab9b3..3111923db 100755 --- a/src/components/Modal/styles/index.ts +++ b/src/components/Modal/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, animate, css } from '@/utils' import Img from '@/Img' diff --git a/src/components/NaviCatalog/styles/header.ts b/src/components/NaviCatalog/styles/header.ts index 76887535c..98f01a7b0 100644 --- a/src/components/NaviCatalog/styles/header.ts +++ b/src/components/NaviCatalog/styles/header.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/NaviCatalog/styles/index.ts b/src/components/NaviCatalog/styles/index.ts index e4d2815a7..3811802b6 100755 --- a/src/components/NaviCatalog/styles/index.ts +++ b/src/components/NaviCatalog/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/NaviCatalog/styles/list/index.ts b/src/components/NaviCatalog/styles/list/index.ts index 0617664f4..93c3318be 100644 --- a/src/components/NaviCatalog/styles/list/index.ts +++ b/src/components/NaviCatalog/styles/list/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/NaviIntro/styles/index.ts b/src/components/NaviIntro/styles/index.ts index cf39704b7..0a9c62464 100755 --- a/src/components/NaviIntro/styles/index.ts +++ b/src/components/NaviIntro/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/Navigator/styles/index.ts b/src/components/Navigator/styles/index.ts index 791a4acee..b5f759f0d 100755 --- a/src/components/Navigator/styles/index.ts +++ b/src/components/Navigator/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { animate, theme, css } from '@/utils' import CommunityFaceLogo from '@/components/CommunityFaceLogo' diff --git a/src/components/Navigator/styles/main_entries.ts b/src/components/Navigator/styles/main_entries.ts index 6086f687f..4264de471 100755 --- a/src/components/Navigator/styles/main_entries.ts +++ b/src/components/Navigator/styles/main_entries.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' import DotDividerBase from '@/components/DotDivider' diff --git a/src/components/Pagi/styles/index.ts b/src/components/Pagi/styles/index.ts index da7f2690d..2429523e4 100755 --- a/src/components/Pagi/styles/index.ts +++ b/src/components/Pagi/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TSpace } from '@/types' +import { TSpace } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/PostItem/styles/index.ts b/src/components/PostItem/styles/index.ts index 107918243..b31e20cc2 100755 --- a/src/components/PostItem/styles/index.ts +++ b/src/components/PostItem/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive, TUser } from '@/types' +import { TActive, TUser } from '@/spec' import { theme, css } from '@/utils' import { getOpacity } from './metrics' diff --git a/src/components/SectionLabel/styles/index.ts b/src/components/SectionLabel/styles/index.ts index 48ba0d346..80a284e10 100755 --- a/src/components/SectionLabel/styles/index.ts +++ b/src/components/SectionLabel/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, animate, css } from '@/utils' import Img from '@/Img' diff --git a/src/components/Select/styles/index.ts b/src/components/Select/styles/index.ts index 19cdc2eac..81d0cb898 100755 --- a/src/components/Select/styles/index.ts +++ b/src/components/Select/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import { animate, css, theme } from '@/utils' export { getSelectStyles } from './metric' diff --git a/src/components/Sticky/styles/index.ts b/src/components/Sticky/styles/index.ts index 7f578db3d..553824eb6 100755 --- a/src/components/Sticky/styles/index.ts +++ b/src/components/Sticky/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' // import Img from '@/Img' // import { theme } from '@/utils' diff --git a/src/components/SubTitle/styles/index.ts b/src/components/SubTitle/styles/index.ts index 3b34c26c2..7debfc4c0 100755 --- a/src/components/SubTitle/styles/index.ts +++ b/src/components/SubTitle/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' // import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/Switcher/styles/icon_selector.ts b/src/components/Switcher/styles/icon_selector.ts index 044448f50..5cd610c81 100644 --- a/src/components/Switcher/styles/icon_selector.ts +++ b/src/components/Switcher/styles/icon_selector.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/Switcher/styles/metric/radio.ts b/src/components/Switcher/styles/metric/radio.ts index 43b62c2a4..dc4a8eaa4 100644 --- a/src/components/Switcher/styles/metric/radio.ts +++ b/src/components/Switcher/styles/metric/radio.ts @@ -1,7 +1,7 @@ import { theme } from '@/utils' import { SIZE } from '@/constant' -import { TTheme } from '@/types' +import { TTheme } from '@/spec' export const getActiveBackground = (dimOnActive: boolean): TTheme => { return dimOnActive ? '#00414F' : theme('button.primary') diff --git a/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts b/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts index ca7e52030..89d6763a0 100644 --- a/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts +++ b/src/components/Switcher/styles/pagi_option_selector/gallery_base.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { css } from '@/utils' export const SwitchWrapper = styled.div` diff --git a/src/components/Switcher/styles/radio.ts b/src/components/Switcher/styles/radio.ts index 02973430c..0a56f8ecf 100644 --- a/src/components/Switcher/styles/radio.ts +++ b/src/components/Switcher/styles/radio.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' import { diff --git a/src/components/Switcher/styles/tabs/drawer_view.ts b/src/components/Switcher/styles/tabs/drawer_view.ts index 8fc91c12f..684970d94 100644 --- a/src/components/Switcher/styles/tabs/drawer_view.ts +++ b/src/components/Switcher/styles/tabs/drawer_view.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({ diff --git a/src/components/Switcher/styles/tabs/index.ts b/src/components/Switcher/styles/tabs/index.ts index eac2f0882..ec7467131 100755 --- a/src/components/Switcher/styles/tabs/index.ts +++ b/src/components/Switcher/styles/tabs/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' type TSlipBar = { diff --git a/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts b/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts index a7926565c..151f80fa7 100644 --- a/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts +++ b/src/components/Switcher/styles/tabs/mobile_view/expand_view.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts b/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts index 1fce64f26..465ec0d04 100644 --- a/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts +++ b/src/components/Switcher/styles/tabs/mobile_view/normal_view.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/Switcher/styles/tabs/tab_icon.ts b/src/components/Switcher/styles/tabs/tab_icon.ts index 32aee24ec..50d22e971 100644 --- a/src/components/Switcher/styles/tabs/tab_icon.ts +++ b/src/components/Switcher/styles/tabs/tab_icon.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/Switcher/styles/tabs/tab_item.ts b/src/components/Switcher/styles/tabs/tab_item.ts index 9317e6ab3..f506357b3 100644 --- a/src/components/Switcher/styles/tabs/tab_item.ts +++ b/src/components/Switcher/styles/tabs/tab_item.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { css, theme } from '@/utils' import { getMarginRight, getPadding, getMarginBottom } from '../metric/tabs' diff --git a/src/components/TabBar/styles/desktop_view/brief_view.ts b/src/components/TabBar/styles/desktop_view/brief_view.ts index 1f0bbf1d0..41eb86c20 100755 --- a/src/components/TabBar/styles/desktop_view/brief_view.ts +++ b/src/components/TabBar/styles/desktop_view/brief_view.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div` diff --git a/src/components/TabSelector/styles/index.ts b/src/components/TabSelector/styles/index.ts index ee0e0912d..19b5914a7 100755 --- a/src/components/TabSelector/styles/index.ts +++ b/src/components/TabSelector/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' diff --git a/src/components/Tag/styles/index.ts b/src/components/Tag/styles/index.ts index 1de20200d..97c9510c6 100755 --- a/src/components/Tag/styles/index.ts +++ b/src/components/Tag/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/TheAvatar/styles/article_author_avatar.ts b/src/components/TheAvatar/styles/article_author_avatar.ts index 271009477..e4d2decca 100644 --- a/src/components/TheAvatar/styles/article_author_avatar.ts +++ b/src/components/TheAvatar/styles/article_author_avatar.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/TheAvatar/styles/index.ts b/src/components/TheAvatar/styles/index.ts index 85ad4d536..ecf451329 100755 --- a/src/components/TheAvatar/styles/index.ts +++ b/src/components/TheAvatar/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/TheAvatar/styles/post_item_avatar.ts b/src/components/TheAvatar/styles/post_item_avatar.ts index 6dee8880b..bf1bf575e 100644 --- a/src/components/TheAvatar/styles/post_item_avatar.ts +++ b/src/components/TheAvatar/styles/post_item_avatar.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/components/ThemeSelector/styles/card_selector.ts b/src/components/ThemeSelector/styles/card_selector.ts index ca2f17611..af46a5033 100755 --- a/src/components/ThemeSelector/styles/card_selector.ts +++ b/src/components/ThemeSelector/styles/card_selector.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/components/ThemeSelector/styles/gallery_selector.ts b/src/components/ThemeSelector/styles/gallery_selector.ts index 640050e35..4da038f49 100644 --- a/src/components/ThemeSelector/styles/gallery_selector.ts +++ b/src/components/ThemeSelector/styles/gallery_selector.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' import { Dot } from './index' diff --git a/src/components/ThemeSelector/styles/index.ts b/src/components/ThemeSelector/styles/index.ts index 77b598e48..259047428 100755 --- a/src/components/ThemeSelector/styles/index.ts +++ b/src/components/ThemeSelector/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive, TThemeName } from '@/types' +import { TActive, TThemeName } from '@/spec' import { theme, themeCoverMap, themeCoverIndexMap, css } from '@/utils' type TDot = TActive & { name: TThemeName } diff --git a/src/components/ThreadSelector/styles/panel.ts b/src/components/ThreadSelector/styles/panel.ts index f525c9761..c2bb8d580 100755 --- a/src/components/ThreadSelector/styles/panel.ts +++ b/src/components/ThreadSelector/styles/panel.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div` diff --git a/src/components/WorksCard/styles/index.ts b/src/components/WorksCard/styles/index.ts index 033045f7d..8fbabca17 100755 --- a/src/components/WorksCard/styles/index.ts +++ b/src/components/WorksCard/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/content/CommunityContent/styles/index.ts b/src/containers/content/CommunityContent/styles/index.ts index 5b50944ee..0959a0bc6 100755 --- a/src/containers/content/CommunityContent/styles/index.ts +++ b/src/containers/content/CommunityContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme, css, WIDTH, pixelAdd } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/content/CoolGuideContent/styles/filter_bar.ts b/src/containers/content/CoolGuideContent/styles/filter_bar.ts index 0e8ae5c4b..399c5ddb7 100644 --- a/src/containers/content/CoolGuideContent/styles/filter_bar.ts +++ b/src/containers/content/CoolGuideContent/styles/filter_bar.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/content/CoolGuideContent/styles/index.ts b/src/containers/content/CoolGuideContent/styles/index.ts index f25e89376..381455c64 100755 --- a/src/containers/content/CoolGuideContent/styles/index.ts +++ b/src/containers/content/CoolGuideContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' import { SIDEBAR_WIDTH } from './metric' diff --git a/src/containers/content/DiscoveryContent/styles/banner.ts b/src/containers/content/DiscoveryContent/styles/banner.ts index ede9d03e6..6fa48e5c7 100755 --- a/src/containers/content/DiscoveryContent/styles/banner.ts +++ b/src/containers/content/DiscoveryContent/styles/banner.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' diff --git a/src/containers/content/DiscoveryContent/styles/search_box.ts b/src/containers/content/DiscoveryContent/styles/search_box.ts index b88454db8..9ae361e6d 100755 --- a/src/containers/content/DiscoveryContent/styles/search_box.ts +++ b/src/containers/content/DiscoveryContent/styles/search_box.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' // import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/content/DiscoveryContent/styles/sidebar.ts b/src/containers/content/DiscoveryContent/styles/sidebar.ts index 00a0e96de..a5e0047da 100644 --- a/src/containers/content/DiscoveryContent/styles/sidebar.ts +++ b/src/containers/content/DiscoveryContent/styles/sidebar.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div` diff --git a/src/containers/content/FriendsContent/styles/index.ts b/src/containers/content/FriendsContent/styles/index.ts index 0a2f00e80..bb18b0fd9 100755 --- a/src/containers/content/FriendsContent/styles/index.ts +++ b/src/containers/content/FriendsContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/content/HaveADrinkContent/styles/body/catalog.ts b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts index af915c865..b3d4539af 100755 --- a/src/containers/content/HaveADrinkContent/styles/body/catalog.ts +++ b/src/containers/content/HaveADrinkContent/styles/body/catalog.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/content/HaveADrinkContent/styles/body/setting.ts b/src/containers/content/HaveADrinkContent/styles/body/setting.ts index a28d00477..08a6c0740 100755 --- a/src/containers/content/HaveADrinkContent/styles/body/setting.ts +++ b/src/containers/content/HaveADrinkContent/styles/body/setting.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' // import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/content/HelpCenterContent/Digest.tsx b/src/containers/content/HelpCenterContent/Digest.tsx index 6718a6738..d082a5b8d 100644 --- a/src/containers/content/HelpCenterContent/Digest.tsx +++ b/src/containers/content/HelpCenterContent/Digest.tsx @@ -2,7 +2,7 @@ import React from 'react' // import { METRIC } from '@/constant' -import { TCommunity } from '@/types' +import { TCommunity } from '@/spec' import { Wrapper, diff --git a/src/containers/content/HelpCenterContent/store.ts b/src/containers/content/HelpCenterContent/store.ts index 49611b16f..7fd6d4aa3 100755 --- a/src/containers/content/HelpCenterContent/store.ts +++ b/src/containers/content/HelpCenterContent/store.ts @@ -8,7 +8,7 @@ import { values } from 'ramda' import { IRootStore } from '@/stores/RootStore' -import { TCommunity } from '@/types' +import { TCommunity } from '@/spec' import { markStates, buildLog, stripMobx } from '@/utils' import { VIEW } from './constant' diff --git a/src/containers/content/HelpCenterContent/styles/index.ts b/src/containers/content/HelpCenterContent/styles/index.ts index 20740e7ff..83af37357 100755 --- a/src/containers/content/HelpCenterContent/styles/index.ts +++ b/src/containers/content/HelpCenterContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts b/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts index 0707aab01..b8c3f6dfb 100755 --- a/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts +++ b/src/containers/content/MeetupsContent/styles/date_selector/calendar_card.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' // import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/content/MeetupsContent/styles/date_selector/cell.ts b/src/containers/content/MeetupsContent/styles/date_selector/cell.ts index ba50715f6..1ec95cfe2 100755 --- a/src/containers/content/MeetupsContent/styles/date_selector/cell.ts +++ b/src/containers/content/MeetupsContent/styles/date_selector/cell.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' // import Img from '@/Img' import { css } from '@/utils' diff --git a/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts b/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts index 36544215e..b46c8e97f 100644 --- a/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts +++ b/src/containers/content/MembershipContent/styles/illustrations/air_balloon.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' // import { theme, css } from '@/utils' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' const color = { dark: '#1d667d', diff --git a/src/containers/content/MembershipContent/styles/illustrations/index.ts b/src/containers/content/MembershipContent/styles/illustrations/index.ts index 64cddcdce..d90099698 100644 --- a/src/containers/content/MembershipContent/styles/illustrations/index.ts +++ b/src/containers/content/MembershipContent/styles/illustrations/index.ts @@ -1,6 +1,6 @@ import styled, { css as styledCss } from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { animate, css } from '@/utils' import Img from '@/Img' diff --git a/src/containers/content/MembershipContent/styles/illustrations/rocket.ts b/src/containers/content/MembershipContent/styles/illustrations/rocket.ts index c3e131711..7f16e278f 100644 --- a/src/containers/content/MembershipContent/styles/illustrations/rocket.ts +++ b/src/containers/content/MembershipContent/styles/illustrations/rocket.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' import Img from '@/Img' diff --git a/src/containers/content/MembershipContent/styles/illustrations/ufo.ts b/src/containers/content/MembershipContent/styles/illustrations/ufo.ts index 8d9218f80..dec94ecad 100644 --- a/src/containers/content/MembershipContent/styles/illustrations/ufo.ts +++ b/src/containers/content/MembershipContent/styles/illustrations/ufo.ts @@ -1,6 +1,6 @@ import styled, { css as styledCss } from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import { animate, css } from '@/utils' import { diff --git a/src/containers/content/MembershipContent/styles/index.ts b/src/containers/content/MembershipContent/styles/index.ts index 63bcfade9..1909f51b9 100755 --- a/src/containers/content/MembershipContent/styles/index.ts +++ b/src/containers/content/MembershipContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/content/MembershipContent/styles/monthly_warning.ts b/src/containers/content/MembershipContent/styles/monthly_warning.ts index 2fd833dda..e085912b5 100644 --- a/src/containers/content/MembershipContent/styles/monthly_warning.ts +++ b/src/containers/content/MembershipContent/styles/monthly_warning.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' diff --git a/src/containers/content/MembershipContent/styles/price_tag.ts b/src/containers/content/MembershipContent/styles/price_tag.ts index 11708aa9c..c740ddf44 100644 --- a/src/containers/content/MembershipContent/styles/price_tag.ts +++ b/src/containers/content/MembershipContent/styles/price_tag.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import { theme, css } from '@/utils' import { Dashboard } from './index' diff --git a/src/containers/content/MembershipContent/styles/qa.ts b/src/containers/content/MembershipContent/styles/qa.ts index d2ba288bb..27f145987 100644 --- a/src/containers/content/MembershipContent/styles/qa.ts +++ b/src/containers/content/MembershipContent/styles/qa.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' diff --git a/src/containers/content/MembershipContent/styles/support.ts b/src/containers/content/MembershipContent/styles/support.ts index ac52d52b2..90d2b36f3 100644 --- a/src/containers/content/MembershipContent/styles/support.ts +++ b/src/containers/content/MembershipContent/styles/support.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/content/RecipesContent/styles/filter_bar.ts b/src/containers/content/RecipesContent/styles/filter_bar.ts index 0a4814bdb..4328326ce 100644 --- a/src/containers/content/RecipesContent/styles/filter_bar.ts +++ b/src/containers/content/RecipesContent/styles/filter_bar.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/content/RecipesContent/styles/index.ts b/src/containers/content/RecipesContent/styles/index.ts index 86837c8cf..7072bbf60 100755 --- a/src/containers/content/RecipesContent/styles/index.ts +++ b/src/containers/content/RecipesContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' import { SIDEBAR_WIDTH } from './metric' diff --git a/src/containers/content/SponsorContent/styles/banner.ts b/src/containers/content/SponsorContent/styles/banner.ts index 0239e70a6..886a9e1dd 100644 --- a/src/containers/content/SponsorContent/styles/banner.ts +++ b/src/containers/content/SponsorContent/styles/banner.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { css, theme } from '@/utils' import { ArrowLink } from '@/components/Buttons' diff --git a/src/containers/content/SponsorContent/styles/index.ts b/src/containers/content/SponsorContent/styles/index.ts index 787dea777..69d0a9c9b 100755 --- a/src/containers/content/SponsorContent/styles/index.ts +++ b/src/containers/content/SponsorContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/content/SponsorContent/styles/sponsor_type_title.ts b/src/containers/content/SponsorContent/styles/sponsor_type_title.ts index 9f374f918..40b0c94a5 100644 --- a/src/containers/content/SponsorContent/styles/sponsor_type_title.ts +++ b/src/containers/content/SponsorContent/styles/sponsor_type_title.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' import Img from '@/Img' diff --git a/src/containers/content/SubscribeContent/styles/actions/index.ts b/src/containers/content/SubscribeContent/styles/actions/index.ts index a84cbddc4..8a4f1330b 100644 --- a/src/containers/content/SubscribeContent/styles/actions/index.ts +++ b/src/containers/content/SubscribeContent/styles/actions/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { Button } from '@/components/Buttons' import { css, theme } from '@/utils' diff --git a/src/containers/content/SubscribeContent/styles/index.ts b/src/containers/content/SubscribeContent/styles/index.ts index 1218b08d2..e6c2701f6 100755 --- a/src/containers/content/SubscribeContent/styles/index.ts +++ b/src/containers/content/SubscribeContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme, WIDTH } from '@/utils' import Sticky from '@/components/Sticky' diff --git a/src/containers/content/WorksContent/styles/brand.ts b/src/containers/content/WorksContent/styles/brand.ts index 4183fccb6..26d5424a6 100644 --- a/src/containers/content/WorksContent/styles/brand.ts +++ b/src/containers/content/WorksContent/styles/brand.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/content/WorksContent/styles/index.ts b/src/containers/content/WorksContent/styles/index.ts index 3a0da3c37..a7dfaa9e9 100755 --- a/src/containers/content/WorksContent/styles/index.ts +++ b/src/containers/content/WorksContent/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/content/WorksContent/styles/list/option_tab.ts b/src/containers/content/WorksContent/styles/list/option_tab.ts index ef00ec8d8..2b552e8d0 100644 --- a/src/containers/content/WorksContent/styles/list/option_tab.ts +++ b/src/containers/content/WorksContent/styles/list/option_tab.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/content/WorksContent/styles/right_sidebar/index.ts b/src/containers/content/WorksContent/styles/right_sidebar/index.ts index 4bb09f43f..50732104c 100644 --- a/src/containers/content/WorksContent/styles/right_sidebar/index.ts +++ b/src/containers/content/WorksContent/styles/right_sidebar/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TSpace } from '@/types' +import { TTestable, TSpace } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts b/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts index d873996de..0e76a2f29 100644 --- a/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts +++ b/src/containers/content/WorksContent/styles/right_sidebar/interviews_list.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' import Img from '@/Img' diff --git a/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts index 7373d085b..22b5c23ac 100644 --- a/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts +++ b/src/containers/content/WorksContent/styles/right_sidebar/linkers.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' import Img from '@/Img' diff --git a/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts b/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts index 940cc1540..5a6f0b928 100755 --- a/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts +++ b/src/containers/digest/ArticleDigest/styles/reaction_numbers.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, css, animate } from '@/utils' diff --git a/src/containers/digest/CommunityDigest/styles/index.ts b/src/containers/digest/CommunityDigest/styles/index.ts index 926f2de0a..84afe682f 100755 --- a/src/containers/digest/CommunityDigest/styles/index.ts +++ b/src/containers/digest/CommunityDigest/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/editor/AccountEditor/styles/social_inputer.ts b/src/containers/editor/AccountEditor/styles/social_inputer.ts index 07a31e266..8bbf43bd3 100755 --- a/src/containers/editor/AccountEditor/styles/social_inputer.ts +++ b/src/containers/editor/AccountEditor/styles/social_inputer.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts b/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts index b1debb8ff..da88e8495 100644 --- a/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts +++ b/src/containers/editor/ArticleEditor/styles/editor/header/adder.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' import Img from '@/Img' diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts b/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts index 1ca3f7045..42074ed9d 100644 --- a/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts +++ b/src/containers/editor/ArticleEditor/styles/editor/header/deleter.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' import Img from '@/Img' diff --git a/src/containers/editor/ArticleEditor/styles/editor/header/index.ts b/src/containers/editor/ArticleEditor/styles/editor/header/index.ts index 62480b734..495c8e5a3 100644 --- a/src/containers/editor/ArticleEditor/styles/editor/header/index.ts +++ b/src/containers/editor/ArticleEditor/styles/editor/header/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import Input from '@/components/Input' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/editor/ArticleEditor/styles/index.ts b/src/containers/editor/ArticleEditor/styles/index.ts index f53d5a52a..51b83b404 100755 --- a/src/containers/editor/ArticleEditor/styles/index.ts +++ b/src/containers/editor/ArticleEditor/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/editor/CommunityEditor/styles/banner/index.ts b/src/containers/editor/CommunityEditor/styles/banner/index.ts index 2f3ad92ae..7037a0fe2 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/index.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/editor/CommunityEditor/styles/banner/input_box.ts b/src/containers/editor/CommunityEditor/styles/banner/input_box.ts index 8d1939db7..d0e928c2e 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/input_box.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/input_box.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' // import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts b/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts index fe614932e..cdb749ce4 100755 --- a/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts +++ b/src/containers/editor/CommunityEditor/styles/banner/select_type/type_boxes.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { css, theme } from '@/utils' // import Img from '@/Img' diff --git a/src/containers/editor/JobEditor/styles/index.ts b/src/containers/editor/JobEditor/styles/index.ts index 140d29900..fce22e948 100755 --- a/src/containers/editor/JobEditor/styles/index.ts +++ b/src/containers/editor/JobEditor/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Input from '@/components/Input' import { theme, css } from '@/utils' diff --git a/src/containers/editor/PostEditor/styles/index.ts b/src/containers/editor/PostEditor/styles/index.ts index 575df94e1..877acd5c0 100755 --- a/src/containers/editor/PostEditor/styles/index.ts +++ b/src/containers/editor/PostEditor/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Input from '@/components/Input' import { theme, css } from '@/utils' diff --git a/src/containers/editor/VideoEditor/styles/source_options.ts b/src/containers/editor/VideoEditor/styles/source_options.ts index c643cf2c3..87dc00ed8 100755 --- a/src/containers/editor/VideoEditor/styles/source_options.ts +++ b/src/containers/editor/VideoEditor/styles/source_options.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/editor/WorksEditor/styles/content/article_part/index.ts b/src/containers/editor/WorksEditor/styles/content/article_part/index.ts index c7ee7bb0b..0efd925fc 100644 --- a/src/containers/editor/WorksEditor/styles/content/article_part/index.ts +++ b/src/containers/editor/WorksEditor/styles/content/article_part/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts b/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts index e2c0deb80..c197c5864 100644 --- a/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts +++ b/src/containers/editor/WorksEditor/styles/content/basic_info_part/cover_uploader.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts b/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts index bd567ca28..2c9d8ea1b 100644 --- a/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts +++ b/src/containers/editor/WorksEditor/styles/content/basic_info_part/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' import FormItem from '@/components/FormItem' diff --git a/src/containers/editor/WorksEditor/styles/content/common_questions.ts b/src/containers/editor/WorksEditor/styles/content/common_questions.ts index 76123d61e..784596d50 100644 --- a/src/containers/editor/WorksEditor/styles/content/common_questions.ts +++ b/src/containers/editor/WorksEditor/styles/content/common_questions.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/editor/WorksEditor/styles/content/index.ts b/src/containers/editor/WorksEditor/styles/content/index.ts index 765d75e0f..e4909a662 100644 --- a/src/containers/editor/WorksEditor/styles/content/index.ts +++ b/src/containers/editor/WorksEditor/styles/content/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' import { CONTENT_WIDTH } from '../metric' diff --git a/src/containers/editor/WorksEditor/styles/content/launch_part.ts b/src/containers/editor/WorksEditor/styles/content/launch_part.ts index 0b5e1fb42..c81045ec2 100644 --- a/src/containers/editor/WorksEditor/styles/content/launch_part.ts +++ b/src/containers/editor/WorksEditor/styles/content/launch_part.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/editor/WorksEditor/styles/content/name_part.ts b/src/containers/editor/WorksEditor/styles/content/name_part.ts index 2b57c0b49..54a140dec 100644 --- a/src/containers/editor/WorksEditor/styles/content/name_part.ts +++ b/src/containers/editor/WorksEditor/styles/content/name_part.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' import { BaseInput } from './index' diff --git a/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts b/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts index 0b5e1fb42..c81045ec2 100644 --- a/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts +++ b/src/containers/editor/WorksEditor/styles/content/tech_stack_part/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/editor/WorksEditor/styles/index.ts b/src/containers/editor/WorksEditor/styles/index.ts index b0f644ab3..724afea5b 100755 --- a/src/containers/editor/WorksEditor/styles/index.ts +++ b/src/containers/editor/WorksEditor/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/editor/WorksEditor/styles/preview.ts b/src/containers/editor/WorksEditor/styles/preview.ts index 134bbb5ac..b3d905170 100644 --- a/src/containers/editor/WorksEditor/styles/preview.ts +++ b/src/containers/editor/WorksEditor/styles/preview.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' import { CONTENT_WIDTH, CONTENT_NARROW_WIDTH } from './metric' diff --git a/src/containers/editor/WorksEditor/styles/steps.ts b/src/containers/editor/WorksEditor/styles/steps.ts index 03911b3db..6a6373fac 100644 --- a/src/containers/editor/WorksEditor/styles/steps.ts +++ b/src/containers/editor/WorksEditor/styles/steps.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx index 9144661cc..126591d3f 100755 --- a/src/containers/layout/GlobalLayout/index.tsx +++ b/src/containers/layout/GlobalLayout/index.tsx @@ -10,7 +10,7 @@ import { ANCHOR } from '@/constant' import AnalysisService from '@/services/Analysis' import { useNetwork, useShortcut, usePlatform, useDevice } from '@/hooks' import { pluggedIn } from '@/utils' -import { Nullable, TSEO } from '@/types' +import { Nullable, TSEO } from '@/spec' import ThemePalette from '@/containers/layout/ThemePalette' import Header from '@/containers/unit/Header' diff --git a/src/containers/layout/GlobalLayout/store.ts b/src/containers/layout/GlobalLayout/store.ts index 5b64e5a97..ad50c05b8 100755 --- a/src/containers/layout/GlobalLayout/store.ts +++ b/src/containers/layout/GlobalLayout/store.ts @@ -6,7 +6,7 @@ import { types as T, getParent, Instance } from 'mobx-state-tree' import { markStates, buildLog } from '@/utils' -import { IRootStore, TAccount } from '@/types' +import { IRootStore, TAccount } from '@/spec' /* eslint-disable-next-line */ const log = buildLog('S:GlobalLayoutStore') diff --git a/src/containers/thread/PostsThread/styles/index.ts b/src/containers/thread/PostsThread/styles/index.ts index 64b683b40..84615bda4 100755 --- a/src/containers/thread/PostsThread/styles/index.ts +++ b/src/containers/thread/PostsThread/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div` diff --git a/src/containers/thread/RoadmapThread/styles/index.ts b/src/containers/thread/RoadmapThread/styles/index.ts index aaee45de0..791872aa3 100755 --- a/src/containers/thread/RoadmapThread/styles/index.ts +++ b/src/containers/thread/RoadmapThread/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/thread/UsersThread/styles/num_dashboard.ts b/src/containers/thread/UsersThread/styles/num_dashboard.ts index f3307b9fe..40be003d4 100755 --- a/src/containers/thread/UsersThread/styles/num_dashboard.ts +++ b/src/containers/thread/UsersThread/styles/num_dashboard.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' type TChartBar = TActive & { width: string } diff --git a/src/containers/tool/ArticleSticker/styles/article_sticker.ts b/src/containers/tool/ArticleSticker/styles/article_sticker.ts index 377b67668..14fa211ce 100644 --- a/src/containers/tool/ArticleSticker/styles/article_sticker.ts +++ b/src/containers/tool/ArticleSticker/styles/article_sticker.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive, TSpace } from '@/types' +import { TActive, TSpace } from '@/spec' import Img from '@/Img' import { theme, css, animate } from '@/utils' diff --git a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts index a2b667924..483d7bd0d 100644 --- a/src/containers/tool/ArticleSticker/styles/comment_sticker.ts +++ b/src/containers/tool/ArticleSticker/styles/comment_sticker.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' diff --git a/src/containers/tool/ArticleSticker/styles/index.ts b/src/containers/tool/ArticleSticker/styles/index.ts index 4059bfb48..d6e1906ed 100755 --- a/src/containers/tool/ArticleSticker/styles/index.ts +++ b/src/containers/tool/ArticleSticker/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { animate, theme, css, WIDTH } from '@/utils' diff --git a/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts b/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts index a7d29ee3e..06b07e291 100644 --- a/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts +++ b/src/containers/tool/ArticleSticker/styles/left_sticker/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts b/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts index f893a5b6f..09d803a59 100644 --- a/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts +++ b/src/containers/tool/ArticleSticker/styles/left_sticker/toc.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts b/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts index f077dd406..fad9418fc 100644 --- a/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts +++ b/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/tool/C11NSettingPanel/styles/index.ts b/src/containers/tool/C11NSettingPanel/styles/index.ts index bbbcc8df9..c40dfaeb2 100755 --- a/src/containers/tool/C11NSettingPanel/styles/index.ts +++ b/src/containers/tool/C11NSettingPanel/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts b/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts index 0abc0a38b..1ae9dcddb 100644 --- a/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts +++ b/src/containers/tool/C11NSettingPanel/styles/theme_settings.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' // import { css, theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/tool/Cashier/styles/payment_sidebar.ts b/src/containers/tool/Cashier/styles/payment_sidebar.ts index ff36dfeb8..ff789e542 100755 --- a/src/containers/tool/Cashier/styles/payment_sidebar.ts +++ b/src/containers/tool/Cashier/styles/payment_sidebar.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/tool/CommunityJoinBadge/styles/index.ts b/src/containers/tool/CommunityJoinBadge/styles/index.ts index c32b8e91a..ca56908a9 100755 --- a/src/containers/tool/CommunityJoinBadge/styles/index.ts +++ b/src/containers/tool/CommunityJoinBadge/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' // import Img from '@/Img' import { theme } from '@/utils' diff --git a/src/containers/tool/Doraemon/styles/index.ts b/src/containers/tool/Doraemon/styles/index.ts index c8d584735..9a311bb8a 100755 --- a/src/containers/tool/Doraemon/styles/index.ts +++ b/src/containers/tool/Doraemon/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import { theme, css } from '@/utils' export const PageOverlay = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/tool/Doraemon/styles/input_editor.ts b/src/containers/tool/Doraemon/styles/input_editor.ts index abbf6198d..1484b3f4d 100755 --- a/src/containers/tool/Doraemon/styles/input_editor.ts +++ b/src/containers/tool/Doraemon/styles/input_editor.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme } from '@/utils' import { BaseBar } from './index' diff --git a/src/containers/tool/Doraemon/styles/results_list.ts b/src/containers/tool/Doraemon/styles/results_list.ts index a396b0a3e..2066e6c41 100755 --- a/src/containers/tool/Doraemon/styles/results_list.ts +++ b/src/containers/tool/Doraemon/styles/results_list.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, animate, css } from '@/utils' diff --git a/src/containers/tool/Doraemon/styles/thread_select_bar.ts b/src/containers/tool/Doraemon/styles/thread_select_bar.ts index 643d1fb1c..29a83c8a9 100755 --- a/src/containers/tool/Doraemon/styles/thread_select_bar.ts +++ b/src/containers/tool/Doraemon/styles/thread_select_bar.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' // import Img from '@/Img' import { theme, css } from '@/utils' import { BaseBar } from './index' diff --git a/src/containers/tool/Drawer/styles/add_on.ts b/src/containers/tool/Drawer/styles/add_on.ts index dfddccf04..01720152f 100755 --- a/src/containers/tool/Drawer/styles/add_on.ts +++ b/src/containers/tool/Drawer/styles/add_on.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { TYPE } from '@/constant' import { theme, animate, css } from '@/utils' diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts index e337d24c0..ec2bdeb47 100755 --- a/src/containers/tool/Drawer/styles/index.ts +++ b/src/containers/tool/Drawer/styles/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import { contains } from 'ramda' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import { theme, css } from '@/utils' import { diff --git a/src/containers/tool/FavoritesCats/styles/editor.ts b/src/containers/tool/FavoritesCats/styles/editor.ts index 60fc77d7a..031a361b6 100755 --- a/src/containers/tool/FavoritesCats/styles/editor.ts +++ b/src/containers/tool/FavoritesCats/styles/editor.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div` diff --git a/src/containers/tool/FavoritesCats/styles/setter.ts b/src/containers/tool/FavoritesCats/styles/setter.ts index 903465493..ed9d94b8f 100755 --- a/src/containers/tool/FavoritesCats/styles/setter.ts +++ b/src/containers/tool/FavoritesCats/styles/setter.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' export const Wrapper = styled.div` diff --git a/src/containers/tool/JoinModal/styles/index.ts b/src/containers/tool/JoinModal/styles/index.ts index b2d9d7890..bafd1b783 100755 --- a/src/containers/tool/JoinModal/styles/index.ts +++ b/src/containers/tool/JoinModal/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' // import Img from '@/Img' // import { css, theme } from '@/utils' diff --git a/src/containers/tool/MailBox/styles/index.ts b/src/containers/tool/MailBox/styles/index.ts index 8de8f35b3..45df1c289 100755 --- a/src/containers/tool/MailBox/styles/index.ts +++ b/src/containers/tool/MailBox/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import { css, theme } from '@/utils' import HeaderMailSVG from '@/SvgIcons/HeaderMailSVG' diff --git a/src/containers/unit/ArticleFooter/styles/actions/index.ts b/src/containers/unit/ArticleFooter/styles/actions/index.ts index c30bd06ee..245bfdc8f 100644 --- a/src/containers/unit/ArticleFooter/styles/actions/index.ts +++ b/src/containers/unit/ArticleFooter/styles/actions/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ArticleFooter/styles/author_info/index.ts b/src/containers/unit/ArticleFooter/styles/author_info/index.ts index 895150fa8..363b9f7b9 100644 --- a/src/containers/unit/ArticleFooter/styles/author_info/index.ts +++ b/src/containers/unit/ArticleFooter/styles/author_info/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/unit/ArticleFooter/styles/index.ts b/src/containers/unit/ArticleFooter/styles/index.ts index 8de44dc29..203988e23 100755 --- a/src/containers/unit/ArticleFooter/styles/index.ts +++ b/src/containers/unit/ArticleFooter/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/unit/ArticleViewerHeader/styles/reaction.ts b/src/containers/unit/ArticleViewerHeader/styles/reaction.ts index e1c5b4cc8..5e90b59d4 100755 --- a/src/containers/unit/ArticleViewerHeader/styles/reaction.ts +++ b/src/containers/unit/ArticleViewerHeader/styles/reaction.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, css, animate } from '@/utils' diff --git a/src/containers/unit/Comments/styles/comment/delete_mask.ts b/src/containers/unit/Comments/styles/comment/delete_mask.ts index 9002d7b69..7ea2a1c6b 100755 --- a/src/containers/unit/Comments/styles/comment/delete_mask.ts +++ b/src/containers/unit/Comments/styles/comment/delete_mask.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, animate, css } from '@/utils' export const DeleteHintText = styled.div` diff --git a/src/containers/unit/Comments/styles/comment_editor.ts b/src/containers/unit/Comments/styles/comment_editor.ts index 6f9f9759e..15c7b1b5b 100755 --- a/src/containers/unit/Comments/styles/comment_editor.ts +++ b/src/containers/unit/Comments/styles/comment_editor.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' // import Img from '@/Img' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' export const Container = styled.div` diff --git a/src/containers/unit/Comments/styles/comments_filter.ts b/src/containers/unit/Comments/styles/comments_filter.ts index 010a0cc15..137ab2d4a 100755 --- a/src/containers/unit/Comments/styles/comments_filter.ts +++ b/src/containers/unit/Comments/styles/comments_filter.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/unit/Footer/styles/index.ts b/src/containers/unit/Footer/styles/index.ts index ad5415764..3a64d725f 100755 --- a/src/containers/unit/Footer/styles/index.ts +++ b/src/containers/unit/Footer/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { C11N } from '@/constant' import { css } from '@/utils' diff --git a/src/containers/unit/Header/styles/desktop_view/community_view.ts b/src/containers/unit/Header/styles/desktop_view/community_view.ts index 1ff23c514..2da9be437 100644 --- a/src/containers/unit/Header/styles/desktop_view/community_view.ts +++ b/src/containers/unit/Header/styles/desktop_view/community_view.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme, css } from '@/utils' import HeaderSearchSVG from '@/SvgIcons/HeaderSearchSVG' diff --git a/src/containers/unit/Header/styles/index.ts b/src/containers/unit/Header/styles/index.ts index 0ce551f5b..5468bc882 100644 --- a/src/containers/unit/Header/styles/index.ts +++ b/src/containers/unit/Header/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ 'data-test-id': testid, diff --git a/src/containers/unit/Header/styles/user_account.ts b/src/containers/unit/Header/styles/user_account.ts index 2c27a646d..1b8d42cdb 100755 --- a/src/containers/unit/Header/styles/user_account.ts +++ b/src/containers/unit/Header/styles/user_account.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/unit/Labeler/styles/options.ts b/src/containers/unit/Labeler/styles/options.ts index f5a5f5b26..7ab180a56 100755 --- a/src/containers/unit/Labeler/styles/options.ts +++ b/src/containers/unit/Labeler/styles/options.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/unit/ModeLine/store.ts b/src/containers/unit/ModeLine/store.ts index ddc5da04a..0df0e9a6f 100755 --- a/src/containers/unit/ModeLine/store.ts +++ b/src/containers/unit/ModeLine/store.ts @@ -6,7 +6,7 @@ import { types as T, getParent, Instance } from 'mobx-state-tree' import { values } from 'ramda' -import { IRootStore, TViewing, TArticle } from '@/types' +import { IRootStore, TViewing, TArticle } from '@/spec' import { TYPE, METRIC } from '@/constant' import { markStates, buildLog, stripMobx } from '@/utils' diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts b/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts index 355b02532..1a5b20b3c 100644 --- a/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts +++ b/src/containers/unit/ModeLine/styles/bottom_bar/arrow_block.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/index.ts b/src/containers/unit/ModeLine/styles/bottom_bar/index.ts index 8edb43390..7eddf2871 100644 --- a/src/containers/unit/ModeLine/styles/bottom_bar/index.ts +++ b/src/containers/unit/ModeLine/styles/bottom_bar/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts b/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts index 741d39817..d33d42473 100644 --- a/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts +++ b/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import { css, theme, WIDTH } from '@/utils' // import { getMaxWidth } from '../metrics/top_bar' diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts index 11194d035..42ac83bb8 100644 --- a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts +++ b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts index fe136feb2..217912fee 100644 --- a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts +++ b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { css, theme } from '@/utils' export const Wrapper = styled.div` diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts index 1d5d6af58..a7d2cca76 100644 --- a/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts +++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/content.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts index 70ad57f5e..a6f49b736 100644 --- a/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts +++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/header.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' // import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts index c15f8115a..b68c316a5 100644 --- a/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts +++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/index.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' // import Img from '@/Img' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts index d2c9b5011..eb7dd6ff7 100644 --- a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts +++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable, TActive } from '@/types' +import { TTestable, TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts index 998c5509c..4554cdf2d 100644 --- a/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts +++ b/src/containers/unit/ModeLineMenu/styles/filter_menu/sort_column/options.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts b/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts index 9f40acbb1..8c80b9613 100644 --- a/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts +++ b/src/containers/unit/ModeLineMenu/styles/global_menu/home_navi.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts b/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts index 45781d1dc..7c83252f4 100644 --- a/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts +++ b/src/containers/unit/ModeLineMenu/styles/global_menu/main_menu.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ModeLineMenu/styles/index.ts b/src/containers/unit/ModeLineMenu/styles/index.ts index 78647d7bd..5a636c250 100755 --- a/src/containers/unit/ModeLineMenu/styles/index.ts +++ b/src/containers/unit/ModeLineMenu/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/unit/ModeLineMenu/styles/more_menu.ts b/src/containers/unit/ModeLineMenu/styles/more_menu.ts index 5b3c0491c..72d4f6b6e 100644 --- a/src/containers/unit/ModeLineMenu/styles/more_menu.ts +++ b/src/containers/unit/ModeLineMenu/styles/more_menu.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { css } from '@/utils' import { L_MENU_HEIGHT } from './metrics/index' diff --git a/src/containers/unit/ModeLineMenu/styles/navi_button.ts b/src/containers/unit/ModeLineMenu/styles/navi_button.ts index 497d51a17..2eb4ff5ab 100644 --- a/src/containers/unit/ModeLineMenu/styles/navi_button.ts +++ b/src/containers/unit/ModeLineMenu/styles/navi_button.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/ModeLineMenu/styles/search_menu.ts b/src/containers/unit/ModeLineMenu/styles/search_menu.ts index 3993586bc..d51e5a4a0 100644 --- a/src/containers/unit/ModeLineMenu/styles/search_menu.ts +++ b/src/containers/unit/ModeLineMenu/styles/search_menu.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' diff --git a/src/containers/unit/Sidebar/styles/footer.ts b/src/containers/unit/Sidebar/styles/footer.ts index 492dd03ef..84075f992 100755 --- a/src/containers/unit/Sidebar/styles/footer.ts +++ b/src/containers/unit/Sidebar/styles/footer.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/unit/Sidebar/styles/index.ts b/src/containers/unit/Sidebar/styles/index.ts index 95d47edf6..dec1d9bda 100755 --- a/src/containers/unit/Sidebar/styles/index.ts +++ b/src/containers/unit/Sidebar/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme, css } from '@/utils' import { getMainWidth, getShadow, SIDEBAR_WIDTH } from './metric' diff --git a/src/containers/unit/Sidebar/styles/loading_blocks.ts b/src/containers/unit/Sidebar/styles/loading_blocks.ts index 7c95b5c2c..2ba40962f 100644 --- a/src/containers/unit/Sidebar/styles/loading_blocks.ts +++ b/src/containers/unit/Sidebar/styles/loading_blocks.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { animate, css, theme } from '@/utils' import { SIDEBAR_WIDTH } from './metric' diff --git a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts index 85fc52863..9558cd3d8 100755 --- a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts +++ b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' import CommunityFaceLogo from '@/components/CommunityFaceLogo' diff --git a/src/containers/unit/TagsBar/styles/card_view.ts b/src/containers/unit/TagsBar/styles/card_view.ts index 89f20a305..65b0cbc52 100644 --- a/src/containers/unit/TagsBar/styles/card_view.ts +++ b/src/containers/unit/TagsBar/styles/card_view.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import { theme, css } from '@/utils' diff --git a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts index 6d91038fa..aa1831c07 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import { theme, css } from '@/utils' import Img from '@/Img' diff --git a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts index 92adf8f7c..0828a08da 100644 --- a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts +++ b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TActive } from '@/types' +import { TActive } from '@/spec' import Img from '@/Img' import HashTagSVG from '@/SvgIcons/HashTagSVG' import { theme, css } from '@/utils' diff --git a/src/containers/user/UserProfile/styles/contribute_map.ts b/src/containers/user/UserProfile/styles/contribute_map.ts index 2d22e54ab..129a0abdf 100644 --- a/src/containers/user/UserProfile/styles/contribute_map.ts +++ b/src/containers/user/UserProfile/styles/contribute_map.ts @@ -1,7 +1,7 @@ import styled from 'styled-components' import { theme, css } from '@/utils' -import { TTheme } from '@/types' +import { TTheme } from '@/spec' const dotColor = (scale: string): TTheme => { let key = `heatmap.scale_${scale}` diff --git a/src/containers/user/UserProfile/styles/index.ts b/src/containers/user/UserProfile/styles/index.ts index c25ae95e0..93b9c0cab 100755 --- a/src/containers/user/UserProfile/styles/index.ts +++ b/src/containers/user/UserProfile/styles/index.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/containers/user/UserProfile/styles/subscribed_communities.ts b/src/containers/user/UserProfile/styles/subscribed_communities.ts index d166f52ea..edca95c68 100644 --- a/src/containers/user/UserProfile/styles/subscribed_communities.ts +++ b/src/containers/user/UserProfile/styles/subscribed_communities.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { TTestable } from '@/types' +import { TTestable } from '@/spec' import { theme } from '@/utils' export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ diff --git a/src/types/index.ts b/src/spec/index.ts similarity index 100% rename from src/types/index.ts rename to src/spec/index.ts diff --git a/tsconfig.json b/tsconfig.json index 8f1823815..46137bcdb 100755 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,7 +28,7 @@ "@/model": ["src/stores/SharedModel"], "@/utils": ["utils"], "@/schemas": ["src/schemas"], - "@/types": ["src/types"], + "@/spec": ["src/spec"], "@/Img": ["src/components/Img"], "@/SvgIcons/*": ["src/components/SvgIcons/*"], "@/i18n": ["i18n"] diff --git a/utils/analytics.ts b/utils/analytics.ts index 1f6964d75..ebc1e4f52 100755 --- a/utils/analytics.ts +++ b/utils/analytics.ts @@ -1,4 +1,4 @@ -import { GA_EVENT } from '@/types' +import { GA_EVENT } from '@/spec' import { Global } from './helper' diff --git a/utils/scripts/generators/container/store.ts.hbs b/utils/scripts/generators/container/store.ts.hbs index 4f21fd7ee..2d5fc2c17 100755 --- a/utils/scripts/generators/container/store.ts.hbs +++ b/utils/scripts/generators/container/store.ts.hbs @@ -6,7 +6,7 @@ import { types as T, getParent, Instance } from 'mobx-state-tree' // import {} from 'ramda' -import { TCommunity, IRootStore } from '@/types' +import { TCommunity, IRootStore } from '@/spec' import { markStates, buildLog, stripMobx } from '@/utils' /* eslint-disable-next-line */ diff --git a/utils/themes/index.ts b/utils/themes/index.ts index 5701ff8f9..50dae4f02 100755 --- a/utils/themes/index.ts +++ b/utils/themes/index.ts @@ -13,7 +13,7 @@ import { map, path, split } from 'ramda' -import { TTheme } from '@/types' +import { TTheme } from '@/spec' import skinsData from './skins' export const themeSkins = { ...skinsData }