From 24193ae84df0876e52054b0bf760786fe591aed0 Mon Sep 17 00:00:00 2001
From: Uriy Korotovskikh <u.korotovskiy@nil.foundation>
Date: Fri, 29 Sep 2023 16:22:53 +0400
Subject: [PATCH] migrate statements list to new ui-kit #121

---
 index.html                                    |  9 --
 package-lock.json                             | 12 +--
 .../SocialLinks/SocialLinks.module.scss       | 29 ------
 .../common/SocialLinks/SocialLinks.tsx        | 52 ----------
 src/components/common/SocialLinks/index.ts    |  7 --
 src/components/common/index.ts                |  1 -
 .../login/RegisterForm/RegisterForm.tsx       |  2 +-
 .../CreateOrdersPanel/CreateOrdersPanel.tsx   |  3 +-
 .../PriceChangeIndicator.module.scss          |  9 --
 .../PriceChangeIndicator.tsx                  | 47 ---------
 .../market/PriceChangeIndicator/index.ts      |  6 --
 src/components/market/index.ts                |  1 -
 src/constants/common/socialLinks.ts           | 13 +++
 .../shared/components/Footer/Footer.tsx       |  3 +-
 .../PriceChangeIndicator.tsx                  | 54 ++++++++++
 .../components/PriceChangeIndicator/styles.ts | 20 ++++
 .../components/SocialLinks/SocialLinks.tsx    | 50 ++++++++++
 .../shared/components/SocialLinks/styles.ts   | 35 +++++++
 src/features/shared/index.ts                  |  2 +
 .../statementsList/components/ListItem.tsx    | 49 +++++++++
 ...mentsListItemInfo.tsx => ListItemInfo.tsx} | 23 ++---
 .../components/StatementsList.module.scss     | 60 -----------
 .../components/StatementsList.tsx             | 26 ++---
 .../components/StatementsListItem.tsx         | 62 ------------
 .../components/StatementsListTable.tsx        | 99 ++++++++-----------
 .../components/TagsSelector.tsx               | 44 +++++++++
 ...mentsListTextFilter.tsx => TextFilter.tsx} | 32 +++---
 .../statementsList/components/overrides.ts    | 42 ++++++++
 .../statementsList/components/styles.ts       | 11 +++
 src/styles/globalStyles.ts                    | 24 +++++
 30 files changed, 436 insertions(+), 391 deletions(-)
 delete mode 100644 src/components/common/SocialLinks/SocialLinks.module.scss
 delete mode 100644 src/components/common/SocialLinks/SocialLinks.tsx
 delete mode 100644 src/components/common/SocialLinks/index.ts
 delete mode 100644 src/components/market/PriceChangeIndicator/PriceChangeIndicator.module.scss
 delete mode 100644 src/components/market/PriceChangeIndicator/PriceChangeIndicator.tsx
 delete mode 100644 src/components/market/PriceChangeIndicator/index.ts
 create mode 100644 src/features/shared/components/PriceChangeIndicator/PriceChangeIndicator.tsx
 create mode 100644 src/features/shared/components/PriceChangeIndicator/styles.ts
 create mode 100644 src/features/shared/components/SocialLinks/SocialLinks.tsx
 create mode 100644 src/features/shared/components/SocialLinks/styles.ts
 create mode 100644 src/features/statementsList/components/ListItem.tsx
 rename src/features/statementsList/components/{StatementsListItemInfo.tsx => ListItemInfo.tsx} (64%)
 delete mode 100644 src/features/statementsList/components/StatementsList.module.scss
 delete mode 100644 src/features/statementsList/components/StatementsListItem.tsx
 create mode 100644 src/features/statementsList/components/TagsSelector.tsx
 rename src/features/statementsList/components/{StatementsListTextFilter.tsx => TextFilter.tsx} (53%)
 create mode 100644 src/features/statementsList/components/overrides.ts
 create mode 100644 src/features/statementsList/components/styles.ts
 create mode 100644 src/styles/globalStyles.ts

diff --git a/index.html b/index.html
index ba81a3f4..e2263f7e 100644
--- a/index.html
+++ b/index.html
@@ -84,15 +84,6 @@
       rel="preconnect"
       href="https://fonts.gstatic.com"
     />
-    <link
-      rel="preconnect"
-      href="https://kit.fontawesome.com"
-    />
-    <script
-      defer
-      src="https://kit.fontawesome.com/9264f6e460.js"
-      crossorigin="anonymous"
-    ></script>
     <script
       type="text/javascript"
       src="/tomlParser.js"
diff --git a/package-lock.json b/package-lock.json
index a42706b1..b03c8ae8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2566,9 +2566,9 @@
       }
     },
     "node_modules/@nilfoundation/ui-kit": {
-      "version": "2.0.16",
-      "resolved": "https://registry.npmjs.org/@nilfoundation/ui-kit/-/ui-kit-2.0.16.tgz",
-      "integrity": "sha512-ZevAe9C3oZC4UB7qK9c4aGx7A3wKMKFrIUkCBPtQ/4WSBAf2aQw+UGENwLCsx94jlreZXO3y0kNGvdWWT1/nOg==",
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@nilfoundation/ui-kit/-/ui-kit-2.0.17.tgz",
+      "integrity": "sha512-9w9bJN2fqm6HPMLvujWgFeGd/8tup9AVwi9dbSOBEDCcVhI3hsfD9V86iIFJCtXcxx55H8GDCHQpZlxk0/C+oQ==",
       "dependencies": {
         "copy-to-clipboard": "^3.3.3",
         "inline-style-expand-shorthand": "^1.6.0",
@@ -12015,9 +12015,9 @@
       }
     },
     "@nilfoundation/ui-kit": {
-      "version": "2.0.16",
-      "resolved": "https://registry.npmjs.org/@nilfoundation/ui-kit/-/ui-kit-2.0.16.tgz",
-      "integrity": "sha512-ZevAe9C3oZC4UB7qK9c4aGx7A3wKMKFrIUkCBPtQ/4WSBAf2aQw+UGENwLCsx94jlreZXO3y0kNGvdWWT1/nOg==",
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@nilfoundation/ui-kit/-/ui-kit-2.0.17.tgz",
+      "integrity": "sha512-9w9bJN2fqm6HPMLvujWgFeGd/8tup9AVwi9dbSOBEDCcVhI3hsfD9V86iIFJCtXcxx55H8GDCHQpZlxk0/C+oQ==",
       "requires": {
         "copy-to-clipboard": "^3.3.3",
         "inline-style-expand-shorthand": "^1.6.0",
diff --git a/src/components/common/SocialLinks/SocialLinks.module.scss b/src/components/common/SocialLinks/SocialLinks.module.scss
deleted file mode 100644
index fa1c8f4a..00000000
--- a/src/components/common/SocialLinks/SocialLinks.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import "@/styles/constants.scss";
-
-.socialLinks {
-  list-style: none;
-  padding-inline-start: 0;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 0 !important;
-
-  > li {
-    padding: 4px 0;
-    width: 50px;
-    text-align: center;
-
-    > a {
-      color: $c-secondary-darker;
-      transition: color 0.1s ease;
-      font-size: 32px;
-
-      &:hover {
-        color: $c-secondary;
-      }
-    }
-  }
-}
-
-.bottomIndent {
-  margin-bottom: 24px !important;
-}
diff --git a/src/components/common/SocialLinks/SocialLinks.tsx b/src/components/common/SocialLinks/SocialLinks.tsx
deleted file mode 100644
index 2a853160..00000000
--- a/src/components/common/SocialLinks/SocialLinks.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * @file React component.
- * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
- */
-
-import type { ReactElement } from 'react';
-import { Icon } from '@nilfoundation/react-components';
-import type { socialLinks as links } from '@/constants';
-import styles from './SocialLinks.module.scss';
-
-/**
- * Props.
- */
-type SocialLinksProps = {
-  className?: string;
-  bottomIndent?: boolean;
-  socialLinks: typeof links;
-};
-
-/**
- * Social links.
- *
- * @param {SocialLinksProps} props Props.
- * @returns React component.
- */
-export const SocialLinks = ({
-  className,
-  bottomIndent,
-  socialLinks,
-}: SocialLinksProps): ReactElement => (
-  <ul
-    aria-label="Social media links"
-    className={`${styles.socialLinks} ${className ?? ''} ${
-      bottomIndent ? styles.bottomIndent : ''
-    }`}
-  >
-    {socialLinks.map(({ icon, url }) => (
-      <li key={icon}>
-        <a
-          href={url}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <Icon
-            iconName={`fa-brands fa-${icon}`}
-            srOnlyText={`${icon} link`}
-          />
-        </a>
-      </li>
-    ))}
-  </ul>
-);
diff --git a/src/components/common/SocialLinks/index.ts b/src/components/common/SocialLinks/index.ts
deleted file mode 100644
index b129713b..00000000
--- a/src/components/common/SocialLinks/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable import/export */
-/**
- * @file Index.
- * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
- */
-
-export * from './SocialLinks';
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 03d22be5..6bb75715 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -10,7 +10,6 @@ export * from './FileUploader';
 export * from './Table';
 export * from './FullScreenView';
 export * from './ClickableIcon';
-export * from './SocialLinks';
 export * from './Copyright';
 export * from './Overlay';
 export * from './ObjectAsPlainTextViewer';
diff --git a/src/components/login/RegisterForm/RegisterForm.tsx b/src/components/login/RegisterForm/RegisterForm.tsx
index 738edf6a..49969af8 100644
--- a/src/components/login/RegisterForm/RegisterForm.tsx
+++ b/src/components/login/RegisterForm/RegisterForm.tsx
@@ -22,7 +22,7 @@ import debounce from 'lodash/debounce';
 import { useForm } from 'react-hook-form';
 import { Path } from '@/features/routing';
 import { socialLinks } from '@/constants';
-import { SocialLinks } from '@/components';
+import { SocialLinks } from '@/features/shared';
 import type { RegisterData } from '@/models';
 import { signUp, checkIsUsernameUnique } from '@/api';
 import { getApiErrorMessage } from '@/utils';
diff --git a/src/components/market/CreateOrdersPanel/CreateOrdersPanel.tsx b/src/components/market/CreateOrdersPanel/CreateOrdersPanel.tsx
index 6cea2a00..70ac9f3a 100644
--- a/src/components/market/CreateOrdersPanel/CreateOrdersPanel.tsx
+++ b/src/components/market/CreateOrdersPanel/CreateOrdersPanel.tsx
@@ -10,7 +10,8 @@ import { TradeOrderType } from '@/models';
 import { socialLinks as links } from '@/constants';
 import { getRuntimeConfigOrThrow } from '@/utils';
 import { ProtectedContent } from '@/features/auth';
-import { DashboardCard, SocialLinks } from '../../common';
+import { SocialLinks } from '@/features/shared';
+import { DashboardCard } from '../../common';
 import { CreateRequestForm } from '../CreateRequestForm';
 import { CreateOrdersTabs } from './CreateOrdersTabs';
 import './CreateOrdersPanel.scss';
diff --git a/src/components/market/PriceChangeIndicator/PriceChangeIndicator.module.scss b/src/components/market/PriceChangeIndicator/PriceChangeIndicator.module.scss
deleted file mode 100644
index 6ca9ed0f..00000000
--- a/src/components/market/PriceChangeIndicator/PriceChangeIndicator.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.priceChangeIndicator {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-
-  i {
-    margin-right: 4px;
-  }
-}
diff --git a/src/components/market/PriceChangeIndicator/PriceChangeIndicator.tsx b/src/components/market/PriceChangeIndicator/PriceChangeIndicator.tsx
deleted file mode 100644
index 3803fc33..00000000
--- a/src/components/market/PriceChangeIndicator/PriceChangeIndicator.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * @file React component.
- * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
- */
-
-import type { ReactElement } from 'react';
-import { Icon } from '@nilfoundation/react-components';
-import clsx from 'clsx';
-import styles from './PriceChangeIndicator.module.scss';
-
-/**
- * Props.
- */
-type PriceChangeIndicatorProps = {
-  change: number;
-  className?: string;
-  toFixed?: number;
-  plainColor?: boolean;
-};
-
-/**
- * Trade history component.
- *
- * @param {PriceChangeIndicatorProps} props Props.
- * @returns React component.
- */
-export const PriceChangeIndicator = ({
-  change,
-  className,
-  toFixed = 4,
-  plainColor,
-}: PriceChangeIndicatorProps): ReactElement => {
-  const isGrow = !!change && change > 0;
-  const iconName = `fa-solid fa-arrow-${isGrow ? 'up' : 'down'}`;
-  const computedClassName = clsx(
-    styles.priceChangeIndicator,
-    plainColor ? '' : isGrow ? 'growTextColor' : 'lossTextColor',
-    className,
-  );
-
-  return (
-    <div className={computedClassName}>
-      <Icon iconName={iconName} />
-      {`${Math.abs(change).toFixed(toFixed)}%`}
-    </div>
-  );
-};
diff --git a/src/components/market/PriceChangeIndicator/index.ts b/src/components/market/PriceChangeIndicator/index.ts
deleted file mode 100644
index 002cfe95..00000000
--- a/src/components/market/PriceChangeIndicator/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * @file Index.
- * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
- */
-
-export * from './PriceChangeIndicator';
diff --git a/src/components/market/index.ts b/src/components/market/index.ts
index a4db6e6a..d818c837 100644
--- a/src/components/market/index.ts
+++ b/src/components/market/index.ts
@@ -10,6 +10,5 @@ export * from './OrderManagementContextProvider';
 export * from './CreateOrdersPanel';
 export * from './TradeHistory';
 export * from './ManageOrdersPanel';
-export * from './PriceChangeIndicator';
 export * from './StatementInfoPanel';
 export * from './LastProofProducer';
diff --git a/src/constants/common/socialLinks.ts b/src/constants/common/socialLinks.ts
index 1eb4542f..c28a36cd 100644
--- a/src/constants/common/socialLinks.ts
+++ b/src/constants/common/socialLinks.ts
@@ -3,25 +3,38 @@
  * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
  */
 
+import {
+  LinkedinIcon,
+  TwitterIcon,
+  GithubIcon,
+  TelegramIcon,
+  DiscordIcon,
+} from '@nilfoundation/ui-kit';
+
 export const socialLinks = [
   {
     icon: 'twitter',
     url: 'https://twitter.com/nil_foundation',
+    Component: TwitterIcon,
   },
   {
     icon: 'linkedin',
     url: 'https://www.linkedin.com/company/nil-foundation',
+    Component: LinkedinIcon,
   },
   {
     icon: 'github',
     url: 'http://github.com/nilfoundation',
+    Component: GithubIcon,
   },
   {
     icon: 'telegram',
     url: 'https://t.me/nilfoundation',
+    Component: TelegramIcon,
   },
   {
     icon: 'discord',
     url: 'https://discord.gg/KmTAEjbmM3',
+    Component: DiscordIcon,
   },
 ];
diff --git a/src/features/shared/components/Footer/Footer.tsx b/src/features/shared/components/Footer/Footer.tsx
index 3c6620c5..e6545b38 100644
--- a/src/features/shared/components/Footer/Footer.tsx
+++ b/src/features/shared/components/Footer/Footer.tsx
@@ -5,9 +5,10 @@
 
 import type { ReactElement } from 'react';
 import { useStyletron } from 'styletron-react';
-import { Copyright, SocialLinks } from '@/components';
+import { Copyright } from '@/components';
 import { socialLinks } from '@/constants';
 import { styles as s } from './styles';
+import { SocialLinks } from '../SocialLinks/SocialLinks';
 
 /**
  * Footer.
diff --git a/src/features/shared/components/PriceChangeIndicator/PriceChangeIndicator.tsx b/src/features/shared/components/PriceChangeIndicator/PriceChangeIndicator.tsx
new file mode 100644
index 00000000..f5355e5f
--- /dev/null
+++ b/src/features/shared/components/PriceChangeIndicator/PriceChangeIndicator.tsx
@@ -0,0 +1,54 @@
+/**
+ * @file React component.
+ * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
+ */
+
+import type { ReactElement } from 'react';
+import { ArrowUpIcon, PRIMITIVE_COLORS } from '@nilfoundation/ui-kit';
+import { useStyletron } from 'styletron-react';
+import { globalStyles } from '@/styles/globalStyles';
+import { styles as s } from './styles';
+
+/**
+ * Props.
+ */
+type PriceChangeIndicatorProps = {
+  change: number;
+  toFixed?: number;
+  plainColor?: boolean;
+};
+
+/**
+ * Trade history component.
+ *
+ * @param {PriceChangeIndicatorProps} props Props.
+ * @returns React component.
+ */
+export const PriceChangeIndicator = ({
+  change,
+  toFixed = 4,
+  plainColor,
+}: PriceChangeIndicatorProps): ReactElement => {
+  const [css] = useStyletron();
+  const isGrow = !!change && change > 0;
+  const computedClassName = plainColor
+    ? {}
+    : isGrow
+    ? globalStyles.successText
+    : globalStyles.dangerText;
+  const computedIconColor = plainColor
+    ? undefined
+    : isGrow
+    ? PRIMITIVE_COLORS.green300
+    : PRIMITIVE_COLORS.red300;
+
+  return (
+    <div className={css({ ...computedClassName, ...s.container })}>
+      <ArrowUpIcon
+        color={computedIconColor}
+        className={isGrow ? undefined : css(s.revertedIcon)}
+      />
+      {`${Math.abs(change).toFixed(toFixed)}%`}
+    </div>
+  );
+};
diff --git a/src/features/shared/components/PriceChangeIndicator/styles.ts b/src/features/shared/components/PriceChangeIndicator/styles.ts
new file mode 100644
index 00000000..b40941d7
--- /dev/null
+++ b/src/features/shared/components/PriceChangeIndicator/styles.ts
@@ -0,0 +1,20 @@
+/**
+ * @file Styles for PriceChangeIndicator component.
+ */
+
+import type { StyleObject } from 'styletron-react';
+
+const revertedIcon: StyleObject = {
+  transform: 'rotate(180deg)',
+};
+
+const container: StyleObject = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5rem',
+};
+
+export const styles = {
+  revertedIcon,
+  container,
+};
diff --git a/src/features/shared/components/SocialLinks/SocialLinks.tsx b/src/features/shared/components/SocialLinks/SocialLinks.tsx
new file mode 100644
index 00000000..ef4c21ef
--- /dev/null
+++ b/src/features/shared/components/SocialLinks/SocialLinks.tsx
@@ -0,0 +1,50 @@
+/**
+ * @file React component.
+ * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
+ */
+
+import type { ReactElement } from 'react';
+import { useStyletron } from 'styletron-react';
+import type { socialLinks as links } from '@/constants';
+import { styles as s } from './styles';
+
+/**
+ * Props.
+ */
+type SocialLinksProps = {
+  bottomIndent?: boolean;
+  socialLinks: typeof links;
+};
+
+/**
+ * Social links.
+ *
+ * @param {SocialLinksProps} props Props.
+ * @returns React component.
+ */
+export const SocialLinks = ({ bottomIndent, socialLinks }: SocialLinksProps): ReactElement => {
+  const [css] = useStyletron();
+
+  return (
+    <ul
+      aria-label="Social media links"
+      className={css(s.container(bottomIndent))}
+    >
+      {socialLinks.map(({ icon, url, Component }) => (
+        <li
+          key={icon}
+          className={css(s.item)}
+        >
+          <a
+            href={url}
+            className={css(s.link)}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Component size={32} />
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};
diff --git a/src/features/shared/components/SocialLinks/styles.ts b/src/features/shared/components/SocialLinks/styles.ts
new file mode 100644
index 00000000..506028de
--- /dev/null
+++ b/src/features/shared/components/SocialLinks/styles.ts
@@ -0,0 +1,35 @@
+/**
+ * @file Styles for SocialLinks component.
+ */
+
+import { PRIMITIVE_COLORS } from '@nilfoundation/ui-kit';
+import type { StyleObject } from 'styletron-react';
+
+const container = (bottomIndent?: boolean): StyleObject => ({
+  listStyle: 'none',
+  paddingInlineStart: 0,
+  display: 'flex',
+  justifyContent: 'center',
+  marginBottom: bottomIndent ? '2rem' : 0,
+});
+
+const item: StyleObject = {
+  padding: '4px 0',
+  width: '50px',
+  textAlign: 'center',
+};
+
+const link: StyleObject = {
+  color: PRIMITIVE_COLORS.gray300,
+  transition: 'color 0.1s ease',
+  fontSize: '32px',
+  ':hover': {
+    color: PRIMITIVE_COLORS.gray200,
+  },
+};
+
+export const styles = {
+  container,
+  item,
+  link,
+};
diff --git a/src/features/shared/index.ts b/src/features/shared/index.ts
index f26bdb8c..fc7e5e61 100644
--- a/src/features/shared/index.ts
+++ b/src/features/shared/index.ts
@@ -9,3 +9,5 @@ export { useBreakpoint } from './hooks/useBreakpoint';
 export * from './components/Navbar/Navbar';
 export * from './components/VirtualList/VirtualList';
 export * from './components/Footer/Footer';
+export * from './components/SocialLinks/SocialLinks';
+export * from './components/PriceChangeIndicator/PriceChangeIndicator';
diff --git a/src/features/statementsList/components/ListItem.tsx b/src/features/statementsList/components/ListItem.tsx
new file mode 100644
index 00000000..efce2648
--- /dev/null
+++ b/src/features/statementsList/components/ListItem.tsx
@@ -0,0 +1,49 @@
+/**
+ * @file React component.
+ * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
+ */
+
+import type { ReactElement } from 'react';
+import { Link } from 'react-router-dom';
+import { ListItem, ListItemLabel } from '@nilfoundation/ui-kit';
+import { useAppSelector } from '@/redux';
+import { Path } from '@/features/routing';
+import type { StatementsListData } from '@/models';
+import { siteMoneyTickerAbbreviation } from '@/constants';
+import { ListItemInfo } from './ListItemInfo';
+
+/**
+ * Props.
+ */
+type CurcuitsListItemProps = {
+  data: StatementsListData;
+};
+
+/**
+ * Currencies list item.
+ *
+ * @param {CurcuitsListItemProps} props - Props.
+ * @returns React component.
+ */
+export const CurcuitsListItem = ({
+  data: { _key, cost, change, name, tag },
+}: CurcuitsListItemProps): ReactElement => {
+  const isSelected = useAppSelector(s => s.statementsState.selectedKey === _key);
+
+  return (
+    <Link to={`${Path.market}/${name}`}>
+      <ListItem
+        isActive={isSelected}
+        endEnhancer={() => (
+          <ListItemInfo
+            cost={cost}
+            change={change}
+            isSelected={isSelected}
+          />
+        )}
+      >
+        <ListItemLabel description={tag}>{`${name}/${siteMoneyTickerAbbreviation}`}</ListItemLabel>
+      </ListItem>
+    </Link>
+  );
+};
diff --git a/src/features/statementsList/components/StatementsListItemInfo.tsx b/src/features/statementsList/components/ListItemInfo.tsx
similarity index 64%
rename from src/features/statementsList/components/StatementsListItemInfo.tsx
rename to src/features/statementsList/components/ListItemInfo.tsx
index 0ee1737a..d3328d9a 100644
--- a/src/features/statementsList/components/StatementsListItemInfo.tsx
+++ b/src/features/statementsList/components/ListItemInfo.tsx
@@ -5,11 +5,12 @@
 
 import type { ReactElement } from 'react';
 import { memo } from 'react';
-import { Media, Spinner } from '@nilfoundation/react-components';
+import { SPINNER_SIZE, Spinner } from '@nilfoundation/ui-kit';
+import { useStyletron } from 'styletron-react';
 import { useAppSelector } from '@/redux';
 import { siteMoneyTickerAbbreviation } from '@/constants';
-import { PriceChangeIndicator } from '@/components/market/PriceChangeIndicator';
-import styles from './StatementsList.module.scss';
+import { PriceChangeIndicator } from '@/features/shared';
+import { styles as s } from './styles';
 
 /**
  * Props.
@@ -26,26 +27,26 @@ type StatementsListItemInfoProps = {
  * @param {StatementsListItemInfoProps} props - Props.
  * @returns React component.
  */
-export const StatementsListItemInfo = memo(function StatementsListItemInfo({
+export const ListItemInfo = memo(function StatementsListItemInfo({
   cost,
   change,
   isSelected,
 }: StatementsListItemInfoProps): ReactElement {
   const isLoadingInfo = useAppSelector(s => s.statementsState.isLoadingStatementsInfo);
+  const [css] = useStyletron();
 
   return (
-    <Media.Item position="right">
-      {cost && (
-        <div className={styles.cost}>{`${cost.toFixed(4)} ${siteMoneyTickerAbbreviation}`}</div>
-      )}
+    <div className={css(s.priceIndicator)}>
+      {cost && <div>{`${cost.toFixed(4)} ${siteMoneyTickerAbbreviation}`}</div>}
       {!!change && (
         <PriceChangeIndicator
           change={change}
-          className={styles.dailyChangeIndicator}
           plainColor={isSelected}
         />
       )}
-      {isLoadingInfo && cost === undefined && change === undefined && <Spinner />}
-    </Media.Item>
+      {isLoadingInfo && cost === undefined && change === undefined && (
+        <Spinner size={SPINNER_SIZE.small} />
+      )}
+    </div>
   );
 });
diff --git a/src/features/statementsList/components/StatementsList.module.scss b/src/features/statementsList/components/StatementsList.module.scss
deleted file mode 100644
index 61c7c7b5..00000000
--- a/src/features/statementsList/components/StatementsList.module.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import "@/styles/constants.scss";
-@import "@/styles/mixins/styledList";
-@import "@/styles/mixins/hideScrollbar";
-@import "@/styles/mixins/overflowFade";
-@import "@/styles/mixins/responsive";
-
-.wrapper {
-  @include responsive(sm) {
-    height: 100%;
-  }
-}
-
-.container {
-  height: 500px;
-  display: flex;
-  flex-flow: column nowrap;
-
-  @include responsive(sm) {
-    height: 100%;
-  }
-}
-
-.inputGroup {
-  margin-bottom: 10px;
-}
-
-.dailyChangeIndicator {
-  font-size: 1.1rem;
-}
-
-div.selected {
-  color: $c-secondary !important;
-}
-
-.listGroup {
-  @include styledList;
-  @include hideScrollbar;
-  height: 406px;
-  overflow: auto;
-  padding-top: 8px;
-  @include overflowFade(8px, true);
-
-  @include responsive(sm) {
-    flex-grow: 2;
-  }
-}
-
-.itemBody {
-  vertical-align: middle !important;
-  height: calc(48px - 1rem);
-  font-size: 1.25rem !important;
-}
-
-.cost {
-  white-space: nowrap;
-}
-
-.tag {
-  font-size: 1rem;
-}
diff --git a/src/features/statementsList/components/StatementsList.tsx b/src/features/statementsList/components/StatementsList.tsx
index d153c7a6..8466bc0d 100644
--- a/src/features/statementsList/components/StatementsList.tsx
+++ b/src/features/statementsList/components/StatementsList.tsx
@@ -4,7 +4,7 @@
  */
 
 import type { ReactElement } from 'react';
-import { SPINNER_SIZE, Spinner } from '@nilfoundation/ui-kit';
+import { Card, SPINNER_SIZE, Spinner } from '@nilfoundation/ui-kit';
 import { dequal as deepEqual } from 'dequal';
 import {
   selectCurrentStatement,
@@ -14,9 +14,8 @@ import {
 } from '@/redux';
 import { useSyncUrlAndSelectedItem } from '@/hooks';
 import { RouterParam } from '@/enums';
-import { DashboardCard } from '@/components';
 import { StatementsListTable } from './StatementsListTable';
-import styles from './StatementsList.module.scss';
+import { getStatementsCardOverrides } from './overrides';
 
 /**
  * Statements list.
@@ -35,16 +34,17 @@ const StatementsList = (): ReactElement => {
   });
 
   return (
-    <DashboardCard className={styles.wrapper}>
-      <h4>Statement list</h4>
-      <div className={styles.container}>
-        {loadingStatements && !statementsList.length ? (
-          <Spinner size={SPINNER_SIZE.large} />
-        ) : (
-          <StatementsListTable statementsList={statementsList} />
-        )}
-      </div>
-    </DashboardCard>
+    <Card
+      title="Statements"
+      headline
+      overrides={getStatementsCardOverrides()}
+    >
+      {loadingStatements && !statementsList.length ? (
+        <Spinner size={SPINNER_SIZE.large} />
+      ) : (
+        <StatementsListTable statementsList={statementsList} />
+      )}
+    </Card>
   );
 };
 
diff --git a/src/features/statementsList/components/StatementsListItem.tsx b/src/features/statementsList/components/StatementsListItem.tsx
deleted file mode 100644
index d269bdfb..00000000
--- a/src/features/statementsList/components/StatementsListItem.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * @file React component.
- * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
- */
-
-import type { ReactElement } from 'react';
-import { Label, ListGroup, Media } from '@nilfoundation/react-components';
-import { Link } from 'react-router-dom';
-import { useSelector } from 'react-redux';
-import { selectCurrentStatementKey } from '@/redux';
-import { Path } from '@/features/routing';
-import type { StatementsListData } from '@/models';
-import { siteMoneyTickerAbbreviation } from '@/constants';
-import { StatementsListItemInfo } from './StatementsListItemInfo';
-import styles from './StatementsList.module.scss';
-
-/**
- * Props.
- */
-type CurcuitsListItemProps = {
-  data: StatementsListData;
-};
-
-/**
- * Currencies list item.
- *
- * @param {CurcuitsListItemProps} props - Props.
- * @returns React component.
- */
-export const CurcuitsListItem = ({
-  data: { _key, cost, change, name, tag },
-}: CurcuitsListItemProps): ReactElement => {
-  const selectedKey = useSelector(selectCurrentStatementKey);
-  const isSelected = _key === selectedKey;
-
-  return (
-    <ListGroup.Item active={isSelected}>
-      <Link to={`${Path.market}/${name}`}>
-        <Media className={isSelected ? styles.selected : ''}>
-          <Media.Body className={styles.itemBody}>
-            {`${name.toUpperCase()}/${siteMoneyTickerAbbreviation}`}
-            {tag && (
-              <div>
-                <Label
-                  rounded
-                  className={styles.tag}
-                >
-                  {tag}
-                </Label>
-              </div>
-            )}
-          </Media.Body>
-          <StatementsListItemInfo
-            cost={cost}
-            change={change}
-            isSelected={isSelected}
-          />
-        </Media>
-      </Link>
-    </ListGroup.Item>
-  );
-};
diff --git a/src/features/statementsList/components/StatementsListTable.tsx b/src/features/statementsList/components/StatementsListTable.tsx
index 0678582e..9cb76ec4 100644
--- a/src/features/statementsList/components/StatementsListTable.tsx
+++ b/src/features/statementsList/components/StatementsListTable.tsx
@@ -5,19 +5,17 @@
 
 import type { ReactElement } from 'react';
 import { memo, useCallback, useMemo } from 'react';
-import { ListGroup } from '@nilfoundation/react-components';
 import { dequal as deepEqual } from 'dequal';
 import type { TableInstance, TableState } from 'react-table';
-import type { Option } from 'baseui/select';
-import { Select } from 'baseui/select';
-import { useDispatch } from 'react-redux';
-import { UpdateSelectedStatementTags, selectAllStatementsTags, useAppSelector } from '@/redux';
+import { useStyletron } from 'styletron-react';
+import { useAppSelector } from '@/redux';
 import { ReactTable } from '@/components';
 import type { Statement, StatementsListData, StatementsListTableColumn } from '@/models';
 import { getRuntimeConfigOrThrow } from '@/utils';
-import { CurcuitsListItem } from './StatementsListItem';
-import { StatementsListTextFilter } from './StatementsListTextFilter';
-import styles from './StatementsList.module.scss';
+import { globalStyles as s } from '@/styles/globalStyles';
+import { CurcuitsListItem } from './ListItem';
+import { TextFilter } from './TextFilter';
+import { TagsSelector } from './TagsSelector';
 
 const { CIRCUIT_DEVELOPER_GUIDE_URL } = getRuntimeConfigOrThrow();
 
@@ -35,7 +33,7 @@ const columns: StatementsListTableColumn[] = [
   {
     Header: 'Name',
     accessor: 'name',
-    Filter: StatementsListTextFilter,
+    Filter: TextFilter,
   },
   {
     accessor: 'cost',
@@ -77,18 +75,7 @@ const defaultTableState: Partial<TableState<StatementsListData>> = {
 export const StatementsListTable = memo(function StatementsListTable({
   statementsList,
 }: StatementsListTableProps): ReactElement {
-  const dispatch = useDispatch();
   const statementsInfo = useAppSelector(s => s.statementsState.statementsInfo, deepEqual);
-  const avialiableTags = useAppSelector(selectAllStatementsTags);
-  const selectedTags = useAppSelector(s => s.statementsState.selectedStatementTags);
-
-  const selectOptions: Option[] = useMemo(() => {
-    return avialiableTags.map(x => ({ label: x, id: x }));
-  }, [avialiableTags]);
-  const selectValues: Option[] = useMemo(() => {
-    return selectedTags.map(x => ({ label: x, id: x }));
-  }, [selectedTags]);
-
   const tableData: StatementsListData[] = useMemo(() => {
     return statementsList.map(x => {
       const info = statementsInfo && statementsInfo.find(y => y._key === x._key);
@@ -107,45 +94,23 @@ export const StatementsListTable = memo(function StatementsListTable({
     ({ rows, prepareRow, visibleColumns }: TableInstance<StatementsListData>) => (
       <>
         {visibleColumns.find(x => x.canFilter)?.render('Filter')}
-        <Select
-          options={selectOptions}
-          value={selectValues}
-          multi
-          onChange={params => {
-            dispatch(UpdateSelectedStatementTags(params.value.map(x => x.id as string)));
-          }}
-          placeholder="Select statements tags"
-        />
-        <ListGroup className={styles.listGroup}>
-          {rows.length === 0 ? (
-            <>
-              <div className="text-muted">No statements found</div>
-              <div className="text-muted">
-                Create your own statement using{' '}
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href={CIRCUIT_DEVELOPER_GUIDE_URL}
-                >
-                  this guide
-                </a>
-              </div>
-            </>
-          ) : (
-            rows.map(row => {
-              prepareRow(row);
-              return (
-                <CurcuitsListItem
-                  key={row.id}
-                  data={row.values as StatementsListData}
-                />
-              );
-            })
-          )}
-        </ListGroup>
+        <TagsSelector />
+        {rows.length === 0 ? (
+          <EmptyList />
+        ) : (
+          rows.map(row => {
+            prepareRow(row);
+            return (
+              <CurcuitsListItem
+                key={row.id}
+                data={row.values as StatementsListData}
+              />
+            );
+          })
+        )}
       </>
     ),
-    [selectValues, dispatch, selectOptions],
+    [],
   );
 
   return (
@@ -159,3 +124,23 @@ export const StatementsListTable = memo(function StatementsListTable({
     />
   );
 });
+
+const EmptyList = memo(function EmptyList(): ReactElement {
+  const [css] = useStyletron();
+
+  return (
+    <>
+      <div className={css(s.textMuted)}>No statements found</div>
+      <div className={css(s.textMuted)}>
+        Create your own statement using{' '}
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href={CIRCUIT_DEVELOPER_GUIDE_URL}
+        >
+          this guide
+        </a>
+      </div>
+    </>
+  );
+});
diff --git a/src/features/statementsList/components/TagsSelector.tsx b/src/features/statementsList/components/TagsSelector.tsx
new file mode 100644
index 00000000..e06f3356
--- /dev/null
+++ b/src/features/statementsList/components/TagsSelector.tsx
@@ -0,0 +1,44 @@
+/**
+ * @file React component.
+ * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
+ */
+
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+import { Select } from '@nilfoundation/ui-kit';
+import type { Option } from 'baseui/select';
+import { useDispatch } from 'react-redux';
+import { UpdateSelectedStatementTags, selectAllStatementsTags, useAppSelector } from '@/redux';
+import { getSelectOverrides } from './overrides';
+
+/**
+ * Statements tags selector.
+ *
+ * @returns React component.
+ */
+export const TagsSelector = (): ReactElement => {
+  const dispatch = useDispatch();
+  const avialiableTags = useAppSelector(selectAllStatementsTags);
+  const selectedTags = useAppSelector(s => s.statementsState.selectedStatementTags);
+
+  const selectOptions: Option[] = useMemo(() => {
+    return avialiableTags.map(x => ({ label: x, id: x }));
+  }, [avialiableTags]);
+
+  const selectValues: Option[] = useMemo(() => {
+    return selectedTags.map(x => ({ label: x, id: x }));
+  }, [selectedTags]);
+
+  return (
+    <Select
+      options={selectOptions}
+      value={selectValues}
+      multi
+      onChange={params => {
+        dispatch(UpdateSelectedStatementTags(params.value.map(x => x.id as string)));
+      }}
+      placeholder="Filter"
+      overrides={getSelectOverrides()}
+    />
+  );
+};
diff --git a/src/features/statementsList/components/StatementsListTextFilter.tsx b/src/features/statementsList/components/TextFilter.tsx
similarity index 53%
rename from src/features/statementsList/components/StatementsListTextFilter.tsx
rename to src/features/statementsList/components/TextFilter.tsx
index 5554a31a..bb4a2be9 100644
--- a/src/features/statementsList/components/StatementsListTextFilter.tsx
+++ b/src/features/statementsList/components/TextFilter.tsx
@@ -5,11 +5,11 @@
 
 import type { ReactElement } from 'react';
 import { useRef, useState } from 'react';
-import { Icon, Input, InputGroup } from '@nilfoundation/react-components';
 import debounce from 'lodash/debounce';
 import type { FilterProps } from 'react-table';
+import { Input, SearchIcon } from '@nilfoundation/ui-kit';
 import type { StatementsListData } from '@/models';
-import styles from './StatementsList.module.scss';
+import { getTextFilterOverrides } from './overrides';
 
 /**
  * Search statements by text filter component.
@@ -17,10 +17,10 @@ import styles from './StatementsList.module.scss';
  * @param {FilterProps<StatementsListData>} props - Filter props.
  * @returns Search by text filter component.
  */
-export const StatementsListTextFilter = ({
+export const TextFilter = ({
   column: { setFilter },
 }: FilterProps<StatementsListData>): ReactElement => {
-  const [filterValue, setFilterValue] = useState('');
+  const [filterValue, setFilterValue] = useState(''); // TODO - maybe this is redundant.
   const debouncedSearch = useRef(
     debounce(value => {
       setFilter(value || undefined);
@@ -28,19 +28,15 @@ export const StatementsListTextFilter = ({
   ).current;
 
   return (
-    <InputGroup className={styles.inputGroup}>
-      <InputGroup.Addon>
-        <Icon iconName="fa-solid fa-search" />
-      </InputGroup.Addon>
-      <Input
-        placeholder="Search statements"
-        type="text"
-        value={filterValue}
-        onChange={e => {
-          setFilterValue(e.target.value);
-          debouncedSearch(e.target.value);
-        }}
-      />
-    </InputGroup>
+    <Input
+      overrides={getTextFilterOverrides()}
+      placeholder="Search statements"
+      value={filterValue}
+      onChange={e => {
+        setFilterValue(e.target.value);
+        debouncedSearch(e.target.value);
+      }}
+      startEnhancer={<SearchIcon />}
+    />
   );
 };
diff --git a/src/features/statementsList/components/overrides.ts b/src/features/statementsList/components/overrides.ts
new file mode 100644
index 00000000..aef36103
--- /dev/null
+++ b/src/features/statementsList/components/overrides.ts
@@ -0,0 +1,42 @@
+/**
+ * @file Overrides for StatementsList component.
+ */
+
+import { PRIMITIVE_COLORS } from '@nilfoundation/ui-kit';
+import type { CardOverrides } from 'baseui/card';
+import type { InputOverrides } from 'baseui/input';
+import type { SelectOverrides } from 'baseui/select';
+
+/**
+ * @returns Overrides for text filter.
+ */
+export const getTextFilterOverrides = (): InputOverrides => ({
+  Root: {
+    style: {
+      marginBottom: '0.75rem',
+    },
+  },
+});
+
+/**
+ * @returns Overrides for statements card.
+ */
+export const getStatementsCardOverrides = (): CardOverrides => ({
+  Root: {
+    style: {
+      maxWidth: '100%',
+      backgroundColor: PRIMITIVE_COLORS.gray900,
+    },
+  },
+});
+
+/**
+ * @returns Overrides for select.
+ */
+export const getSelectOverrides = (): SelectOverrides => ({
+  Root: {
+    style: {
+      marginBottom: '0.75rem',
+    },
+  },
+});
diff --git a/src/features/statementsList/components/styles.ts b/src/features/statementsList/components/styles.ts
new file mode 100644
index 00000000..301754bb
--- /dev/null
+++ b/src/features/statementsList/components/styles.ts
@@ -0,0 +1,11 @@
+/**
+ * @file Styles for StatementsList component.
+ */
+
+const priceIndicator = {
+  fontSize: '14px',
+};
+
+export const styles = {
+  priceIndicator,
+};
diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
new file mode 100644
index 00000000..da704d55
--- /dev/null
+++ b/src/styles/globalStyles.ts
@@ -0,0 +1,24 @@
+/**
+ * @file Global styles.
+ */
+
+import { PRIMITIVE_COLORS } from '@nilfoundation/ui-kit';
+import type { StyleObject } from 'styletron-react';
+
+const textMuted: StyleObject = {
+  color: PRIMITIVE_COLORS.gray500,
+};
+
+const dangerText: StyleObject = {
+  color: PRIMITIVE_COLORS.red300,
+};
+
+const successText: StyleObject = {
+  color: PRIMITIVE_COLORS.green300,
+};
+
+export const globalStyles = {
+  textMuted,
+  dangerText,
+  successText,
+};