refactoring base widget

sora-xor · Feb 29, 2024 · c1c108c · c1c108c
1 parent 732ecf3
commit c1c108c
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 11 deletions.
diff --git a/src/components/pages/Swap/FormWidget.vue → src/components/pages/Swap/Form/Widget.vue b/src/components/pages/Swap/FormWidget.vue → src/components/pages/Swap/Form/Widget.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-widget v-loading="parentLoading" class="swap-widget" :title="t('exchange.Swap')">
+  <base-widget v-loading="parentLoading" class="swap-widget" :title="t('exchange.Swap')" primary-title>
     <template #filters>
       <swap-status-action-badge>
         <template #label>{{ t('marketText') }}:</template>

diff --git a/src/components/shared/Widget/BaseWidget.vue → src/components/shared/Widget/Base.vue b/src/components/shared/Widget/BaseWidget.vue → src/components/shared/Widget/Base.vue
@@ -2,9 +2,9 @@
   <s-card :class="['base-widget', { delimeter }]" border-radius="small" shadow="always" size="big" primary>
     <template #header v-if="hasHeader">
       <div class="base-widget-block base-widget-header">
-        <div class="base-widget-block base-widget-title">
+        <div :class="['base-widget-block', 'base-widget-title', { primary: primaryTitle }]">
           <slot name="title">
-            <h4 v-if="title">{{ title }}</h4>
+            <span v-if="title">{{ title }}</span>
             <s-tooltip v-if="tooltip" border-radius="mini" :content="tooltip">
               <s-icon name="info-16" size="14px" />
             </s-tooltip>
@@ -36,6 +36,7 @@ export default class BaseWidget extends Vue {
   @Prop({ default: '', type: String }) readonly tooltip!: string;
   @Prop({ default: false, type: Boolean }) readonly delimeter!: boolean;
   @Prop({ default: false, type: Boolean }) readonly extensive!: boolean;
+  @Prop({ default: false, type: Boolean }) readonly primaryTitle!: boolean;
 
   get hasHeader(): boolean {
     return !!this.title || !!this.$slots.title;
@@ -83,15 +84,21 @@ $left: $inner-spacing-medium;
     flex-flow: row wrap;
     justify-content: space-between;
     padding: $top $left $between;
-
-    font-size: var(--s-font-size-medium);
-    font-weight: 500;
-    line-height: var(--s-line-height-medium);
   }
 
   &-title {
     flex: 1;
     flex-flow: row nowrap;
+
+    font-size: var(--s-font-size-medium);
+    font-weight: 500;
+    line-height: var(--s-line-height-medium);
+
+    &.primary {
+      font-size: var(--s-font-size-large);
+      font-weight: 300;
+      line-height: var(--s-line-height-reset);
+    }
   }
 
   &-filters {

diff --git a/...components/shared/Widget/IFrameWidget.vue → src/components/shared/Widget/IFrame.vue b/...components/shared/Widget/IFrameWidget.vue → src/components/shared/Widget/IFrame.vue
diff --git a/...onents/shared/Widget/PriceChartWidget.vue → src/components/shared/Widget/PriceChart.vue b/...onents/shared/Widget/PriceChartWidget.vue → src/components/shared/Widget/PriceChart.vue
diff --git a/src/consts/index.ts b/src/consts/index.ts
@@ -206,7 +206,7 @@ export enum Components {
   X1Dialog = 'pages/X1/X1Dialog',
   X1History = 'pages/X1/X1History',
   // Swap Page
-  SwapFormWidget = 'pages/Swap/FormWidget',
+  SwapFormWidget = 'pages/Swap/Form/Widget',
   SwapChartWidget = 'pages/Swap/ChartWidget',
   SwapTransactionsWidget = 'pages/Swap/TransactionsWidget',
   SwapConfirm = 'pages/Swap/Confirm',
@@ -249,9 +249,9 @@ export enum Components {
   PoolInfo = 'shared/PoolInfo',
   StatusBadge = 'shared/StatusBadge',
   // Shared Widgets
-  BaseWidget = 'shared/Widget/BaseWidget',
-  IFrameWidget = 'shared/Widget/IFrameWidget',
-  PriceChartWidget = 'shared/Widget/PriceChartWidget',
+  BaseWidget = 'shared/Widget/Base',
+  IFrameWidget = 'shared/Widget/IFrame',
+  PriceChartWidget = 'shared/Widget/PriceChart',
   // Shared Buttons
   SortButton = 'shared/Button/SortButton',
   SvgIconButton = 'shared/Button/SvgIconButton/SvgIconButton',