Updated UserTabPanel UI

client/src/components/UserHeader.tsx

@@ -1,7 +1,10 @@
 import React, { FC } from "react";
 import { Header } from "../components/Header";
 import { UserAvatar } from "./UserAvatar";
-import { Grid, makeStyles, Theme } from "@material-ui/core";
+import {
+  Grid,
+  //  makeStyles, Theme
+} from "@material-ui/core";
 
 interface IProps {
   fullName: string;
@@ -9,25 +12,25 @@ interface IProps {
   picture: string;
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    margin: theme.spacing(1),
-    flexGrow: 1
-  }
-}));
+// const useStyles = makeStyles((theme: Theme) => ({
+//   root: {
+//     paddingTop: theme.spacing(2),
+//     flexGrow: 1,
+//   },
+// }));
 
 export const UserHeader: FC<IProps> = ({ fullName, presentation, picture }) => {
-  const classes = useStyles();
+  // const classes = useStyles();
   return (
-    <div className={classes.root}>
-      <Grid container>
-        <Grid item xs={2}>
-          <UserAvatar picture={picture} alt="" />
-        </Grid>
-        <Grid item xs>
-          <Header title={fullName} description={presentation} />
-        </Grid>
+    // <div className={classes.root}>
+    <Grid container>
+      <Grid item xs={2}>
+        <UserAvatar picture={picture} alt="" />
       </Grid>
-    </div>
+      <Grid item xs>
+        <Header title={fullName} description={presentation} />
+      </Grid>
+    </Grid>
+    // </div>
   );
 };

client/src/components/UserTabPanel.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";
@@ -12,7 +12,7 @@ import { ProjectList } from "./ProjectList";
 import { TicketList } from "./TicketList";
 
 interface TabProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   dir?: string;
   index: any;
   value: any;
@@ -38,15 +38,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 {
@@ -58,7 +58,7 @@ interface IProps {
 export const UserTabPanel: FC<IProps> = ({ tickets, tabNames, projects }) => {
   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);
@@ -70,14 +70,18 @@ export const UserTabPanel: FC<IProps> = ({ tickets, tabNames, projects }) => {
 
   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 })} />

client/src/layouts/MainLayout.tsx

@@ -13,6 +13,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "column",
     minHeight: "100vh",
+    backgroundColor: "#f8f9fa",
   },
 }));
 

client/src/layouts/PageLayout.tsx

@@ -8,8 +8,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   // root style allow for fixed footer
   header: {
     margin: theme.spacing(1),
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2),
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
     flexGrow: 1,
   },
   content: {

client/src/pages/ProjectPage.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from "react";
-import { Container, Grid, makeStyles, Theme } from "@material-ui/core";
+import { Grid, makeStyles, Theme } from "@material-ui/core";
 import { Header } from "../components/Header";
 import { AvatarList } from "../components/AvatarList";
 import { ProgressBar } from "../components/ProgressBar";

client/src/pages/TicketPage.tsx

@@ -12,13 +12,7 @@ import { AvatarList } from "../components/AvatarList";
 import { TicketVM } from "../VM/TicketVM";
 import { getRemainingdays } from "../utils/methods";
 
-import {
-  Container,
-  makeStyles,
-  Theme,
-  Grid,
-  Typography,
-} from "@material-ui/core";
+import { makeStyles, Theme, Grid, Typography } from "@material-ui/core";
 import { Timer } from "@material-ui/icons";
 import PageLayout from "../layouts/PageLayout";
 

client/src/pages/UserPage.tsx

@@ -2,7 +2,6 @@ import React, { FC } from "react";
 import { UserVM } from "../VM/UserVM";
 import { UserHeader } from "../components/UserHeader";
 import { UserTabPanel } from "../components/UserTabPanel";
-import { Container } from "@material-ui/core";
 import PageLayout from "../layouts/PageLayout";
 
 interface IProps {

client/src/utils/router.tsx

@@ -1,13 +1,10 @@
 import React from "react";
 import { Route, Switch } from "react-router-dom";
-
 import { HomeController } from "../controllers/HomeController";
 import { ProjectController } from "../controllers/ProjectController";
 import { UserController } from "../controllers/UserController";
 import { TicketController } from "../controllers/TicketController";
 import { NotFoundPage } from "../pages/NotFoundPage";
-import { TestPage } from "../pages/TestPage";
-import { PrivateRoute } from "./PrivateRoute";
 
 export const AppRouter = () => {
   return (