Teams Page UI Update

Author: ptechofficial

src/app/app-routing.module.ts

@@ -14,8 +14,8 @@ const routes: Routes = [
   { path: 'task-description', component: TaskDescriptionComponent },
   { path: 'mapping', component: MappingComponent },
   { path: 'usage', component: UsageComponent },
-  { path: 'about', component: AboutUsComponent },
   { path: 'teams', component: Teams },
+  { path: 'about', component: AboutUsComponent },
 ];
 
 @NgModule({

src/app/component/teams/teams.component.css

@@ -0,0 +1,43 @@
+h2 {
+  color: #000000;
+  text-align: center;
+  font-weight: 800;
+  font-size: 2em;
+  margin: 1em 1em;
+}
+h3 {
+  color: #000000;
+  text-align: center;
+  font-weight: 500;
+  font-size: 1.2em;
+  font-style: italic;
+  margin: 1em 1em;
+}
+.team-list {
+  width: 70%;
+  overflow-x: auto;
+  white-space: nowrap;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+.team-list ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex; /* Use flex layout */
+}
+
+.team-list ul li {
+  flex: 0 0 150px; /* Set a fixed width */
+  height: 100px;
+  background-color: #66bb6a;
+  border-radius: 10px;
+  margin-right: 20px;
+  display: flex; /* Use flex layout */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-size: 16px;
+  font-weight: bold;
+}

src/app/component/teams/teams.component.html

@@ -1,23 +1,45 @@
 <div id="team-section">
-  <div id="individual-teams">
-    <h2>Teams</h2>
+  <h2>Team List</h2>
+  <div class="team-list">
     <ul>
-      <li>A</li>
-      <li>B</li>
-      <li>C</li>
+      <li *ngFor="let team of teamList">{{ team }}</li>
     </ul>
   </div>
-  <div id="groups-teams">
-    <h2>Team Groups</h2>
-    <h4>AB</h4>
+  <h2>Team Group</h2>
+  <h3>Group 123</h3>
+  <div class="team-list">
     <ul>
-      <li>A</li>
-      <li>B</li>
+      <li>Team 1</li>
+      <li>Team 2</li>
+      <li>Team 3</li>
     </ul>
-    <h4>BC</h4>
+  </div>
+  <h3>Group 123</h3>
+  <div class="team-list">
+    <ul>
+      <li>Team 1</li>
+      <li>Team 2</li>
+      <li>Team 3</li>
+      <li>Team 1</li>
+      <li>Team 2</li>
+      <li>Team 3</li>
+      <li>Team 1</li>
+      <li>Team 2</li>
+      <li>Team 3</li>
+      <li>Team 1</li>
+      <li>Team 2</li>
+      <li>Team 3</li>
+      <li>Team 1</li>
+      <li>Team 2</li>
+      <li>Team 3</li>
+    </ul>
+  </div>
+  <h3>Group 123</h3>
+  <div class="team-list">
     <ul>
-      <li>B</li>
-      <li>C</li>
+      <li>Team 1</li>
+      <li>Team 2</li>
+      <li>Team 3</li>
     </ul>
   </div>
 </div>

src/app/component/teams/teams.component.ts

@@ -4,12 +4,12 @@ import * as yaml from 'js-yaml';
 
 @Component({
   selector: 'app-teams',
-  templateUrl: './Teams.component.html',
-  styleUrls: ['./Teams.component.css'],
+  templateUrl: './teams.component.html',
+  styleUrls: ['./teams.component.css'],
 })
 export class Teams implements OnInit {
   YamlObject: any;
-  teamList: string[] = [];
+  teamList: any;
   teamGroups: any;
 
   constructor(private yaml: ymlService) {}

src/app/material/material.module.ts

@@ -12,8 +12,10 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { CommonModule } from '@angular/common';
 
 const MaterialComponents = [
+  CommonModule,
   MatSidenavModule,
   MatButtonModule,
   MatIconModule,