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;