PW-687: Charts - Add Dark Theme

src/App.vue

@@ -86,6 +86,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @getter.wallet.account.isLoggedIn isSoraAccountConnected!: boolean;
   @getter.libraryTheme libraryTheme!: Theme;
   @getter.libraryDesignSystem libraryDesignSystem!: DesignSystem;
+  @getter.settings.chartsEnabled chartsEnabled!: boolean;
 
   @mutation.wallet.settings.setSoraNetwork private setSoraNetwork!: (network: WALLET_CONSTS.SoraNetwork) => void;
   @mutation.wallet.settings.setSubqueryEndpoint private setSubqueryEndpoint!: (endpoint: string) => void;
@@ -198,8 +199,8 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   get appClasses(): Array<string> {
     const baseClass = 'app-main';
     const cssClasses: Array<string> = [baseClass];
-    if (this.isSwapPage) {
-      cssClasses.push(`${baseClass}--swap`);
+    if (this.chartsEnabled && this.isSwapPage) {
+      cssClasses.push(`${baseClass}--has-charts`);
     }
     return cssClasses;
   }
@@ -462,8 +463,8 @@ i.icon-divider {
   @include icon-styles;
 }
 
-@include desktop {
-  .app-main.app-main--swap {
+@include large-desktop {
+  .app-main.app-main--has-charts {
     .app-menu {
       position: relative;
     }
@@ -474,16 +475,6 @@ i.icon-divider {
       }
     }
   }
-  .swap-container {
-    .el-form {
-      flex-shrink: 0;
-    }
-    .el-form,
-    .container--charts {
-      margin-right: $basic-spacing-small;
-      margin-left: $basic-spacing-small;
-    }
-  }
 }
 </style>
 
@@ -581,7 +572,7 @@ $sora-logo-width: 173.7px;
   }
 }
 
-@include desktop {
+@include tablet {
   .app-footer {
     flex-direction: row;
     .app-disclaimer {

src/components/Charts.vue

@@ -44,18 +44,23 @@
           symbol-as-decimal
         />
       </div>
-      <div :class="priceChangeClasses">
+      <div v-if="!isFetchingError" :class="priceChangeClasses">
         <s-icon class="price-change-arrow" :name="priceChangeArrow" size="14px" />{{ priceChangeFormatted }}%
       </div>
     </div>
     <v-chart
+      v-if="!isFetchingError"
       class="chart"
       :option="chartSpec"
       v-loading="loading"
       autoresize
       @zr:mousewheel="handleZoom"
       @datazoom="changeZoomLevel"
     />
+    <div v-else class="fetching-error">
+      <!-- TODO: Add error screen + preview -->
+      <span>Error fetching the data</span>
+    </div>
   </div>
 </template>
 
@@ -220,6 +225,7 @@ export default class Charts extends Mixins(
     this.updatePrices();
   }
 
+  isFetchingError = false;
   readonly FontWeightRate = WALLET_CONSTS.FontWeightRate;
 
   // ordered by timestamp DESC
@@ -345,9 +351,10 @@ export default class Charts extends Mixins(
   get lineChartSpec(): any {
     const spec = {
       grid: {
-        left: 50,
-        right: 50,
+        left: 40,
+        right: 0,
         bottom: 20,
+        top: 20,
       },
       xAxis: {
         type: 'category',
@@ -390,6 +397,10 @@ export default class Charts extends Mixins(
           },
           label: {
             backgroundColor: getCssVariableValue('--s-color-status-success'),
+            color: getCssVariableValue('--s-color-base-on-accent'),
+            formatter: ({ value }) => {
+              return this.formatDate(+value); // locale format
+            },
           },
         },
         splitLine: {
@@ -405,13 +416,24 @@ export default class Charts extends Mixins(
           end: 100,
         },
       ],
-      color: [getCssVariableValue('--s-color-theme-accent')],
+      color: [getCssVariableValue('--s-color-theme-accent'), getCssVariableValue('--s-color-status-success')],
       tooltip: {
         show: true,
         trigger: 'axis',
         axisPointer: {
           type: 'cross',
         },
+        backgroundColor: getCssVariableValue('--s-color-utility-body'),
+        borderColor: getCssVariableValue('--s-color-base-border-secondary'),
+        extraCssText: `box-shadow: ${getCssVariableValue('--s-shadow-dialog')}`,
+        label: {
+          formatter: (timestamp: string) => {
+            return dayjs(+timestamp).format(this.timeFormat);
+          },
+        },
+        textStyle: {
+          color: getCssVariableValue('--s-color-base-content-primary'),
+        },
         valueFormatter: (value) => {
           return Number.isFinite(value) ? `${value.toFixed(4)} ${this.symbol}` : value;
         },
@@ -544,6 +566,7 @@ export default class Charts extends Mixins(
             this.limits.max = Math.max(this.limits.max, ...price);
           }
         } catch (error) {
+          this.isFetchingError = true;
           console.error(error);
         }
       });

src/views/Swap.vue

@@ -683,15 +683,12 @@ export default class Swap extends Mixins(
 </script>
 
 <style lang="scss">
-@include desktop {
-  .app-main--swap {
-    .app-content {
-      width: 100%;
-    }
-    .app-main .app-menu {
-      position: relative;
-    }
+@include large-desktop {
+  .app-main--has-charts {
     .swap-container {
+      display: flex;
+      justify-content: center;
+      padding-top: $inner-spacing-medium;
       .el-form {
         flex-shrink: 0;
       }
@@ -701,6 +698,14 @@ export default class Swap extends Mixins(
         margin-left: $basic-spacing-small;
       }
     }
+    .el-form--actions {
+      flex-shrink: 0;
+    }
+    .container--charts {
+      min-width: $bridge-width;
+      max-width: 100%;
+      flex-grow: 1;
+    }
   }
 }
 </style>
@@ -710,7 +715,6 @@ export default class Swap extends Mixins(
   @include buttons;
   @include full-width-button('action-button');
   @include vertical-divider('el-button--switch-tokens', $inner-spacing-medium);
-  flex-shrink: 0;
 }
 
 .el-button.neumorphic.s-action:disabled {
@@ -744,18 +748,4 @@ export default class Swap extends Mixins(
     }
   }
 }
-@include desktop {
-  .app-main--swap {
-    .swap-container {
-      display: flex;
-      justify-content: center;
-      padding-top: $inner-spacing-medium;
-    }
-    .container--charts {
-      min-width: $bridge-width;
-      max-width: 100%;
-      flex-grow: 1;
-    }
-  }
-}
 </style>