From 9e0a2f0d47242c297d86715d83cbcbcdf22da77b Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Fri, 3 Apr 2020 13:01:28 +0200
Subject: [PATCH] update ticketlist

---
 client/src/components/TicketList.tsx | 76 ++++++++++++++++------------
 1 file changed, 44 insertions(+), 32 deletions(-)

diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx
index 0910d8f..94fcfae 100644
--- a/client/src/components/TicketList.tsx
+++ b/client/src/components/TicketList.tsx
@@ -8,6 +8,7 @@ import { put } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { NewTicketModal } from "./NewTicketModal";
 import { Project } from "../types/Project";
+import { Grid, Typography } from "@material-ui/core";
 
 type TicketListProps = {
   tickets: Ticket[];
@@ -49,38 +50,49 @@ export const TicketList: FC<TicketListProps> = ({
           show={showNew}
           allProjects={allProjects}
         />
-        <h3>Tickets</h3>
-        {addButton && (
-          <FloatingButton color="primary" size="small" onClick={onClick} />
-        )}
-        <FilterBar
-          filterText={filterText}
-          handleChange={handleChange}
-          clearFilterText={clearFilterText}
-        />
-      </div>
-      <div className="col s12 grey lighten-1">
-        <ul>
-          {filteredTickets.length === 0 ? (
-            <HorizontalCard />
-          ) : (
-            filteredTickets.map((t: Ticket) => (
-              <HorizontalCard
-                key={t.id}
-                title={t.title}
-                remainingDays={t.endingDate}
-                link={`/tickets/${t.id}`}
-                validateTicket={async (e: MouseEvent) => {
-                  e.preventDefault();
-                  await put<HttpResponse<Ticket>>(
-                    `${Constants.ticketsURI}/${t.id}/closed`,
-                    {}
-                  );
-                }}
-              />
-            ))
-          )}
-        </ul>
+
+        <Grid container>
+          <Grid item xs>
+            <Typography variant="h4" component="h4">
+              Tickets
+            </Typography>
+          </Grid>
+          <Grid item xs>
+            {addButton && (
+              <FloatingButton color="primary" size="small" onClick={onClick} />
+            )}
+          </Grid>
+          <Grid item xs={4}>
+            <FilterBar
+              filterText={filterText}
+              handleChange={handleChange}
+              clearFilterText={clearFilterText}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <div className="col s12 grey lighten-1">
+              {filteredTickets.length === 0 ? (
+                <HorizontalCard />
+              ) : (
+                filteredTickets.map((t: Ticket) => (
+                  <HorizontalCard
+                    key={t.id}
+                    title={t.title}
+                    remainingDays={t.endingDate}
+                    link={`/tickets/${t.id}`}
+                    validateTicket={async (e: MouseEvent) => {
+                      e.preventDefault();
+                      await put<HttpResponse<Ticket>>(
+                        `${Constants.ticketsURI}/${t.id}/closed`,
+                        {}
+                      );
+                    }}
+                  />
+                ))
+              )}
+            </div>
+          </Grid>
+        </Grid>
       </div>
     </>
   );