feature: add checklist

web/src/shared/components/PopupMenu/LabelEditor.tsx

@@ -44,7 +44,7 @@ const LabelManager = ({ labelColors, label, onLabelEdit, onLabelDelete }: Props)
               setCurrentColor(labelColor);
             }}
           >
-            {currentColor && labelColor.id === currentColor.id && <Checkmark color="#fff" size={12} />}
+            {currentColor && labelColor.id === currentColor.id && <Checkmark width={12} height={12} />}
           </LabelBox>
         ))}
       </div>

web/src/shared/components/PopupMenu/LabelManager.tsx

@@ -72,7 +72,7 @@ const LabelManager: React.FC<Props> = ({ labels, taskLabels, onLabelToggle, onLa
                     {label.name}
                     {taskLabels && taskLabels.find(t => t.projectLabel.id === label.id) && (
                       <ActiveIcon>
-                        <Checkmark color="#fff" />
+                        <Checkmark width={16} height={16} />
                       </ActiveIcon>
                     )}
                   </CardLabel>

web/src/shared/components/PopupMenu/PopupMenu.stories.tsx

@@ -265,6 +265,7 @@ export const DueDateManagerPopup = () => {
       {popupData.isOpen && (
         <PopupMenu title="Due Date" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
           <DueDateManager
+            onRemoveDueDate={action('remove due date')}
             task={{
               id: '1',
               taskGroup: { name: 'General', id: '1', position: 1 },

web/src/shared/components/PopupMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, createContext, RefObject, useState, useContext } from 'react';
+import React, { useRef, createContext, RefObject, useState, useContext, useEffect } from 'react';
 import { Cross, AngleLeft } from 'shared/icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import { createPortal } from 'react-dom';
@@ -36,10 +36,19 @@ type PopupContainerProps = {
 };
 
 const PopupContainer: React.FC<PopupContainerProps> = ({ width, top, left, onClose, children, invert }) => {
-  const $containerRef = useRef();
+  const $containerRef = useRef<HTMLDivElement>(null);
+  const [currentTop, setCurrentTop] = useState(top);
   useOnOutsideClick($containerRef, true, onClose, null);
+  useEffect(() => {
+    if ($containerRef && $containerRef.current) {
+      const bounding = $containerRef.current.getBoundingClientRect();
+      if (bounding.bottom > (window.innerHeight || document.documentElement.clientHeight)) {
+        setCurrentTop(44);
+      }
+    }
+  }, []);
   return (
-    <Container width={width ?? 316} left={left} top={top} ref={$containerRef} invert={invert}>
+    <Container width={width ?? 316} left={left} top={currentTop} ref={$containerRef} invert={invert}>
       {children}
     </Container>
   );
@@ -91,11 +100,12 @@ export const PopupProvider: React.FC = ({ children }) => {
   const show = (target: RefObject<HTMLElement>, content: JSX.Element, width?: number | string) => {
     if (target && target.current) {
       const bounds = target.current.getBoundingClientRect();
+      const top = bounds.top + bounds.height;
       if (bounds.left + 304 + 30 > window.innerWidth) {
         setState({
           isOpen: true,
           left: bounds.left + bounds.width,
-          top: bounds.top + bounds.height,
+          top,
           invert: true,
           currentTab: 0,
           previousTab: 0,
@@ -106,7 +116,7 @@ export const PopupProvider: React.FC = ({ children }) => {
         setState({
           isOpen: true,
           left: bounds.left,
-          top: bounds.top + bounds.height,
+          top,
           invert: false,
           currentTab: 0,
           previousTab: 0,
@@ -176,7 +186,7 @@ type Props = {
 };
 
 const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader, children, onPrevious }) => {
-  const $containerRef = useRef();
+  const $containerRef = useRef<HTMLDivElement>(null);
   useOnOutsideClick($containerRef, true, onClose, null);
 
   return (
@@ -189,13 +199,13 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
         )}
         {noHeader ? (
           <CloseButton onClick={() => onClose()}>
-            <Cross color="#c2c6dc" />
+            <Cross width={16} height={16} />
           </CloseButton>
         ) : (
           <Header>
             <HeaderTitle>{title}</HeaderTitle>
             <CloseButton onClick={() => onClose()}>
-              <Cross color="#c2c6dc" />
+              <Cross width={16} height={16} />
             </CloseButton>
           </Header>
         )}
@@ -230,7 +240,7 @@ export const Popup: React.FC<PopupProps> = ({ title, onClose, tab, children }) =
         )}
         {onClose && (
           <CloseButton onClick={() => onClose()}>
-            <Cross color="#c2c6dc" />
+            <Cross width={16} height={16} />
           </CloseButton>
         )}
         <Content>{children}</Content>