feat: style the billing page

packages/webapp/src/containers/Subscriptions/BillingPage.tsx

@@ -3,24 +3,16 @@ import * as R from 'ramda';
 import { Button } from '@blueprintjs/core';
 import withAlertActions from '../Alert/withAlertActions';
 import { BillingPageBoot } from './BillingPageBoot';
+import { BillingPageContent } from './BillingPageContent';
+import { DashboardInsider } from '@/components';
 
 function BillingPageRoot({ openAlert }) {
-  const handleCancelSubBtnClick = () => {
-    openAlert('cancel-main-subscription');
-  };
-  const handleResumeSubBtnClick = () => {
-    openAlert('resume-main-subscription');
-  };
-  const handleUpdatePaymentMethod = () => {};
-
   return (
-    <BillingPageBoot>
-      <h1>
-        <Button onClick={handleCancelSubBtnClick}>Cancel Subscription</Button>
-        <Button onClick={handleResumeSubBtnClick}>Resume Subscription</Button>
-        <Button>Update Payment Method</Button>
-      </h1>
-    </BillingPageBoot>
+    <DashboardInsider>
+      <BillingPageBoot>
+        <BillingPageContent />
+      </BillingPageBoot>
+    </DashboardInsider>
   );
 }
 

packages/webapp/src/containers/Subscriptions/BillingPageContent.module.scss

@@ -0,0 +1,8 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  padding: 32px 40px;
+  min-width: 800px;
+  max-width: 900px;
+  width: 75%;
+}

packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx

@@ -0,0 +1,20 @@
+import { Box, Group } from '@/components';
+import { Text } from '@blueprintjs/core';
+import { Subscription } from './BillingSubscription';
+import styles from './BillingPageContent.module.scss';
+
+export function BillingPageContent() {
+  return (
+    <Box className={styles.root}>
+      <Text>
+        Transactions locking has the ability to lock all organization
+        transactions so users can’t edit, delete or create new transactions
+        during the past period.
+      </Text>
+
+      <Group style={{ marginTop: '2rem' }}>
+        <Subscription />
+      </Group>
+    </Box>
+  );
+}

packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss

@@ -0,0 +1,64 @@
+
+.root {
+  width: 450px;
+  background: #fff;
+  border-radius: 5px;
+  box-shadow:  0 -8px 0 0px #BFCCD6, rgb(0 8 36 / 9%) 0px 4px 20px -5px;
+  border: 1px solid #C4D2D7;
+  min-height: 420px;
+  display: flex;  
+  flex-direction: column;
+}
+
+.title{
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #3D4C58;
+}
+
+.description {
+  font-size: 15px;
+  line-height: 1.5;
+  color: #394B59;
+  margin-top: 14px;
+}
+
+.period {
+  div + div {
+    &::before{
+      content: " • ";
+      text-align: center;
+      margin-right: 3px;
+      color: #999;
+      margin-left: 6px;
+    }
+  }
+}
+.periodStatus{
+  text-transform: uppercase;
+  color: #A82A2A;
+  font-weight: 500;
+}
+.periodText{
+  color: #AF6161;
+}
+.priceAmount {
+  font-size: 24px;
+  font-weight: 500;
+}
+.pricePeriod {
+  color: #8F99A8;
+}
+.subscribeButton{
+  border-radius: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.actions{
+  margin-top: 20px;
+
+  button{
+    font-size: 15px;
+  }
+}

packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx

@@ -0,0 +1,86 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { Box, Group, Stack } from '@/components';
+import { Button, Card, Intent, Text } from '@blueprintjs/core';
+import withAlertActions from '../Alert/withAlertActions';
+import styles from './BillingSubscription.module.scss';
+
+function SubscriptionRoot({ openAlert }) {
+  const handleCancelSubBtnClick = () => {
+    openAlert('cancel-main-subscription');
+  };
+  const handleResumeSubBtnClick = () => {
+    openAlert('resume-main-subscription');
+  };
+  const handleUpdatePaymentMethod = () => {};
+
+  const handleUpgradeBtnClick = () => {};
+
+  return (
+    <Card className={styles.root}>
+      <Stack spacing={8}>
+        <h1 className={styles.title}>Capital Essential</h1>
+
+        <Group spacing={0} className={styles.period}>
+          <Text className={styles.periodStatus}>Trial</Text>
+          <Text className={styles.periodText}>Trial ends in 10 days.</Text>
+        </Group>
+      </Stack>
+
+      <Text className={styles.description}>
+        Transactions locking has the ability to lock all organization
+        transactions so users can’t edit, delete or create new transactions
+        during the past period.
+      </Text>
+
+      <Stack align="flex-start" spacing={8} className={styles.actions}>
+        <Button
+          minimal
+          small
+          inline
+          intent={Intent.PRIMARY}
+          onClick={handleUpgradeBtnClick}
+        >
+          Upgrade the Plan
+        </Button>
+        <Button
+          minimal
+          small
+          inline
+          intent={Intent.PRIMARY}
+          onClick={handleCancelSubBtnClick}
+        >
+          Cancel Subscription
+        </Button>
+        <Button
+          minimal
+          small
+          inline
+          intent={Intent.PRIMARY}
+          onClick={handleUpdatePaymentMethod}
+        >
+          Change Payment Method
+        </Button>
+      </Stack>
+
+      <Group position={'apart'} style={{ marginTop: 'auto' }}>
+        <Group spacing={4}>
+          <Text className={styles.priceAmount}>$10</Text>
+          <Text className={styles.pricePeriod}>/ mo</Text>
+        </Group>
+
+        <Box>
+          <Button
+            intent={Intent.PRIMARY}
+            onClick={handleResumeSubBtnClick}
+            className={styles.subscribeButton}
+          >
+            Resume Subscription
+          </Button>
+        </Box>
+      </Group>
+    </Card>
+  );
+}
+
+export const Subscription = R.compose(withAlertActions)(SubscriptionRoot);