From 20d74fe2fff00267f961a71cd32a33d567f2543a Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Thu, 1 Jul 2021 10:54:00 +0100
Subject: [PATCH] Fix project status styles for product owner

---
 src/pages/Project/index.tsx | 60 ++++++++++++++++++++++++++++---------
 1 file changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/pages/Project/index.tsx b/src/pages/Project/index.tsx
index cf2fd10..5263c71 100644
--- a/src/pages/Project/index.tsx
+++ b/src/pages/Project/index.tsx
@@ -692,10 +692,18 @@ const Project = () => {
                                 </Text>
                               </Box>
                             ) : (
-                              <Text variant='body' color={role || 'client'}>
-                                {project.state === 'OnReview' && 'On Review'}
-                                {project.state === 'Declined' && 'Declined'}
-                              </Text>
+                              <>
+                                {project.state === 'OnReview' && (
+                                  <Text variant='body' color='warning'>
+                                    {project.state}
+                                  </Text>
+                                )}
+                                {project.state === 'Declined' && (
+                                  <Text variant='body' color='error'>
+                                    {project.state}
+                                  </Text>
+                                )}
+                              </>
                             )}
                           </>
                         )}
@@ -760,11 +768,23 @@ const Project = () => {
                                 </Text>
                               </Box>
                             ) : (
-                              <Text variant='body' color={role || 'client'}>
-                                {project.state === 'OnReview' && 'On Review'}
-                                {project.state === 'Approved' && 'In Progress'}
-                                {project.state === 'Declined' && 'Declined'}
-                              </Text>
+                              <>
+                                {project.state === 'OnReview' && (
+                                  <Text variant='body' color='warning'>
+                                    {project.state}
+                                  </Text>
+                                )}
+                                {project.state === 'Declined' && (
+                                  <Text variant='body' color='error'>
+                                    {project.state}
+                                  </Text>
+                                )}
+                                {project.state === 'Approved' && (
+                                  <Text variant='body' color={role || 'client'}>
+                                    In Progress
+                                  </Text>
+                                )}
+                              </>
                             )}
                           </>
                         )}
@@ -829,11 +849,23 @@ const Project = () => {
                                 </Text>
                               </Box>
                             ) : (
-                              <Text variant='body' color={role || 'client'}>
-                                {project.state === 'OnReview' && 'On Review'}
-                                {project.state === 'Approved' && 'In Progress'}
-                                {project.state === 'Declined' && 'Declined'}
-                              </Text>
+                              <>
+                                {project.state === 'OnReview' && (
+                                  <Text variant='body' color='warning'>
+                                    {project.state}
+                                  </Text>
+                                )}
+                                {project.state === 'Declined' && (
+                                  <Text variant='body' color='error'>
+                                    {project.state}
+                                  </Text>
+                                )}
+                                {project.state === 'Approved' && (
+                                  <Text variant='body' color={role || 'client'}>
+                                    In Progress
+                                  </Text>
+                                )}
+                              </>
                             )}
                           </>
                         )}