[Hours] Update style

Author: Dmitry Yadrikhinsky

src/components/CircleButton/CircleButton.tsx

@@ -5,7 +5,7 @@ import './CircleButton.less';
 import cn from '../../helpers/ClassNameHelper';
 
 interface CircleButtonProps {
-  className: string;
+  className?: string;
   onClick: () => void;
   children: React.ReactNode;
 }

src/screens/projects/components/TaskControl/TaskControl.less

@@ -5,25 +5,29 @@
   margin-left: 20px;
   padding: 8px;
   border-radius: 5px;
-  line-height: 14px;
+  line-height: 16px;
   color: white;
   background-color: #713A91;
 }
 
-.task-control--info {
+.task-control__info {
   display: inline-flex;
   flex: 1;
   flex-direction: column;
   margin-right: 8px;
   width: 140px;
 }
 
-.task-control--info span {
+.task-control__project {
+  font-size: 12px;
+}
+
+.task-control__info span {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.task-control--duration {
+.task-control__duration {
   margin-right: 8px;
 }

src/screens/projects/components/TaskControl/TaskControl.tsx

@@ -21,11 +21,11 @@ export default observer(function TaskControl() {
   if (task) {
     return (
       <span className="task-control">
-        <div className="task-control--info">
-          <span>{project?.title}</span>
+        <div className="task-control__info">
+          <span className="task-control__project">{project?.title}</span>
           <span>{task.title}</span>
         </div>
-        <span className="task-control--duration">{duration}</span>
+        <span className="task-control__duration">{duration}</span>
         <CircleButton onClick={() => tasksStore.endTimer(task)}>
           <PauseOutlined />
         </CircleButton>