Minor support cleanup - fixed some titles, addressed #184, minor form…

…atting to practice page.

projects/gameboard-ui/src/app/prac/components/suggested-searches/suggested-searches.component.html

@@ -1,6 +1,6 @@
 <div class="suggested-searches-component d-flex flex-wrap w-100">
     <a *ngFor="let search of searches" [routerLink]="['/practice']" [queryParams]="{ term: search }">
-        <app-colored-text-chip [text]="search" colorMode="monochrome"
+        <app-colored-text-chip class="d-block mb-2" [text]="search" colorMode="monochrome"
             (click)="handleSearchClick($event)"></app-colored-text-chip>
     </a>
 </div>

projects/gameboard-ui/src/app/support/support-page/support-page.component.html

@@ -1,11 +1,11 @@
 <!-- Copyright 2021 Carnegie Mellon University. All Rights Reserved. -->
 <!-- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information. -->
 
-<div class="mb-4 container">
-  <h1 class="support-header mb-0 pl-0">Support</h1>
+<div class="mb-4">
+  <h1 class="support-header mb-0">Support</h1>
 </div>
 
-<main class=" mb-4 pb-4">
+<main class="mb-4 pb-4">
   <router-outlet></router-outlet>
 </main>
 

projects/gameboard-ui/src/app/support/support.module.ts

@@ -32,8 +32,8 @@ import { CoreModule } from '../core/core.module';
       {
         path: '', component: SupportPageComponent, children: [
           { path: '', pathMatch: 'full', redirectTo: 'tickets' },
-          { path: 'create', component: TicketFormComponent },
-          { path: 'tickets', component: TicketListComponent },
+          { path: 'create', component: TicketFormComponent, title: "New Ticket" },
+          { path: 'tickets', component: TicketListComponent, title: "Support" },
           { path: 'tickets/:id', component: TicketDetailsComponent }
         ]
       },

projects/gameboard-ui/src/app/support/ticket-list/ticket-list.component.html

@@ -1,13 +1,13 @@
 <div *ngIf="ctx$ | async as ctx; else loading" class="container-xl" [class.expand]="ctx.canManage">
   <div class="d-flex justify-content-between mb-2">
     <h3 class="m-0 p-0 align-self-center">{{ctx.canManage ? 'Manage Tickets' : 'My Tickets'}}</h3>
-    <a class="btn btn-outline-info" [routerLink]="['../create']">
+    <a class="btn btn-info" [routerLink]="['../create']">
       <span>Create Ticket</span>
     </a>
   </div>
 
   <div class="filters row mb-2">
-    <div class="d-flex" [class]="ctx.canManage ? 'col-7' : 'col-2'">
+    <div class="d-flex col-7">
       <div class="input-group input-group-sm mr-2 w-25">
         <select class="form-control" [(ngModel)]="statusFilter" (change)="this.refresh$.next(true)">
           <option *ngFor="let option of ['Any Status', 'Open', 'In Progress', 'Closed', 'Not Closed']" [value]="option">
@@ -101,7 +101,6 @@ <h3 class="m-0 p-0 align-self-center">{{ctx.canManage ? 'Manage Tickets' : 'My T
 
     <!-- Actions (managers only)-->
     <div *ngIf="ctx.canManage" class="col-1">
-      <!--I feel like this looks best without a header - it's clear what it is -->
     </div>
   </div>