fix: dashboard links (#873)

xgeekshq · Jan 16, 2023 · 63a72aa · 63a72aa
1 parent 82528b1
commit 63a72aa
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 57 deletions.
diff --git 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
@@ -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
@@ -309,21 +309,20 @@ 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"
                   description="Jump the settings and just create a board. All configurations can still be done within the board itself."
                   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>
           )}