💄(app-desk) highlight team selected

Highlight the selected team in the team list.

src/frontend/apps/desk/src/features/teams/__tests__/PanelTeams.test.tsx

@@ -8,6 +8,13 @@ import { PanelTeams } from '../components/PanelTeams';
 
 window.HTMLElement.prototype.scroll = function () {};
 
+jest.mock('next/router', () => ({
+  ...jest.requireActual('next/router'),
+  useRouter: () => ({
+    query: {},
+  }),
+}));
+
 describe('PanelTeams', () => {
   afterEach(() => {
     fetchMock.restore();

src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -15,9 +16,13 @@ interface TeamProps {
 export const PanelTeam = ({ team }: TeamProps) => {
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
+  const {
+    query: { id },
+  } = useRouter();
 
   // There is at least 1 owner in the team
   const hasMembers = team.accesses.length > 1;
+  const isActive = team.id === id;
 
   const commonProps = {
     className: 'p-t',
@@ -25,12 +30,40 @@ export const PanelTeam = ({ team }: TeamProps) => {
     style: {
       borderRadius: '10px',
       flexShrink: 0,
+      background: '#fff',
     },
   };
 
+  const activeStyle = `
+    border-right: 4px solid ${colorsTokens()['primary-600']};
+    background: ${colorsTokens()['primary-400']};
+    span{
+      color: ${colorsTokens()['primary-text']};
+    }
+  `;
+
+  const hoverStyle = `
+    &:hover{
+      border-right: 4px solid ${colorsTokens()['primary-400']};
+      background: ${colorsTokens()['primary-300']};
+      
+      span{
+        color: ${colorsTokens()['primary-text']};
+      }
+    }
+  `;
+
   return (
-    <Box as="li">
-      <StyledLink href={`/teams/${team.id}`}>
+    <Box
+      className="m-0"
+      as="li"
+      $css={`
+        transition: all 0.2s ease-in; 
+        border-right: 4px solid transparent;
+        ${isActive ? activeStyle : hoverStyle}
+      `}
+    >
+      <StyledLink className="p-s pt-t pb-t" href={`/teams/${team.id}`}>
         <Box $align="center" $direction="row" $gap="0.5rem">
           {hasMembers ? (
             <IconGroup
@@ -53,7 +86,12 @@ export const PanelTeam = ({ team }: TeamProps) => {
               }}
             />
           )}
-          <Text $weight="bold">{team.name}</Text>
+          <Text
+            $weight="bold"
+            $color={!hasMembers ? colorsTokens()['greyscale-600'] : undefined}
+          >
+            {team.name}
+          </Text>
         </Box>
       </StyledLink>
     </Box>

src/frontend/apps/desk/src/features/teams/components/PanelTeams.tsx

@@ -44,7 +44,7 @@ const PanelTeamsState = ({
 
   if (!teams?.length) {
     return (
-      <Box $justify="center">
+      <Box $justify="center" className="m-s">
         <Text as="p" className="mb-0 mt-0" $theme="greyscale" $variation="500">
           {t('0 group to display.')}
         </Text>
@@ -88,9 +88,8 @@ export const PanelTeams = () => {
           void fetchNextPage();
         }}
         scrollContainer={containerRef.current}
-        $gap="1rem"
         as="ul"
-        className="p-s mt-t"
+        className="p-0 mt-0"
         role="listbox"
       >
         <PanelTeamsState