teams page redesign

src/Components/Grid/Grid.less

@@ -1,4 +1,3 @@
 .grid {
     display: grid;
-    align-items: baseline;
 }

src/Components/Teams/Teams.tsx

@@ -4,21 +4,15 @@ import { Grid } from "../Grid/Grid";
 import { TeamEditor } from "./TeamEditor/TeamEditor";
 import { useGetUserTeamsQuery } from "../../services/TeamsApi";
 import { useModal } from "../../hooks/useModal";
-import { TeamWithUsers } from "../../Containers/TeamWithUsers";
+import { TeamsList } from "../TeamsList/TeamsList";
 
 export function Teams(): ReactElement {
     const { isModalOpen, openModal, closeModal } = useModal();
     const { data: teams } = useGetUserTeamsQuery();
 
     return (
         <>
-            {teams?.map((team) => {
-                return (
-                    <div key={team.id}>
-                        <TeamWithUsers team={team} />
-                    </div>
-                );
-            })}
+            <TeamsList teams={teams} />
             <Grid columns="100px" margin="24px 0">
                 <Button onClick={openModal}>Add team</Button>
             </Grid>

src/Components/TeamsList/TeamsList.tsx

@@ -0,0 +1,29 @@
+import React, { FC, useState } from "react";
+import { TeamCard } from "../../Components/Teams/TeamCard/TeamCard";
+import { Grid } from "../../Components/Grid/Grid";
+import { EmptyListText } from "../../Components/TriggerInfo/Components/EmptyListMessage/EmptyListText";
+import { Team } from "../../Domain/Team";
+
+export const TeamsList: FC<{ teams?: Team[] }> = ({ teams }) => {
+    const [deletingTeam, setDeletingTeam] = useState<Team | null>(null);
+
+    return (
+        <>
+            {teams?.length ? (
+                <Grid gap="16px" columns="repeat(auto-fit, minmax(300px, 1fr))">
+                    {teams?.map((team) => (
+                        <TeamCard
+                            key={team.id}
+                            team={team}
+                            isDeleting={deletingTeam?.id === team.id}
+                            onOpenDelete={() => setDeletingTeam(team)}
+                            onCloseDelete={() => setDeletingTeam(null)}
+                        />
+                    ))}
+                </Grid>
+            ) : (
+                <EmptyListText text={"There are no teams"} />
+            )}
+        </>
+    );
+};

src/Containers/AllTeamsContainer/AllTeamsContainer.tsx

@@ -4,21 +4,14 @@ import { setDocumentTitle } from "../../helpers/setDocumentTitle";
 import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { UIState } from "../../store/selectors";
 import { useGetAllTeamsQuery } from "../../services/TeamsApi";
-import classNames from "classnames/bind";
-import { Team } from "../../Domain/Team";
 import { Flexbox } from "../../Components/Flexbox/FlexBox";
 import { SearchInput } from "../../Components/TriggerInfo/Components/SearchInput/SearchInput";
 import { useDebounce } from "../../hooks/useDebounce";
 import { Paging } from "@skbkontur/react-ui/components/Paging";
 import transformPageFromHumanToProgrammer from "../../logic/transformPageFromHumanToProgrammer";
 import { Select } from "@skbkontur/react-ui/components/Select";
-import { EmptyListText } from "../../Components/TriggerInfo/Components/EmptyListMessage/EmptyListText";
-import { TeamCard } from "../../Components/Teams/TeamCard/TeamCard";
-
-import styles from "./AllTeamsContainer.less";
 import { setError } from "../../store/Reducers/UIReducer.slice";
-
-const cn = classNames.bind(styles);
+import { TeamsList } from "../../Components/TeamsList/TeamsList";
 
 type SortDirection = "asc" | "desc";
 
@@ -29,7 +22,6 @@ const SORT_OPTIONS: Array<[SortDirection, string]> = [
 
 const AllTeamsContainer: FC = () => {
     const { error, isLoading } = useAppSelector(UIState);
-    const [deletingTeam, setDeletingTeam] = useState<Team | null>(null);
     const [searchValue, setSearchValue] = useState("");
     const [activePage, setActivePage] = useState(1);
     const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
@@ -75,21 +67,8 @@ const AllTeamsContainer: FC = () => {
                             items={SORT_OPTIONS}
                         />
                     </Flexbox>
-                    {teams?.list.length ? (
-                        <div className={cn("teams-container")}>
-                            {teams?.list.map((team) => (
-                                <TeamCard
-                                    key={team.id}
-                                    team={team}
-                                    isDeleting={deletingTeam?.id === team.id}
-                                    onOpenDelete={() => setDeletingTeam(team)}
-                                    onCloseDelete={() => setDeletingTeam(null)}
-                                />
-                            ))}
-                        </div>
-                    ) : (
-                        <EmptyListText text={"There are no teams"} />
-                    )}
+
+                    <TeamsList teams={teams?.list} />
 
                     <Paging
                         shouldBeVisibleWithLessThanTwoPages={false}

src/desktop.bundle.tsx

@@ -22,7 +22,6 @@ import Trigger, { TriggerProps } from "./pages/trigger/trigger";
 import TriggerDesktop, { TriggerDesktopProps } from "./pages/trigger/trigger.desktop";
 import { AdminRoute } from "./PrivateRoutes/AdminRoute";
 import TeamsContainer from "./Containers/TeamsContainer";
-import { TeamContainer } from "./Containers/TeamContainer";
 import { TeamSettingsPrivateRoute } from "./PrivateRoutes/TeamSettingsPrivateRoute";
 import AllTeamsContainer from "./Containers/AllTeamsContainer/AllTeamsContainer";
 
@@ -76,7 +75,6 @@ function Desktop() {
                 <Route exact path={getPagePath("settings")} component={SettingsContainer} />
                 <Route exact path={getPagePath("teams")} component={TeamsContainer} />
                 <AdminRoute exact path={getPagePath("allTeams")} component={AllTeamsContainer} />
-                <AdminRoute exact path={getPagePath("team")} component={TeamContainer} />
                 <AdminRoute
                     exact
                     path={getPagePath("notifications")}