Updated ProjectTabPanel UI

client/src/components/ProjectTabPanel.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useState, ReactNode } from "react";
 import SwipeableViews from "react-swipeable-views";
 import { makeStyles, Theme, useTheme } from "@material-ui/core/styles";
 import AppBar from "@material-ui/core/AppBar";
@@ -13,7 +13,7 @@ import { TicketList } from "./TicketList";
 import { AppFile } from "../types/AppFile";
 
 interface TabProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   dir?: string;
   index: any;
   value: any;
@@ -39,15 +39,15 @@ const TabPanel: FC<TabProps> = (props: TabProps) => {
 const a11yProps = (index: any) => {
   return {
     id: `full-width-tab-${index}`,
-    "aria-controls": `full-width-tabpanel-${index}`
+    "aria-controls": `full-width-tabpanel-${index}`,
   };
 };
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
-    backgroundColor: "#ffffff",
-    flexGrow: 1
-  }
+    backgroundColor: "#E9ECEF",
+    borderRadius: "20px",
+  },
 }));
 
 interface IProps {
@@ -62,12 +62,12 @@ interface IProps {
 export const ProjectTabPanel: FC<IProps> = ({
   tickets,
   tabNames,
-  files
+  files,
   // allProjects
 }) => {
   const classes = useStyles();
   const theme = useTheme();
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = useState(0);
 
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     setValue(newValue);
@@ -79,14 +79,18 @@ export const ProjectTabPanel: FC<IProps> = ({
 
   return (
     <div className={classes.root}>
-      <AppBar position="static" color="inherit">
+      <AppBar
+        position="static"
+        color="inherit"
+        style={{ borderTopLeftRadius: "10px", borderTopRightRadius: "10px" }}
+      >
         <Tabs
           value={value}
           onChange={handleChange}
           indicatorColor="primary"
           textColor="primary"
           variant="fullWidth"
-          aria-label="full width tabs example"
+          aria-label="full width tabs"
         >
           {tabNames.map((t: string, i: number) => (
             <Tab key={i} label={t} {...a11yProps({ i })} />