[Hours] HoursCard hide button

Author: Dmitry Yadrikhinsky

src/components/CircleButton/CircleButton.tsx

@@ -2,9 +2,21 @@ import React from 'react';
 
 import './CircleButton.less';
 
-export default function CircleButton({ children, onClick }) {
+import cn from '../../helpers/ClassNameHelper';
+
+interface CircleButtonProps {
+  className: string;
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+export default function CircleButton({
+  className,
+  children,
+  onClick,
+}: CircleButtonProps) {
   return (
-    <span className="circle-button" onClick={onClick}>
+    <span className={cn('circle-button', className)} onClick={onClick}>
       {children}
     </span>
   );

src/helpers/ClassNameHelper.ts

@@ -0,0 +1,5 @@
+function cn(...classes: (string | undefined | null | boolean)[]) {
+  return classes.filter((i) => !!i).join(' ');
+}
+
+export default cn;

src/screens/hours/components/HoursCard/HoursCard.less

@@ -2,6 +2,23 @@
   width: 300px;
 }
 
-.hours-card__icon {
+.hours-card .ant-card-body {
+  display: flex;
+  flex-direction: row;
+}
+
+.hours-card__info {
+  flex: 1;
+}
+
+.hours-card__button {
+  display: none;
+}
+
+.hours-card:hover .hours-card__button {
+  display: inline-flex;
+}
+
+.anticon.hours-card__icon {
   color: white;
 }

src/screens/hours/components/HoursCard/HoursCard.tsx

@@ -37,11 +37,11 @@ export default observer(function HoursCard({ taskTime }: HoursCardProps) {
 
   return (
     <Card className="hours-card">
-      <div>
+      <div className="hours-card__info">
         <div>{task.title}</div>
         <div>{`${timeFormat(time[0])} - ${timeFormat(time[1])}`}</div>
       </div>
-      <CircleButton onClick={handleClick}>
+      <CircleButton onClick={handleClick} className="hours-card__button">
         {!task.active ? (
           <CaretRightFilled className="hours-card__icon" />
         ) : (