feat: Move billing to preferences (#566)

* feat: move billing to preferences

* chore: remove the commented lines

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

@@ -1,28 +1,40 @@
 // @ts-nocheck
+import { useEffect } from 'react';
 import * as R from 'ramda';
 import { Redirect } from 'react-router-dom';
 import { BillingPageBoot } from './BillingPageBoot';
 import { BillingPageContent } from './BillingPageContent';
-import { DashboardInsider } from '@/components';
 import { useDashboardMeta } from '@/hooks/query';
 import withAlertActions from '../Alert/withAlertActions';
+import withDashboardActions from '../Dashboard/withDashboardActions';
 
-function BillingPageRoot({ openAlert }) {
+function BillingPageRoot({
+  openAlert,
+
+  // #withAlertActions
+  changePreferencesPageTitle,
+}) {
   const { data: dashboardMeta } = useDashboardMeta({
     keepPreviousData: true,
   });
 
+  useEffect(() => {
+    changePreferencesPageTitle('Billing');
+  }, [changePreferencesPageTitle]);
+
   // In case the edition is not Bigcapital Cloud, redirect to the homepage.
   if (!dashboardMeta.is_bigcapital_cloud) {
     return <Redirect to={{ pathname: '/' }} />;
   }
+
   return (
-    <DashboardInsider>
-      <BillingPageBoot>
-        <BillingPageContent />
-      </BillingPageBoot>
-    </DashboardInsider>
+    <BillingPageBoot>
+      <BillingPageContent />
+    </BillingPageBoot>
   );
 }
 
-export default R.compose(withAlertActions)(BillingPageRoot);
+export default R.compose(
+  withAlertActions,
+  withDashboardActions,
+)(BillingPageRoot);

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

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

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

@@ -3,8 +3,8 @@
   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;
+  box-shadow:  0 -6px 0 0px #ccd6dd;
+  border: 1px solid #d2dde1;
   min-height: 420px;
   display: flex;  
   flex-direction: column;