From 0be2a137dc77d7ad25225fd243949c828f8e4cc1 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Tue, 5 Mar 2024 14:49:53 +0300
Subject: [PATCH] swap layout fixes

---
 .../pages/Swap/TransactionsWidget.vue         |  2 +-
 src/components/shared/Chart/ChartSkeleton.vue | 20 +++++++++++++------
 src/components/shared/Widget/Base.vue         |  1 +
 src/views/Swap.vue                            |  8 ++++----
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/Swap/TransactionsWidget.vue b/src/components/pages/Swap/TransactionsWidget.vue
index 9662819d5..e26ea6743 100644
--- a/src/components/pages/Swap/TransactionsWidget.vue
+++ b/src/components/pages/Swap/TransactionsWidget.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-widget extensive title="All trades" tooltip="Some text" class="swap-transactions-widget">
+  <base-widget extensive :title="tc('transactionText', 2)" class="swap-transactions-widget">
     <s-table
       ref="table"
       v-loading="loadingState"
diff --git a/src/components/shared/Chart/ChartSkeleton.vue b/src/components/shared/Chart/ChartSkeleton.vue
index 712850a51..9f3d0ed95 100644
--- a/src/components/shared/Chart/ChartSkeleton.vue
+++ b/src/components/shared/Chart/ChartSkeleton.vue
@@ -68,15 +68,14 @@ export default class ChartSkeleton extends Mixins(mixins.TranslationMixin) {
 $skeleton-label-width: 34px;
 
 .charts-container {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
   width: 100%;
 
   .chart {
-    height: calc(100% - 51px);
-    min-height: 293px;
-
-    @include tablet {
-      min-height: 317px;
-    }
+    flex: 1;
+    min-height: 327px;
 
     &-price {
       display: flex;
@@ -88,9 +87,18 @@ $skeleton-label-width: 34px;
       line-height: var(--s-line-height-extra-small);
     }
   }
+
+  .el-skeleton {
+    display: flex;
+    flex: 1;
+  }
 }
 
 .charts-skeleton {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+
   $margin-right: #{$inner-spacing-tiny};
   $skeleton-label-width-mobile: calc((100% - #{$margin-right} * 10) / 11);
   $skeleton-spacing: 18px;
diff --git a/src/components/shared/Widget/Base.vue b/src/components/shared/Widget/Base.vue
index 517d6398f..398e91919 100644
--- a/src/components/shared/Widget/Base.vue
+++ b/src/components/shared/Widget/Base.vue
@@ -97,6 +97,7 @@ $left: $inner-spacing-medium;
     font-size: var(--s-font-size-medium);
     font-weight: 500;
     line-height: var(--s-line-height-medium);
+    text-transform: capitalize;
 
     &.primary {
       font-size: var(--s-font-size-large);
diff --git a/src/views/Swap.vue b/src/views/Swap.vue
index b7ee2c4ad..cbb4581ef 100644
--- a/src/views/Swap.vue
+++ b/src/views/Swap.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="swap-container">
     <div class="column column--small">
-      <swap-form-widget :parent-loading="parentLoading" class="swap-form" />
+      <swap-form-widget :parent-loading="parentLoading" class="swap-form-widget" />
       <swap-distribution-widget />
     </div>
     <div class="column">
-      <swap-chart-widget :parent-loading="parentLoading" v-if="chartsEnabled" class="swap-chart" />
+      <swap-chart-widget :parent-loading="parentLoading" v-if="chartsEnabled" class="swap-chart-widget" />
       <swap-transactions-widget :parent-loading="parentLoading" />
     </div>
   </div>
@@ -86,8 +86,8 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
   align-items: flex-start;
   gap: $inner-spacing-medium;
 
-  .swap-chart,
-  .swap-form {
+  .swap-chart-widget,
+  .swap-form-widget {
     @include desktop {
       min-height: 517px;
     }