Style of HoursByTask

Author: Dmitry Yadrikhinsky

.erb/configs/webpack.config.renderer.dev.babel.js

@@ -155,6 +155,7 @@ export default merge(baseConfig, {
               lessOptions: {
                 modifyVars: {
                   'primary-color': 'purple',
+                  'border-radius-base': '5px',
                 },
                 javascriptEnabled: true,
               },

src/components/IconTile/IconTile.less

@@ -0,0 +1,9 @@
+.icon-tile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30px;
+  width: 30px;
+  padding: 8px;
+  border-radius: 5px;
+}

src/components/IconTile/IconTile.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import './IconTile.less';
+import cn from '../../helpers/ClassNameHelper';
+
+interface IconTileProps {
+  children: React.ReactNode;
+  backgroundColor: string;
+  className: string;
+}
+
+export default function IconTile({
+  className,
+  children,
+  backgroundColor,
+}: IconTileProps) {
+  return (
+    <span className={cn('icon-tile', className)} style={{ backgroundColor }}>
+      {children}
+    </span>
+  );
+}

src/screens/projects/components/HoursByTask/HoursByTask.less

@@ -1,27 +1,40 @@
+.hours-by-task-container > .ant-card-body {
+  border-left: 2px solid #F5AB28;
+  padding: 8px;
+}
+
 .hours-by-task {
   width: 100%;
-}
 
-.hours-by-task .label {
-  margin-left: 8px;
-}
+  .bell {
+    //position: absolute;
+    //right: 8px
+  }
 
-.hours-item .ant-card-body {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 8px;
-}
+  .label {
+    margin-left: 8px;
+  }
 
-.space {
-  flex: 1;
-}
+  .hours-item .ant-card-body {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 8px;
+  }
 
-.hours-range {
-  font-size: 10px;
-}
+  .date {
+    margin-left: 8px;
+    font-size: 11px;
+    font-weight: bold;
+  }
+
+  .hours-range {
+    font-size: 10px;
+  }
+
+  .duration {
+    font-size: 11px;
+    font-weight: bold;
+  }
 
-.duration {
-  font-size: 11px;
-  font-weight: bold;
 }

src/screens/projects/components/HoursByTask/HoursByTask.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Space } from 'antd';
-import { FieldTimeOutlined } from '@ant-design/icons';
+import { Card, Space } from 'antd';
+import { BellFilled } from '@ant-design/icons';
 import isSameDay from 'date-fns/isSameDay';
 import format from 'date-fns/format';
 
@@ -9,6 +9,7 @@ import './HoursByTask.less';
 import TaskModel from '../../../../models/TaskModel';
 import { mapLastCurrent } from '../../../../helpers/IterateLastCurrent';
 import HoursItem from './HoursItem';
+import IconTile from '../../../../components/IconTile/IconTile';
 
 function dateFormat(date: Date) {
   return format(date, 'dd.MM.yyyy');
@@ -20,23 +21,24 @@ interface HoursByTaskProps {
 
 export default function HoursByTask({ task }: HoursByTaskProps) {
   return (
-    <Space direction="vertical" className="hours-by-task">
-      <div>
-        <FieldTimeOutlined />
-        <span className="label">Hours:</span>
-      </div>
-      {task?.time.length === 0 && <div>No billed hours</div>}
-      {mapLastCurrent(task?.time || [], (last, range) => {
-        if (!last || !isSameDay(last[0], range[0])) {
-          return (
-            <div>
-              <div>{dateFormat(range[0])}</div>
-              <HoursItem range={range} />
-            </div>
-          );
-        }
-        return <HoursItem range={range} />;
-      })}
-    </Space>
+    <Card className="hours-by-task-container">
+      <Space direction="vertical" className="hours-by-task">
+        <IconTile backgroundColor="#F5AB28" className="bell">
+          <BellFilled style={{ color: 'white' }} />
+        </IconTile>
+        {task?.time.length === 0 && <div>No billed hours</div>}
+        {mapLastCurrent(task?.time || [], (last, range) => {
+          if (!last || !isSameDay(last[0], range[0])) {
+            return (
+              <div>
+                <div className="date">{dateFormat(range[0])}</div>
+                <HoursItem range={range} />
+              </div>
+            );
+          }
+          return <HoursItem range={range} />;
+        })}
+      </Space>
+    </Card>
   );
 }

src/screens/projects/components/HoursByTask/HoursItem.tsx

@@ -29,7 +29,7 @@ export default function HoursItem({ range }: HoursItemProps) {
   return (
     <Card className="hours-item">
       <div className="hours-range">{hoursRangeFormat(range)}</div>
-      <div className="space" />
+      <div className="flex-1" />
       <div className="duration">{getDuration(range)}</div>
     </Card>
   );