From 0491952be749726222f3d3d333e5ed94f8d0df16 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Tue, 6 Feb 2024 14:45:04 +0500
Subject: [PATCH 01/16] fix css

---
 src/components/pages/OrderBook/BookWidget.vue | 27 +++++++++++++------
 src/components/pages/OrderBook/BuySell.vue    |  7 ++---
 .../pages/OrderBook/CustomiseWidget.vue       | 18 +++++++++++++
 .../pages/OrderBook/Dialogs/CancelOrders.vue  |  8 +++---
 .../pages/OrderBook/Dialogs/PlaceOrder.vue    | 23 ++++++----------
 .../OrderBook/Popovers/PairListPopover.vue    |  4 +--
 src/consts/index.ts                           |  4 +--
 src/views/OrderBook.vue                       |  6 ++---
 8 files changed, 57 insertions(+), 40 deletions(-)
 create mode 100644 src/components/pages/OrderBook/CustomiseWidget.vue

diff --git a/src/components/pages/OrderBook/BookWidget.vue b/src/components/pages/OrderBook/BookWidget.vue
index 9a193bdec..d8f81dd4a 100644
--- a/src/components/pages/OrderBook/BookWidget.vue
+++ b/src/components/pages/OrderBook/BookWidget.vue
@@ -317,11 +317,17 @@ export default class BookWidget extends Mixins(TranslationMixin, mixins.LoadingM
   }
 
   /**
-   * // TODO: [Rustem] add missed type, add missed docs, it's unclear how this method works
+   * Aggregates orders based on selected precision by user
+   * @param orders to be aggregated
+   * @returns aggregated orders
    */
-  private calculateStepsDistribution(orders, precision = 10): OrderBookPriceVolumeAggregated[] {
+  private calculateStepsDistribution(
+    orders: OrderBookPriceVolume[],
+    precision = 10
+  ): OrderBookPriceVolume[] | OrderBookPriceVolumeAggregated[] {
     if (this.isBookPrecisionEqual(precision.toString())) return orders;
 
+    // finds max price to know proper edge in orders distribution
     const maxPrice = FPNumber.max(...orders.map(([price]) => price)) as FPNumber;
 
     if (!maxPrice) return orders;
@@ -335,16 +341,19 @@ export default class BookWidget extends Mixins(TranslationMixin, mixins.LoadingM
 
     if (!edge.isZeroMod(step)) edge = edge.sub(edge.mod(step));
 
+    // iteratively finds a range to be placed
     for (let index = 0; index < orders.length; index++) {
       const [price, amount] = orders[index];
 
       if (FPNumber.lte(edge, FPNumber.ZERO)) break;
       if (FPNumber.lt(edge, price)) break;
 
+      // checks whether eligible for this range
       if (FPNumber.lte(price, edge) && FPNumber.gt(price, edge.sub(step))) {
         accumulatedAmount = accumulatedAmount.add(amount);
         accumulatedTotal = price.mul(amount).add(accumulatedTotal);
       } else {
+        // if not, puts accumulated amount and total in row and starts with next one
         aggregatedOrders.push([edge, accumulatedAmount, accumulatedTotal]);
 
         accumulatedAmount = FPNumber.ZERO;
@@ -353,11 +362,13 @@ export default class BookWidget extends Mixins(TranslationMixin, mixins.LoadingM
         index -= 1;
       }
 
+      // scenario when last [price, volume] wasn't recorded in 'else' branch; push it in last row
       if (index === orders.length - 1) {
         aggregatedOrders.push([edge, accumulatedAmount, accumulatedTotal]);
       }
     }
 
+    // filter empty records
     return aggregatedOrders.filter((row: OrderBookPriceVolumeAggregated) => !row[1].isZero());
   }
 
@@ -379,12 +390,12 @@ export default class BookWidget extends Mixins(TranslationMixin, mixins.LoadingM
     const maxAmount = FPNumber.max(...aggregated.map((order) => order[1])) as FPNumber;
     const result: LimitOrderForm[] = [];
 
-    aggregated.forEach((row: OrderBookPriceVolumeAggregated) => {
+    aggregated.forEach((row: OrderBookPriceVolume | OrderBookPriceVolumeAggregated) => {
       const [price, amount, acc] = row;
 
       if (amount.isZero()) return;
 
-      const total = this.isBookPrecisionEqual(this.selectedStep) ? price.mul(amount) : acc;
+      const total = (this.isBookPrecisionEqual(this.selectedStep) ? price.mul(amount) : acc) as FPNumber;
 
       result.push({
         price: this.toBookPrecision(price),
@@ -490,7 +501,7 @@ $mono-font: 'JetBrainsMono';
     }
 
     .order-info.price {
-      color: var(--status-day-success, #34ad87);
+      color: var(--s-color-status-success);
     }
   }
 
@@ -500,7 +511,7 @@ $mono-font: 'JetBrainsMono';
     }
 
     .order-info.price {
-      color: var(--status-day-error, #f754a3);
+      color: var(--s-color-status-error);
     }
   }
 
@@ -530,14 +541,14 @@ $mono-font: 'JetBrainsMono';
     &--up {
       .mark-price,
       .trend-icon {
-        color: #34ad87;
+        color: var(--s-color-status-success);
       }
     }
 
     &--down {
       .mark-price,
       .trend-icon {
-        color: #f754a3;
+        color: var(--s-color-status-error);
       }
     }
   }
diff --git a/src/components/pages/OrderBook/BuySell.vue b/src/components/pages/OrderBook/BuySell.vue
index 6ef607dce..9107a31e0 100644
--- a/src/components/pages/OrderBook/BuySell.vue
+++ b/src/components/pages/OrderBook/BuySell.vue
@@ -312,7 +312,6 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
     });
   }
 
-  // TODO: [Rustem]: Refactor this function to reduce its Cognitive Complexity from 33 to the 15 allowed. [+22 locations]sonarlint(typescript:S3776)
   get buttonText(): string {
     if (!this.isLoggedIn) return this.t('connectWalletText');
 
@@ -356,7 +355,6 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
     this.reading = reading;
   }
 
-  // TODO: [Rustem] Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed. [+14 locations]sonarlint(typescript:S3776)
   get buttonDisabled(): boolean {
     if (this.bookStopped) return true;
 
@@ -376,14 +374,13 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
         if (this.priceExceedsSpread) return true;
       }
     } else {
-      if (!this.baseValue) return true; // TODO: [Rustem] check with btn text
+      if (!this.baseValue) return true;
       if (!this.marketQuotePrice) return true;
     }
 
     return this.isOutOfAmountBounds;
   }
 
-  // TODO: [Rustem] Refactor this function to reduce its Cognitive Complexity from 16 to the 15 allowed. [+15 locations]sonarlint(typescript:S3776)
   async checkInputValidation(): Promise<void> {
     this.setError({ reason: '', reading: '' });
 
@@ -925,7 +922,7 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
 
   .buy-btn {
     width: 100%;
-    background-color: #34ad87 !important;
+    background-color: var(--s-color-status-success) !important;
   }
 
   .buy-btn.is-disabled {
diff --git a/src/components/pages/OrderBook/CustomiseWidget.vue b/src/components/pages/OrderBook/CustomiseWidget.vue
new file mode 100644
index 000000000..36bdd32af
--- /dev/null
+++ b/src/components/pages/OrderBook/CustomiseWidget.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="customise-widget">
+    <span>Customise page</span>
+    <s-icon name="arrow-left-16" />
+  </div>
+</template>
+
+<script lang="ts">
+import { mixins } from '@soramitsu/soraneo-wallet-web';
+import { Component, Mixins, Watch } from 'vue-property-decorator';
+
+import TranslationMixin from '@/components/mixins/TranslationMixin';
+
+@Component
+export default class CustomiseWidget extends Mixins(TranslationMixin) {}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/pages/OrderBook/Dialogs/CancelOrders.vue b/src/components/pages/OrderBook/Dialogs/CancelOrders.vue
index 78bade98b..c46c2f6e9 100644
--- a/src/components/pages/OrderBook/Dialogs/CancelOrders.vue
+++ b/src/components/pages/OrderBook/Dialogs/CancelOrders.vue
@@ -6,9 +6,6 @@
       <s-button type="primary" class="btn s-typography-button--medium" @click="handleCancel">
         <span> {{ t('orderBook.dialog.cancelAll') }}</span>
       </s-button>
-      <s-button type="secondary" class="btn s-typography-button--medium" @click="closeDialog">
-        <span> {{ t('orderBook.dialog.noCancel') }}</span>
-      </s-button>
     </div>
   </dialog-base>
 </template>
@@ -34,7 +31,7 @@ export default class CancelOrders extends Mixins(mixins.DialogMixin, Translation
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .order-book-cancel-dialog {
   display: flex;
   flex-direction: column;
@@ -57,7 +54,8 @@ export default class CancelOrders extends Mixins(mixins.DialogMixin, Translation
   }
 
   .btn {
-    margin: 0 0 $basic-spacing 0;
+    margin-top: $basic-spacing;
+    width: 100%;
   }
 }
 </style>
diff --git a/src/components/pages/OrderBook/Dialogs/PlaceOrder.vue b/src/components/pages/OrderBook/Dialogs/PlaceOrder.vue
index f1926436e..7917db8b0 100644
--- a/src/components/pages/OrderBook/Dialogs/PlaceOrder.vue
+++ b/src/components/pages/OrderBook/Dialogs/PlaceOrder.vue
@@ -1,5 +1,5 @@
 <template>
-  <dialog-base :visible.sync="isVisible" :title="title" custom-class="dialog--confirm-swap">
+  <dialog-base :visible.sync="isVisible" :title="title">
     <div class="tokens">
       <div class="tokens-info-container">
         <span class="token-value">{{ upperText }}</span>
@@ -151,37 +151,26 @@ export default class PlaceLimitOrder extends Mixins(mixins.TransactionMixin, mix
 </script>
 
 <style lang="scss">
-.dialog--confirm-swap {
-  .transaction-number {
-    color: var(--s-color-base-content-primary);
-    font-weight: 600;
-    word-break: break-all;
-  }
-}
-
 .limit-order-type--buy {
   .info-line-value {
-    color: #34ad87;
+    color: var(--s-color-status-success);
   }
 }
 
 .limit-order-type--sell {
   .info-line-value {
-    color: #f754a3;
+    color: var(--s-color-status-error);
   }
 }
 </style>
 
 <style lang="scss" scoped>
-.transaction-details {
-  margin-top: $basic-spacing;
-}
-
 .tokens {
   display: flex;
   flex-direction: column;
   font-size: var(--s-heading2-font-size);
   line-height: var(--s-line-height-small);
+
   &-info-container {
     display: flex;
     align-items: center;
@@ -192,4 +181,8 @@ export default class PlaceLimitOrder extends Mixins(mixins.TransactionMixin, mix
     margin-left: $basic-spacing;
   }
 }
+
+.transaction-details {
+  margin-top: $basic-spacing;
+}
 </style>
diff --git a/src/components/pages/OrderBook/Popovers/PairListPopover.vue b/src/components/pages/OrderBook/Popovers/PairListPopover.vue
index 3da34aa19..ef21bbbc4 100644
--- a/src/components/pages/OrderBook/Popovers/PairListPopover.vue
+++ b/src/components/pages/OrderBook/Popovers/PairListPopover.vue
@@ -275,13 +275,13 @@ export default class PairListPopover extends Mixins(
   }
 
   .status-live {
-    color: var(--status-day-success, #34ad87);
+    color: var(--s-color-status-success);
     text-transform: uppercase;
     font-weight: 600;
   }
 
   .status-stop {
-    color: var(--status-day-error, #f754a3);
+    color: var(--s-color-status-error);
     text-transform: uppercase;
     font-weight: 600;
   }
diff --git a/src/consts/index.ts b/src/consts/index.ts
index fb143ae8d..401c8a3b9 100644
--- a/src/consts/index.ts
+++ b/src/consts/index.ts
@@ -213,15 +213,15 @@ export enum Components {
   SwapDistribution = 'pages/Swap/Distribution',
   // Order Book
   BookWidget = 'pages/OrderBook/BookWidget',
+  BookChartsWidget = 'pages/OrderBook/BookChartsWidget',
+  CustomisePageWidget = 'pages/OrderBook/CustomiseWidget',
   SetLimitOrderWidget = 'pages/OrderBook/SetLimitOrderWidget',
   HistoryOrderWidget = 'pages/OrderBook/HistoryOrderWidget',
   MarketTradesWidget = 'pages/OrderBook/MarketTradesWidget',
-  BookChartsWidget = 'pages/OrderBook/BookChartsWidget',
   BuySell = 'pages/OrderBook/BuySell',
   PairListPopover = 'pages/OrderBook/Popovers/PairListPopover',
   AllOrders = 'pages/OrderBook/Tables/AllOrders',
   OpenOrders = 'pages/OrderBook/Tables/OpenOrders',
-  CustomisePage = 'pages/OrderBook/Dialogs/CustomisePage',
   PlaceOrder = 'pages/OrderBook/Dialogs/PlaceOrder',
   CancelOrders = 'pages/OrderBook/Dialogs/CancelOrders',
   PlaceTransactionDetails = 'pages/OrderBook/TransactionDetails',
diff --git a/src/views/OrderBook.vue b/src/views/OrderBook.vue
index 1ccc7903f..37d3404b6 100644
--- a/src/views/OrderBook.vue
+++ b/src/views/OrderBook.vue
@@ -3,7 +3,7 @@
     <div v-if="isScreenHuge()" class="order-book-widgets--huge">
       <div class="column-1">
         <set-limit-order-widget class="set-widget" />
-        <customise-page-widget :visible.sync="settingsVisibility" class="setting-widget" />
+        <customise-page-widget class="setting-widget" />
       </div>
       <div class="column-2">
         <book-charts-widget class="chart-widget" />
@@ -48,7 +48,7 @@ import type { OrderBook, OrderBookId } from '@sora-substrate/liquidity-proxy';
     HistoryOrderWidget: lazyComponent(Components.HistoryOrderWidget),
     BookChartsWidget: lazyComponent(Components.BookChartsWidget),
     MarketTradesWidget: lazyComponent(Components.MarketTradesWidget),
-    CustomisePageWidget: lazyComponent(Components.CustomisePage),
+    CustomisePageWidget: lazyComponent(Components.CustomisePageWidget),
   },
 })
 export default class OrderBookView extends Mixins(TranslationMixin, mixins.LoadingMixin) {
@@ -65,7 +65,7 @@ export default class OrderBookView extends Mixins(TranslationMixin, mixins.Loadi
   @action.orderBook.unsubscribeFromOrderBookStats private unsubscribeFromOrderBookStats!: FnWithoutArgs;
   @action.orderBook.unsubscribeFromBidsAndAsks private unsubscribeFromBidsAndAsks!: FnWithoutArgs;
 
-  settingsVisibility = false;
+  settingsVisibility = true;
 
   @Watch('orderBookId', { immediate: true })
   private updateSubscription() {

From e1b4e08994888e74a011e5078061708300d1a17a Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Thu, 8 Feb 2024 08:59:50 +0500
Subject: [PATCH 02/16] prepare layouts

---
 .../pages/OrderBook/CustomiseWidget.vue       | 53 +++++++++++++--
 .../pages/OrderBook/Popovers/Settings.vue     | 64 +++++++++++++++++++
 src/consts/index.ts                           |  1 +
 src/views/OrderBook.vue                       |  4 +-
 4 files changed, 113 insertions(+), 9 deletions(-)
 create mode 100644 src/components/pages/OrderBook/Popovers/Settings.vue

diff --git a/src/components/pages/OrderBook/CustomiseWidget.vue b/src/components/pages/OrderBook/CustomiseWidget.vue
index 36bdd32af..59641ba67 100644
--- a/src/components/pages/OrderBook/CustomiseWidget.vue
+++ b/src/components/pages/OrderBook/CustomiseWidget.vue
@@ -1,18 +1,57 @@
 <template>
-  <div class="customise-widget">
-    <span>Customise page</span>
-    <s-icon name="arrow-left-16" />
+  <div class="order-book-widget customise-widget">
+    <el-popover popper-class="order-book-whitelist" trigger="click" v-model="visibleSettings" :visible-arrow="false">
+      <settings-popover />
+      <div slot="reference" class="settings-btn">
+        <span class="customise-widget-title">Customise page</span>
+        <s-icon name="basic-settings-24" size="24px" />
+      </div>
+    </el-popover>
   </div>
 </template>
 
 <script lang="ts">
-import { mixins } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
 
-@Component
-export default class CustomiseWidget extends Mixins(TranslationMixin) {}
+@Component({
+  components: {
+    SettingsPopover: lazyComponent(Components.SettingsPopover),
+  },
+})
+export default class CustomiseWidget extends Mixins(TranslationMixin) {
+  visibleSettings = false;
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+.customise-widget {
+  margin-top: 8px;
+  height: 64px;
+
+  .settings-btn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-title {
+    line-height: 64px;
+    margin-left: $basic-spacing;
+    font-size: var(--s-font-size-medium);
+    font-weight: 500;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .s-icon-basic-settings-24 {
+    margin-right: 20px;
+    color: var(--s-color-base-content-tertiary);
+  }
+}
+</style>
diff --git a/src/components/pages/OrderBook/Popovers/Settings.vue b/src/components/pages/OrderBook/Popovers/Settings.vue
new file mode 100644
index 000000000..67eb15473
--- /dev/null
+++ b/src/components/pages/OrderBook/Popovers/Settings.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="settings-popover">
+    <h4>Customise page</h4>
+    <div>
+      <s-icon name="basic-settings-24" size="24px" />
+      <span>Chart color settings</span>
+    </div>
+    <div class="settings-popover-switches">
+      <div class="settings-popover-switches__item">
+        <s-switch v-model="one" :disabled="loading" />
+        <span>{{ 'Charts' }}</span>
+      </div>
+      <div class="settings-popover-switches__item">
+        <s-switch v-model="two" :disabled="loading" />
+        <span>{{ 'Market trades' }}</span>
+      </div>
+      <div class="settings-popover-switches__item">
+        <s-switch v-model="three" :disabled="loading" />
+        <span>{{ 'Order placing' }}</span>
+      </div>
+      <div class="settings-popover-switches__item">
+        <s-switch v-model="four" :disabled="loading" />
+        <span>{{ 'All pairs' }}</span>
+      </div>
+      <div class="settings-popover-switches__item">
+        <s-switch v-model="five" :disabled="loading" />
+        <span>{{ 'Trading pair' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { components, mixins } from '@soramitsu/soraneo-wallet-web';
+import { Component, Mixins } from 'vue-property-decorator';
+
+import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
+import { state, getter, mutation } from '@/store/decorators';
+
+@Component({
+  components: {},
+})
+export default class SettingsPopover extends Mixins(TranslationMixin, mixins.LoadingMixin) {
+  one;
+  two;
+  three;
+  four;
+  five;
+}
+</script>
+
+<style lang="scss">
+.settings-popover {
+  &-switches {
+    &__item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>
diff --git a/src/consts/index.ts b/src/consts/index.ts
index 401c8a3b9..17290f075 100644
--- a/src/consts/index.ts
+++ b/src/consts/index.ts
@@ -220,6 +220,7 @@ export enum Components {
   MarketTradesWidget = 'pages/OrderBook/MarketTradesWidget',
   BuySell = 'pages/OrderBook/BuySell',
   PairListPopover = 'pages/OrderBook/Popovers/PairListPopover',
+  SettingsPopover = 'pages/OrderBook/Popovers/Settings',
   AllOrders = 'pages/OrderBook/Tables/AllOrders',
   OpenOrders = 'pages/OrderBook/Tables/OpenOrders',
   PlaceOrder = 'pages/OrderBook/Dialogs/PlaceOrder',
diff --git a/src/views/OrderBook.vue b/src/views/OrderBook.vue
index 37d3404b6..698eba54a 100644
--- a/src/views/OrderBook.vue
+++ b/src/views/OrderBook.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="isScreenHuge()" class="order-book-widgets--huge">
+    <div v-if="isScreenHuge" class="order-book-widgets--huge">
       <div class="column-1">
         <set-limit-order-widget class="set-widget" />
         <customise-page-widget class="setting-widget" />
@@ -89,7 +89,7 @@ export default class OrderBookView extends Mixins(TranslationMixin, mixins.Loadi
     }
   }
 
-  isScreenHuge(): boolean {
+  get isScreenHuge(): boolean {
     return this.responsiveClass === BreakpointClass.HugeDesktop;
   }
 

From 781d59af903d8829d4fc785c0bd2c12db29c1c44 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Thu, 8 Feb 2024 15:06:16 +0500
Subject: [PATCH 03/16] set color

---
 .../pages/OrderBook/CustomiseWidget.vue       |  4 +
 .../{CustomisePage.vue => SetColor.vue}       |  4 +-
 .../pages/OrderBook/Popovers/Settings.vue     | 73 +++++++++++++++++--
 src/consts/index.ts                           |  1 +
 4 files changed, 72 insertions(+), 10 deletions(-)
 rename src/components/pages/OrderBook/Dialogs/{CustomisePage.vue => SetColor.vue} (70%)

diff --git a/src/components/pages/OrderBook/CustomiseWidget.vue b/src/components/pages/OrderBook/CustomiseWidget.vue
index 59641ba67..a3045ee28 100644
--- a/src/components/pages/OrderBook/CustomiseWidget.vue
+++ b/src/components/pages/OrderBook/CustomiseWidget.vue
@@ -47,6 +47,10 @@ export default class CustomiseWidget extends Mixins(TranslationMixin) {
 
   &:hover {
     cursor: pointer;
+
+    .s-icon-basic-settings-24 {
+      color: var(--s-color-base-content-secondary);
+    }
   }
 
   .s-icon-basic-settings-24 {
diff --git a/src/components/pages/OrderBook/Dialogs/CustomisePage.vue b/src/components/pages/OrderBook/Dialogs/SetColor.vue
similarity index 70%
rename from src/components/pages/OrderBook/Dialogs/CustomisePage.vue
rename to src/components/pages/OrderBook/Dialogs/SetColor.vue
index fe5c23e29..bcb85a06a 100644
--- a/src/components/pages/OrderBook/Dialogs/CustomisePage.vue
+++ b/src/components/pages/OrderBook/Dialogs/SetColor.vue
@@ -1,5 +1,5 @@
 <template>
-  <dialog-base :visible.sync="isVisible">CustomisePage</dialog-base>
+  <dialog-base :visible.sync="isVisible">Hi</dialog-base>
 </template>
 
 <script lang="ts">
@@ -14,5 +14,5 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
     NetworkFeeWarning: components.NetworkFeeWarning,
   },
 })
-export default class CustomisePage extends Mixins(mixins.DialogMixin, TranslationMixin) {}
+export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixin) {}
 </script>
diff --git a/src/components/pages/OrderBook/Popovers/Settings.vue b/src/components/pages/OrderBook/Popovers/Settings.vue
index 67eb15473..1fa9df25f 100644
--- a/src/components/pages/OrderBook/Popovers/Settings.vue
+++ b/src/components/pages/OrderBook/Popovers/Settings.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="settings-popover">
     <h4>Customise page</h4>
-    <div>
+    <div class="settings-popover-color">
       <s-icon name="basic-settings-24" size="24px" />
       <span>Chart color settings</span>
     </div>
+    <div class="delimiter" />
     <div class="settings-popover-switches">
       <div class="settings-popover-switches__item">
         <s-switch v-model="one" :disabled="loading" />
@@ -26,7 +27,17 @@
         <s-switch v-model="five" :disabled="loading" />
         <span>{{ 'Trading pair' }}</span>
       </div>
+      <div class="delimiter" />
+      <div class="settings-popover-switches__item">
+        <s-switch v-model="six" :disabled="loading" />
+        <span>{{ 'Trade reminder' }}</span>
+      </div>
+      <div class="settings-popover-switches__item">
+        <s-switch v-model="seven" :disabled="loading" />
+        <span>{{ 'Sound reminder' }}</span>
+      </div>
     </div>
+    <set-color-dialog />
   </div>
 </template>
 
@@ -40,25 +51,71 @@ import { lazyComponent } from '@/router';
 import { state, getter, mutation } from '@/store/decorators';
 
 @Component({
-  components: {},
+  components: {
+    SetColorDialog: lazyComponent(Components.SetColor),
+  },
 })
 export default class SettingsPopover extends Mixins(TranslationMixin, mixins.LoadingMixin) {
-  one;
-  two;
-  three;
-  four;
-  five;
+  one = true;
+  two = true;
+  three = true;
+  four = true;
+  five = true;
+  six = true;
+  seven = true;
 }
 </script>
 
 <style lang="scss">
 .settings-popover {
+  background-color: var(--s-color-utility-body);
+  border-radius: 16px;
+  color: var(--s-color-base-content-primary);
+  border: none;
+  padding: $basic-spacing 32px $basic-spacing $basic-spacing;
+  font-size: var(--s-font-size-small);
+
+  &-color {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 300;
+    margin-top: 16px;
+
+    .s-icon-basic-settings-24 {
+      margin-right: 16px;
+      color: var(--s-color-base-content-tertiary);
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      .s-icon-basic-settings-24 {
+        color: var(--s-color-base-content-secondary);
+      }
+    }
+  }
+
   &-switches {
     &__item {
+      margin-top: 12px;
       display: flex;
-      justify-content: center;
+      justify-content: flex-start;
       align-items: center;
+      font-size: 16px;
+      font-weight: 300;
+
+      span {
+        margin: 0 8px;
+      }
     }
   }
+
+  .delimiter {
+    background-color: var(--s-color-base-border-secondary);
+    width: 100%;
+    height: 1px;
+    margin: 14px 0 4px 0;
+  }
 }
 </style>
diff --git a/src/consts/index.ts b/src/consts/index.ts
index 17290f075..17a93bc22 100644
--- a/src/consts/index.ts
+++ b/src/consts/index.ts
@@ -225,6 +225,7 @@ export enum Components {
   OpenOrders = 'pages/OrderBook/Tables/OpenOrders',
   PlaceOrder = 'pages/OrderBook/Dialogs/PlaceOrder',
   CancelOrders = 'pages/OrderBook/Dialogs/CancelOrders',
+  SetColor = 'pages/OrderBook/Dialogs/SetColor',
   PlaceTransactionDetails = 'pages/OrderBook/TransactionDetails',
   // Referrals Page
   ReferralsConfirmBonding = 'pages/Referrals/ConfirmBonding',

From 1f50fe616f088adf992adbc779221d2a0719dc93 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Sat, 10 Feb 2024 08:58:46 +0500
Subject: [PATCH 04/16] add dialog

---
 .../pages/OrderBook/CustomiseWidget.vue       |   9 +-
 .../pages/OrderBook/Dialogs/SetColor.vue      | 123 +++++++++++++++++-
 .../pages/OrderBook/Popovers/Settings.vue     |  11 +-
 3 files changed, 135 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/OrderBook/CustomiseWidget.vue b/src/components/pages/OrderBook/CustomiseWidget.vue
index a3045ee28..0d9b08425 100644
--- a/src/components/pages/OrderBook/CustomiseWidget.vue
+++ b/src/components/pages/OrderBook/CustomiseWidget.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="order-book-widget customise-widget">
     <el-popover popper-class="order-book-whitelist" trigger="click" v-model="visibleSettings" :visible-arrow="false">
-      <settings-popover />
+      <settings-popover @open-color-setting="openSetColorDialog" />
       <div slot="reference" class="settings-btn">
         <span class="customise-widget-title">Customise page</span>
         <s-icon name="basic-settings-24" size="24px" />
       </div>
     </el-popover>
+    <set-color-dialog :visible.sync="colorSettingsOpen" />
   </div>
 </template>
 
@@ -20,10 +21,16 @@ import { lazyComponent } from '@/router';
 @Component({
   components: {
     SettingsPopover: lazyComponent(Components.SettingsPopover),
+    SetColorDialog: lazyComponent(Components.SetColor),
   },
 })
 export default class CustomiseWidget extends Mixins(TranslationMixin) {
   visibleSettings = false;
+  colorSettingsOpen = false;
+
+  openSetColorDialog(): void {
+    this.colorSettingsOpen = !this.colorSettingsOpen;
+  }
 }
 </script>
 
diff --git a/src/components/pages/OrderBook/Dialogs/SetColor.vue b/src/components/pages/OrderBook/Dialogs/SetColor.vue
index bcb85a06a..f3892a426 100644
--- a/src/components/pages/OrderBook/Dialogs/SetColor.vue
+++ b/src/components/pages/OrderBook/Dialogs/SetColor.vue
@@ -1,5 +1,48 @@
 <template>
-  <dialog-base :visible.sync="isVisible">Hi</dialog-base>
+  <dialog-base :visible.sync="isVisible" :title="'Chart color settings'">
+    <div class="color-dialog__group">
+      <span class="color-dialog__group-title">{{ 'Select color theme:' }}</span>
+      <s-radio-group v-model="optionType" class="color-dialog__block s-flex">
+        <s-radio
+          v-for="option in colorOptions"
+          :key="option.name"
+          :label="option.name"
+          :value="option.type"
+          size="medium"
+          class="color-dialog__item s-flex"
+        >
+          <div class="color-theme">
+            <div class="color-theme__label">
+              <div class="color-theme__name">{{ option.name }}</div>
+            </div>
+            <div class="color-theme__picture">
+              <span class="sell-color" />
+              <span class="buy-color" />
+            </div>
+          </div>
+        </s-radio>
+      </s-radio-group>
+    </div>
+    <div class="color-dialog__group">
+      <span class="color-dialog__group-title">{{ 'Select color preferences:' }}</span>
+      <s-radio-group v-model="colorDirection" class="color-dialog__block s-flex">
+        <s-radio
+          v-for="option in colorDirections"
+          :key="option.name"
+          :label="option.name"
+          :value="option.type"
+          size="medium"
+          class="statistics-dialog__item s-flex"
+        >
+          <div class="color-theme s-flex">
+            <div class="color-theme__label s-flex">
+              <div class="color-theme__name">{{ option.name }}</div>
+            </div>
+          </div>
+        </s-radio>
+      </s-radio-group>
+    </div>
+  </dialog-base>
 </template>
 
 <script lang="ts">
@@ -14,5 +57,81 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
     NetworkFeeWarning: components.NetworkFeeWarning,
   },
 })
-export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixin) {}
+export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixin) {
+  optionType = '';
+  colorDirection = '';
+
+  get colorOptions(): any {
+    return [{ name: 'Classic' }, { name: 'Color deficiency' }, { name: 'Traditional' }];
+  }
+
+  get colorDirections(): any {
+    return [{ name: 'Green Up / Red down' }, { name: 'Green down / Red up' }];
+  }
+}
 </script>
+
+<style lang="scss">
+.color-dialog {
+  &__group {
+    &-title {
+      display: block;
+      letter-spacing: var(--s-letter-spacing-small);
+      line-height: var(--s-line-height-small);
+      margin-bottom: 32px;
+    }
+  }
+
+  &__block {
+    flex-direction: column;
+    margin-top: $inner-spacing-small;
+  }
+
+  &__item {
+    align-items: flex-start;
+    margin-bottom: 16px;
+
+    .el-radio__label {
+      width: 100%;
+    }
+  }
+}
+.color-theme {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  letter-spacing: var(--s-letter-spacing-small);
+  line-height: var(--s-line-height-medium);
+  margin-bottom: 24px;
+
+  &__name {
+    color: var(--s-color-base-content-primary);
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  &__picture {
+    position: relative;
+
+    span {
+      display: block;
+      width: 16px;
+      height: 16px;
+      border-radius: 6px;
+      padding-right: 0;
+    }
+
+    .sell-color {
+      background-color: red;
+    }
+
+    .buy-color {
+      background-color: green;
+      outline: 1px solid #f4f0f1;
+      position: absolute;
+      top: 6px;
+      left: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/components/pages/OrderBook/Popovers/Settings.vue b/src/components/pages/OrderBook/Popovers/Settings.vue
index 1fa9df25f..af983bbce 100644
--- a/src/components/pages/OrderBook/Popovers/Settings.vue
+++ b/src/components/pages/OrderBook/Popovers/Settings.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="settings-popover">
     <h4>Customise page</h4>
-    <div class="settings-popover-color">
+    <div class="settings-popover-color" @click="openSetColorDialog">
       <s-icon name="basic-settings-24" size="24px" />
       <span>Chart color settings</span>
     </div>
@@ -37,7 +37,6 @@
         <span>{{ 'Sound reminder' }}</span>
       </div>
     </div>
-    <set-color-dialog />
   </div>
 </template>
 
@@ -51,9 +50,7 @@ import { lazyComponent } from '@/router';
 import { state, getter, mutation } from '@/store/decorators';
 
 @Component({
-  components: {
-    SetColorDialog: lazyComponent(Components.SetColor),
-  },
+  components: {},
 })
 export default class SettingsPopover extends Mixins(TranslationMixin, mixins.LoadingMixin) {
   one = true;
@@ -63,6 +60,10 @@ export default class SettingsPopover extends Mixins(TranslationMixin, mixins.Loa
   five = true;
   six = true;
   seven = true;
+
+  openSetColorDialog(): void {
+    this.$emit('open-color-setting');
+  }
 }
 </script>
 

From b155b44b31bcbf3f489e9cbef08e7d753ccfb5cf Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Mon, 12 Feb 2024 13:01:09 +0500
Subject: [PATCH 05/16] fix

---
 .../pages/OrderBook/CustomiseWidget.vue       |  1 +
 .../pages/OrderBook/Dialogs/SetColor.vue      | 25 +++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/OrderBook/CustomiseWidget.vue b/src/components/pages/OrderBook/CustomiseWidget.vue
index 0d9b08425..e527d7c1e 100644
--- a/src/components/pages/OrderBook/CustomiseWidget.vue
+++ b/src/components/pages/OrderBook/CustomiseWidget.vue
@@ -29,6 +29,7 @@ export default class CustomiseWidget extends Mixins(TranslationMixin) {
   colorSettingsOpen = false;
 
   openSetColorDialog(): void {
+    this.visibleSettings = false;
     this.colorSettingsOpen = !this.colorSettingsOpen;
   }
 }
diff --git a/src/components/pages/OrderBook/Dialogs/SetColor.vue b/src/components/pages/OrderBook/Dialogs/SetColor.vue
index f3892a426..2254f8d86 100644
--- a/src/components/pages/OrderBook/Dialogs/SetColor.vue
+++ b/src/components/pages/OrderBook/Dialogs/SetColor.vue
@@ -11,10 +11,8 @@
           size="medium"
           class="color-dialog__item s-flex"
         >
-          <div class="color-theme">
-            <div class="color-theme__label">
-              <div class="color-theme__name">{{ option.name }}</div>
-            </div>
+          <div class="color-theme option s-flex">
+            <div class="option__name">{{ option.name }}</div>
             <div class="color-theme__picture">
               <span class="sell-color" />
               <span class="buy-color" />
@@ -34,9 +32,11 @@
           size="medium"
           class="statistics-dialog__item s-flex"
         >
-          <div class="color-theme s-flex">
-            <div class="color-theme__label s-flex">
-              <div class="color-theme__name">{{ option.name }}</div>
+          <div class="color-preference option s-flex">
+            <div class="option__name">{{ option.name }}</div>
+            <div class="color-preference__direction">
+              <s-icon :class="getComputedPreferenceClasses('up')" name="arrows-arrow-top-24" size="18" />
+              <s-icon :class="getComputedPreferenceClasses('down')" name="arrows-arrow-bottom-24" size="18" />
             </div>
           </div>
         </s-radio>
@@ -68,6 +68,8 @@ export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixi
   get colorDirections(): any {
     return [{ name: 'Green Up / Red down' }, { name: 'Green down / Red up' }];
   }
+
+  getComputedPreferenceClasses(): any {}
 }
 </script>
 
@@ -96,12 +98,14 @@ export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixi
     }
   }
 }
-.color-theme {
+
+.option {
   display: flex;
   align-items: center;
   justify-content: space-between;
   letter-spacing: var(--s-letter-spacing-small);
   line-height: var(--s-line-height-medium);
+  max-width: 380px;
   margin-bottom: 24px;
 
   &__name {
@@ -109,7 +113,9 @@ export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixi
     font-size: 18px;
     font-weight: 600;
   }
+}
 
+.color-theme {
   &__picture {
     position: relative;
 
@@ -133,5 +139,8 @@ export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixi
       left: 10px;
     }
   }
+
+  .color-prefernce {
+  }
 }
 </style>

From 9ae07a525aa3e0075612f889ff80f0515cc7cc6a Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Mon, 12 Feb 2024 15:02:04 +0500
Subject: [PATCH 06/16] add color

---
 .../pages/OrderBook/Dialogs/SetColor.vue      | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/OrderBook/Dialogs/SetColor.vue b/src/components/pages/OrderBook/Dialogs/SetColor.vue
index 2254f8d86..95cca91a8 100644
--- a/src/components/pages/OrderBook/Dialogs/SetColor.vue
+++ b/src/components/pages/OrderBook/Dialogs/SetColor.vue
@@ -34,9 +34,9 @@
         >
           <div class="color-preference option s-flex">
             <div class="option__name">{{ option.name }}</div>
-            <div class="color-preference__direction">
-              <s-icon :class="getComputedPreferenceClasses('up')" name="arrows-arrow-top-24" size="18" />
-              <s-icon :class="getComputedPreferenceClasses('down')" name="arrows-arrow-bottom-24" size="18" />
+            <div class="color-preference__direction" :class="getComputedPreferenceClasses(option.type)">
+              <s-icon name="arrows-arrow-top-24" size="18" />
+              <s-icon name="arrows-arrow-bottom-24" size="18" />
             </div>
           </div>
         </s-radio>
@@ -51,6 +51,21 @@ import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 
+type ColorType = 'classic' | 'deficiency' | 'traditional';
+type DirectionType = 'classic' | 'inverse';
+type Hex = `#${string}`;
+
+interface Color {
+  name: string;
+  type: ColorType;
+  color: Hex;
+}
+
+interface ColorDirection {
+  name: string;
+  type: DirectionType;
+}
+
 @Component({
   components: {
     DialogBase: components.DialogBase,
@@ -61,15 +76,22 @@ export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixi
   optionType = '';
   colorDirection = '';
 
-  get colorOptions(): any {
-    return [{ name: 'Classic' }, { name: 'Color deficiency' }, { name: 'Traditional' }];
+  get colorOptions(): Color[] {
+    return [
+      { name: 'Classic', type: 'classic', hex: '#345134' },
+      { name: 'Color deficiency', type: 'deficiency' },
+      { name: 'Traditional', type: 'traditional' },
+    ];
   }
 
-  get colorDirections(): any {
-    return [{ name: 'Green Up / Red down' }, { name: 'Green down / Red up' }];
+  get colorDirections(): ColorDirection[] {
+    return [
+      { name: 'Green Up / Red down', type: 'classic' },
+      { name: 'Green down / Red up', type: 'inverse' },
+    ];
   }
 
-  getComputedPreferenceClasses(): any {}
+  getComputedPreferenceClasses(type: DirectionType): any {}
 }
 </script>
 

From ea1cc316466768ee75aee5e20805664e258fc908 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Tue, 13 Feb 2024 11:24:45 +0500
Subject: [PATCH 07/16] make color choice

---
 public/env.json                               | 45 +++++------
 .../pages/OrderBook/Dialogs/SetColor.vue      | 75 +++++++++++++------
 2 files changed, 69 insertions(+), 51 deletions(-)

diff --git a/public/env.json b/public/env.json
index 7386257fd..1424fa1ad 100644
--- a/public/env.json
+++ b/public/env.json
@@ -1,8 +1,10 @@
 {
-  "BASE_API_URL": "",
+  "BASE_API_URL": "test.polkaswap.io",
+  "FAUCET_URL": "https://testfaucet.polkaswap.io/",
+  "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-staging",
+  "SUBSQUID_ENDPOINT": "",
   "API_KEYS": {
     "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk",
-    "x1ex": "sprkwdgt-WYL6QBNC",
     "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
     "etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H",
     "googleApi": "AIzaSyAzj7JxB-j8pJixtt6JSqLPhG0y02CGYOU",
@@ -15,44 +17,33 @@
     "soraCard": false,
     "orderBook": true
   },
-  "FAUCET_URL": "https://faucet.dev.sora2.tachi.soramitsu.co.jp/",
   "DEFAULT_NETWORKS": [
     {
-      "chain": "SORA-dev Testnet #1",
+      "chain": "SORA-staging Testnet",
       "name": "SORA",
-      "address": "wss://ws.framenode-1.r0.dev.sora2.soramitsu.co.jp",
-      "location": "GB"
+      "address": "wss://ws.framenode-7.s4.stg1.sora2.soramitsu.co.jp",
+      "location": "IE"
     },
     {
-      "chain": "SORA-dev Testnet #2",
+      "chain": "SORA-staging Testnet",
       "name": "SORA",
-      "address": "wss://ws.framenode-2.r0.dev.sora2.soramitsu.co.jp",
-      "location": "SG"
-    },
-    {
-      "chain": "SORA-dev Testnet #3",
-      "name": "SORA",
-      "address": "wss://ws.framenode-3.r0.dev.sora2.soramitsu.co.jp"
+      "address": "wss://ws.framenode-8.s5.stg1.sora2.soramitsu.co.jp",
+      "location": "IE"
     }
   ],
-  "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-dev",
-  "SUBSQUID_ENDPOINT": "https://squid.subsquid.io/sora-dev/v/v1/graphql",
-  "NETWORK_TYPE": "Dev",
-  "CHAIN_GENESIS_HASH": "",
-  "EVM_NETWORKS_IDS": [97, 1001],
+  "NETWORK_TYPE": "Stage",
+  "CHAIN_GENESIS_HASH": "0x3266816be9fa51b32cfea58d3e33ca77246bc9618595a4300e44c8856a8d8a17",
+  "EVM_NETWORKS_IDS": [63, 97, 1001, 8001, 43113, 11155111],
   "SUB_NETWORKS": {
-    "Rococo": "wss://ws.relaychain-node-1.r1.dev.sora2.soramitsu.co.jp",
-    "RococoSora": "wss://ws.parachain-collator-1.c1.dev.sora2.soramitsu.co.jp",
-    "Kusama": "wss://kusama-rpc.polkadot.io",
-    "KusamaSora": "wss://ws.parachain-collator-1.c1.sora2.soramitsu.co.jp",
-    "Polkadot": "wss://rpc.polkadot.io"
+    "Rococo": "wss://rococo-rpc.polkadot.io",
+    "RococoSora": "wss://ws.parachain-collator-1.c1.stg1.sora2.soramitsu.co.jp"
   },
   "ETH_BRIDGE": {
     "evmNetwork": 11155111,
     "address": {
-      "XOR": "0x7F62CCd5566c64cfb785f73B3c19653D93e5414c",
-      "VAL": "0xe2C58207Cc6dF5565044eccffdf7aeb2DAe89647",
-      "OTHER": "0x401c6A23a44f72151D90878DF0aa86E77fBde0e2"
+      "XOR": "0x39aef1f5934440Dd7b2de0052ffA36D4cd782775",
+      "VAL": "0xC990aeeD42Ae4318c496C41D8F06F9c04C4b6B01",
+      "OTHER": "0xAfBf973f1346b40a21e575Fa89Ae5f64DFB3E6Fe"
     }
   }
 }
diff --git a/src/components/pages/OrderBook/Dialogs/SetColor.vue b/src/components/pages/OrderBook/Dialogs/SetColor.vue
index 95cca91a8..df2abbb3f 100644
--- a/src/components/pages/OrderBook/Dialogs/SetColor.vue
+++ b/src/components/pages/OrderBook/Dialogs/SetColor.vue
@@ -5,8 +5,8 @@
       <s-radio-group v-model="optionType" class="color-dialog__block s-flex">
         <s-radio
           v-for="option in colorOptions"
-          :key="option.name"
-          :label="option.name"
+          :key="option.type"
+          :label="option.type"
           :value="option.type"
           size="medium"
           class="color-dialog__item s-flex"
@@ -14,8 +14,8 @@
           <div class="color-theme option s-flex">
             <div class="option__name">{{ option.name }}</div>
             <div class="color-theme__picture">
-              <span class="sell-color" />
-              <span class="buy-color" />
+              <span class="sell-color" :style="`background-color: ${option.side.sell}`" />
+              <span class="buy-color" :style="`background-color: ${option.side.buy}`" />
             </div>
           </div>
         </s-radio>
@@ -26,15 +26,15 @@
       <s-radio-group v-model="colorDirection" class="color-dialog__block s-flex">
         <s-radio
           v-for="option in colorDirections"
-          :key="option.name"
-          :label="option.name"
+          :key="option.type"
+          :label="option.type"
           :value="option.type"
           size="medium"
-          class="statistics-dialog__item s-flex"
+          class="color-dialog__item s-flex"
         >
           <div class="color-preference option s-flex">
             <div class="option__name">{{ option.name }}</div>
-            <div class="color-preference__direction" :class="getComputedPreferenceClasses(option.type)">
+            <div class="color-preference__direction" :class="`${option.type}`">
               <s-icon name="arrows-arrow-top-24" size="18" />
               <s-icon name="arrows-arrow-bottom-24" size="18" />
             </div>
@@ -55,10 +55,15 @@ type ColorType = 'classic' | 'deficiency' | 'traditional';
 type DirectionType = 'classic' | 'inverse';
 type Hex = `#${string}`;
 
+interface Side {
+  buy: Hex;
+  sell: Hex;
+}
+
 interface Color {
   name: string;
   type: ColorType;
-  color: Hex;
+  side: Side;
 }
 
 interface ColorDirection {
@@ -73,14 +78,14 @@ interface ColorDirection {
   },
 })
 export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixin) {
-  optionType = '';
-  colorDirection = '';
+  optionType = 'classic';
+  colorDirection = 'classic';
 
   get colorOptions(): Color[] {
     return [
-      { name: 'Classic', type: 'classic', hex: '#345134' },
-      { name: 'Color deficiency', type: 'deficiency' },
-      { name: 'Traditional', type: 'traditional' },
+      { name: 'Classic', type: 'classic', side: { buy: '#34AD87', sell: '#F754A3' } },
+      { name: 'Color deficiency', type: 'deficiency', side: { buy: '#448BF1', sell: '#D07F3E' } },
+      { name: 'Traditional', type: 'traditional', side: { buy: '#75A390', sell: '#EB001B' } },
     ];
   }
 
@@ -90,8 +95,6 @@ export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixi
       { name: 'Green down / Red up', type: 'inverse' },
     ];
   }
-
-  getComputedPreferenceClasses(type: DirectionType): any {}
 }
 </script>
 
@@ -135,6 +138,38 @@ export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixi
     font-size: 18px;
     font-weight: 600;
   }
+
+  .classic {
+    i:first-of-type {
+      color: var(--s-color-status-success);
+    }
+
+    i:not(:first-of-type) {
+      color: var(--s-color-status-error);
+    }
+  }
+
+  .inverse {
+    i:first-of-type {
+      color: var(--s-color-status-error);
+    }
+
+    i:not(:first-of-type) {
+      color: var(--s-color-status-success);
+    }
+  }
+}
+
+.color-preference {
+  &__direction {
+    position: relative;
+  }
+
+  .s-icon-arrows-arrow-bottom-24 {
+    position: absolute;
+    left: 13px;
+    top: 6px;
+  }
 }
 
 .color-theme {
@@ -149,20 +184,12 @@ export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixi
       padding-right: 0;
     }
 
-    .sell-color {
-      background-color: red;
-    }
-
     .buy-color {
-      background-color: green;
       outline: 1px solid #f4f0f1;
       position: absolute;
       top: 6px;
       left: 10px;
     }
   }
-
-  .color-prefernce {
-  }
 }
 </style>

From 374a30e1d57b71c27e5ef553b754f4816adefe18 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Tue, 13 Feb 2024 14:02:01 +0500
Subject: [PATCH 08/16] make logic

---
 .../pages/OrderBook/Dialogs/SetColor.vue      | 37 ++++++++-----------
 src/consts/color.ts                           | 19 ++++++++++
 src/store/settings/mutations.ts               |  4 ++
 src/store/settings/state.ts                   |  2 +
 src/store/settings/types.ts                   |  2 +
 5 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 src/consts/color.ts

diff --git a/src/components/pages/OrderBook/Dialogs/SetColor.vue b/src/components/pages/OrderBook/Dialogs/SetColor.vue
index df2abbb3f..7b8b7c1af 100644
--- a/src/components/pages/OrderBook/Dialogs/SetColor.vue
+++ b/src/components/pages/OrderBook/Dialogs/SetColor.vue
@@ -50,26 +50,8 @@ import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
-
-type ColorType = 'classic' | 'deficiency' | 'traditional';
-type DirectionType = 'classic' | 'inverse';
-type Hex = `#${string}`;
-
-interface Side {
-  buy: Hex;
-  sell: Hex;
-}
-
-interface Color {
-  name: string;
-  type: ColorType;
-  side: Side;
-}
-
-interface ColorDirection {
-  name: string;
-  type: DirectionType;
-}
+import type { ColorDirection, Color, ColorType, DirectionType } from '@/consts/color';
+import { mutation, state } from '@/store/decorators';
 
 @Component({
   components: {
@@ -78,8 +60,19 @@ interface ColorDirection {
   },
 })
 export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixin) {
-  optionType = 'classic';
-  colorDirection = 'classic';
+  @state.settings.colorType type!: ColorType;
+
+  @mutation.settings.setColorType setColorType!: (type: ColorType) => void;
+
+  colorDirection: DirectionType = 'classic';
+
+  get optionType(): ColorType {
+    return this.type;
+  }
+
+  set optionType(type: ColorType) {
+    this.setColorType(type);
+  }
 
   get colorOptions(): Color[] {
     return [
diff --git a/src/consts/color.ts b/src/consts/color.ts
new file mode 100644
index 000000000..9acad1a95
--- /dev/null
+++ b/src/consts/color.ts
@@ -0,0 +1,19 @@
+export type ColorType = 'classic' | 'deficiency' | 'traditional';
+export type DirectionType = 'classic' | 'inverse';
+export type Hex = `#${string}`;
+
+export interface Side {
+  buy: Hex;
+  sell: Hex;
+}
+
+export interface Color {
+  name: string;
+  type: ColorType;
+  side: Side;
+}
+
+export interface ColorDirection {
+  name: string;
+  type: DirectionType;
+}
diff --git a/src/store/settings/mutations.ts b/src/store/settings/mutations.ts
index 0968f470f..d8db811ab 100644
--- a/src/store/settings/mutations.ts
+++ b/src/store/settings/mutations.ts
@@ -6,6 +6,7 @@ import type { Node } from '@/types/nodes';
 import storage, { settingsStorage } from '@/utils/storage';
 
 import type { Ad, FeatureFlags, SettingsState } from './types';
+import type { ColorType } from '../../consts/color';
 import type { Subscription } from 'rxjs';
 
 const mutations = defineMutations<SettingsState>()({
@@ -136,6 +137,9 @@ const mutations = defineMutations<SettingsState>()({
   setAdsArray(state, arr: Array<Ad>): void {
     state.adsArray = arr;
   },
+  setColorType(state, type: ColorType): void {
+    state.colorType = type;
+  },
 });
 
 export default mutations;
diff --git a/src/store/settings/state.ts b/src/store/settings/state.ts
index 73332c259..75cf55b67 100644
--- a/src/store/settings/state.ts
+++ b/src/store/settings/state.ts
@@ -3,6 +3,7 @@ import { getLocale } from '@/lang';
 import storage, { settingsStorage } from '@/utils/storage';
 
 import type { SettingsState } from './types';
+import type { ColorType } from '../../consts/color';
 
 function initialState(): SettingsState {
   const node = settingsStorage.get('node');
@@ -43,6 +44,7 @@ function initialState(): SettingsState {
     internetConnectionSpeed: undefined,
     screenBreakpointClass: BreakpointClass.LargeDesktop,
     adsArray: [],
+    colorType: 'classic' as ColorType,
   };
 }
 
diff --git a/src/store/settings/types.ts b/src/store/settings/types.ts
index 0eace1fa6..e6b43d0f2 100644
--- a/src/store/settings/types.ts
+++ b/src/store/settings/types.ts
@@ -1,4 +1,5 @@
 import type { BreakpointClass, MarketAlgorithms } from '@/consts';
+import type { ColorType } from '@/consts/color';
 import type { Node } from '@/types/nodes';
 
 import type { Subscription } from 'rxjs';
@@ -51,6 +52,7 @@ export type SettingsState = {
   internetConnectionSpeed: Nullable<number>;
   screenBreakpointClass: BreakpointClass;
   adsArray: Array<Ad>;
+  colorType: ColorType;
 };
 
 export type NodesHashTable = {

From 9ff147e86bac821ba611e59c2003b65bb4439cc3 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Fri, 1 Mar 2024 12:35:34 +0500
Subject: [PATCH 09/16] add color logic

---
 public/env.json                               |  45 +++----
 src/components/mixins/ChartSpecMixin.ts       |  40 +++---
 src/components/mixins/ThemePaletteMixin.ts    |  87 ++++++++++++-
 src/components/pages/OrderBook/BookWidget.vue | 117 ++++++++----------
 src/components/pages/OrderBook/BuySell.vue    |  29 ++---
 .../pages/OrderBook/CustomiseWidget.vue       |  13 +-
 .../pages/OrderBook/Dialogs/SetColor.vue      |  33 +++--
 .../pages/OrderBook/MarketTradesWidget.vue    |  18 +--
 .../pages/OrderBook/Popovers/Settings.vue     |  18 +--
 .../pages/OrderBook/Tables/OrderTable.vue     |  12 +-
 src/components/pages/Stats/SupplyChart.vue    |   8 +-
 src/components/pages/Swap/Chart.vue           |  14 +--
 src/components/shared/PriceChange.vue         |  32 +++--
 src/consts/color.ts                           |  13 +-
 src/store/settings/mutations.ts               |   7 +-
 src/store/settings/state.ts                   |   3 +-
 src/store/settings/types.ts                   |   3 +-
 src/styles/_theme.scss                        |  13 ++
 src/utils/index.ts                            |   5 +-
 vue.config.js                                 |  41 +++---
 20 files changed, 326 insertions(+), 225 deletions(-)
 create mode 100644 src/styles/_theme.scss

diff --git a/public/env.json b/public/env.json
index 82fbb0c12..1424fa1ad 100644
--- a/public/env.json
+++ b/public/env.json
@@ -1,8 +1,10 @@
 {
-  "BASE_API_URL": "",
+  "BASE_API_URL": "test.polkaswap.io",
+  "FAUCET_URL": "https://testfaucet.polkaswap.io/",
+  "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-staging",
+  "SUBSQUID_ENDPOINT": "",
   "API_KEYS": {
     "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk",
-    "x1ex": "sprkwdgt-WYL6QBNC",
     "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
     "etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H",
     "googleApi": "AIzaSyAzj7JxB-j8pJixtt6JSqLPhG0y02CGYOU",
@@ -15,44 +17,33 @@
     "soraCard": false,
     "orderBook": true
   },
-  "FAUCET_URL": "https://faucet.dev.sora2.tachi.soramitsu.co.jp/",
   "DEFAULT_NETWORKS": [
     {
-      "chain": "SORA-dev Testnet #1",
+      "chain": "SORA-staging Testnet",
       "name": "SORA",
-      "address": "wss://ws.framenode-1.r0.dev.sora2.soramitsu.co.jp",
-      "location": "GB"
+      "address": "wss://ws.framenode-7.s4.stg1.sora2.soramitsu.co.jp",
+      "location": "IE"
     },
     {
-      "chain": "SORA-dev Testnet #2",
+      "chain": "SORA-staging Testnet",
       "name": "SORA",
-      "address": "wss://ws.framenode-2.r0.dev.sora2.soramitsu.co.jp",
-      "location": "SG"
-    },
-    {
-      "chain": "SORA-dev Testnet #3",
-      "name": "SORA",
-      "address": "wss://ws.framenode-3.r0.dev.sora2.soramitsu.co.jp"
+      "address": "wss://ws.framenode-8.s5.stg1.sora2.soramitsu.co.jp",
+      "location": "IE"
     }
   ],
-  "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-prod",
-  "SUBSQUID_ENDPOINT": "https://squid.subsquid.io/sora-dev/v/v1/graphql",
-  "NETWORK_TYPE": "Dev",
-  "CHAIN_GENESIS_HASH": "",
-  "EVM_NETWORKS_IDS": [97, 1001],
+  "NETWORK_TYPE": "Stage",
+  "CHAIN_GENESIS_HASH": "0x3266816be9fa51b32cfea58d3e33ca77246bc9618595a4300e44c8856a8d8a17",
+  "EVM_NETWORKS_IDS": [63, 97, 1001, 8001, 43113, 11155111],
   "SUB_NETWORKS": {
-    "Rococo": "wss://ws.relaychain-node-1.r1.dev.sora2.soramitsu.co.jp",
-    "RococoSora": "wss://ws.parachain-collator-1.c1.dev.sora2.soramitsu.co.jp",
-    "Kusama": "wss://kusama-rpc.polkadot.io",
-    "KusamaSora": "wss://ws.parachain-collator-1.c1.sora2.soramitsu.co.jp",
-    "Polkadot": "wss://rpc.polkadot.io"
+    "Rococo": "wss://rococo-rpc.polkadot.io",
+    "RococoSora": "wss://ws.parachain-collator-1.c1.stg1.sora2.soramitsu.co.jp"
   },
   "ETH_BRIDGE": {
     "evmNetwork": 11155111,
     "address": {
-      "XOR": "0x7F62CCd5566c64cfb785f73B3c19653D93e5414c",
-      "VAL": "0xe2C58207Cc6dF5565044eccffdf7aeb2DAe89647",
-      "OTHER": "0x401c6A23a44f72151D90878DF0aa86E77fBde0e2"
+      "XOR": "0x39aef1f5934440Dd7b2de0052ffA36D4cd782775",
+      "VAL": "0xC990aeeD42Ae4318c496C41D8F06F9c04C4b6B01",
+      "OTHER": "0xAfBf973f1346b40a21e575Fa89Ae5f64DFB3E6Fe"
     }
   }
 }
diff --git a/src/components/mixins/ChartSpecMixin.ts b/src/components/mixins/ChartSpecMixin.ts
index 7c9121aa8..793b83fe7 100644
--- a/src/components/mixins/ChartSpecMixin.ts
+++ b/src/components/mixins/ChartSpecMixin.ts
@@ -62,18 +62,18 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
             fontWeight: 'bold',
           },
         },
-        color: this.theme.color.base.content.secondary,
+        color: this.chartTheme.color.base.content.secondary,
         offset: AXIS_OFFSET,
         ...AXIS_LABEL_CSS,
       },
       axisPointer: {
         lineStyle: {
-          color: this.theme.color.status.success,
+          color: this.chartTheme.color.status.success,
         },
         label: {
           show: true,
-          backgroundColor: this.theme.color.status.success,
-          color: this.theme.color.base.onAccent,
+          backgroundColor: this.chartTheme.color.status.success,
+          color: this.chartTheme.color.base.onAccent,
           fontSize: 11,
           fontWeight: 400,
           lineHeigth: 1.5,
@@ -99,24 +99,24 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
       },
       axisLine: {
         lineStyle: {
-          color: this.theme.color.base.content.secondary,
+          color: this.chartTheme.color.base.content.secondary,
         },
       },
       axisPointer: {
         lineStyle: {
-          color: this.theme.color.status.success,
+          color: this.chartTheme.color.status.success,
         },
         label: {
           ...AXIS_LABEL_CSS,
-          backgroundColor: this.theme.color.status.success,
+          backgroundColor: this.chartTheme.color.status.success,
           fontWeight: 400,
           padding: [LABEL_PADDING, LABEL_PADDING],
-          color: this.theme.color.base.onAccent,
+          color: this.chartTheme.color.base.onAccent,
         },
       },
       splitLine: {
         lineStyle: {
-          color: this.theme.color.base.content.tertiary,
+          color: this.chartTheme.color.base.content.tertiary,
           opacity: 0.2,
         },
       },
@@ -127,11 +127,11 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
     return merge({
       show: true,
       trigger: 'axis',
-      backgroundColor: this.theme.color.utility.body,
-      borderColor: this.theme.color.base.border.secondary,
-      extraCssText: `box-shadow: ${this.theme.shadow.dialog}; border-radius: ${this.theme.border.radius.mini}`,
+      backgroundColor: this.chartTheme.color.utility.body,
+      borderColor: this.chartTheme.color.base.border.secondary,
+      extraCssText: `box-shadow: ${this.chartTheme.shadow.dialog}; border-radius: ${this.chartTheme.border.radius.mini}`,
       textStyle: {
-        color: this.theme.color.base.content.secondary,
+        color: this.chartTheme.color.base.content.secondary,
         fontSize: 11,
         fontFamily: 'Sora',
         fontWeight: 400,
@@ -146,7 +146,7 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
       },
       showSymbol: false,
       itemStyle: {
-        color: this.theme.color.theme.accent,
+        color: this.chartTheme.color.theme.accent,
       },
     })(options);
   }
@@ -159,7 +159,7 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
       },
       showSymbol: false,
       itemStyle: {
-        color: this.theme.color.theme.accent,
+        color: this.chartTheme.color.theme.accent,
       },
     })(options);
   }
@@ -172,7 +172,7 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
       },
       showSymbol: false,
       itemStyle: {
-        color: this.theme.color.theme.accent,
+        color: this.chartTheme.color.theme.accent,
       },
     })(options);
   }
@@ -182,10 +182,10 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
       type: 'candlestick',
       barMaxWidth: 10,
       itemStyle: {
-        color: this.theme.color.status.success,
-        borderColor: this.theme.color.status.success,
-        color0: this.theme.color.theme.accentHover,
-        borderColor0: this.theme.color.theme.accentHover,
+        color: this.chartTheme.color.status.success,
+        borderColor: this.chartTheme.color.status.success,
+        color0: this.chartTheme.color.theme.accentHover,
+        borderColor0: this.chartTheme.color.theme.accentHover,
         borderWidth: 2,
       },
     })(options);
diff --git a/src/components/mixins/ThemePaletteMixin.ts b/src/components/mixins/ThemePaletteMixin.ts
index 58ca87f39..f3c302657 100644
--- a/src/components/mixins/ThemePaletteMixin.ts
+++ b/src/components/mixins/ThemePaletteMixin.ts
@@ -1,16 +1,91 @@
-import { Component, Vue } from 'vue-property-decorator';
+import Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
+import { Component, Vue, Watch } from 'vue-property-decorator';
 
-import { getter } from '@/store/decorators';
+import type { Color, ColorDirection, ColorType, DirectionType } from '@/consts/color';
+import { state, getter } from '@/store/decorators';
 import { getCssVariableValue as css } from '@/utils';
 
-import type Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
+import store from '../../store';
 
 @Component
 export default class ThemePaletteMixin extends Vue {
+  @state.settings.colorType colorType!: ColorType;
   @getter.libraryTheme libraryTheme!: Theme;
 
-  get theme() {
+  theme;
+
+  @Watch('libraryTheme')
+  private setTheme() {
+    this.theme = this.libraryTheme;
+  }
+
+  get color(): ColorType {
+    return store.state.settings.colorType;
+  }
+
+  set color(value: ColorType) {
+    store.commit.settings.setColorType(value);
+  }
+
+  get direction(): DirectionType {
+    return store.state.settings.colorDirection;
+  }
+
+  set direction(value: DirectionType) {
+    store.commit.settings.setColorDirection(value);
+  }
+
+  isInversed = (value: boolean): boolean => {
+    const direction = this.getColorDirection();
+
+    return direction.type === 'classic' ? value : !value;
+  };
+
+  isThemeLight(): boolean {
+    return this.theme === Theme.LIGHT;
+  }
+
+  colors: Record<ColorType, Color> = {
+    classic: {
+      name: 'Classic',
+      type: 'classic',
+      side: { buy: '#34AD87', sell: '#F754A3' },
+      priceChange: { up: '#24DAA0', down: '#f8087b' },
+      bookBars: {
+        buy: this.isThemeLight() ? 'rgba(185, 235, 219, 0.4)' : 'rgba(1, 202, 139, 0.2)',
+        sell: this.isThemeLight() ? 'rgba(255, 216, 235, 0.8)' : 'rgba(255, 0, 124, 0.3)',
+      },
+    },
+    deficiency: {
+      name: 'Color deficiency',
+      type: 'deficiency',
+      side: { buy: '#448BF1', sell: '#D07F3E' },
+      priceChange: { up: '#448BF1', down: '#D07F3E' },
+    },
+    traditional: {
+      name: 'Traditional',
+      type: 'traditional',
+      side: { buy: '#75A390', sell: '#EB001B' },
+      priceChange: { up: '#75A390', down: '#EB001B' },
+    },
+  };
+
+  directions: Record<DirectionType, ColorDirection> = {
+    classic: { name: 'Green Up / Red down', type: 'classic' },
+    inverse: { name: 'Green down / Red up', type: 'inverse' },
+  };
+
+  getColorDirection = (type?: DirectionType): ColorDirection => {
+    return type ? this.directions[type] : this.directions[this.direction];
+  };
+
+  getColorPalette = (type?: ColorType): Color => {
+    return type ? this.colors[type] : this.colors[this.color];
+  };
+
+  get chartTheme() {
     const libraryTheme = this.libraryTheme;
+    const currentColor = this.getColorPalette();
 
     const palette = {
       color: {
@@ -33,8 +108,8 @@ export default class ThemePaletteMixin extends Vue {
           body: css('--s-color-utility-body'),
         },
         status: {
-          success: css('--s-color-status-success'),
-          error: css('--s-color-status-error'),
+          success: currentColor.side.buy,
+          error: currentColor.side.sell,
           warning: css('--s-color-status-warning'),
           info: css('--s-color-status-info'),
         },
diff --git a/src/components/pages/OrderBook/BookWidget.vue b/src/components/pages/OrderBook/BookWidget.vue
index 1d44dec19..2ffc87e8c 100644
--- a/src/components/pages/OrderBook/BookWidget.vue
+++ b/src/components/pages/OrderBook/BookWidget.vue
@@ -43,15 +43,15 @@
       >
         <span class="order-info total">{{ order.total }}</span>
         <span class="order-info amount">{{ order.amount }}</span>
-        <span class="order-info price">{{ order.price }}</span>
-        <div class="bar" :style="getStyles(order.filled)" />
+        <span class="order-info price" :style="getFontColor(PriceVariant.Sell)">{{ order.price }}</span>
+        <div class="bar" :style="getStyles(order.filled, PriceVariant.Sell)" />
       </div>
     </div>
     <div v-else class="stock-book-sell--no-asks">{{ t('orderBook.book.noAsks') }}</div>
-    <div :class="getComputedClassTrend()">
+    <div class="stock-book-delimiter">
       <div>
-        <span class="mark-price">{{ lastPriceFormatted }}</span>
-        <s-icon class="trend-icon" :name="iconTrend" size="18" />
+        <span :style="getMarkedPriceStyles()" class="mark-price">{{ lastPriceFormatted }}</span>
+        <s-icon :style="getMarkedPriceStyles()" class="trend-icon" :name="iconTrend" size="18" />
         <span class="last-traded-price">{{ fiatValue }}</span>
       </div>
     </div>
@@ -59,8 +59,8 @@
       <div v-for="order in buyOrders" :key="order.price" class="row" @click="fillPrice(order.price, PriceVariant.Buy)">
         <span class="order-info total">{{ order.total }}</span>
         <span class="order-info amount">{{ order.amount }}</span>
-        <span class="order-info price">{{ order.price }}</span>
-        <div class="bar" :style="getStyles(order.filled)" />
+        <span class="order-info price" :style="getFontColor(PriceVariant.Buy)">{{ order.price }}</span>
+        <div class="bar" :style="getStyles(order.filled, PriceVariant.Buy)" />
       </div>
     </div>
     <div v-else class="stock-book-buy--no-bids">{{ t('orderBook.book.noBids') }}</div>
@@ -73,6 +73,7 @@ import { FPNumber } from '@sora-substrate/util';
 import { mixins } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
+import ThemePaletteMixin from '@/components/mixins/ThemePaletteMixin';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { LimitOrderType, ZeroStringValue } from '@/consts';
 import { action, getter, mutation, state } from '@/store/decorators';
@@ -91,7 +92,12 @@ interface LimitOrderForm {
 type OrderBookPriceVolumeAggregated = [FPNumber, FPNumber, FPNumber];
 
 @Component
-export default class BookWidget extends Mixins(TranslationMixin, mixins.LoadingMixin, mixins.FormattedAmountMixin) {
+export default class BookWidget extends Mixins(
+  TranslationMixin,
+  ThemePaletteMixin,
+  mixins.LoadingMixin,
+  mixins.FormattedAmountMixin
+) {
   @state.orderBook.limitOrderType private limitOrderType!: LimitOrderType;
   @state.orderBook.asks asks!: OrderBookPriceVolume[];
   @state.orderBook.bids bids!: OrderBookPriceVolume[];
@@ -138,7 +144,7 @@ export default class BookWidget extends Mixins(TranslationMixin, mixins.LoadingM
       return;
     }
     this.setSide(side);
-    this.setQuoteValue(Number(price).toString()); // TODO: [Rustem] string->number->string -- WHY?
+    this.setQuoteValue(price);
   }
 
   get isMarketOrder(): boolean {
@@ -226,10 +232,37 @@ export default class BookWidget extends Mixins(TranslationMixin, mixins.LoadingM
     return fiat ? `$${fiat}` : '';
   }
 
+  getFontColor(side: PriceVariant): string {
+    const theme = this.getColorPalette();
+    const color = this.isInversed(side === PriceVariant.Buy) ? theme.side.buy : theme.side.sell;
+
+    return `color: ${color}`;
+  }
+
+  getStyles(filled: number | undefined, side: PriceVariant): string {
+    const theme = this.getColorPalette();
+    let color;
+
+    if (theme.bookBars) {
+      color = this.isInversed(side === PriceVariant.Buy) ? theme.bookBars?.buy : theme.bookBars?.sell;
+    } else {
+      color = this.isInversed(side === PriceVariant.Buy) ? theme.side?.buy : theme.side?.sell;
+    }
+
+    return `width: ${filled}%; background-color: ${color};`;
+  }
+
+  getMarkedPriceStyles(): string {
+    const theme = this.getColorPalette();
+    const color = this.isInversed(this.lastDealTrendsUp) ? theme.side.buy : theme.side.sell;
+
+    return `color: ${color}`;
+  }
+
   getComputedClassTrend(): string {
     const base = ['stock-book-delimiter'];
 
-    if (this.lastDealTrendsUp) {
+    if (this.isInversed(this.lastDealTrendsUp)) {
       base.push('stock-book-delimiter--up');
     } else {
       base.push('stock-book-delimiter--down');
@@ -259,10 +292,6 @@ export default class BookWidget extends Mixins(TranslationMixin, mixins.LoadingM
     return `height: ${24 * margin}px`;
   }
 
-  getStyles(filled: number | undefined): string {
-    return `width: ${filled}%`;
-  }
-
   isBookPrecisionEqual(precision: string): boolean {
     return precision === this.currentOrderBook?.tickSize?.toString();
   }
@@ -421,26 +450,6 @@ $mono-font: 'JetBrainsMono';
     }
   }
 
-  &-buy {
-    .bar {
-      background: rgba(185, 235, 219, 0.4);
-    }
-
-    .order-info.price {
-      color: var(--s-color-status-success);
-    }
-  }
-
-  &-sell {
-    .bar {
-      background: rgba(255, 216, 235, 0.8);
-    }
-
-    .order-info.price {
-      color: var(--s-color-status-error);
-    }
-  }
-
   &-delimiter {
     display: flex;
     align-items: center;
@@ -464,19 +473,19 @@ $mono-font: 'JetBrainsMono';
       margin-left: 4px;
     }
 
-    &--up {
-      .mark-price,
-      .trend-icon {
-        color: var(--s-color-status-success);
-      }
-    }
+    // &--up {
+    //   .mark-price,
+    //   .trend-icon {
+    //     color: var(--s-color-status-success);
+    //   }
+    // }
 
-    &--down {
-      .mark-price,
-      .trend-icon {
-        color: var(--s-color-status-error);
-      }
-    }
+    // &--down {
+    //   .mark-price,
+    //   .trend-icon {
+    //     color: var(--s-color-status-error);
+    //   }
+    // }
   }
 
   .book-columns {
@@ -515,21 +524,5 @@ $mono-font: 'JetBrainsMono';
   .book-columns {
     background-color: #693d81;
   }
-
-  .stock-book {
-    &-sell {
-      .bar {
-        background-color: rgba(255, 0, 124, 0.3);
-      }
-    }
-    &-buy {
-      .bar {
-        background-color: rgba(1, 202, 139, 0.2);
-      }
-    }
-    &-delimiter {
-      background-color: $background-column-color-dark;
-    }
-  }
 }
 </style>
diff --git a/src/components/pages/OrderBook/BuySell.vue b/src/components/pages/OrderBook/BuySell.vue
index faa627eb6..3b59eff7d 100644
--- a/src/components/pages/OrderBook/BuySell.vue
+++ b/src/components/pages/OrderBook/BuySell.vue
@@ -117,7 +117,6 @@
         slot="reference"
         type="primary"
         class="btn s-typography-button--medium"
-        :class="computedBtnClass"
         @click="placeLimitOrder"
         :disabled="buttonDisabled"
       >
@@ -160,7 +159,7 @@
         slot="reference"
         type="primary"
         class="btn s-typography-button--medium"
-        :class="computedBtnClass"
+        :style="getColor()"
         @click="placeLimitOrder"
       >
         <template v-if="!isLoggedIn">
@@ -201,6 +200,7 @@ import { MAX_TIMESTAMP } from '@sora-substrate/util/build/orderBook/consts';
 import { components, mixins, api } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
+import ThemePaletteMixin from '@/components/mixins/ThemePaletteMixin';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { Components, LimitOrderType, PageNames } from '@/consts';
 import router, { lazyComponent } from '@/router';
@@ -237,7 +237,12 @@ import type { Subscription } from 'rxjs';
     Error: lazyComponent(Components.ErrorButton),
   },
 })
-export default class BuySellWidget extends Mixins(TranslationMixin, mixins.FormattedAmountMixin, mixins.LoadingMixin) {
+export default class BuySellWidget extends Mixins(
+  TranslationMixin,
+  ThemePaletteMixin,
+  mixins.FormattedAmountMixin,
+  mixins.LoadingMixin
+) {
   @state.router.prev private prevRoute!: Nullable<PageNames>;
   @state.wallet.settings.networkFees private networkFees!: NetworkFeesObject;
   @state.orderBook.limitOrderType private _limitOrderType!: LimitOrderType;
@@ -344,6 +349,13 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
     this.checkInputValidation();
   }
 
+  getColor() {
+    const theme = this.getColorPalette();
+    const color = this.isInversed(this.isBuySide) ? theme.side.buy : theme.side.sell;
+
+    return `background-color: ${color}`;
+  }
+
   get limitOrderType(): LimitOrderType {
     return this._limitOrderType;
   }
@@ -632,12 +644,6 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
     );
   }
 
-  get computedBtnClass(): string {
-    if (!this.isLoggedIn) return '';
-
-    return this.isBuySide ? 'buy-btn' : '';
-  }
-
   get isPriceInputDisabled(): boolean {
     return this.isMarketType;
   }
@@ -1026,11 +1032,6 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
     width: 100%;
   }
 
-  .buy-btn {
-    width: 100%;
-    background-color: #34ad87 !important;
-  }
-
   .buy-btn.is-disabled {
     background-color: unset !important;
   }
diff --git a/src/components/pages/OrderBook/CustomiseWidget.vue b/src/components/pages/OrderBook/CustomiseWidget.vue
index e527d7c1e..b9956303a 100644
--- a/src/components/pages/OrderBook/CustomiseWidget.vue
+++ b/src/components/pages/OrderBook/CustomiseWidget.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="order-book-widget customise-widget">
-    <el-popover popper-class="order-book-whitelist" trigger="click" v-model="visibleSettings" :visible-arrow="false">
+    <el-popover
+      popper-class="customise-widget-popover"
+      trigger="click"
+      v-model="visibleSettings"
+      :visible-arrow="false"
+    >
       <settings-popover @open-color-setting="openSetColorDialog" />
       <div slot="reference" class="settings-btn">
         <span class="customise-widget-title">Customise page</span>
@@ -36,6 +41,12 @@ export default class CustomiseWidget extends Mixins(TranslationMixin) {
 </script>
 
 <style lang="scss">
+.customise-widget-popover.el-popover {
+  border-radius: 18px;
+  border-color: var(--s-color-base-border-secondary);
+  padding: 0;
+}
+
 .customise-widget {
   margin-top: 8px;
   height: 64px;
diff --git a/src/components/pages/OrderBook/Dialogs/SetColor.vue b/src/components/pages/OrderBook/Dialogs/SetColor.vue
index 7b8b7c1af..441d24514 100644
--- a/src/components/pages/OrderBook/Dialogs/SetColor.vue
+++ b/src/components/pages/OrderBook/Dialogs/SetColor.vue
@@ -49,9 +49,9 @@
 import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins } from 'vue-property-decorator';
 
+import ThemePaletteMixin from '@/components/mixins/ThemePaletteMixin';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import type { ColorDirection, Color, ColorType, DirectionType } from '@/consts/color';
-import { mutation, state } from '@/store/decorators';
 
 @Component({
   components: {
@@ -59,34 +59,29 @@ import { mutation, state } from '@/store/decorators';
     NetworkFeeWarning: components.NetworkFeeWarning,
   },
 })
-export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixin) {
-  @state.settings.colorType type!: ColorType;
-
-  @mutation.settings.setColorType setColorType!: (type: ColorType) => void;
+export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixin, ThemePaletteMixin) {
+  get colorDirection(): DirectionType {
+    return this.direction;
+  }
 
-  colorDirection: DirectionType = 'classic';
+  set colorDirection(direction: DirectionType) {
+    this.direction = direction;
+  }
 
   get optionType(): ColorType {
-    return this.type;
+    return this.color;
   }
 
-  set optionType(type: ColorType) {
-    this.setColorType(type);
+  set optionType(color: ColorType) {
+    this.color = color;
   }
 
   get colorOptions(): Color[] {
-    return [
-      { name: 'Classic', type: 'classic', side: { buy: '#34AD87', sell: '#F754A3' } },
-      { name: 'Color deficiency', type: 'deficiency', side: { buy: '#448BF1', sell: '#D07F3E' } },
-      { name: 'Traditional', type: 'traditional', side: { buy: '#75A390', sell: '#EB001B' } },
-    ];
+    return Object.values(this.colors);
   }
 
   get colorDirections(): ColorDirection[] {
-    return [
-      { name: 'Green Up / Red down', type: 'classic' },
-      { name: 'Green down / Red up', type: 'inverse' },
-    ];
+    return Object.values(this.directions);
   }
 }
 </script>
@@ -109,7 +104,7 @@ export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixi
 
   &__item {
     align-items: flex-start;
-    margin-bottom: 16px;
+    margin-bottom: $basic-spacing;
 
     .el-radio__label {
       width: 100%;
diff --git a/src/components/pages/OrderBook/MarketTradesWidget.vue b/src/components/pages/OrderBook/MarketTradesWidget.vue
index 6fa6688ba..2d6a221d9 100644
--- a/src/components/pages/OrderBook/MarketTradesWidget.vue
+++ b/src/components/pages/OrderBook/MarketTradesWidget.vue
@@ -18,7 +18,7 @@
           <span class="market-trades__header">{{ t('orderBook.price') }}</span>
         </template>
         <template v-slot="{ row }">
-          <span class="order-info price" :class="{ buy: row.isBuy }">{{ row.price }}</span>
+          <span class="order-info price" :style="getFontColor(row.isBuy)">{{ row.price }}</span>
         </template>
       </s-table-column>
       <s-table-column>
@@ -46,6 +46,7 @@ import { PriceVariant } from '@sora-substrate/liquidity-proxy';
 import dayjs from 'dayjs';
 import { Component, Mixins } from 'vue-property-decorator';
 
+import ThemePaletteMixin from '@/components/mixins/ThemePaletteMixin';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { getter, state } from '@/store/decorators';
 import type { OrderBookDealData } from '@/types/orderBook';
@@ -53,7 +54,7 @@ import type { OrderBookDealData } from '@/types/orderBook';
 import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 
 @Component
-export default class MarketTradesWidget extends Mixins(TranslationMixin) {
+export default class MarketTradesWidget extends Mixins(TranslationMixin, ThemePaletteMixin) {
   readonly PriceVariant = PriceVariant;
 
   @state.orderBook.deals deals!: OrderBookDealData[];
@@ -61,6 +62,13 @@ export default class MarketTradesWidget extends Mixins(TranslationMixin) {
   @getter.orderBook.baseAsset baseAsset!: AccountAsset;
   @getter.orderBook.quoteAsset quoteAsset!: AccountAsset;
 
+  getFontColor(side: PriceVariant): string {
+    const theme = this.getColorPalette();
+    const color = this.isInversed(side === PriceVariant.Buy) ? theme.side.buy : theme.side.sell;
+
+    return `color: ${color}`;
+  }
+
   get completedOrders() {
     return this.deals.map((deal) => {
       const date = dayjs(deal.timestamp);
@@ -97,12 +105,6 @@ export default class MarketTradesWidget extends Mixins(TranslationMixin) {
       font-size: var(--s-font-size-extra-small);
       color: var(--s-color-base-content-secondary);
     }
-    &.price {
-      color: var(--s-color-status-error);
-      &.buy {
-        color: var(--s-color-status-success);
-      }
-    }
   }
 
   &__header {
diff --git a/src/components/pages/OrderBook/Popovers/Settings.vue b/src/components/pages/OrderBook/Popovers/Settings.vue
index af983bbce..f131fabda 100644
--- a/src/components/pages/OrderBook/Popovers/Settings.vue
+++ b/src/components/pages/OrderBook/Popovers/Settings.vue
@@ -8,32 +8,32 @@
     <div class="delimiter" />
     <div class="settings-popover-switches">
       <div class="settings-popover-switches__item">
-        <s-switch v-model="one" :disabled="loading" />
+        <s-switch v-model="one" :disabled="true" />
         <span>{{ 'Charts' }}</span>
       </div>
       <div class="settings-popover-switches__item">
-        <s-switch v-model="two" :disabled="loading" />
+        <s-switch v-model="two" :disabled="true" />
         <span>{{ 'Market trades' }}</span>
       </div>
       <div class="settings-popover-switches__item">
-        <s-switch v-model="three" :disabled="loading" />
+        <s-switch v-model="three" :disabled="true" />
         <span>{{ 'Order placing' }}</span>
       </div>
       <div class="settings-popover-switches__item">
-        <s-switch v-model="four" :disabled="loading" />
+        <s-switch v-model="four" :disabled="true" />
         <span>{{ 'All pairs' }}</span>
       </div>
       <div class="settings-popover-switches__item">
-        <s-switch v-model="five" :disabled="loading" />
+        <s-switch v-model="five" :disabled="true" />
         <span>{{ 'Trading pair' }}</span>
       </div>
       <div class="delimiter" />
       <div class="settings-popover-switches__item">
-        <s-switch v-model="six" :disabled="loading" />
+        <s-switch v-model="six" :disabled="true" />
         <span>{{ 'Trade reminder' }}</span>
       </div>
       <div class="settings-popover-switches__item">
-        <s-switch v-model="seven" :disabled="loading" />
+        <s-switch v-model="seven" :disabled="true" />
         <span>{{ 'Sound reminder' }}</span>
       </div>
     </div>
@@ -58,8 +58,8 @@ export default class SettingsPopover extends Mixins(TranslationMixin, mixins.Loa
   three = true;
   four = true;
   five = true;
-  six = true;
-  seven = true;
+  six = false;
+  seven = false;
 
   openSetColorDialog(): void {
     this.$emit('open-color-setting');
diff --git a/src/components/pages/OrderBook/Tables/OrderTable.vue b/src/components/pages/OrderBook/Tables/OrderTable.vue
index 813f6b685..84e9cb1b8 100644
--- a/src/components/pages/OrderBook/Tables/OrderTable.vue
+++ b/src/components/pages/OrderBook/Tables/OrderTable.vue
@@ -39,7 +39,7 @@
           <span>{{ t('orderBook.orderTable.side') }}</span>
         </template>
         <template v-slot="{ row }">
-          <span class="order-table__side" :class="[{ buy: row.side === PriceVariant.Buy }]">{{ row.side }}</span>
+          <span class="order-table__side" :style="getFontColor(row.side)">{{ row.side }}</span>
         </template>
       </s-table-column>
       <s-table-column width="126">
@@ -120,6 +120,7 @@ import debounce from 'lodash/debounce';
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
 
 import ScrollableTableMixin from '@/components/mixins/ScrollableTableMixin';
+import ThemePaletteMixin from '@/components/mixins/ThemePaletteMixin';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { getter, state } from '@/store/decorators';
 import { OrderStatus } from '@/types/orderBook';
@@ -136,7 +137,7 @@ type OrderDataUI = Omit<OrderData, 'owner' | 'lifespan' | 'time' | 'expiresAt'>[
     HistoryPagination: components.HistoryPagination,
   },
 })
-export default class OrderTable extends Mixins(TranslationMixin, ScrollableTableMixin) {
+export default class OrderTable extends Mixins(TranslationMixin, ThemePaletteMixin, ScrollableTableMixin) {
   readonly PriceVariant = PriceVariant;
 
   @state.settings.percentFormat private percentFormat!: Nullable<Intl.NumberFormat>;
@@ -203,6 +204,13 @@ export default class OrderTable extends Mixins(TranslationMixin, ScrollableTable
     });
   }
 
+  getFontColor(side: PriceVariant): string {
+    const theme = this.getColorPalette();
+    const color = this.isInversed(side === PriceVariant.Buy) ? theme.side.buy : theme.side.sell;
+
+    return `color: ${color}`;
+  }
+
   getStatusTranslation(status: OrderStatusType | undefined): string {
     switch (status) {
       case OrderStatus.Active:
diff --git a/src/components/pages/Stats/SupplyChart.vue b/src/components/pages/Stats/SupplyChart.vue
index 4deb073c9..8d3e3ef40 100644
--- a/src/components/pages/Stats/SupplyChart.vue
+++ b/src/components/pages/Stats/SupplyChart.vue
@@ -189,7 +189,7 @@ export default class StatsSupplyChart extends Mixins(mixins.LoadingMixin, ChartS
         this.lineSeriesSpec({
           encode: { y: 'value' },
           itemStyle: {
-            color: this.theme.color.status.info,
+            color: this.chartTheme.color.status.info,
           },
           name: 'Supply',
           yAxisIndex: 1,
@@ -199,7 +199,7 @@ export default class StatsSupplyChart extends Mixins(mixins.LoadingMixin, ChartS
           type: 'bar',
           encode: { y: 'mint' },
           itemStyle: {
-            color: this.theme.color.status.success,
+            color: this.chartTheme.color.status.success,
             opacity: 0.5,
           },
           name: 'Remint',
@@ -210,7 +210,7 @@ export default class StatsSupplyChart extends Mixins(mixins.LoadingMixin, ChartS
           type: 'bar',
           encode: { y: 'burn' },
           itemStyle: {
-            color: this.theme.color.status.error,
+            color: this.chartTheme.color.status.error,
             opacity: 0.5,
           },
           name: 'Burn',
@@ -224,7 +224,7 @@ export default class StatsSupplyChart extends Mixins(mixins.LoadingMixin, ChartS
         left: 'center',
         icon: 'circle',
         textStyle: {
-          color: this.theme.color.base.content.primary,
+          color: this.chartTheme.color.base.content.primary,
           fontSize: 12,
           fontWeight: 400,
           lineHeight: 1.5,
diff --git a/src/components/pages/Swap/Chart.vue b/src/components/pages/Swap/Chart.vue
index bf2690155..47bd5637c 100644
--- a/src/components/pages/Swap/Chart.vue
+++ b/src/components/pages/Swap/Chart.vue
@@ -539,9 +539,9 @@ export default class SwapChart extends Mixins(
         } else {
           const change = calcPriceChange(new FPNumber(close), new FPNumber(open));
           const changeColor = signific(change)(
-            this.theme.color.status.success,
-            this.theme.color.status.error,
-            this.theme.color.base.content.primary
+            this.chartTheme.color.status.success,
+            this.chartTheme.color.status.error,
+            this.chartTheme.color.base.content.primary
           );
 
           rows.push(
@@ -559,8 +559,8 @@ export default class SwapChart extends Mixins(
               .map(
                 (row) => `
               <tr>
-                <td align="right" style="color:${this.theme.color.base.content.secondary}">${row.title}</td>
-                <td style="color:${row.color ?? this.theme.color.base.content.primary}">${row.data}</td>
+                <td align="right" style="color:${this.chartTheme.color.base.content.secondary}">${row.title}</td>
+                <td style="color:${row.color ?? this.chartTheme.color.base.content.primary}">${row.data}</td>
               </tr>
             `
               )
@@ -597,7 +597,7 @@ export default class SwapChart extends Mixins(
       itemStyle: {
         color: ({ data }) => {
           const [_timestamp, open, close] = data;
-          return open > close ? this.theme.color.status.error : this.theme.color.status.success;
+          return open > close ? this.chartTheme.color.status.error : this.chartTheme.color.status.success;
         },
       },
       encode: { y: 'volume' },
@@ -612,7 +612,7 @@ export default class SwapChart extends Mixins(
           },
         ],
       },
-      color: [this.theme.color.theme.accent, this.theme.color.status.success],
+      color: [this.chartTheme.color.theme.accent, this.chartTheme.color.status.success],
       dataset: {
         source: this.chartData,
         dimensions: ['timestamp', 'open', 'close', 'low', 'high', 'volume'],
diff --git a/src/components/shared/PriceChange.vue b/src/components/shared/PriceChange.vue
index 9b1dbf15b..504421871 100644
--- a/src/components/shared/PriceChange.vue
+++ b/src/components/shared/PriceChange.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes">
+  <div class="price-change" :style="fontColor">
     <s-icon class="price-change-arrow" :name="icon" size="14px" />
     <formatted-amount :value="formatted" :font-weight-rate="FontWeightRate.MEDIUM">%</formatted-amount>
   </div>
@@ -8,17 +8,20 @@
 <script lang="ts">
 import { FPNumber } from '@sora-substrate/util';
 import { components, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Mixins, Prop, Vue } from 'vue-property-decorator';
 
 import { toPrecision } from '@/utils';
 
+import ThemePaletteMixin from '../mixins/ThemePaletteMixin';
+
 @Component({
   components: {
     FormattedAmount: components.FormattedAmount,
   },
 })
-export default class PriceChange extends Vue {
-  @Prop({ default: FPNumber.ZERO, type: Object }) readonly value!: FPNumber;
+export default class PriceChange extends Mixins(ThemePaletteMixin) {
+  @Prop({ default: FPNumber.ZERO, type: Object })
+  readonly value!: FPNumber;
 
   readonly FontWeightRate = WALLET_CONSTS.FontWeightRate;
 
@@ -30,21 +33,19 @@ export default class PriceChange extends Vue {
     return `arrows-arrow-bold-${this.increased ? 'top' : 'bottom'}-24`;
   }
 
-  get classes(): Array<string> {
-    const baseClass = 'price-change';
-    const cssClasses: Array<string> = [baseClass];
-    if (this.increased) {
-      cssClasses.push(`${baseClass}--increased`);
-    }
-    return cssClasses;
-  }
-
   get formatted(): string {
     const value = this.increased ? this.value : this.value.mul(new FPNumber(-1));
     const number = toPrecision(value, 2);
 
     return number.toLocaleString();
   }
+
+  get fontColor(): string {
+    const theme = this.getColorPalette();
+    const color = this.isInversed(this.increased) ? theme.priceChange?.up : theme.priceChange?.down;
+
+    return `color: ${color}`;
+  }
 }
 </script>
 
@@ -52,15 +53,10 @@ export default class PriceChange extends Vue {
 .price-change {
   display: inline-flex;
   align-items: baseline;
-  color: var(--s-color-theme-accent);
   font-size: inherit;
   font-weight: 600;
   line-height: var(--s-line-height-medium);
 
-  &--increased {
-    color: var(--s-color-theme-secondary-hover);
-  }
-
   &-arrow {
     color: inherit;
   }
diff --git a/src/consts/color.ts b/src/consts/color.ts
index 9acad1a95..2e01fc676 100644
--- a/src/consts/color.ts
+++ b/src/consts/color.ts
@@ -1,16 +1,23 @@
 export type ColorType = 'classic' | 'deficiency' | 'traditional';
 export type DirectionType = 'classic' | 'inverse';
-export type Hex = `#${string}`;
+export type ColorEncoding = `#${string}` | `rgba(${string})`;
 
 export interface Side {
-  buy: Hex;
-  sell: Hex;
+  buy: ColorEncoding;
+  sell: ColorEncoding;
+}
+
+interface Trend {
+  up: ColorEncoding;
+  down: ColorEncoding;
 }
 
 export interface Color {
   name: string;
   type: ColorType;
   side: Side;
+  bookBars?: Side;
+  priceChange?: Trend;
 }
 
 export interface ColorDirection {
diff --git a/src/store/settings/mutations.ts b/src/store/settings/mutations.ts
index d8db811ab..665ca0fdc 100644
--- a/src/store/settings/mutations.ts
+++ b/src/store/settings/mutations.ts
@@ -6,7 +6,7 @@ import type { Node } from '@/types/nodes';
 import storage, { settingsStorage } from '@/utils/storage';
 
 import type { Ad, FeatureFlags, SettingsState } from './types';
-import type { ColorType } from '../../consts/color';
+import type { ColorType, DirectionType } from '../../consts/color';
 import type { Subscription } from 'rxjs';
 
 const mutations = defineMutations<SettingsState>()({
@@ -139,6 +139,11 @@ const mutations = defineMutations<SettingsState>()({
   },
   setColorType(state, type: ColorType): void {
     state.colorType = type;
+    // TODO: settingsStorage.set('colorType', type);
+  },
+  setColorDirection(state, direction: DirectionType): void {
+    state.colorDirection = direction;
+    // TODO: settingsStorage.set('colorDirection', direction);
   },
 });
 
diff --git a/src/store/settings/state.ts b/src/store/settings/state.ts
index 75cf55b67..6d9272d9a 100644
--- a/src/store/settings/state.ts
+++ b/src/store/settings/state.ts
@@ -3,7 +3,7 @@ import { getLocale } from '@/lang';
 import storage, { settingsStorage } from '@/utils/storage';
 
 import type { SettingsState } from './types';
-import type { ColorType } from '../../consts/color';
+import type { ColorType, DirectionType } from '../../consts/color';
 
 function initialState(): SettingsState {
   const node = settingsStorage.get('node');
@@ -45,6 +45,7 @@ function initialState(): SettingsState {
     screenBreakpointClass: BreakpointClass.LargeDesktop,
     adsArray: [],
     colorType: 'classic' as ColorType,
+    colorDirection: 'classic' as DirectionType,
   };
 }
 
diff --git a/src/store/settings/types.ts b/src/store/settings/types.ts
index e6b43d0f2..1356121fb 100644
--- a/src/store/settings/types.ts
+++ b/src/store/settings/types.ts
@@ -1,5 +1,5 @@
 import type { BreakpointClass, MarketAlgorithms } from '@/consts';
-import type { ColorType } from '@/consts/color';
+import type { ColorType, DirectionType } from '@/consts/color';
 import type { Node } from '@/types/nodes';
 
 import type { Subscription } from 'rxjs';
@@ -53,6 +53,7 @@ export type SettingsState = {
   screenBreakpointClass: BreakpointClass;
   adsArray: Array<Ad>;
   colorType: ColorType;
+  colorDirection: DirectionType;
 };
 
 export type NodesHashTable = {
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
new file mode 100644
index 000000000..ac83c14ad
--- /dev/null
+++ b/src/styles/_theme.scss
@@ -0,0 +1,13 @@
+// different color palette based on user preferences
+
+// classic
+$s-color-classic-up: #34ad87;
+$s-color-classic-down: #f754a3;
+
+// deficiency
+$s-color-deficiency-up: #448bf1;
+$s-color-deficiency-down: #d07f3e;
+
+// traditional
+$s-color-traditional-up: #75a390;
+$s-color-traditional-down: #eb001b;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 8e595b890..328bf2564 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -6,6 +6,7 @@ import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
 import debounce from 'lodash/debounce';
 
 import { app, ZeroStringValue } from '@/consts';
+import { ColorEncoding } from '@/consts/color';
 import i18n from '@/lang';
 import router from '@/router';
 import store from '@/store';
@@ -286,10 +287,10 @@ export const preloadFontFace = async (name: string): Promise<void> => {
   }
 };
 
-export const getCssVariableValue = (name: string): string => {
+export const getCssVariableValue = (name: string): ColorEncoding => {
   return getComputedStyle(document.documentElement as any)
     .getPropertyValue(name)
-    .trim();
+    .trim() as ColorEncoding;
 };
 
 export const toQueryString = (params: any): string => {
diff --git a/vue.config.js b/vue.config.js
index d1fadfc2b..961d7436b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -41,12 +41,12 @@ module.exports = defineConfig({
     vueRule.uses.clear();
     vueRule
       .use('vue-loader')
-        .loader(require.resolve('@vue/vue-loader-v15'))
-        .options({
-          compilerOptions: {
-            whitespace: 'condense'
-          }
-        });
+      .loader(require.resolve('@vue/vue-loader-v15'))
+      .options({
+        compilerOptions: {
+          whitespace: 'condense',
+        },
+      });
 
     const svgRule = config.module.rule('svg');
     const svgGenerator = svgRule.get('generator');
@@ -55,13 +55,13 @@ module.exports = defineConfig({
     svgRule.delete('generator');
     svgRule
       .oneOf('inline')
-        .resourceQuery(/inline/)
-        .type('asset/inline')
-        .end()
+      .resourceQuery(/inline/)
+      .type('asset/inline')
+      .end()
       .oneOf('file')
-        .type('asset/resource')
-        .set('generator', svgGenerator)
-        .end();
+      .type('asset/resource')
+      .set('generator', svgGenerator)
+      .end();
 
     const imagesRule = config.module.rule('images');
     const imagesGenerator = imagesRule.get('generator');
@@ -69,14 +69,14 @@ module.exports = defineConfig({
     imagesRule.delete('type');
     imagesRule.delete('generator');
     imagesRule
-        .oneOf('inline')
-          .resourceQuery(/inline/)
-          .type('asset/inline')
-          .end()
-        .oneOf('asset')
-          .type('asset')
-          .set('generator', imagesGenerator)
-          .end();
+      .oneOf('inline')
+      .resourceQuery(/inline/)
+      .type('asset/inline')
+      .end()
+      .oneOf('asset')
+      .type('asset')
+      .set('generator', imagesGenerator)
+      .end();
   },
   /* eslint-enable */
   /* prettier-ignore-end */
@@ -88,6 +88,7 @@ module.exports = defineConfig({
           @import "@/styles/_layout.scss";
           @import "@/styles/_mixins.scss";
           @import "@/styles/_typography.scss";
+          @import "@/styles/_theme.scss";
         `,
       },
     },

From 61377c20fb557b268d2cb17c273fe323a0a836e5 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Thu, 14 Mar 2024 13:52:19 +0500
Subject: [PATCH 10/16] Update yarn.lock

---
 yarn.lock | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 5540ef9d0..9e21b16a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13805,11 +13805,6 @@ uncrypto@^0.1.3:
   resolved "https://registry.yarnpkg.com/uncrypto/-/uncrypto-0.1.3.tgz#e1288d609226f2d02d8d69ee861fa20d8348ef2b"
   integrity sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==
 
-undici-types@~5.25.1:
-  version "5.25.3"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.25.3.tgz#e044115914c85f0bcbb229f346ab739f064998c3"
-  integrity sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==
-
 undici-types@~5.26.4:
   version "5.26.5"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"

From 9f9ea26c96aa1b6a12d43ce9222532c5bb18e089 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Mon, 18 Mar 2024 14:46:41 +0500
Subject: [PATCH 11/16] add nan check

---
 src/components/pages/OrderBook/BuySell.vue            | 2 +-
 src/components/pages/OrderBook/Dialogs/PlaceOrder.vue | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/OrderBook/BuySell.vue b/src/components/pages/OrderBook/BuySell.vue
index a214f63d3..da2a8c2d0 100644
--- a/src/components/pages/OrderBook/BuySell.vue
+++ b/src/components/pages/OrderBook/BuySell.vue
@@ -800,7 +800,7 @@ export default class BuySellWidget extends Mixins(
   }
 
   async singlePriceReachedLimit(): Promise<boolean> {
-    if (this.isMarketType) return false;
+    if (this.isMarketType || !this.quoteValue) return false;
 
     const limitReached = !(await api.orderBook.isOrderPlaceable(
       this.baseAsset.address,
diff --git a/src/components/pages/OrderBook/Dialogs/PlaceOrder.vue b/src/components/pages/OrderBook/Dialogs/PlaceOrder.vue
index 14e557b43..09ab536c6 100644
--- a/src/components/pages/OrderBook/Dialogs/PlaceOrder.vue
+++ b/src/components/pages/OrderBook/Dialogs/PlaceOrder.vue
@@ -98,6 +98,8 @@ export default class PlaceLimitOrder extends Mixins(mixins.TransactionMixin, mix
   }
 
   private async singlePriceReachedLimit(): Promise<boolean> {
+    if (this.isMarketType || !this.quoteValue) return false;
+
     const limitReached = !(await api.orderBook.isOrderPlaceable(
       this.baseAsset.address,
       this.quoteAsset.address,

From 0268970b6a551615baa96418f7cb72b9344a3c61 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Tue, 19 Mar 2024 08:32:13 +0500
Subject: [PATCH 12/16] manage colors

---
 src/components/mixins/ThemePaletteMixin.ts    | 115 +++++++++---------
 src/components/pages/OrderBook/BookWidget.vue |   4 +-
 src/components/pages/OrderBook/BuySell.vue    |   4 +-
 .../pages/OrderBook/Dialogs/SetColor.vue      |   2 +-
 src/components/pages/Swap/Chart.vue           |   2 +-
 src/styles/_theme.scss                        |   6 +
 src/styles/soramitsu-variables.scss           |  16 +++
 7 files changed, 89 insertions(+), 60 deletions(-)

diff --git a/src/components/mixins/ThemePaletteMixin.ts b/src/components/mixins/ThemePaletteMixin.ts
index f3c302657..20c035caa 100644
--- a/src/components/mixins/ThemePaletteMixin.ts
+++ b/src/components/mixins/ThemePaletteMixin.ts
@@ -1,5 +1,5 @@
 import Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
-import { Component, Vue, Watch } from 'vue-property-decorator';
+import { Component, Vue } from 'vue-property-decorator';
 
 import type { Color, ColorDirection, ColorType, DirectionType } from '@/consts/color';
 import { state, getter } from '@/store/decorators';
@@ -12,13 +12,6 @@ export default class ThemePaletteMixin extends Vue {
   @state.settings.colorType colorType!: ColorType;
   @getter.libraryTheme libraryTheme!: Theme;
 
-  theme;
-
-  @Watch('libraryTheme')
-  private setTheme() {
-    this.theme = this.libraryTheme;
-  }
-
   get color(): ColorType {
     return store.state.settings.colorType;
   }
@@ -35,54 +28,6 @@ export default class ThemePaletteMixin extends Vue {
     store.commit.settings.setColorDirection(value);
   }
 
-  isInversed = (value: boolean): boolean => {
-    const direction = this.getColorDirection();
-
-    return direction.type === 'classic' ? value : !value;
-  };
-
-  isThemeLight(): boolean {
-    return this.theme === Theme.LIGHT;
-  }
-
-  colors: Record<ColorType, Color> = {
-    classic: {
-      name: 'Classic',
-      type: 'classic',
-      side: { buy: '#34AD87', sell: '#F754A3' },
-      priceChange: { up: '#24DAA0', down: '#f8087b' },
-      bookBars: {
-        buy: this.isThemeLight() ? 'rgba(185, 235, 219, 0.4)' : 'rgba(1, 202, 139, 0.2)',
-        sell: this.isThemeLight() ? 'rgba(255, 216, 235, 0.8)' : 'rgba(255, 0, 124, 0.3)',
-      },
-    },
-    deficiency: {
-      name: 'Color deficiency',
-      type: 'deficiency',
-      side: { buy: '#448BF1', sell: '#D07F3E' },
-      priceChange: { up: '#448BF1', down: '#D07F3E' },
-    },
-    traditional: {
-      name: 'Traditional',
-      type: 'traditional',
-      side: { buy: '#75A390', sell: '#EB001B' },
-      priceChange: { up: '#75A390', down: '#EB001B' },
-    },
-  };
-
-  directions: Record<DirectionType, ColorDirection> = {
-    classic: { name: 'Green Up / Red down', type: 'classic' },
-    inverse: { name: 'Green down / Red up', type: 'inverse' },
-  };
-
-  getColorDirection = (type?: DirectionType): ColorDirection => {
-    return type ? this.directions[type] : this.directions[this.direction];
-  };
-
-  getColorPalette = (type?: ColorType): Color => {
-    return type ? this.colors[type] : this.colors[this.color];
-  };
-
   get chartTheme() {
     const libraryTheme = this.libraryTheme;
     const currentColor = this.getColorPalette();
@@ -126,4 +71,62 @@ export default class ThemePaletteMixin extends Vue {
 
     return !!libraryTheme && palette;
   }
+
+  isInversed = (value: boolean): boolean => {
+    const direction = this.getColorDirection();
+
+    return direction.type === 'classic' ? value : !value;
+  };
+
+  colors = (type?: ColorType, theme = Theme.LIGHT): any => {
+    const palette = {
+      classic: {
+        name: 'Classic',
+        type: 'classic',
+        side: { buy: css('--s-color-classic-up'), sell: css('--s-color-classic-down') },
+        priceChange: { up: css('--s-color-classic-price-change-up'), down: css('--s-color-classic-price-change-down') },
+        bookBars: {
+          buy: theme === Theme.LIGHT ? 'rgba(185, 235, 219, 0.4)' : 'rgba(1, 202, 139, 0.2)',
+          sell: theme === Theme.LIGHT ? 'rgba(255, 216, 235, 0.8)' : 'rgba(255, 0, 124, 0.3)',
+        },
+      },
+      deficiency: {
+        name: 'Color deficiency',
+        type: 'deficiency',
+        side: { buy: css('--s-color-deficiency-up'), sell: css('--s-color-deficiency-down') },
+        priceChange: {
+          up: css('--s-color-deficiency-price-change-up'),
+          down: css('--s-color-deficiency-price-change-down'),
+        },
+        // TODO: get colors from designer for bookBars: {}
+      },
+      traditional: {
+        name: 'Traditional',
+        type: 'traditional',
+        side: { buy: css('--s-color-traditional-up'), sell: css('--s-color-traditional-down') },
+        priceChange: {
+          up: css('--s-color-traditional-price-change-up'),
+          down: css('--s-color-tradtional-price-change-down'),
+        },
+        // TODO: get colors from designer for bookBars: {}
+      },
+    };
+
+    if (!type) return palette;
+
+    return palette[type];
+  };
+
+  directions: Record<DirectionType, ColorDirection> = {
+    classic: { name: 'Green Up / Red down', type: 'classic' },
+    inverse: { name: 'Green down / Red up', type: 'inverse' },
+  };
+
+  getColorDirection = (type?: DirectionType): ColorDirection => {
+    return type ? this.directions[type] : this.directions[this.direction];
+  };
+
+  getColorPalette = (type?: ColorType, theme = Theme.LIGHT): Color => {
+    return type ? this.colors(type, theme) : this.colors(this.color, theme);
+  };
 }
diff --git a/src/components/pages/OrderBook/BookWidget.vue b/src/components/pages/OrderBook/BookWidget.vue
index 2ffc87e8c..a65d737da 100644
--- a/src/components/pages/OrderBook/BookWidget.vue
+++ b/src/components/pages/OrderBook/BookWidget.vue
@@ -71,6 +71,7 @@
 import { PriceVariant } from '@sora-substrate/liquidity-proxy';
 import { FPNumber } from '@sora-substrate/util';
 import { mixins } from '@soramitsu/soraneo-wallet-web';
+import Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
 import ThemePaletteMixin from '@/components/mixins/ThemePaletteMixin';
@@ -240,7 +241,8 @@ export default class BookWidget extends Mixins(
   }
 
   getStyles(filled: number | undefined, side: PriceVariant): string {
-    const theme = this.getColorPalette();
+    const theme = this.getColorPalette(undefined, this.libraryTheme);
+
     let color;
 
     if (theme.bookBars) {
diff --git a/src/components/pages/OrderBook/BuySell.vue b/src/components/pages/OrderBook/BuySell.vue
index da2a8c2d0..5fdb60556 100644
--- a/src/components/pages/OrderBook/BuySell.vue
+++ b/src/components/pages/OrderBook/BuySell.vue
@@ -208,6 +208,7 @@ import { action, getter, mutation, state } from '@/store/decorators';
 import type { OrderBookStats } from '@/types/orderBook';
 import { OrderBookTabs } from '@/types/tabs';
 import {
+  getCssVariableValue as css,
   isMaxButtonAvailable,
   getMaxValue,
   getAssetBalance,
@@ -350,9 +351,10 @@ export default class BuySellWidget extends Mixins(
   }
 
   getColor() {
+    if (!this.isLoggedIn) return `background-color: ${css('--s-color-theme-accent')}`;
+
     const theme = this.getColorPalette();
     const color = this.isInversed(this.isBuySide) ? theme.side.buy : theme.side.sell;
-
     return `background-color: ${color}`;
   }
 
diff --git a/src/components/pages/OrderBook/Dialogs/SetColor.vue b/src/components/pages/OrderBook/Dialogs/SetColor.vue
index 441d24514..1b4234557 100644
--- a/src/components/pages/OrderBook/Dialogs/SetColor.vue
+++ b/src/components/pages/OrderBook/Dialogs/SetColor.vue
@@ -77,7 +77,7 @@ export default class SetColor extends Mixins(mixins.DialogMixin, TranslationMixi
   }
 
   get colorOptions(): Color[] {
-    return Object.values(this.colors);
+    return Object.values(this.colors());
   }
 
   get colorDirections(): ColorDirection[] {
diff --git a/src/components/pages/Swap/Chart.vue b/src/components/pages/Swap/Chart.vue
index d2af85ffe..0927f6fe1 100644
--- a/src/components/pages/Swap/Chart.vue
+++ b/src/components/pages/Swap/Chart.vue
@@ -471,7 +471,7 @@ export default class SwapChart extends Mixins(
       axisLine: {
         show: true,
         lineStyle: {
-          color: this.theme.color.base.content.tertiary,
+          color: this.chartTheme.color.base.content.tertiary,
         },
       },
       axisPointer: {
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index ac83c14ad..837152c19 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -3,11 +3,17 @@
 // classic
 $s-color-classic-up: #34ad87;
 $s-color-classic-down: #f754a3;
+$s-color-classic-price-change-up: #24daa0;
+$s-color-classic-price-change-down: #f8087b;
 
 // deficiency
 $s-color-deficiency-up: #448bf1;
 $s-color-deficiency-down: #d07f3e;
+$s-color-deficiency-price-change-up: #448bf1;
+$s-color-deficiency-price-change-down: #d07f3e;
 
 // traditional
 $s-color-traditional-up: #75a390;
 $s-color-traditional-down: #eb001b;
+$s-color-traditional-price-change-up: #75a390;
+$s-color-traditional-price-change-down: #eb001b;
diff --git a/src/styles/soramitsu-variables.scss b/src/styles/soramitsu-variables.scss
index b3d33c7e3..955e73174 100644
--- a/src/styles/soramitsu-variables.scss
+++ b/src/styles/soramitsu-variables.scss
@@ -88,4 +88,20 @@ $s-color-base-on-disabled--dark: #c29ab7;
   // Asset item height
   --s-asset-item-height: #{$s-asset-item-height};
   --s-asset-item-height--fiat: #{$s-asset-item-height--fiat};
+
+  // Different color palette based on user preferences
+  --s-color-classic-up: #{$s-color-classic-up};
+  --s-color-classic-down: #{$s-color-classic-down};
+  --s-color-classic-price-change-up: #{$s-color-classic-price-change-up};
+  --s-color-classic-price-change-down: #{$s-color-classic-price-change-down};
+
+  --s-color-deficiency-up: #{$s-color-deficiency-up};
+  --s-color-deficiency-down: #{$s-color-deficiency-down};
+  --s-color-deficiency-price-change-up: #{$s-color-deficiency-price-change-up};
+  --s-color-deficiency-price-change-down: #{$s-color-deficiency-price-change-down};
+
+  --s-color-traditional-up: #{$s-color-traditional-up};
+  --s-color-traditional-down: #{$s-color-traditional-down};
+  --s-color-traditional-price-change-up: #{$s-color-traditional-price-change-up};
+  --s-color-traditional-price-change-down: #{$s-color-traditional-price-change-down};
 }

From d0543c230ae9057859b35bac8651855e76786eb4 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Tue, 19 Mar 2024 11:22:45 +0500
Subject: [PATCH 13/16] refactor switches

---
 .../pages/OrderBook/Popovers/Settings.vue     | 60 +++++++------------
 1 file changed, 23 insertions(+), 37 deletions(-)

diff --git a/src/components/pages/OrderBook/Popovers/Settings.vue b/src/components/pages/OrderBook/Popovers/Settings.vue
index f131fabda..8d8f5017b 100644
--- a/src/components/pages/OrderBook/Popovers/Settings.vue
+++ b/src/components/pages/OrderBook/Popovers/Settings.vue
@@ -5,35 +5,19 @@
       <s-icon name="basic-settings-24" size="24px" />
       <span>Chart color settings</span>
     </div>
-    <div class="delimiter" />
+    <s-divider />
     <div class="settings-popover-switches">
-      <div class="settings-popover-switches__item">
-        <s-switch v-model="one" :disabled="true" />
-        <span>{{ 'Charts' }}</span>
-      </div>
-      <div class="settings-popover-switches__item">
-        <s-switch v-model="two" :disabled="true" />
-        <span>{{ 'Market trades' }}</span>
-      </div>
-      <div class="settings-popover-switches__item">
-        <s-switch v-model="three" :disabled="true" />
-        <span>{{ 'Order placing' }}</span>
-      </div>
-      <div class="settings-popover-switches__item">
-        <s-switch v-model="four" :disabled="true" />
-        <span>{{ 'All pairs' }}</span>
+      <div v-for="(option, index) in options" :key="index" class="settings-popover-switches__item">
+        <s-switch v-model="option[0]" />
+        <span>{{ option[1] }}</span>
       </div>
+      <s-divider />
       <div class="settings-popover-switches__item">
-        <s-switch v-model="five" :disabled="true" />
-        <span>{{ 'Trading pair' }}</span>
-      </div>
-      <div class="delimiter" />
-      <div class="settings-popover-switches__item">
-        <s-switch v-model="six" :disabled="true" />
+        <s-switch v-model="tradeReminder" :disabled="true" />
         <span>{{ 'Trade reminder' }}</span>
       </div>
       <div class="settings-popover-switches__item">
-        <s-switch v-model="seven" :disabled="true" />
+        <s-switch v-model="soundReminder" :disabled="true" />
         <span>{{ 'Sound reminder' }}</span>
       </div>
     </div>
@@ -53,13 +37,22 @@ import { state, getter, mutation } from '@/store/decorators';
   components: {},
 })
 export default class SettingsPopover extends Mixins(TranslationMixin, mixins.LoadingMixin) {
-  one = true;
-  two = true;
-  three = true;
-  four = true;
-  five = true;
-  six = false;
-  seven = false;
+  chart = true;
+  market = true;
+  placing = true;
+  pairs = true;
+  tradingPair = true;
+
+  tradeReminder = false;
+  soundReminder = false;
+
+  options = [
+    [this.chart, 'Charts'],
+    [this.market, 'Market trades'],
+    [this.placing, 'Order placing'],
+    [this.pairs, 'All pairs'],
+    [this.tradingPair, 'Trading pair'],
+  ];
 
   openSetColorDialog(): void {
     this.$emit('open-color-setting');
@@ -111,12 +104,5 @@ export default class SettingsPopover extends Mixins(TranslationMixin, mixins.Loa
       }
     }
   }
-
-  .delimiter {
-    background-color: var(--s-color-base-border-secondary);
-    width: 100%;
-    height: 1px;
-    margin: 14px 0 4px 0;
-  }
 }
 </style>

From 540121169bd52ba879d5a106bb959f6abafe12d2 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Tue, 19 Mar 2024 11:29:47 +0500
Subject: [PATCH 14/16] remove unused css

---
 src/components/pages/OrderBook/BookWidget.vue | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/components/pages/OrderBook/BookWidget.vue b/src/components/pages/OrderBook/BookWidget.vue
index a65d737da..6707f7c0d 100644
--- a/src/components/pages/OrderBook/BookWidget.vue
+++ b/src/components/pages/OrderBook/BookWidget.vue
@@ -474,20 +474,6 @@ $mono-font: 'JetBrainsMono';
     .trend-icon {
       margin-left: 4px;
     }
-
-    // &--up {
-    //   .mark-price,
-    //   .trend-icon {
-    //     color: var(--s-color-status-success);
-    //   }
-    // }
-
-    // &--down {
-    //   .mark-price,
-    //   .trend-icon {
-    //     color: var(--s-color-status-error);
-    //   }
-    // }
   }
 
   .book-columns {

From 815f80d9abdbc2655238e3b70b6241ea0f05f323 Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Tue, 19 Mar 2024 11:58:34 +0500
Subject: [PATCH 15/16] add vars

---
 src/components/mixins/ThemePaletteMixin.ts         | 5 +++--
 src/components/pages/OrderBook/CustomiseWidget.vue | 2 +-
 src/styles/_theme.scss                             | 4 ++++
 src/styles/soramitsu-variables.scss                | 4 ++++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/mixins/ThemePaletteMixin.ts b/src/components/mixins/ThemePaletteMixin.ts
index 20c035caa..7fb6d4804 100644
--- a/src/components/mixins/ThemePaletteMixin.ts
+++ b/src/components/mixins/ThemePaletteMixin.ts
@@ -86,8 +86,9 @@ export default class ThemePaletteMixin extends Vue {
         side: { buy: css('--s-color-classic-up'), sell: css('--s-color-classic-down') },
         priceChange: { up: css('--s-color-classic-price-change-up'), down: css('--s-color-classic-price-change-down') },
         bookBars: {
-          buy: theme === Theme.LIGHT ? 'rgba(185, 235, 219, 0.4)' : 'rgba(1, 202, 139, 0.2)',
-          sell: theme === Theme.LIGHT ? 'rgba(255, 216, 235, 0.8)' : 'rgba(255, 0, 124, 0.3)',
+          buy: theme === Theme.LIGHT ? css('--s-color-classic-bar-light-buy') : css('--s-color-classic-bar-dark-buy'),
+          sell:
+            theme === Theme.LIGHT ? css('--s-color-classic-bar-light-sell') : css('--s-color-classic-bar-dark-sell'),
         },
       },
       deficiency: {
diff --git a/src/components/pages/OrderBook/CustomiseWidget.vue b/src/components/pages/OrderBook/CustomiseWidget.vue
index b9956303a..5239200ba 100644
--- a/src/components/pages/OrderBook/CustomiseWidget.vue
+++ b/src/components/pages/OrderBook/CustomiseWidget.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator';
+import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { Components } from '@/consts';
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 837152c19..75ba34447 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -5,6 +5,10 @@ $s-color-classic-up: #34ad87;
 $s-color-classic-down: #f754a3;
 $s-color-classic-price-change-up: #24daa0;
 $s-color-classic-price-change-down: #f8087b;
+$s-color-classic-bar-light-buy: rgba(185, 235, 219, 0.4);
+$s-color-classic-bar-light-sell: rgba(255, 216, 235, 0.8);
+$s-color-classic-bar-dark-buy: rgba(1, 202, 139, 0.2);
+$s-color-classic-bar-dark-sell: rgba(255, 0, 124, 0.3);
 
 // deficiency
 $s-color-deficiency-up: #448bf1;
diff --git a/src/styles/soramitsu-variables.scss b/src/styles/soramitsu-variables.scss
index 955e73174..64434643b 100644
--- a/src/styles/soramitsu-variables.scss
+++ b/src/styles/soramitsu-variables.scss
@@ -94,6 +94,10 @@ $s-color-base-on-disabled--dark: #c29ab7;
   --s-color-classic-down: #{$s-color-classic-down};
   --s-color-classic-price-change-up: #{$s-color-classic-price-change-up};
   --s-color-classic-price-change-down: #{$s-color-classic-price-change-down};
+  --s-color-classic-bar-light-buy: #{$s-color-classic-bar-light-buy};
+  --s-color-classic-bar-light-sell: #{$s-color-classic-bar-light-sell};
+  --s-color-classic-bar-dark-buy: #{$s-color-classic-bar-dark-buy};
+  --s-color-classic-bar-dark-sell: #{$s-color-classic-bar-dark-sell};
 
   --s-color-deficiency-up: #{$s-color-deficiency-up};
   --s-color-deficiency-down: #{$s-color-deficiency-down};

From 511c000a7c561a317a497c2d01a80f80ed51389c Mon Sep 17 00:00:00 2001
From: RustemYuzlibaev <rustem.yuzlibaev@yandex.ru>
Date: Wed, 20 Mar 2024 10:52:37 +0500
Subject: [PATCH 16/16] add missing colors

---
 src/components/mixins/ThemePaletteMixin.ts    | 22 +++++++++++++++++--
 src/components/pages/OrderBook/BookWidget.vue |  1 -
 src/styles/_theme.scss                        |  8 +++++++
 src/styles/soramitsu-variables.scss           | 13 +++++++++--
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/components/mixins/ThemePaletteMixin.ts b/src/components/mixins/ThemePaletteMixin.ts
index 7fb6d4804..30e7ac282 100644
--- a/src/components/mixins/ThemePaletteMixin.ts
+++ b/src/components/mixins/ThemePaletteMixin.ts
@@ -99,7 +99,16 @@ export default class ThemePaletteMixin extends Vue {
           up: css('--s-color-deficiency-price-change-up'),
           down: css('--s-color-deficiency-price-change-down'),
         },
-        // TODO: get colors from designer for bookBars: {}
+        bookBars: {
+          buy:
+            theme === Theme.LIGHT
+              ? css('--s-color-deficiency-bar-light-buy')
+              : css('--s-color-deficiency-bar-dark-buy'),
+          sell:
+            theme === Theme.LIGHT
+              ? css('--s-color-deficiency-bar-light-sell')
+              : css('--s-color-deficiency-bar-dark-sell'),
+        },
       },
       traditional: {
         name: 'Traditional',
@@ -109,7 +118,16 @@ export default class ThemePaletteMixin extends Vue {
           up: css('--s-color-traditional-price-change-up'),
           down: css('--s-color-tradtional-price-change-down'),
         },
-        // TODO: get colors from designer for bookBars: {}
+        bookBars: {
+          buy:
+            theme === Theme.LIGHT
+              ? css('--s-color-traditional-bar-light-buy')
+              : css('--s-color-traditional-bar-dark-buy'),
+          sell:
+            theme === Theme.LIGHT
+              ? css('--s-color-traditional-bar-light-sell')
+              : css('--s-color-traditional-bar-dark-sell'),
+        },
       },
     };
 
diff --git a/src/components/pages/OrderBook/BookWidget.vue b/src/components/pages/OrderBook/BookWidget.vue
index 6707f7c0d..5683af900 100644
--- a/src/components/pages/OrderBook/BookWidget.vue
+++ b/src/components/pages/OrderBook/BookWidget.vue
@@ -71,7 +71,6 @@
 import { PriceVariant } from '@sora-substrate/liquidity-proxy';
 import { FPNumber } from '@sora-substrate/util';
 import { mixins } from '@soramitsu/soraneo-wallet-web';
-import Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
 import ThemePaletteMixin from '@/components/mixins/ThemePaletteMixin';
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 75ba34447..6d3161397 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -15,9 +15,17 @@ $s-color-deficiency-up: #448bf1;
 $s-color-deficiency-down: #d07f3e;
 $s-color-deficiency-price-change-up: #448bf1;
 $s-color-deficiency-price-change-down: #d07f3e;
+$s-color-deficiency-bar-light-buy: rgba(68, 139, 241, 0.12);
+$s-color-deficiency-bar-light-sell: rgba(255, 111, 0, 0.12);
+$s-color-deficiency-bar-dark-buy: rgba(68, 139, 241, 0.12);
+$s-color-deficiency-bar-dark-sell: rgba(255, 111, 0, 0.12);
 
 // traditional
 $s-color-traditional-up: #75a390;
 $s-color-traditional-down: #eb001b;
 $s-color-traditional-price-change-up: #75a390;
 $s-color-traditional-price-change-down: #eb001b;
+$s-color-traditional-bar-light-buy: rgba(13, 201, 124, 0.12);
+$s-color-traditional-bar-light-sell: rgba(235, 0, 27, 0.12);
+$s-color-traditional-bar-dark-buy: rgba(13, 201, 124, 0.12);
+$s-color-traditional-bar-dark-sell: rgba(235, 0, 27, 0.12);
diff --git a/src/styles/soramitsu-variables.scss b/src/styles/soramitsu-variables.scss
index 64434643b..2be1bd54b 100644
--- a/src/styles/soramitsu-variables.scss
+++ b/src/styles/soramitsu-variables.scss
@@ -90,6 +90,7 @@ $s-color-base-on-disabled--dark: #c29ab7;
   --s-asset-item-height--fiat: #{$s-asset-item-height--fiat};
 
   // Different color palette based on user preferences
+  // classic
   --s-color-classic-up: #{$s-color-classic-up};
   --s-color-classic-down: #{$s-color-classic-down};
   --s-color-classic-price-change-up: #{$s-color-classic-price-change-up};
@@ -98,14 +99,22 @@ $s-color-base-on-disabled--dark: #c29ab7;
   --s-color-classic-bar-light-sell: #{$s-color-classic-bar-light-sell};
   --s-color-classic-bar-dark-buy: #{$s-color-classic-bar-dark-buy};
   --s-color-classic-bar-dark-sell: #{$s-color-classic-bar-dark-sell};
-
+  // deficiency
   --s-color-deficiency-up: #{$s-color-deficiency-up};
   --s-color-deficiency-down: #{$s-color-deficiency-down};
   --s-color-deficiency-price-change-up: #{$s-color-deficiency-price-change-up};
   --s-color-deficiency-price-change-down: #{$s-color-deficiency-price-change-down};
-
+  --s-color-deficiency-bar-light-buy: #{$s-color-deficiency-bar-light-buy};
+  --s-color-deficiency-bar-light-sell: #{$s-color-deficiency-bar-light-sell};
+  --s-color-deficiency-bar-dark-buy: #{$s-color-deficiency-bar-dark-buy};
+  --s-color-deficiency-bar-dark-sell: #{$s-color-deficiency-bar-dark-sell};
+  // traditional
   --s-color-traditional-up: #{$s-color-traditional-up};
   --s-color-traditional-down: #{$s-color-traditional-down};
   --s-color-traditional-price-change-up: #{$s-color-traditional-price-change-up};
   --s-color-traditional-price-change-down: #{$s-color-traditional-price-change-down};
+  --s-color-traditional-bar-light-buy: #{$s-color-traditional-bar-light-buy};
+  --s-color-traditional-bar-light-sell: #{$s-color-traditional-bar-light-sell};
+  --s-color-traditional-bar-dark-buy: #{$s-color-traditional-bar-dark-buy};
+  --s-color-traditional-bar-dark-sell: #{$s-color-traditional-bar-dark-sell};
 }