JSS

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.tsx

@@ -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/HeaderMenu/HeaderMenu.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/IconTile/IconTile.tsx

@@ -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/PlayStopButton/PlayStopButton.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/TaskControl/TaskControl.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 {

src/components/TimeRangeModal/TimeRangeModal.tsx

@@ -6,8 +6,6 @@ import { DeleteFilled } from '@ant-design/icons';
 import { observer } from 'mobx-react';
 import isBefore from 'date-fns/isBefore';
 
-import './TimeRangeModal.less';
-
 import rootStore from '../../services/RootStore';
 import TaskTimeItemModel from '../../models/TaskTimeItemModel';
 import { ITimeRangeModel } from '../../models/TaskModel';

src/helpers/IterateLastCurrent.ts

@@ -1,6 +1,6 @@
 type Callback<T, R> = (last: T | undefined, cur: T, index: number) => R;
 
-export function mapLastCurrent<T, R = any>(
+export function mapPrevCurrent<T, R = any>(
   items: T[],
   callback: Callback<T, R>
 ): R[] {

src/screens/Main.tsx

@@ -3,8 +3,6 @@ import { Route, Switch, Link, Redirect } from 'react-router-dom';
 import { Layout } from 'antd';
 import { observer } from 'mobx-react';
 
-import './Main.less';
-
 import Projects from './projects/Projects';
 import TaskControl from '../components/TaskControl/TaskControl';
 import HeaderMenu from '../components/HeaderMenu/HeaderMenu';

src/screens/hours/HoursView.tsx

@@ -2,8 +2,6 @@ import React, { useMemo, useState } from 'react';
 import { Layout, Space } from 'antd';
 import { observer } from 'mobx-react';
 
-import './HoursView.less';
-
 import rootStore from '../../services/RootStore';
 import HoursCard from './components/HoursCard/HoursCard';
 import getTimeItems from '../../services/TaskTimeItem';
@@ -12,10 +10,12 @@ import TimeRangeModal from '../../components/TimeRangeModal/TimeRangeModal';
 import TaskTimeItemModel from '../../models/TaskTimeItemModel';
 import { Undefined } from '../../types/CommonTypes';
 import TotalHours from './components/TotalHours/TotalHours';
+import { createUseStyles } from 'react-jss';
 
 const { tasksStore } = rootStore;
 
 export default observer(function HoursView() {
+  const classes = useStyles();
   const [date, setDate] = useState<Date>(new Date());
   const [currentTaskTime, setCurrentTaskTime] = useState<
     Undefined<TaskTimeItemModel>
@@ -25,7 +25,7 @@ export default observer(function HoursView() {
   const timeItems = getTimeItems(tasks, date);
 
   return (
-    <Layout className="hours">
+    <Layout className={classes.hours}>
       <Space direction="vertical">
         <SelectDate date={date} onChange={setDate} />
         <TotalHours timeItems={timeItems} />
@@ -45,3 +45,19 @@ export default observer(function HoursView() {
     </Layout>
   );
 });
+
+const useStyles = createUseStyles({
+  hours: {
+    overflowY: 'auto',
+    padding: 12,
+
+    '& .ant-space-item': {
+      display: 'flex',
+      justifyContent: 'center',
+    },
+
+    '& .ant-card-body': {
+      padding: 8,
+    },
+  },
+});