From a3958595cd59a2117f5e42dc31223602d1384b0d Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Tue, 23 Jun 2020 20:46:45 -0500
Subject: [PATCH] change: disable unimplemented buttons

---
 web/src/Projects/Project/index.tsx            | 21 ++++++++++++-------
 web/src/shared/components/TopNavbar/Styles.ts |  9 +++++++-
 web/src/shared/components/TopNavbar/index.tsx |  4 ++--
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/web/src/Projects/Project/index.tsx b/web/src/Projects/Project/index.tsx
index 555c566..6f4104f 100644
--- a/web/src/Projects/Project/index.tsx
+++ b/web/src/Projects/Project/index.tsx
@@ -3,7 +3,7 @@ import React, { useState, useRef, useContext, useEffect } from 'react';
 import { MENU_TYPES } from 'shared/components/TopNavbar';
 import updateApolloCache from 'shared/utils/cache';
 import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
-import styled from 'styled-components/macro';
+import styled, { css } from 'styled-components/macro';
 import { Bolt, ToggleOn, Tags, CheckCircle, Sort, Filter } from 'shared/icons';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { useParams, Route, useRouteMatch, useHistory, RouteComponentProps } from 'react-router-dom';
@@ -238,7 +238,7 @@ const ProjectActions = styled.div`
   align-items: center;
 `;
 
-const ProjectAction = styled.div`
+const ProjectAction = styled.div<{ disabled?: boolean }>`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -252,6 +252,13 @@ const ProjectAction = styled.div`
   &:hover {
     color: rgba(${props => props.theme.colors.text.secondary});
   }
+  ${props =>
+    props.disabled &&
+    css`
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+    `}
 `;
 
 const ProjectActionText = styled.span`
@@ -551,15 +558,15 @@ const Project = () => {
         />
         <ProjectBar>
           <ProjectActions>
-            <ProjectAction>
+            <ProjectAction disabled>
               <CheckCircle width={13} height={13} />
               <ProjectActionText>All Tasks</ProjectActionText>
             </ProjectAction>
-            <ProjectAction>
+            <ProjectAction disabled>
               <Filter width={13} height={13} />
               <ProjectActionText>Filter</ProjectActionText>
             </ProjectAction>
-            <ProjectAction>
+            <ProjectAction disabled>
               <Sort width={13} height={13} />
               <ProjectActionText>Sort</ProjectActionText>
             </ProjectAction>
@@ -582,11 +589,11 @@ const Project = () => {
               <Tags width={13} height={13} />
               <ProjectActionText>Labels</ProjectActionText>
             </ProjectAction>
-            <ProjectAction>
+            <ProjectAction disabled>
               <ToggleOn width={13} height={13} />
               <ProjectActionText>Fields</ProjectActionText>
             </ProjectAction>
-            <ProjectAction>
+            <ProjectAction disabled>
               <Bolt width={13} height={13} />
               <ProjectActionText>Rules</ProjectActionText>
             </ProjectAction>
diff --git a/web/src/shared/components/TopNavbar/Styles.ts b/web/src/shared/components/TopNavbar/Styles.ts
index 5330e4f..1c26cd4 100644
--- a/web/src/shared/components/TopNavbar/Styles.ts
+++ b/web/src/shared/components/TopNavbar/Styles.ts
@@ -57,9 +57,16 @@ export const ProfileNameWrapper = styled.div`
   line-height: 1.25;
 `;
 
-export const IconContainer = styled.div`
+export const IconContainer = styled.div<{ disabled?: boolean }>`
   margin-right: 20px;
   cursor: pointer;
+  ${props =>
+    props.disabled &&
+    css`
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+    `}
 `;
 
 export const ProfileNamePrimary = styled.div`
diff --git a/web/src/shared/components/TopNavbar/index.tsx b/web/src/shared/components/TopNavbar/index.tsx
index 2c568b7..90af25d 100644
--- a/web/src/shared/components/TopNavbar/index.tsx
+++ b/web/src/shared/components/TopNavbar/index.tsx
@@ -229,13 +229,13 @@ const NavBar: React.FC<NavBarProps> = ({
           <IconContainer onClick={onDashboardClick}>
             <HomeDashboard width={20} height={20} />
           </IconContainer>
-          <IconContainer>
+          <IconContainer disabled>
             <CheckCircle width={20} height={20} />
           </IconContainer>
           <IconContainer onClick={onNotificationClick}>
             <Bell color="#c2c6dc" size={20} />
           </IconContainer>
-          <IconContainer>
+          <IconContainer disabled>
             <BarChart width={20} height={20} />
           </IconContainer>