diff --git a/lang/default.json b/lang/default.json index 3e800e56be..1a7ada0d32 100644 --- a/lang/default.json +++ b/lang/default.json @@ -439,9 +439,6 @@ "5sg7KC": { "defaultMessage": "Password" }, - "5y5rID": { - "defaultMessage": "We will review your application shortly, stay tuned for the event!" - }, "6+eeJ4": { "defaultMessage": "Lowercase letters, numbers and underscores", "description": "src/components/Dialogs/SetUserNameDialog/Content.tsx" @@ -754,6 +751,9 @@ "defaultMessage": "That's all", "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx" }, + "B9IFMF": { + "defaultMessage": "Yes, apply" + }, "BDbgCL": { "defaultMessage": "Heading 3" }, @@ -1078,9 +1078,6 @@ "HAlOn1": { "defaultMessage": "Name" }, - "HB2VOx": { - "defaultMessage": "System or connection abnormality, please refresh the page and click “Apply” again." - }, "HBxXD/": { "defaultMessage": "License" }, @@ -1261,6 +1258,9 @@ "defaultMessage": "Topics", "description": "src/components/Dialogs/TagListDialog/index.tsx" }, + "KkHQZ+": { + "defaultMessage": "Apply now. The writing journey will begin in a few days. For event details, please check the Event Information. (Application confirmation usually takes a few minutes for review. Your avatar will then appear among the writers.)" + }, "KlJEP9": { "defaultMessage": "Wallet connected", "description": "src/components/Forms/WalletAuthForm/Connect.tsx" @@ -1701,6 +1701,9 @@ "Sfql0+": { "defaultMessage": "Congratulations! You've got the Grand Badge!" }, + "Sj+TN8": { + "defaultMessage": "Announcement" + }, "SuRTsQ": { "defaultMessage": "Register for ISCN" }, @@ -2188,9 +2191,6 @@ "beLe/F": { "defaultMessage": "Broadcast" }, - "buf5vO": { - "defaultMessage": "Event Information" - }, "c/z318": { "defaultMessage": "Incorrect email or password", "description": "src/components/Forms/EmailLoginForm/index.tsx" @@ -2669,6 +2669,9 @@ "defaultMessage": "You have not invited anyone yet! Invite friends to join your circle by clicking 'invite friends'.", "description": "src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx" }, + "lO7wKc": { + "defaultMessage": "Not yet" + }, "lT6Dt8": { "defaultMessage": "Confirm Resignation" }, @@ -2807,9 +2810,6 @@ "oGiO//": { "defaultMessage": "Insert audio" }, - "oLOus+": { - "defaultMessage": "Application has been submitted 🎉" - }, "ob+HDS": { "defaultMessage": "View Circle" }, @@ -2821,6 +2821,9 @@ "defaultMessage": "Following", "description": "src/components/UserProfile/index.tsx" }, + "on+DYO": { + "defaultMessage": "Confirm application" + }, "onDesU": { "defaultMessage": "Congratulations! Now you can browse all works within the circle for free and chat with everyone." }, diff --git a/lang/en.json b/lang/en.json index 48ada74ea5..4bd46abdd0 100644 --- a/lang/en.json +++ b/lang/en.json @@ -439,9 +439,6 @@ "5sg7KC": { "defaultMessage": "Password" }, - "5y5rID": { - "defaultMessage": "We will review your application shortly, stay tuned for the event!" - }, "6+eeJ4": { "defaultMessage": "Lowercase letters, numbers and underscores", "description": "src/components/Dialogs/SetUserNameDialog/Content.tsx" @@ -754,6 +751,9 @@ "defaultMessage": "That's all", "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx" }, + "B9IFMF": { + "defaultMessage": "Yes, apply" + }, "BDbgCL": { "defaultMessage": "Heading 3" }, @@ -1078,9 +1078,6 @@ "HAlOn1": { "defaultMessage": "Name" }, - "HB2VOx": { - "defaultMessage": "System or connection abnormality, please refresh the page and click “Apply” again." - }, "HBxXD/": { "defaultMessage": "License" }, @@ -1261,6 +1258,9 @@ "defaultMessage": "Topics", "description": "src/components/Dialogs/TagListDialog/index.tsx" }, + "KkHQZ+": { + "defaultMessage": "Apply now. The writing journey will begin in a few days. For event details, please check the Event Information. (Application confirmation usually takes a few minutes for review. Your avatar will then appear among the writers.)" + }, "KlJEP9": { "defaultMessage": "Wallet connected", "description": "src/components/Forms/WalletAuthForm/Connect.tsx" @@ -1701,6 +1701,9 @@ "Sfql0+": { "defaultMessage": "Congratulations! You've got the Grand Badge!" }, + "Sj+TN8": { + "defaultMessage": "Announcement" + }, "SuRTsQ": { "defaultMessage": "Register for ISCN" }, @@ -2188,9 +2191,6 @@ "beLe/F": { "defaultMessage": "Broadcast" }, - "buf5vO": { - "defaultMessage": "Event Information" - }, "c/z318": { "defaultMessage": "Incorrect email or password", "description": "src/components/Forms/EmailLoginForm/index.tsx" @@ -2669,6 +2669,9 @@ "defaultMessage": "You have not invited anyone yet! Invite friends to join your circle by clicking 'invite friends'.", "description": "src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx" }, + "lO7wKc": { + "defaultMessage": "Not yet" + }, "lT6Dt8": { "defaultMessage": "Confirm Resignation" }, @@ -2807,9 +2810,6 @@ "oGiO//": { "defaultMessage": "Insert audio" }, - "oLOus+": { - "defaultMessage": "Application has been submitted 🎉" - }, "ob+HDS": { "defaultMessage": "View Circle" }, @@ -2821,6 +2821,9 @@ "defaultMessage": "Following", "description": "src/components/UserProfile/index.tsx" }, + "on+DYO": { + "defaultMessage": "Confirm application" + }, "onDesU": { "defaultMessage": "Congratulations! Now you can browse all works within the circle for free and chat with everyone." }, diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json index b6c88609b0..183990bf75 100644 --- a/lang/zh-Hans.json +++ b/lang/zh-Hans.json @@ -439,9 +439,6 @@ "5sg7KC": { "defaultMessage": "密码" }, - "5y5rID": { - "defaultMessage": "我们将尽快处理你的申请，敬请期待活动开跑！" - }, "6+eeJ4": { "defaultMessage": "可使用小写英文、数字及下划线", "description": "src/components/Dialogs/SetUserNameDialog/Content.tsx" @@ -754,6 +751,9 @@ "defaultMessage": "没有更多", "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx" }, + "B9IFMF": { + "defaultMessage": "好的，我报名" + }, "BDbgCL": { "defaultMessage": "标题 3" }, @@ -1078,9 +1078,6 @@ "HAlOn1": { "defaultMessage": "用户名" }, - "HB2VOx": { - "defaultMessage": "系统或连线异常，请刷新页面后重新点击报名参加" - }, "HBxXD/": { "defaultMessage": "版权声明" }, @@ -1261,6 +1258,9 @@ "defaultMessage": "标签", "description": "src/components/Dialogs/TagListDialog/index.tsx" }, + "KkHQZ+": { + "defaultMessage": "现在报名，写作之旅将于数天后开始，活动细则可查看公告。（报名确认通常需要几分钟审核时间，之后你的头像将出现在作者之中）" + }, "KlJEP9": { "defaultMessage": "钱包已绑定", "description": "src/components/Forms/WalletAuthForm/Connect.tsx" @@ -1554,7 +1554,7 @@ "defaultMessage": "换一批" }, "Pq/7m5": { - "defaultMessage": "晚鸟参与处理中", + "defaultMessage": "晚鸟参与处理中⋯", "description": "type:join" }, "PtV68+": { @@ -1701,6 +1701,9 @@ "Sfql0+": { "defaultMessage": "恭喜获得七日书大满贯" }, + "Sj+TN8": { + "defaultMessage": "公告" + }, "SuRTsQ": { "defaultMessage": "注册 ISCN" }, @@ -2188,9 +2191,6 @@ "beLe/F": { "defaultMessage": "广播" }, - "buf5vO": { - "defaultMessage": "活动公告" - }, "c/z318": { "defaultMessage": "邮箱或密码错误", "description": "src/components/Forms/EmailLoginForm/index.tsx" @@ -2544,7 +2544,7 @@ "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" }, "jLkKbI": { - "defaultMessage": "报名处理中", + "defaultMessage": "报名处理中⋯", "description": "type:apply" }, "jiB0Z2": { @@ -2669,6 +2669,9 @@ "defaultMessage": "你还没有邀请任何用户喔！点击新增邀请，添加站内或站外朋友加入围炉赠与对方免费资格的固定时长", "description": "src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx" }, + "lO7wKc": { + "defaultMessage": "再想想" + }, "lT6Dt8": { "defaultMessage": "确认辞去" }, @@ -2807,9 +2810,6 @@ "oGiO//": { "defaultMessage": "插入音频" }, - "oLOus+": { - "defaultMessage": "报名申请已递交 🎉" - }, "ob+HDS": { "defaultMessage": "马上逛逛" }, @@ -2821,6 +2821,9 @@ "defaultMessage": "追踪中", "description": "src/components/UserProfile/index.tsx" }, + "on+DYO": { + "defaultMessage": "确认报名" + }, "onDesU": { "defaultMessage": "恭喜成为围炉一员。现在你可以免费浏览围炉内作品，还可以去围炉与大家谈天说地。" }, diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json index 88d4b023ee..45bfd46403 100644 --- a/lang/zh-Hant.json +++ b/lang/zh-Hant.json @@ -439,9 +439,6 @@ "5sg7KC": { "defaultMessage": "密碼" }, - "5y5rID": { - "defaultMessage": "我們將盡快處理你的申請，敬請期待活動開跑！" - }, "6+eeJ4": { "defaultMessage": "可使用小寫英文、數字及下劃線", "description": "src/components/Dialogs/SetUserNameDialog/Content.tsx" @@ -754,6 +751,9 @@ "defaultMessage": "沒有更多", "description": "src/components/Interaction/InfiniteScroll/EndOfResults/index.tsx" }, + "B9IFMF": { + "defaultMessage": "好的，我報名" + }, "BDbgCL": { "defaultMessage": "標題 3" }, @@ -1078,9 +1078,6 @@ "HAlOn1": { "defaultMessage": "用戶名" }, - "HB2VOx": { - "defaultMessage": "系统或连线异常，请刷新页面后重新点击报名参加" - }, "HBxXD/": { "defaultMessage": "版權聲明" }, @@ -1261,6 +1258,9 @@ "defaultMessage": "標籤", "description": "src/components/Dialogs/TagListDialog/index.tsx" }, + "KkHQZ+": { + "defaultMessage": "現在報名，寫作之旅將於數天後開始，活動細則可查看公告。（報名確認通常需要幾分鐘審核時間，之後你的頭像將出現在作者之中）" + }, "KlJEP9": { "defaultMessage": "錢包已綁定", "description": "src/components/Forms/WalletAuthForm/Connect.tsx" @@ -1554,7 +1554,7 @@ "defaultMessage": "換一批" }, "Pq/7m5": { - "defaultMessage": "晚鳥參與處理中", + "defaultMessage": "晚鳥參與處理中⋯", "description": "type:join" }, "PtV68+": { @@ -1701,6 +1701,9 @@ "Sfql0+": { "defaultMessage": "恭喜獲得七日書大滿貫" }, + "Sj+TN8": { + "defaultMessage": "公告" + }, "SuRTsQ": { "defaultMessage": "註冊 ISCN" }, @@ -2188,9 +2191,6 @@ "beLe/F": { "defaultMessage": "廣播" }, - "buf5vO": { - "defaultMessage": "活動公告" - }, "c/z318": { "defaultMessage": "郵件地址或密碼錯誤", "description": "src/components/Forms/EmailLoginForm/index.tsx" @@ -2544,7 +2544,7 @@ "description": "src/components/Forms/SelectAuthMethodForm/NormalFeed.tsx" }, "jLkKbI": { - "defaultMessage": "報名處理中", + "defaultMessage": "報名處理中⋯", "description": "type:apply" }, "jiB0Z2": { @@ -2669,6 +2669,9 @@ "defaultMessage": "你還沒有邀請任何用戶喔！點擊新增邀請，添加站內或站外朋友加入圍爐贈與對方免費資格的固定時長", "description": "src/views/Circle/Settings/ManageInvitation/Invites/Pending/index.tsx" }, + "lO7wKc": { + "defaultMessage": "再想想" + }, "lT6Dt8": { "defaultMessage": "確認辭去" }, @@ -2807,9 +2810,6 @@ "oGiO//": { "defaultMessage": "插入音訊" }, - "oLOus+": { - "defaultMessage": "報名申請已遞交 🎉" - }, "ob+HDS": { "defaultMessage": "馬上逛逛" }, @@ -2821,6 +2821,9 @@ "defaultMessage": "追蹤中", "description": "src/components/UserProfile/index.tsx" }, + "on+DYO": { + "defaultMessage": "確認報名" + }, "onDesU": { "defaultMessage": "恭喜成為圍爐一員。現在你可以免費瀏覽圍爐內作品，還可以去圍爐與大家談天說地。" }, diff --git a/package-lock.json b/package-lock.json index c668319525..ae0975d25e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "matters-web", - "version": "5.5.0", + "version": "5.5.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "matters-web", - "version": "5.5.0", + "version": "5.5.1", "license": "Apache-2.0", "dependencies": { "@apollo/react-common": "^3.1.3", diff --git a/package.json b/package.json index 806d7fbf3c..2e53c34a59 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matters-web", - "version": "5.5.0", + "version": "5.5.1", "description": "codebase of Matters' website", "author": "Matters ", "engines": { diff --git a/src/common/styles/variables/colors.css b/src/common/styles/variables/colors.css index f21de02661..e81ef19aa9 100644 --- a/src/common/styles/variables/colors.css +++ b/src/common/styles/variables/colors.css @@ -25,6 +25,8 @@ /* function */ --color-positive-green: #5c9969; + --color-top-up-yellow: #fff4dc; + --color-top-up-yellow-darker: #ffe9b8; --color-warn-yellow: #dba34f; --color-negative-red: #c85c41; --color-negative-red-2: #a04a34; @@ -34,6 +36,7 @@ --color-analytics-red: #c25050; /* FIXME: undocumented */ --color-free-write-blue-bg: #f0f9fe; --color-free-write-blue: #1999d0; + --color-free-write-blue-label: #83bad1; --color-free-write-blue-border: #d6ebf7; /* others */ diff --git a/src/components/ArticleDigest/Feed/FooterActions/index.tsx b/src/components/ArticleDigest/Feed/FooterActions/index.tsx index 872eec1dca..0a6ffa8453 100644 --- a/src/components/ArticleDigest/Feed/FooterActions/index.tsx +++ b/src/components/ArticleDigest/Feed/FooterActions/index.tsx @@ -14,6 +14,7 @@ export type FooterActionsControls = DropdownActionsControls export type FooterActionsProps = { article: FooterActionsArticlePublicFragment + label?: React.ReactNode hasReadTime?: boolean hasDonationCount?: boolean hasCircle?: boolean @@ -23,6 +24,7 @@ export type FooterActionsProps = { const FooterActions = ({ article, + label, hasReadTime, hasDonationCount, hasCircle, @@ -40,6 +42,8 @@ const FooterActions = ({
{includesMetaData && ( <> + {label} + {hasReadTime && } {hasDonationCount && } diff --git a/src/components/Editor/SelectCampaign/index.tsx b/src/components/Editor/SelectCampaign/index.tsx index 28f5de6793..32f8ada3fb 100644 --- a/src/components/Editor/SelectCampaign/index.tsx +++ b/src/components/Editor/SelectCampaign/index.tsx @@ -22,7 +22,10 @@ export const getSelectCampaign = ({ createdAt, }: { applied?: EditorSelectCampaignFragment - attached: Array<{ campaign: { id: string }; stage: { id: string } }> + attached: Array<{ + campaign: { id: string } + stage?: { id: string } | null + }> createdAt: string // draft or article creation time }) => { const { start } = applied?.writingPeriod || {} diff --git a/src/components/SquareTabs/index.tsx b/src/components/SquareTabs/index.tsx index 2ced32793c..b47b2b9126 100644 --- a/src/components/SquareTabs/index.tsx +++ b/src/components/SquareTabs/index.tsx @@ -1,41 +1,28 @@ import classNames from 'classnames' -import { Button, ButtonProps } from '~/components' - import styles from './styles.module.css' type TabProps = { + title: string selected?: boolean -} & ButtonProps + onClick: () => void + theme?: 'black' | 'gold' +} -const Tab: React.FC> = ({ - selected, - children, - ...buttonProps -}) => { - const itemClasses = classNames({ +const Tab = ({ title, selected, onClick, theme }: TabProps) => { + const liClasses = classNames({ [styles.tabItem]: true, [styles.selected]: selected, + [styles.gold]: theme === 'gold', }) - return (
  • - + {title}
    • ) } @@ -46,7 +33,7 @@ interface SquareTabsProps { export const SquareTabs: React.FC> & { Tab: typeof Tab -} = ({ sticky, children }) => { +} = ({ children, sticky }) => { const navClasses = classNames({ [styles.tabList]: true, [styles.sticky]: sticky, diff --git a/src/components/SquareTabs/styles.module.css b/src/components/SquareTabs/styles.module.css index 0416babc99..c98570d7b3 100644 --- a/src/components/SquareTabs/styles.module.css +++ b/src/components/SquareTabs/styles.module.css @@ -3,7 +3,6 @@ display: flex; gap: var(--sp16); - margin-bottom: var(--sp8); overflow-x: auto; -webkit-overflow-scrolling: touch; @@ -16,11 +15,52 @@ } .tabItem { + @mixin transition; + flex-shrink: 0; + padding: var(--sp5) var(--sp10); font-size: var(--text14); line-height: 1.375rem; + color: var(--color-grey-darker); + cursor: pointer; + background: var(--color-grey-lighter); + border-radius: 0.5rem; + transition-property: background-color, color; + + /* FIX: change the font-weight of a font, the text will typically cause a bit of a layout shift + ref: https://stackoverflow.com/a/32570813 + */ + &::after { + display: block; + height: 0; + overflow: hidden; + font-weight: var(--font-semibold); + color: transparent; + visibility: hidden; + content: attr(data-title); + } + + &:hover { + background: var(--color-grey-light); + } &.selected { font-weight: var(--font-semibold); + color: var(--color-white); + background: var(--color-black); + } + + &.gold { + color: var(--color-matters-gold-press); + background: var(--color-top-up-yellow); + + &:hover { + background: var(--color-top-up-yellow-darker); + } + + &.selected { + color: var(--color-white); + background: var(--color-warn-yellow); + } } } diff --git a/src/components/index.tsx b/src/components/index.tsx index a197f24910..4fcb2f0a17 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -37,6 +37,7 @@ export * from './Slides' export * from './Spacer' export * from './Spinner' export * from './SquareTabs' +export * from './SquareTabs' export * from './Switch' export * from './TableView' export * from './Tabs' diff --git a/src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx b/src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx index 34f1c84a00..ef526d80e5 100644 --- a/src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx +++ b/src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx @@ -1,4 +1,4 @@ -import { FormattedMessage } from 'react-intl' +import { useIntl } from 'react-intl' import { SquareTabs, useRoute } from '~/components' import { ArticleDetailPublicQuery } from '~/gql/graphql' @@ -14,6 +14,7 @@ type TabsProps = { export const Tabs = ({ article, tab, setTab }: TabsProps) => { const { getQuery } = useRoute() const cid = getQuery('collection') + const intl = useIntl() const latestWorks = article.author?.latestWorks.filter((work) => { return work.id !== article.id }) @@ -26,37 +27,34 @@ export const Tabs = ({ article, tab, setTab }: TabsProps) => { setTab('Collection')} - > - - + title={intl.formatMessage({ + defaultMessage: 'Collection', + id: 'Hpmiif', + description: 'src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx', + })} + /> )} {hasFromAuthor && ( setTab('Author')} - > - - + title={intl.formatMessage({ + defaultMessage: 'Author', + id: 'RM17b4', + description: 'src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx', + })} + /> )} {hasRecommendation && ( setTab('Recommendation')} - > - - + title={intl.formatMessage({ + defaultMessage: 'More', + id: 'VqdOGQ', + description: 'src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx', + })} + /> )} ) diff --git a/src/views/ArticleDetail/Edit/Header/index.tsx b/src/views/ArticleDetail/Edit/Header/index.tsx index 75a6f348de..f47a11e6cb 100644 --- a/src/views/ArticleDetail/Edit/Header/index.tsx +++ b/src/views/ArticleDetail/Edit/Header/index.tsx @@ -94,7 +94,7 @@ const EditModeHeader = ({ const isSensitiveRevised = restProps.contentSensitive !== article.sensitiveByAuthor const isCampaignRevised = - restProps.selectedStage !== article.campaigns[0]?.stage.id + restProps.selectedStage !== article.campaigns[0]?.stage?.id const isResetCampaign = isCampaignRevised && (!restProps.appliedCampaign?.id || !restProps.selectedStage) diff --git a/src/views/ArticleDetail/Edit/index.tsx b/src/views/ArticleDetail/Edit/index.tsx index 50cafec235..d0ad070055 100644 --- a/src/views/ArticleDetail/Edit/index.tsx +++ b/src/views/ArticleDetail/Edit/index.tsx @@ -144,7 +144,7 @@ const BaseEdit = ({ article }: { article: Article }) => { }) const [campaign, setCampaign] = useState( - appliedCampaign?.id + appliedCampaign?.id && selectedStage ? { campaign: appliedCampaign.id, stage: selectedStage, diff --git a/src/views/ArticleDetail/MetaInfo/gql.ts b/src/views/ArticleDetail/MetaInfo/gql.ts index f484339a10..68b844ccba 100644 --- a/src/views/ArticleDetail/MetaInfo/gql.ts +++ b/src/views/ArticleDetail/MetaInfo/gql.ts @@ -27,6 +27,12 @@ export const fragments = { nameEn: name(input: { language: en }) } } + stage { + id + nameZhHant: name(input: { language: zh_hant }) + nameZhHans: name(input: { language: zh_hans }) + nameEn: name(input: { language: en }) + } } } `, diff --git a/src/views/CampaignDetail/Apply/Button/index.tsx b/src/views/CampaignDetail/Apply/Button/index.tsx index daa75fd41c..508fb8eff3 100644 --- a/src/views/CampaignDetail/Apply/Button/index.tsx +++ b/src/views/CampaignDetail/Apply/Button/index.tsx @@ -46,29 +46,11 @@ const ApplyCampaignButton = ({ } /** - * Succeeded - */ - if (isSucceeded) { - return ( - } - color={isAppliedDuringPeriod ? 'green' : 'black'} - > - {isAppliedDuringPeriod ? ( - - ) : ( - - )} - - ) - } - - /** - * Pending or not applied + * Pending, not applied or succeeded */ let text: React.ReactNode = '' if (isPending) { - text = isAppliedDuringPeriod ? ( + text = isInApplicationPeriod ? ( ) + } else if (isSucceeded) { + text = isAppliedDuringPeriod ? ( + + ) : ( + + ) } if (!viewer.isAuthed) { @@ -107,22 +95,27 @@ const ApplyCampaignButton = ({ } } + const primary = + isInApplicationPeriod || (isSucceeded && isAppliedDuringPeriod) + const isLateSucceeded = !isAppliedDuringPeriod && isSucceeded + const bgColor = primary ? 'green' : undefined + const borderColor = primary ? 'green' : isLateSucceeded ? 'grey' : 'green' + const textColor = primary ? 'white' : isLateSucceeded ? 'grey' : 'green' + if (size === 'lg') { return (