JSS

Author: Yadro

package.json

@@ -237,6 +237,7 @@
     "@ant-design/icons": "4.6.2",
     "antd": "4.15.0",
     "caniuse-lite": "1.0.30001214",
+    "clsx": "^1.1.1",
     "date-fns": "2.20.1",
     "electron-debug": "^3.1.0",
     "electron-log": "^4.2.4",
@@ -250,6 +251,7 @@
     "moment": "2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-jss": "^10.6.0",
     "react-router-dom": "^5.2.0",
     "regenerator-runtime": "^0.13.5",
     "source-map-support": "^0.5.19"

src/components/CircleButton/CircleButton.less

@@ -1,9 +1,7 @@
 import React, { SyntheticEvent } from 'react';
 import { observer } from 'mobx-react';
-
-import './CircleButton.less';
-
-import cn from '../../helpers/ClassNameHelper';
+import { createUseStyles } from 'react-jss';
+import clsx from 'clsx';
 
 interface CircleButtonProps {
   className?: string;
@@ -16,9 +14,24 @@ export default observer(function CircleButton({
   children,
   onClick,
 }: CircleButtonProps) {
+  const classes = useStyles();
+
   return (
-    <span className={cn('circle-button', className)} onClick={onClick}>
+    <span className={clsx(classes.circleButton, className)} onClick={onClick}>
       {children}
     </span>
   );
 });
+
+const useStyles = createUseStyles({
+  circleButton: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    cursor: 'pointer',
+    backgroundColor: 'black',
+  },
+});

src/components/CircleButton/CircleButton.tsx

@@ -1,12 +1,23 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-
-import './HeaderMenu.less';
+import { createUseStyles } from 'react-jss';
 
 interface HeaderMenuProps {
   children: React.ReactNode;
 }
 
 export default observer(function HeaderMenu({ children }: HeaderMenuProps) {
-  return <span className="header-menu">{children}</span>;
+  const classes = useStyles();
+
+  return <span className={classes.root}>{children}</span>;
+});
+
+const useStyles = createUseStyles({
+  root: {
+    padding: '0 20px',
+
+    '& a': {
+      color: 'white',
+    },
+  },
 });

src/components/HeaderMenu/HeaderMenu.less

@@ -1,8 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-
-import './IconTile.less';
-import cn from '../../helpers/ClassNameHelper';
+import { createUseStyles } from 'react-jss';
+import clsx from 'clsx';
 
 interface IconTileProps {
   children: React.ReactNode;
@@ -15,9 +14,23 @@ export default observer(function IconTile({
   children,
   backgroundColor,
 }: IconTileProps) {
+  const classes = useStyles();
+
   return (
-    <span className={cn('icon-tile', className)} style={{ backgroundColor }}>
+    <span className={clsx(classes.root, className)} style={{ backgroundColor }}>
       {children}
     </span>
   );
 });
+
+const useStyles = createUseStyles({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 30,
+    width: 30,
+    padding: 8,
+    borderRadius: 5,
+  },
+});

src/components/HeaderMenu/HeaderMenu.tsx

@@ -1,13 +1,12 @@
 import React, { SyntheticEvent } from 'react';
 import { CaretRightFilled, PauseOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react';
-
-import './PlayStopButton.less';
+import clsx from 'clsx';
+import { createUseStyles } from 'react-jss';
 
 import CircleButton from '../CircleButton/CircleButton';
 import rootStore from '../../services/RootStore';
 import TaskModel from '../../models/TaskModel';
-import cn from '../../helpers/ClassNameHelper';
 
 const { tasksStore } = rootStore;
 
@@ -20,6 +19,8 @@ export default observer(function PlayStopButton({
   task,
   className,
 }: PlayStopButtonProps) {
+  const classes = useStyles();
+
   function handleClick(e: SyntheticEvent) {
     e.stopPropagation();
     if (task) {
@@ -34,13 +35,19 @@ export default observer(function PlayStopButton({
   return (
     <CircleButton
       onClick={handleClick}
-      className={cn('play-stop-button', className)}
+      className={clsx('play-stop-button', className)}
     >
       {!task?.active ? (
-        <CaretRightFilled className="play-stop-button__icon" />
+        <CaretRightFilled className={classes.icon} />
       ) : (
-        <PauseOutlined className="play-stop-button__icon" />
+        <PauseOutlined className={classes.icon} />
       )}
     </CircleButton>
   );
 });
+
+const useStyles = createUseStyles({
+  icon: {
+    color: 'white',
+  },
+});

src/components/IconTile/IconTile.less

@@ -9,7 +9,7 @@
   border-radius: 5px;
   line-height: 16px;
   color: white;
-  background-color: @purple;
+  background-color: @purple; /* TODO refactor and use Theme */
 }
 
 .task-control__info {