Feature/Dashboard-note (#25)

Co-authored-by: Yehor Podporinov <yehor.podporinov@Yehors-MacBook-Pro.local>

src/localization/resources/en.json

@@ -68,7 +68,8 @@
       "user-deposit-title": "Your deposit",
       "available-to-claim-title": "Available to claim",
       "claim-btn": "Claim MOR",
-      "dashboard-description--0": "Upon withdrawal, your deposit will be sent to your address. In case of claim, tokens will be minted in the Arbitrum One network. This may take some time."
+      "dashboard-description--0": "Upon withdrawal, your deposit will be sent to your address. In case of claim, tokens will be minted in the Arbitrum One network. This may take some time.",
+      "dashboard-note--0": "Note: You can withdraw your stETH {daysCount} days after deposit"
     }
   },
   "info-dashboard": {

src/pages/HomePage/views/PublicPoolView.vue

@@ -74,6 +74,13 @@
       <p class="public-pool-view__dashboard-description">
         {{ $t(`home-page.public-pool-view.dashboard-description--${poolId}`) }}
       </p>
+      <p v-if="poolData" class="public-pool-view__dashboard-note">
+        {{
+          $t(`home-page.public-pool-view.dashboard-note--${poolId}`, {
+            daysCount: poolData.withdrawLockPeriod.div(24 * 60 * 60),
+          })
+        }}
+      </p>
       <withdraw-modal
         v-if="!isWithdrawDisabled && userPoolData"
         v-model:is-shown="isWithdrawModalShown"
@@ -260,4 +267,13 @@ const dashboardProgress = computed<ProgressBarType.Progress>(() => ({
 
   @include body-5-regular;
 }
+
+.public-pool-view__dashboard-note {
+  $color: #cccccc;
+
+  margin-top: toRem(24);
+  color: $color;
+
+  @include body-italic;
+}
 </style>

src/styles/_mixins.scss

@@ -368,6 +368,15 @@ $media-breakpoints: (
   letter-spacing: 0;
 }
 
+@mixin body-italic {
+  font-family: var(--app-font-family);
+  font-size: toRem(15);
+  font-style: italic;
+  font-weight: 400;
+  line-height: toRem(22);
+  letter-spacing: 0;
+}
+
 @keyframes shine {
   to {
     background-position-x: -200%;