Plan page styling (#1033)

* feat: layout * feat: layout and help text * faet: mobile layout * feat: layout and button size
goodjoblife · Nov 29, 2022 · e7daa29 · e7daa29
1 parent adca23e
commit e7daa29
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 68 deletions.
diff --git 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
@@ -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 (
     <div>
-      <P
-        className={styles[getTitleClassName(type)]}
-        size="m"
-        style={{
-          marginBottom: '12px',
-        }}
-      >
-        {title}
-      </P>
       <div
         className={styles.cardContainer}
         style={{
@@ -41,7 +21,7 @@ const CardSection = ({ plans, title, type }) => {
               description={plan.description}
               amount={plan.amount}
               actionUrl={plan.url}
-              type={type}
+              type={plan.type}
             />
           </div>
         ))}
@@ -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
@@ -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
@@ -20,13 +20,17 @@ const getButtonType = type => {
 
 const PlanCard = ({ title, description, amount, actionUrl, type }) => {
   const actionTitle = getActionTitle(type);
+
+  const isSubmitData = type === subscriptionType.submitData;
   return (
-    <RoundCard>
+    <RoundCard className={styles.container}>
       <div className={styles.content}>
-        <Heading Tag="h3" size="sm" className={styles.title} bold>
-          {title}
-        </Heading>
-        <P className={styles.description}>{description}</P>
+        <div className={styles.topArea}>
+          <Heading Tag="h3" size="sm" className={styles.title} bold>
+            {title}
+          </Heading>
+          <P className={styles.description}>{description}</P>
+        </div>
         <div className={styles.amountSection}>
           <P className={styles.amount} bold>
             {amount}
@@ -35,14 +39,24 @@ const PlanCard = ({ title, description, amount, actionUrl, type }) => {
             元
           </P>
         </div>
-        <Link to={actionUrl}>
-          <Button
-            className={styles.actionButton}
-            btnStyle={getButtonType(type)}
-          >
-            {actionTitle}
-          </Button>
-        </Link>
+        <div className={styles.bottomArea}>
+          <div className={styles.helperContainer}>
+            {isSubmitData && (
+              <P className={styles.helperText} size="s">
+                \ 留下你的資料幫助其他人 /
+              </P>
+            )}
+          </div>
+          <Link to={actionUrl}>
+            <Button
+              className={styles.actionButton}
+              btnStyle={getButtonType(type)}
+              circleSize="lg"
+            >
+              {actionTitle}
+            </Button>
+          </Link>
+        </div>
       </div>
     </RoundCard>
   );

diff --git 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
@@ -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
@@ -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
@@ -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 (
     <div className={styles.container}>
       <div className={styles.content}>
@@ -48,16 +42,10 @@ const PlanPage = () => {
         </Heading>
         <div className={styles['cardSection']}>
           <CardSection
-            plans={groupedPlans[subscriptionType.submitData]}
+            plans={plans}
             title="留下你的資料幫助其他人："
             type={subscriptionType.submitData}
           />
-          {hasSubmitDataPlan && <div className={styles.divider}>或是</div>}
-          <CardSection
-            plans={groupedPlans[subscriptionType.buySubscription]}
-            title="線上付費解鎖全站資料："
-            type={subscriptionType.buySubscription}
-          />
         </div>
       </div>
     </div>

diff --git 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;