diff --git a/src/components/Buy/SubscriptionsSection/SubscriptionsSection.module.css b/src/components/Buy/SubscriptionsSection/SubscriptionsSection.module.css index 2817a46c1..4926c4d16 100644 --- a/src/components/Buy/SubscriptionsSection/SubscriptionsSection.module.css +++ b/src/components/Buy/SubscriptionsSection/SubscriptionsSection.module.css @@ -16,6 +16,7 @@ } .content { + padding: 26px 78px; display: flex; flex-direction: column; align-items: center; diff --git a/src/components/PlanPage/CardSection.js b/src/components/PlanPage/CardSection.js index 191631a5b..a2039bd93 100644 --- a/src/components/PlanPage/CardSection.js +++ b/src/components/PlanPage/CardSection.js @@ -1,33 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; -import P from 'common/base/P'; -import { subscriptionType } from 'constants/subscription'; - import PlanCard from './PlanCard'; import styles from './CardSection.module.css'; import { getColumns } from './helpers'; -const getTitleClassName = type => { - if (type === subscriptionType.submitData) { - return 'titleSubmitData'; - } - - return 'titleBuySubscription'; -}; - -const CardSection = ({ plans, title, type }) => { +const CardSection = ({ plans }) => { return (
-

- {title} -

{ description={plan.description} amount={plan.amount} actionUrl={plan.url} - type={type} + type={plan.type} />
))} @@ -52,8 +32,6 @@ const CardSection = ({ plans, title, type }) => { CardSection.propTypes = { plans: PropTypes.arrayOf(PropTypes.object), - title: PropTypes.string, - type: PropTypes.string, }; export default CardSection; diff --git a/src/components/PlanPage/CardSection.module.css b/src/components/PlanPage/CardSection.module.css index 16ed1f6b5..4bfae8b83 100644 --- a/src/components/PlanPage/CardSection.module.css +++ b/src/components/PlanPage/CardSection.module.css @@ -6,7 +6,7 @@ @media (min-width: above-tablet) { display: grid; - column-gap: 20px; + column-gap: 32px; } } @@ -17,11 +17,3 @@ margin-bottom: 0; } } - -.titleSubmitData { - color: yellow-dark; -} - -.titleBuySubscription { - color: warning-red; -} diff --git a/src/components/PlanPage/PlanCard.js b/src/components/PlanPage/PlanCard.js index 3ce8ffbe1..52a4aee38 100644 --- a/src/components/PlanPage/PlanCard.js +++ b/src/components/PlanPage/PlanCard.js @@ -20,13 +20,17 @@ const getButtonType = type => { const PlanCard = ({ title, description, amount, actionUrl, type }) => { const actionTitle = getActionTitle(type); + + const isSubmitData = type === subscriptionType.submitData; return ( - +
- - {title} - -

{description}

+
+ + {title} + +

{description}

+

{amount} @@ -35,14 +39,24 @@ const PlanCard = ({ title, description, amount, actionUrl, type }) => { 元

- - - +
+
+ {isSubmitData && ( +

+ \ 留下你的資料幫助其他人 / +

+ )} +
+ + + +
); diff --git a/src/components/PlanPage/PlanCard.module.css b/src/components/PlanPage/PlanCard.module.css index 56a4138d9..f1d00c3a9 100644 --- a/src/components/PlanPage/PlanCard.module.css +++ b/src/components/PlanPage/PlanCard.module.css @@ -1,13 +1,23 @@ -@value above-tablet, main-gray from "common/variables.module.css"; +@value above-tablet, main-gray, yellow-dark from "common/variables.module.css"; + +.container { + height: 390px; + width: 300px; + padding: 26px 0; +} .content { display: flex; flex-direction: column; align-items: center; + justify-content: space-between; + height: 100%; } .actionButton { margin-top: 16px; + width: 140px; + height: 45px; } .title { @@ -16,16 +26,34 @@ } .description { - margin-bottom: 56px; } .amountSection { display: flex; align-items: center; - margin-bottom: 82px; } .amount { font-size: 56px; margin-right: 20px; } + +.topArea { + display: flex; + flex-direction: column; + align-items: center; +} + +.bottomArea { + display: flex; + flex-direction: column; + align-items: center; +} + +.helperText { + color: yellow-dark; +} + +.helperContainer { + min-height: 20px; +} diff --git a/src/components/PlanPage/PlanPage.module.css b/src/components/PlanPage/PlanPage.module.css index 575cf56ab..c5f0b0713 100644 --- a/src/components/PlanPage/PlanPage.module.css +++ b/src/components/PlanPage/PlanPage.module.css @@ -1,7 +1,11 @@ @value above-tablet from "common/variables.module.css"; .container { - padding: 50px 0 0 0; + padding-top: 20px; + + @media (min-width: above-tablet) { + padding-top: 50px; + } } .content { @@ -11,7 +15,7 @@ } .title { - margin-bottom: 24px; + display: none; @media (min-width: above-tablet) { margin-bottom: 70px; diff --git a/src/components/PlanPage/helpers.js b/src/components/PlanPage/helpers.js index 7857b8754..0cac7041a 100644 --- a/src/components/PlanPage/helpers.js +++ b/src/components/PlanPage/helpers.js @@ -1,4 +1,4 @@ -import { compose, length, min, groupBy, prop } from 'ramda'; +import { compose, length, min } from 'ramda'; import { subscriptionType } from 'constants/subscription'; const MAX_COLUMN = 3; @@ -15,5 +15,3 @@ export const getActionTitle = type => { return '付費解鎖'; }; - -export const groupByPlanType = groupBy(prop('type')); diff --git a/src/components/PlanPage/index.js b/src/components/PlanPage/index.js index 3bd2356b7..9df1a7583 100644 --- a/src/components/PlanPage/index.js +++ b/src/components/PlanPage/index.js @@ -5,7 +5,6 @@ import { subscriptionType } from 'constants/subscription'; import styles from './PlanPage.module.css'; import CardSection from './CardSection'; -import { groupByPlanType } from './helpers'; const plans = [ { @@ -35,11 +34,6 @@ const plans = [ ]; const PlanPage = () => { - const groupedPlans = groupByPlanType(plans); - - const hasSubmitDataPlan = - groupedPlans[subscriptionType.submitData].length > 0; - return (
@@ -48,16 +42,10 @@ const PlanPage = () => {
- {hasSubmitDataPlan &&
或是
} -
diff --git a/src/components/common/RoundCard/RoundCard.module.css b/src/components/common/RoundCard/RoundCard.module.css index 052f95ad2..dd6c080af 100644 --- a/src/components/common/RoundCard/RoundCard.module.css +++ b/src/components/common/RoundCard/RoundCard.module.css @@ -1,7 +1,6 @@ @value card-border-gray, warning-red from "common/variables.module.css"; .container { - padding: 26px 78px; border: 1px solid card-border-gray; border-radius: 8px; background-color: white;