Feature/restructure fire page (#982)

* Restructure fire page

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Simplified the features page
+- Restructured the _FIRE_ section
 - Upgraded `@simplewebauthn/browser` and `@simplewebauthn/server` from version `4.1.0` to `5.2.1`
 
 ## 1.155.0 - 29.05.2022

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -1,68 +1,68 @@
 <div class="container">
-  <div class="row">
+  <div class="row mb-5">
     <div class="col-lg">
       <h3 class="d-flex justify-content-center mb-3" i18n>FIRE</h3>
-      <div class="mb-5">
+      <div>
-        <h4 i18n>4% Rule</h4>
+        <h4 class="mb-3" i18n>Calculator</h4>
-        <div *ngIf="isLoading">
+        <gf-fire-calculator
-          <ngx-skeleton-loader
+          [currency]="user?.settings?.baseCurrency"
-            animation="pulse"
+          [deviceType]="deviceType"
-            class="my-1"
+          [fireWealth]="fireWealth?.toNumber()"
-            [theme]="{
+          [hasPermissionToUpdateUserSettings]="hasPermissionToUpdateUserSettings"
-              height: '1rem',
+          [locale]="user?.settings?.locale"
-              width: '100%'
+          [savingsRate]="user?.settings?.savingsRate"
-            }"
+          (savingsRateChanged)="onSavingsRateChange($event)"
-          ></ngx-skeleton-loader>
+        ></gf-fire-calculator>
-          <ngx-skeleton-loader
-            animation="pulse"
-            [theme]="{
-              height: '1rem',
-              width: '10rem'
-            }"
-          ></ngx-skeleton-loader>
-        </div>
-        <div *ngIf="!isLoading">
-          If you retire today, you would be able to withdraw
-          <span class="font-weight-bold"
-            ><gf-value
-              class="d-inline-block"
-              [currency]="user?.settings?.baseCurrency"
-              [locale]="user?.settings?.locale"
-              [value]="withdrawalRatePerYear?.toNumber()"
-            ></gf-value>
-            per year</span
-          >
-          or
-          <span class="font-weight-bold"
-            ><gf-value
-              class="d-inline-block"
-              [currency]="user?.settings?.baseCurrency"
-              [locale]="user?.settings?.locale"
-              [value]="withdrawalRatePerMonth?.toNumber()"
-            ></gf-value>
-            per month</span
-          >, based on your total assets of
-          <gf-value
-            class="d-inline-block"
-            [currency]="user?.settings?.baseCurrency"
-            [locale]="user?.settings?.locale"
-            [value]="fireWealth?.toNumber()"
-          ></gf-value>
-          and a withdrawal rate of 4%.
-        </div>
       </div>
     </div>
   </div>
   <div>
-    <h4 class="mb-3" i18n>Calculator</h4>
+    <h4 i18n>4% Rule</h4>
-    <gf-fire-calculator
+    <div *ngIf="isLoading">
-      [currency]="user?.settings?.baseCurrency"
+      <ngx-skeleton-loader
-      [deviceType]="deviceType"
+        animation="pulse"
-      [fireWealth]="fireWealth?.toNumber()"
+        class="my-1"
-      [hasPermissionToUpdateUserSettings]="hasPermissionToUpdateUserSettings"
+        [theme]="{
-      [locale]="user?.settings?.locale"
+          height: '1rem',
-      [savingsRate]="user?.settings?.savingsRate"
+          width: '100%'
-      (savingsRateChanged)="onSavingsRateChange($event)"
+        }"
-    ></gf-fire-calculator>
+      ></ngx-skeleton-loader>
+      <ngx-skeleton-loader
+        animation="pulse"
+        [theme]="{
+          height: '1rem',
+          width: '10rem'
+        }"
+      ></ngx-skeleton-loader>
+    </div>
+    <div *ngIf="!isLoading">
+      If you retire today, you would be able to withdraw
+      <span class="font-weight-bold"
+        ><gf-value
+          class="d-inline-block"
+          [currency]="user?.settings?.baseCurrency"
+          [locale]="user?.settings?.locale"
+          [value]="withdrawalRatePerYear?.toNumber()"
+        ></gf-value>
+        per year</span
+      >
+      or
+      <span class="font-weight-bold"
+        ><gf-value
+          class="d-inline-block"
+          [currency]="user?.settings?.baseCurrency"
+          [locale]="user?.settings?.locale"
+          [value]="withdrawalRatePerMonth?.toNumber()"
+        ></gf-value>
+        per month</span
+      >, based on your total assets of
+      <gf-value
+        class="d-inline-block"
+        [currency]="user?.settings?.baseCurrency"
+        [locale]="user?.settings?.locale"
+        [value]="fireWealth?.toNumber()"
+      ></gf-value>
+      and a withdrawal rate of 4%.
+    </div>
   </div>
 </div>

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -1,7 +1,7 @@
 <div class="container p-0">
   <div class="row">
     <div class="col-md-3">
-      <form class="" [formGroup]="calculatorForm">
+      <form class="mb-4" [formGroup]="calculatorForm">
         <!--<mat-form-field appearance="outline">
           <input formControlName="principalInvestmentAmount" matInput />
         </mat-form-field>-->