From 63a72aa0b3398d4afed9aad000ffbba95b1a6709 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A1tia=20Antunes?= <c.antunes@kigroup.de>
Date: Mon, 16 Jan 2023 15:14:50 +0000
Subject: [PATCH] fix: dashboard links (#873)

---
 .../src/components/Dashboard/Tiles/index.tsx  | 142 ++++++++++++------
 .../src/components/Dashboard/Tiles/styles.tsx |   3 +
 frontend/src/pages/boards/newRegularBoard.tsx |  15 +-
 3 files changed, 103 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/Dashboard/Tiles/index.tsx b/frontend/src/components/Dashboard/Tiles/index.tsx
index 88da486b9..48d47f35c 100644
--- a/frontend/src/components/Dashboard/Tiles/index.tsx
+++ b/frontend/src/components/Dashboard/Tiles/index.tsx
@@ -1,6 +1,8 @@
 import Icon from '@/components/icons/Icon';
 import Text from '@/components/Primitives/Text';
 import { HeaderInfo } from '@/types/dashboard/header.info';
+import { BOARDS_ROUTE, TEAMS_ROUTE, USERS_ROUTE } from '@/utils/routes';
+import Link from 'next/link';
 import { GridContainer, StyledTile } from './styles';
 
 type TilesProps = {
@@ -9,58 +11,100 @@ type TilesProps = {
 
 const DashboardTiles = ({ data }: TilesProps) => (
   <GridContainer>
-    <StyledTile>
-      <Text color="white" size="md">
-        Your boards
-      </Text>
-      <h3>{data.boardsCount}</h3>
+    <Link href={`${BOARDS_ROUTE}`}>
+      <StyledTile>
+        <Text color="white" size="md">
+          Your boards
+        </Text>
+        <h3>{data.boardsCount}</h3>
 
-      <Icon
-        name="blob-purple"
-        css={{
-          position: 'absolute',
-          right: '-1px',
-          top: '0',
-          bottom: '-1px',
-          width: '$100',
-          height: '$100',
-        }}
-      />
-    </StyledTile>
-    <StyledTile>
-      <Text color="white" size="md">
-        Your teams
-      </Text>
-      <h3>{data?.teamsCount}</h3>
+        <Icon
+          name="blob-purple"
+          css={{
+            position: 'absolute',
+            right: '-1px',
+            top: '0',
+            bottom: '-1px',
+            width: '$100',
+            height: '$100',
+          }}
+        />
+        <Icon
+          name="arrow-long-right"
+          css={{
+            position: 'absolute',
+            right: '20px',
+            top: '50%',
+            bottom: '-1px',
+            width: '$24',
+            height: '$24',
+            color: '$black',
+          }}
+        />
+      </StyledTile>
+    </Link>
+    <Link href={`${TEAMS_ROUTE}`}>
+      <StyledTile>
+        <Text color="white" size="md">
+          Your teams
+        </Text>
+        <h3>{data?.teamsCount}</h3>
 
-      <Icon
-        name="blob-blue"
-        css={{
-          position: 'absolute',
-          right: '-1px',
-          top: '0px',
-          width: '126px',
-          height: '$90',
-        }}
-      />
-    </StyledTile>
-    <StyledTile>
-      <Text color="white" size="md">
-        Active Members
-      </Text>
-      <h3>{data?.usersCount}</h3>
+        <Icon
+          name="blob-blue"
+          css={{
+            position: 'absolute',
+            right: '-1px',
+            top: '0px',
+            width: '126px',
+            height: '$90',
+          }}
+        />
+        <Icon
+          name="arrow-long-right"
+          css={{
+            position: 'absolute',
+            right: '20px',
+            top: '50%',
+            bottom: '-1px',
+            width: '$24',
+            height: '$24',
+            color: '$black',
+          }}
+        />
+      </StyledTile>
+    </Link>
+    <Link href={`${USERS_ROUTE}`}>
+      <StyledTile>
+        <Text color="white" size="md">
+          Active Members
+        </Text>
+        <h3>{data?.usersCount}</h3>
 
-      <Icon
-        name="blob-yellow"
-        css={{
-          position: 'absolute',
-          right: '-1px',
-          bottom: '-1px',
-          width: '127px',
-          height: '76px',
-        }}
-      />
-    </StyledTile>
+        <Icon
+          name="blob-yellow"
+          css={{
+            position: 'absolute',
+            right: '-1px',
+            bottom: '-1px',
+            width: '127px',
+            height: '76px',
+          }}
+        />
+        <Icon
+          name="arrow-long-right"
+          css={{
+            position: 'absolute',
+            right: '20px',
+            top: '50%',
+            bottom: '-1px',
+            width: '$24',
+            height: '$24',
+            color: '$black',
+          }}
+        />
+      </StyledTile>
+    </Link>
   </GridContainer>
 );
 
diff --git a/frontend/src/components/Dashboard/Tiles/styles.tsx b/frontend/src/components/Dashboard/Tiles/styles.tsx
index 66619e495..9975275d6 100644
--- a/frontend/src/components/Dashboard/Tiles/styles.tsx
+++ b/frontend/src/components/Dashboard/Tiles/styles.tsx
@@ -25,6 +25,9 @@ const StyledTile = styled('div', {
     lineHeight: '$36',
     fontWeight: '$bold',
   },
+  '@hover': {
+    cursor: 'pointer',
+  },
 });
 
 const TileArrow = styled(Icon, {
diff --git a/frontend/src/pages/boards/newRegularBoard.tsx b/frontend/src/pages/boards/newRegularBoard.tsx
index 77828c9eb..d16dfa998 100644
--- a/frontend/src/pages/boards/newRegularBoard.tsx
+++ b/frontend/src/pages/boards/newRegularBoard.tsx
@@ -309,14 +309,6 @@ const NewRegularBoard: NextPage = () => {
           ) : (
             <ContentSelectContainer>
               <Flex gap={16} direction="column">
-                <BoxRowContainer
-                  iconName="blob-settings"
-                  title="Configure board"
-                  description="Select team or participants, configure your board and schedule a date and time."
-                  active
-                  handleSelect={addNewRegularBoard}
-                />
-
                 <BoxRowContainer
                   iconName="blob-arrow-right"
                   title="Quick create"
@@ -324,6 +316,13 @@ const NewRegularBoard: NextPage = () => {
                   handleSelect={saveEmptyBoard}
                   active
                 />
+                <BoxRowContainer
+                  iconName="blob-settings"
+                  title="Configure board"
+                  description="Select team or participants, configure your board and schedule a date and time."
+                  active
+                  handleSelect={addNewRegularBoard}
+                />
               </Flex>
             </ContentSelectContainer>
           )}