feat: add task details

frontend/src/shared/components/Modal/Styles.ts

@@ -15,18 +15,20 @@ export const ScrollOverlay = styled.div`
 export const ClickableOverlay = styled.div`
   min-height: 100%;
   background: rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: center;
 `;
 
-export const StyledModal = styled.div<{ width: number }>`
-  display: inline-block;
+export const StyledModal = styled.div<{ width: number; height: number }>`
   position: relative;
-  margin: 48px 0 80px;
-  width: 100%;
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+  left: 0;
+  right: 0;
+  top: 48px;
+  bottom: 16px;
+  margin: auto;
+
   background: #262c49;
-  max-width: ${props => props.width}px;
   vertical-align: middle;
-  border-radius: 3px;
+  border-radius: 6px;
   ${mixin.boxShadowMedium}
 `;

frontend/src/shared/components/Modal/index.tsx

@@ -1,9 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
-
+import useWindowSize from 'shared/hooks/useWindowSize';
+import styled from 'styled-components';
+import { Cross } from 'shared/icons';
 import { ScrollOverlay, ClickableOverlay, StyledModal } from './Styles';
 
 const $root: HTMLElement = document.getElementById('root')!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
@@ -14,21 +15,50 @@ type ModalProps = {
   renderContent: () => JSX.Element;
 };
 
-const Modal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
+function getAdjustedHeight(height: number) {
+  if (height >= 900) {
+    return height - 150;
+  }
+  if (height >= 800) {
+    return height - 125;
+  }
+  return height - 70;
+}
+
+const CloseIcon = styled(Cross)`
+  position: absolute;
+  top: 16px;
+  right: -32px;
+  cursor: pointer;
+  fill: rgba(${props => props.theme.colors.text.primary});
+  &:hover {
+    fill: rgba(${props => props.theme.colors.text.secondary});
+  }
+`;
+
+const InnerModal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
   const $modalRef = useRef<HTMLDivElement>(null);
   const $clickableOverlayRef = useRef<HTMLDivElement>(null);
+  const [_width, height] = useWindowSize();
 
   useOnOutsideClick($modalRef, true, tellParentToClose, $clickableOverlayRef);
   useOnEscapeKeyDown(true, tellParentToClose);
 
-  return ReactDOM.createPortal(
+  return (
     <ScrollOverlay>
       <ClickableOverlay ref={$clickableOverlayRef}>
-        <StyledModal width={width} ref={$modalRef}>
+        <StyledModal width={width} height={getAdjustedHeight(height)} ref={$modalRef}>
           {renderContent()}
+          <CloseIcon onClick={() => tellParentToClose()} width={20} height={20} />
         </StyledModal>
       </ClickableOverlay>
-    </ScrollOverlay>,
+    </ScrollOverlay>
+  );
+};
+
+const Modal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
+  return ReactDOM.createPortal(
+    <InnerModal width={width} onClose={tellParentToClose} renderContent={renderContent} />,
     $root,
   );
 };