Added icons

Author: Yadro

package.json

@@ -246,6 +246,7 @@
     "history": "^5.0.0",
     "less": "4.1.1",
     "less-loader": "8.0.0",
+    "material-icons": "0.7.4",
     "mobx": "6.1.8",
     "mobx-react": "7.1.0",
     "moment": "2.29.1",

src/App.global.less

@@ -1,3 +1,11 @@
+@font-face {
+  font-family: "Material Icons";
+  src: url("~material-icons/iconfont/material-icons.woff2") format("woff2"),
+    url("~material-icons/iconfont/material-icons.woff2") format("woff");
+}
+
+@import '~material-icons/css/material-icons.min.css';
+
 #root {
   display: flex;
   flex: 1;

src/screens/hours/HoursScreen.tsx

@@ -45,9 +45,8 @@ export default observer(function HoursView() {
         <TotalHours timeItems={timeItems} />
         <div className={classes.cards}>
           {mapCurrentNext(timeItems, (item, next, index) => (
-            <div>
+            <div key={index}>
               <HoursCard
-                key={index}
                 taskTime={item}
                 onClick={(taskTime) => setCurrentTaskTime(taskTime)}
               />

src/screens/hours/components/TotalHours/TotalHours.tsx

@@ -9,13 +9,18 @@ import {
   getTime,
   msToTime,
 } from '../../../../helpers/DateTime';
+import { createUseStyles } from 'react-jss';
+import clsx from 'clsx';
 
 interface TotalHoursProps {
   timeItems: TaskTimeItemModel[];
 }
 
 const TotalHours = observer((props: TotalHoursProps) => {
   const { timeItems } = props;
+  const classes = useStyle();
+
+  console.log();
 
   const { durationMs, gapsMs } = TaskHooks.useTimeItemsDuration(timeItems);
   const startWorkingTime = TaskHooks.useStartWorkingTime(timeItems);
@@ -31,11 +36,26 @@ const TotalHours = observer((props: TotalHoursProps) => {
   return (
     <Space>
       <span>{getTime(startWorkingTime)}</span>
-      <span>{msToTime(durationMs, false)}</span>
-      <span>{msToTime(gapsMs, false)}</span>
-      <span>{getTime(estimatedWorkingTimeEnd)}</span>
+      <div>
+        <span className={clsx('mi mi-work-outline', classes.icon)} />
+        <span>{msToTime(durationMs, false)}</span>
+      </div>
+      <div>
+        <span className={clsx('mi mi-local-cafe', classes.icon)} />
+        <span>{msToTime(gapsMs, false)}</span>
+      </div>
+      <div>
+        <span className={clsx('mi mi-notifications', classes.icon)} />
+        <span>{getTime(estimatedWorkingTimeEnd)}</span>
+      </div>
     </Space>
   );
 });
 
+const useStyle = createUseStyles({
+  icon: {
+    fontSize: 18,
+  },
+});
+
 export default TotalHours;

yarn.lock

@@ -1098,9 +1098,9 @@
     regenerator-runtime "^0.13.4"
 
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
-  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -8247,6 +8247,11 @@ matcher@^3.0.0:
   dependencies:
     escape-string-regexp "^4.0.0"
 
+material-icons@0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/material-icons/-/material-icons-0.7.4.tgz#58ba816643e9e7792c73e6fac7fb62e3b841176d"
+  integrity sha512-ozoSJca1YMV+hLg1cL85j8C3EDs0LGjM+QENgtVM4Y1+I5SCy5A+i76P6EESXbFsylI+ZRODTWKii1UyHfpPAQ==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -12406,11 +12411,6 @@ universalify@^0.1.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
-universalify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
-  integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
-
 universalify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"