fix: remove duplicate information in trainee team selector

frontend/src/logic/TeamSelector/index.tsx

@@ -5,10 +5,9 @@ import {
   Card,
   CardList,
   Classes,
-  Elevation,
   NonIdealState,
   Section,
-  SectionCard,
+  SectionCard
 } from '@blueprintjs/core'
 import { ChevronRight } from '@blueprintjs/icons'
 import { css } from '@emotion/css'
@@ -44,53 +43,46 @@ const TeamSelector = () => {
   }
 
   return (
-    <Section
-      title='Trainee Team Selection'
-      rightElement={<Reloader minimal fill />}
-      elevation={Elevation.ONE}
-    >
-      <Section title='Team Selection' rightElement={<Reloader minimal fill />}>
-        {exercises.length === 0 && (
-          <div style={{ padding: '1rem' }}>
-            <NonIdealState
-              icon='low-voltage-pole'
-              description='There are no exercises active'
-            />
-          </div>
-        )}
-        {exercises.filter(notEmpty).map(exercise => (
-          <SectionCard padded key={exercise.id}>
-            <h3
-              style={{ paddingBottom: '1rem' }}
-            >{`Exercise ${exercise.name}`}</h3>
-            <CardList bordered>
-              {exercise.teams.map((team: Team) => (
-                <Card
-                  interactive
-                  onClick={() =>
-                    nav('/trainee/:exerciseId/:teamId', {
-                      params: {
-                        exerciseId: exercise.id,
-                        teamId: team.id,
-                      },
-                    })
-                  }
-                  className={between}
-                  key={team.id}
-                >
-                  <TeamLabel
-                    teamId={team.id}
-                    teamName={team.name}
-                    teamRole={team.role}
-                    exerciseName={exercise.name}
-                  />
-                  <ChevronRight className={Classes.TEXT_MUTED} />
-                </Card>
-              ))}
-            </CardList>
-          </SectionCard>
-        ))}
-      </Section>
+    <Section title='Trainee Team Selection' rightElement={<Reloader minimal fill />}>
+      {exercises.length === 0 && (
+        <div style={{ padding: '1rem' }}>
+          <NonIdealState
+            icon='low-voltage-pole'
+            description='There are no exercises active'
+          />
+        </div>
+      )}
+      {exercises.map(exercise => (
+        <SectionCard padded key={exercise.id}>
+          <h3
+            style={{ paddingBottom: '1rem' }}
+          >{`Exercise: ${exercise.name}`}</h3>
+          <CardList bordered>
+            {exercise.teams.map((team: Team) => (
+              <Card
+                interactive
+                onClick={() =>
+                  nav('/trainee/:exerciseId/:teamId', {
+                    params: {
+                      exerciseId: exercise.id,
+                      teamId: team.id,
+                    },
+                  })
+                }
+                className={between}
+                key={team.id}
+              >
+                <TeamLabel
+                  teamId={team.id}
+                  teamName={team.name}
+                  teamRole={team.role}
+                />
+                <ChevronRight className={Classes.TEXT_MUTED} />
+              </Card>
+            ))}
+          </CardList>
+        </SectionCard>
+      ))}
     </Section>
   )
 }