From 0a9e8a7a0cdfe6fccbd6e79e5437564cc2b8f02e Mon Sep 17 00:00:00 2001
From: "s.teleshev" <s.teleshev@mu.se>
Date: Tue, 19 Dec 2023 11:33:03 +0100
Subject: [PATCH] CB-4417 :refactor Version to module styles

---
 .../src/Version.m.css                         |  3 +++
 .../src/Version.tsx                           | 24 +++++++------------
 2 files changed, 12 insertions(+), 15 deletions(-)
 create mode 100644 webapp/packages/plugin-version-update-administration/src/Version.m.css

diff --git a/webapp/packages/plugin-version-update-administration/src/Version.m.css b/webapp/packages/plugin-version-update-administration/src/Version.m.css
new file mode 100644
index 0000000000..e84f0294ab
--- /dev/null
+++ b/webapp/packages/plugin-version-update-administration/src/Version.m.css
@@ -0,0 +1,3 @@
+.tableColumnValueExpand {
+  cursor: pointer;
+}
diff --git a/webapp/packages/plugin-version-update-administration/src/Version.tsx b/webapp/packages/plugin-version-update-administration/src/Version.tsx
index dc9f9e7257..a54d6eea62 100644
--- a/webapp/packages/plugin-version-update-administration/src/Version.tsx
+++ b/webapp/packages/plugin-version-update-administration/src/Version.tsx
@@ -6,34 +6,28 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { TableColumnValue, TableItem, TableItemExpand, useStyles } from '@cloudbeaver/core-blocks';
+import { s, TableColumnValue, TableItem, TableItemExpand, useS } from '@cloudbeaver/core-blocks';
 import type { IVersion } from '@cloudbeaver/core-version';
 
+import styles from './Version.m.css';
 import { VersionInfo } from './VersionInfo';
 
-const styles = css`
-  TableColumnValue[expand] {
-    cursor: pointer;
-  }
-  TableColumnValue[|gap] {
-    gap: 16px;
-  }
-`;
-
 interface Props {
   version: IVersion;
 }
 
 export const Version = observer<Props>(function Version({ version }) {
-  return styled(useStyles(styles))(
+  const style = useS(styles);
+  return (
     <TableItem item={version.number} expandElement={VersionInfo}>
-      <TableColumnValue centerContent flex expand>
+      <TableColumnValue className={s(style, { tableColumnValueExpand: true })} centerContent flex expand>
         <TableItemExpand />
       </TableColumnValue>
-      <TableColumnValue expand>{version.number}</TableColumnValue>
+      <TableColumnValue className={s(style, { tableColumnValueExpand: true })} expand>
+        {version.number}
+      </TableColumnValue>
       <TableColumnValue>{version.date}</TableColumnValue>
-    </TableItem>,
+    </TableItem>
   );
 });