🎨(front) rewrite the team main page

The first rewrite I made was using `div` instead of the proper
components.

src/frontend/apps/desk/src/pages/teams/index.tsx

@@ -3,6 +3,7 @@ import { useRouter as useNavigate } from 'next/navigation';
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Box, Text } from '@/components';
 import { useAuthStore } from '@/core/auth';
 import { useCunninghamTheme } from '@/cunningham';
 import { TeamsListView } from '@/features/teams/team-management/components/TeamsListView';
@@ -27,41 +28,37 @@ const Page: NextPageWithLayout = () => {
   };
 
   return (
-    <div aria-label="Teams panel" className="container">
+    <Box aria-label="Teams panel" className="container">
-      <div
+      <Box
         data-testid="regie-grid"
-        style={{
+        $background="white"
-          height: '100%',
+        $radius="4px"
-          justifyContent: 'center',
+        $direction="column"
-          width: '100%',
+        $css={`
-          padding: '16px',
+          height: 100%;
-          overflowX: 'hidden',
+          width: 100%;
-          overflowY: 'auto',
+          padding: 16px;
-          background: 'white',
+          overflow-x: hidden;
-          borderRadius: '4px',
+          overflow-y: auto;
-          border: `1px solid ${colorsTokens()['greyscale-200']}`,
+          border: 1px solid ${colorsTokens()['greyscale-200']};
-        }}
+        `}
       >
-        <h2
+        <Text
-          style={{ fontWeight: 700, fontSize: '1.5rem', marginBottom: '20px' }}
+          as="h2"
+          $css="font-weight: 700; font-size: 1.5rem; margin-bottom: 20px;"
         >
           {t('Teams')}
-        </h2>
+        </Text>
 
-        <div
+        <Box
           className="sm:block md:flex"
-          style={{
+          $direction="row"
-            display: 'flex',
+          $justify="space-between"
-            justifyContent: 'space-between',
+          $align="center"
-            alignItems: 'center',
+          $gap="1em"
-            marginBottom: '20px',
+          $css="margin-bottom: 20px;"
-            gap: '1em',
-          }}
         >
-          <div
+          <Box $css="width: calc(100% - 245px);" $flex="1">
-            style={{ width: 'calc(100% - 245px)' }}
-            className="c__input__wrapper__mobile"
-          >
             <Input
               style={{ width: '100%' }}
               label={t('Search a team')}
@@ -87,23 +84,18 @@ const Page: NextPageWithLayout = () => {
               value={searchValue}
               onChange={handleInputChange}
             />
-          </div>
+          </Box>
 
-          <div
+          <Box
             className="hidden md:flex"
-            style={{
+            $css={`
-              background: colors['greyscale-200'],
+              background: ${colors['greyscale-200']};
-              height: '32px',
+              height: 32px;
-              width: '1px',
+              width: 1px;
-            }}
+            `}
-          ></div>
+          ></Box>
 
-          <div
+          <Box>
-            className="block md:hidden"
-            style={{ marginBottom: '10px' }}
-          ></div>
-
-          <div>
             {can_create ? (
               <Button
                 data-testid="button-new-team"
@@ -124,8 +116,8 @@ const Page: NextPageWithLayout = () => {
                 </div>
               </Tooltip>
             )}
-          </div>
+          </Box>
-        </div>
+        </Box>
 
         {!can_create && (
           <p style={{ textAlign: 'center' }}>
@@ -134,8 +126,8 @@ const Page: NextPageWithLayout = () => {
         )}
 
         <TeamsListView querySearch={searchValue} />
-      </div>
+      </Box>
-    </div>
+    </Box>
   );
 };