From 639ac3e24c18e2de1c8e2bd8366398e5d604e686 Mon Sep 17 00:00:00 2001
From: Sung Won Cho <sung@monomax.sh>
Date: Wed, 27 Nov 2019 11:58:03 +0800
Subject: [PATCH] Render footer

---
 .../components/Subscription/Subscription.scss | 26 +++++-
 web/src/components/Subscription/index.tsx     | 88 ++++++++++---------
 2 files changed, 71 insertions(+), 43 deletions(-)

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 <https://www.gnu.org/licenses/>.
  */
 
-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<Props> = () => {
         />
       </Helmet>
 
-      <div className={styles.hero}>
+      <div className={styles.content}>
+        <div className={styles.hero}>
+          <div className="container">
+            <h1 className={styles.heading}>Choose your Dnote plan.</h1>
+          </div>
+        </div>
+
         <div className="container">
-          <h1 className={styles.heading}>Choose your Dnote plan.</h1>
-        </div>
-      </div>
-
-      <div className="container">
-        <div className={styles['plans-wrapper']}>
-          <CorePlan
-            wrapperClassName={styles['core-plan']}
-            ctaContent={
-              <a
-                href="https://github.com/dnote/dnote"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="button button-normal button-second-outline button-stretch"
-              >
-                See source code
-              </a>
-            }
-            bottomContent={
-              <div className={styles.bottom}>
-                <FeatureList features={coreFeatures} />
-              </div>
-            }
-          />
-
-          <ProPlan
-            wrapperClassName={styles['pro-plan']}
-            ctaContent={renderPlanCta()}
-            bottomContent={
-              <div className={styles.bottom}>
-                <div className={styles['pro-prelude']}>
-                  Everything from the core plan, plus:
+          <div className={styles['plans-wrapper']}>
+            <CorePlan
+              wrapperClassName={styles['core-plan']}
+              ctaContent={
+                <a
+                  href="https://github.com/dnote/dnote"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="button button-normal button-second-outline button-stretch"
+                >
+                  See source code
+                </a>
+              }
+              bottomContent={
+                <div className={styles.bottom}>
+                  <FeatureList features={coreFeatures} />
                 </div>
-                <FeatureList
-                  features={proFeatures}
-                  wrapperClassName={styles['pro-feature-list']}
-                />
-              </div>
-            }
-          />
+              }
+            />
+
+            <ProPlan
+              wrapperClassName={styles['pro-plan']}
+              ctaContent={renderPlanCta()}
+              bottomContent={
+                <div className={styles.bottom}>
+                  <div className={styles['pro-prelude']}>
+                    Everything from the core plan, plus:
+                  </div>
+                  <FeatureList
+                    features={proFeatures}
+                    wrapperClassName={styles['pro-feature-list']}
+                  />
+                </div>
+              }
+            />
+          </div>
         </div>
       </div>
+
+      <footer className={styles.footer}>
+        &copy; 2019 Monomax Software Pty Ltd
+      </footer>
     </div>
   );
 };