Duration icon

Author: Dmitry Yadrikhinsky

src/App.global.less

@@ -8,3 +8,9 @@
   display: flex;
   align-items: center;
 }
+
+.flex-1 {
+  flex: 1
+}
+
+@purple: #713A91;

src/components/IconTile/IconTile.tsx

@@ -6,7 +6,7 @@ import cn from '../../helpers/ClassNameHelper';
 interface IconTileProps {
   children: React.ReactNode;
   backgroundColor: string;
-  className: string;
+  className?: string;
 }
 
 export default function IconTile({

src/screens/Main.less

@@ -1,3 +1 @@
-.flex-1 {
-  flex: 1
-}
+

src/screens/projects/components/DrawerTask/DrawerTask.less

@@ -1,3 +1,13 @@
 .drawer-task {
   width: 100%;
+
+  .duration {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .duration-value {
+    padding-left: 5px;
+  }
 }

src/screens/projects/components/DrawerTask/DrawerTask.tsx

@@ -1,14 +1,15 @@
 import React, { useMemo } from 'react';
 import { Checkbox, Drawer, Input, Space } from 'antd';
 import { observer } from 'mobx-react';
-import { FieldTimeOutlined } from '@ant-design/icons';
+import { ClockCircleOutlined } from '@ant-design/icons';
 
 import './DrawerTask.less';
 
 import TaskModel from '../../../../models/TaskModel';
 import rootStore from '../../../../services/RootStore';
 import { useTaskDuration } from '../../../../hooks/TaskHooks';
 import HoursByTask from '../HoursByTask/HoursByTask';
+import IconTile from '../../../../components/IconTile/IconTile';
 
 const { projectStore } = rootStore;
 
@@ -67,9 +68,11 @@ export default observer(function DrawerTask({
             }
           }}
         />
-        <div>
-          <FieldTimeOutlined />
-          <span>: {duration}</span>
+        <div className="duration">
+          <IconTile backgroundColor="#713A91">
+            <ClockCircleOutlined style={{ color: 'white ' }} />
+          </IconTile>
+          <span className="duration-value">{duration}</span>
         </div>
 
         <HoursByTask task={task} />

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

@@ -1,3 +1,5 @@
+@import '../../../../App.global';
+
 .task-control {
   display: inline-flex;
   align-items: center;
@@ -7,7 +9,7 @@
   border-radius: 5px;
   line-height: 16px;
   color: white;
-  background-color: #713A91;
+  background-color: @purple;
 }
 
 .task-control__info {