feat: add Tiles responsiveness

frontend/src/components/Dashboard/Tiles/Tile/Tile.tsx

@@ -1,7 +1,11 @@
 import Link from 'next/link';
 
-import { StyledTile, TileArrow, TileBlob } from '@/components/Dashboard/Tiles/Tile/styles';
-import Flex from '@/components/Primitives/Layout/Flex/Flex';
+import {
+  StyledTile,
+  TileArrow,
+  TileBlob,
+  TileTextContainer,
+} from '@/components/Dashboard/Tiles/Tile/styles';
 import Text from '@/components/Primitives/Text/Text';
 
 export type TileProps = {
@@ -11,35 +15,19 @@ export type TileProps = {
   color: 'purple' | 'blue' | 'yellow';
 };
 
-const Tile = ({ link, title, count, color }: TileProps) => {
-  const styles =
-    color === 'yellow'
-      ? {
-          width: '127px',
-          height: '76px',
-          bottom: '-1px',
-        }
-      : {
-          width: '100px',
-          height: '100px',
-          top: '0',
-        };
-
-  return (
-    <Link href={link}>
-      <StyledTile data-testid="tile">
-        <Flex css={{ width: '80%', py: '$20', px: '$24' }} direction="column">
-          <Text color="white" size="md">
-            {title}
-          </Text>
-          <h3>{count}</h3>
-        </Flex>
-
-        <TileBlob css={styles} name={`blob-${color}`} />
-        <TileArrow name="arrow-long-right" />
-      </StyledTile>
-    </Link>
-  );
-};
+const Tile = ({ link, title, count, color }: TileProps) => (
+  <Link href={link}>
+    <StyledTile align="center" data-testid="tile" justify="between">
+      <TileBlob color={color} name={`blob-${color}`} />
+      <TileTextContainer direction="column">
+        <Text color="white" css={{ whiteSpace: 'nowrap' }} size="md">
+          {title}
+        </Text>
+        <h3>{count}</h3>
+      </TileTextContainer>
+      <TileArrow name="arrow-long-right" />
+    </StyledTile>
+  </Link>
+);
 
 export default Tile;

frontend/src/components/Dashboard/Tiles/Tile/styles.tsx

@@ -1,34 +1,62 @@
 import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
 import { styled } from '@/styles/stitches/stitches.config';
 
-const StyledTile = styled('div', {
+const StyledTile = styled(Flex, {
   position: 'relative',
   borderRadius: '$12',
   color: '$primary50',
   backgroundColor: '$primary800',
+  overflow: 'hidden',
+
+  py: '$20',
+  px: '$24',
+
   h3: {
     margin: 0,
     color: 'white',
     fontSize: '$32',
     lineHeight: '$36',
     fontWeight: '$bold',
   },
+
   '@hover': {
     cursor: 'pointer',
   },
 });
 
 const TileArrow = styled(Icon, {
-  position: 'absolute',
-  right: '$20',
-  top: '50%',
-  bottom: '$-1',
   color: '$black',
+  position: 'relative', // Force it to be above TileBlob
+  alignSelf: 'flex-end',
 });
 
 const TileBlob = styled(Icon, {
   position: 'absolute',
   right: '$-1',
+
+  width: '$100 !important',
+  height: '$100 !important',
+
+  top: 0,
+
+  variants: {
+    color: {
+      yellow: {
+        width: '$127 !important',
+        height: '$76 !important',
+        bottom: 0,
+        top: 'unset',
+      },
+      purple: {},
+      blue: {},
+    },
+  },
+});
+
+const TileTextContainer = styled(Flex, {
+  position: 'relative', // Force it to be above TileBlob
+  textShadow: '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black', // Text borders so that it can be visible when above the TileBlob
 });
 
-export { StyledTile, TileArrow, TileBlob };
+export { StyledTile, TileArrow, TileBlob, TileTextContainer };

frontend/src/components/Dashboard/Tiles/Tiles.tsx

@@ -1,5 +1,7 @@
-import { TileContainer } from '@/components/Dashboard/Tiles/styles';
+import React from 'react';
+
 import Tile from '@/components/Dashboard/Tiles/Tile/Tile';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
 import { HeaderInfo } from '@/types/dashboard/header.info';
 import { BOARDS_ROUTE, TEAMS_ROUTE, USERS_ROUTE } from '@/utils/routes';
 
@@ -8,11 +10,11 @@ export type TilesProps = {
 };
 
 const Tiles = ({ data }: TilesProps) => (
-  <TileContainer>
+  <Flex as="section" css={{ '> *': { flex: 1 } }} gap="26" wrap="wrap">
     <Tile color="purple" count={data.boardsCount} link={BOARDS_ROUTE} title="Your boards" />
     <Tile color="blue" count={data.teamsCount} link={TEAMS_ROUTE} title="Your teams" />
     <Tile color="yellow" count={data.usersCount} link={USERS_ROUTE} title="Active Members" />
-  </TileContainer>
+  </Flex>
 );
 
 export default Tiles;