feat: add my tasks list view

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

@@ -17,7 +17,7 @@ import {
 } from './Styles';
 
 function getPopupOptions(options?: PopupOptions) {
-  const popupOptions = {
+  const popupOptions: PopupOptionsInternal = {
     borders: true,
     diamondColor: theme.colors.bg.secondary,
     targetPadding: '10px',
@@ -40,6 +40,9 @@ function getPopupOptions(options?: PopupOptions) {
     if (options.diamondColor) {
       popupOptions.diamondColor = options.diamondColor;
     }
+    if (options.onClose) {
+      popupOptions.onClose = options.onClose;
+    }
   }
   return popupOptions;
 }
@@ -136,6 +139,7 @@ type PopupOptionsInternal = {
   targetPadding: string;
   diamondColor: string;
   showDiamond: boolean;
+  onClose?: () => void;
 };
 
 type PopupOptions = {
@@ -144,6 +148,7 @@ type PopupOptions = {
   width?: number | null;
   borders?: boolean | null;
   diamondColor?: string | null;
+  onClose?: () => void;
 };
 const defaultState = {
   isOpen: false,
@@ -239,7 +244,12 @@ export const PopupProvider: React.FC = ({ children }) => {
             top={currentState.top}
             targetPadding={currentState.options.targetPadding}
             left={currentState.left}
-            onClose={() => setState(defaultState)}
+            onClose={() => {
+              if (currentState.options && currentState.options.onClose) {
+                currentState.options.onClose();
+              }
+              setState(defaultState);
+            }}
             width={currentState.options.width}
           >
             {currentState.content}

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

@@ -84,6 +84,58 @@ export const colourStyles = {
   },
 };
 
+export const editorColourStyles = {
+  ...colourStyles,
+  input: (styles: any) => ({
+    ...styles,
+    color: '#000',
+  }),
+  singleValue: (styles: any) => {
+    return {
+      ...styles,
+      color: '#000',
+    };
+  },
+  menu: (styles: any) => {
+    return {
+      ...styles,
+      backgroundColor: '#fff',
+    };
+  },
+  indicatorsContainer: (styles: any) => {
+    return {
+      ...styles,
+      display: 'none',
+    };
+  },
+  container: (styles: any) => {
+    return {
+      ...styles,
+      display: 'flex',
+      flex: '1 1',
+    };
+  },
+  control: (styles: any, data: any) => {
+    return {
+      ...styles,
+      flex: '1 1',
+      backgroundColor: 'transparent',
+      boxShadow: 'none',
+      borderRadius: '0',
+      minHeight: '35px',
+      border: '0',
+      ':hover': {
+        boxShadow: 'none',
+        borderRadius: '0',
+      },
+      ':active': {
+        boxShadow: 'none',
+        borderRadius: '0',
+      },
+    };
+  },
+};
+
 const InputLabel = styled.span<{ width: string }>`
 width: ${props => props.width};
 padding-left: 0.7rem;

frontend/src/shared/components/TopNavbar/TopNavbar.stories.tsx

@@ -43,6 +43,7 @@ export const Default = () => {
         onDashboardClick={action('open dashboard')}
         onRemoveFromBoard={action('remove project')}
         onProfileClick={action('profile click')}
+        onMyTasksClick={action('profile click')}
       />
     </>
   );

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

@@ -179,6 +179,7 @@ type NavBarProps = {
   onRemoveFromBoard?: (userID: string) => void;
   onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
   onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
+  onMyTasksClick: () => void;
 };
 
 const NavBar: React.FC<NavBarProps> = ({
@@ -201,6 +202,7 @@ const NavBar: React.FC<NavBarProps> = ({
   onProfileClick,
   onNotificationClick,
   onDashboardClick,
+  onMyTasksClick,
   user,
   projectMembers,
   onOpenSettings,
@@ -306,7 +308,7 @@ const NavBar: React.FC<NavBarProps> = ({
           <IconContainer onClick={() => onDashboardClick()}>
             <HomeDashboard width={20} height={20} />
           </IconContainer>
-          <IconContainer disabled onClick={NOOP}>
+          <IconContainer onClick={() => onMyTasksClick()}>
             <CheckCircle width={20} height={20} />
           </IconContainer>
           <IconContainer disabled onClick={NOOP}>