diff options
Diffstat (limited to 'src/features/planSelection/components/PlanItem.js')
-rw-r--r-- | src/features/planSelection/components/PlanItem.js | 19 |
1 files changed, 14 insertions, 5 deletions
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js index ec061377b..3855fedf1 100644 --- a/src/features/planSelection/components/PlanItem.js +++ b/src/features/planSelection/components/PlanItem.js | |||
@@ -49,6 +49,7 @@ const styles = theme => ({ | |||
49 | priceWrapper: { | 49 | priceWrapper: { |
50 | height: 50, | 50 | height: 50, |
51 | marginBottom: 0, | 51 | marginBottom: 0, |
52 | marginTop: ({ text }) => (!text ? 15 : 0), | ||
52 | }, | 53 | }, |
53 | price: { | 54 | price: { |
54 | fontSize: 50, | 55 | fontSize: 50, |
@@ -64,7 +65,7 @@ const styles = theme => ({ | |||
64 | cta: { | 65 | cta: { |
65 | background: theme.styleTypes.primary.accent, | 66 | background: theme.styleTypes.primary.accent, |
66 | color: theme.styleTypes.primary.contrast, | 67 | color: theme.styleTypes.primary.contrast, |
67 | margin: [40, 'auto', 0, 'auto'], | 68 | margin: [30, 'auto', 0, 'auto'], |
68 | }, | 69 | }, |
69 | divider: { | 70 | divider: { |
70 | width: 40, | 71 | width: 40, |
@@ -77,10 +78,14 @@ const styles = theme => ({ | |||
77 | background: color(theme.styleTypes.primary.accent).darken(0.25).hex(), | 78 | background: color(theme.styleTypes.primary.accent).darken(0.25).hex(), |
78 | color: theme.styleTypes.primary.contrast, | 79 | color: theme.styleTypes.primary.contrast, |
79 | position: 'relative', | 80 | position: 'relative', |
81 | height: 'auto', | ||
80 | }, | 82 | }, |
81 | content: { | 83 | content: { |
82 | padding: [10, 20, 20], | 84 | padding: [10, 20, 20], |
83 | background: '#EFEFEF', | 85 | background: '#EFEFEF', |
86 | display: 'flex', | ||
87 | flexDirection: 'column', | ||
88 | justifyContent: 'space-between', | ||
84 | }, | 89 | }, |
85 | simpleCTA: { | 90 | simpleCTA: { |
86 | background: 'none', | 91 | background: 'none', |
@@ -167,10 +172,14 @@ export default @observer @injectSheet(styles) class PlanItem extends Component { | |||
167 | </div> | 172 | </div> |
168 | )} | 173 | )} |
169 | <H2 className={classes.planName}>{name}</H2> | 174 | <H2 className={classes.planName}>{name}</H2> |
170 | <p className={classes.text}> | 175 | {text && ( |
171 | {text} | 176 | <> |
172 | </p> | 177 | <p className={classes.text}> |
173 | <hr className={classes.divider} /> | 178 | {text} |
179 | </p> | ||
180 | <hr className={classes.divider} /> | ||
181 | </> | ||
182 | )} | ||
174 | <p className={classes.priceWrapper}> | 183 | <p className={classes.priceWrapper}> |
175 | <span className={classes.currency}>{currency}</span> | 184 | <span className={classes.currency}>{currency}</span> |
176 | <span className={classes.price}> | 185 | <span className={classes.price}> |