swap layout fixes

sora-xor · Mar 5, 2024 · 0be2a13 · 0be2a13
1 parent 0954fb9
commit 0be2a13
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
     }