diff --git a/web/src/components/Subscription/Subscription.scss b/web/src/components/Subscription/Subscription.scss index ad7cafc2..7904cf75 100644 --- a/web/src/components/Subscription/Subscription.scss +++ b/web/src/components/Subscription/Subscription.scss @@ -18,12 +18,34 @@ @import '../App/responsive'; @import '../App/font'; +@import '../App/theme'; @import '../App/rem'; .wrapper { - // padding-bottom: rem(80px); background: white; - height: calc(100vh - #{$header-height}); + display: flex; + flex-direction: column; + justify-content: center; + + @include breakpoint(md) { + height: calc(100vh - #{$header-height}); + } +} + +.content { + margin-bottom: rem(40px); + + @include breakpoint(md) { + margin-bottom: auto; + } +} + +.footer { + margin-top: auto; + padding: rem(12px) 0; + text-align: center; + @include font-size('x-small'); + color: $gray; } .hero { diff --git a/web/src/components/Subscription/index.tsx b/web/src/components/Subscription/index.tsx index a7802d30..54975a45 100644 --- a/web/src/components/Subscription/index.tsx +++ b/web/src/components/Subscription/index.tsx @@ -16,7 +16,7 @@ * along with Dnote. If not, see . */ -import React, { Fragment } from 'react'; +import React from 'react'; import Helmet from 'react-helmet'; import { Link } from 'react-router-dom'; import classnames from 'classnames'; @@ -123,50 +123,56 @@ const Subscription: React.FunctionComponent = () => { /> - + + + + Choose your Dnote plan. + + + - Choose your Dnote plan. - - - - - - - See source code - - } - bottomContent={ - - - - } - /> - - - - Everything from the core plan, plus: + + + See source code + + } + bottomContent={ + + - - - } - /> + } + /> + + + + Everything from the core plan, plus: + + + + } + /> + + + ); };