feat: realized adjusts in header to turn it responsive and apllied ac…

src/content/applications/Tasks/HomeTasks.tsx

@@ -5,7 +5,7 @@ import { Box, Grid, useTheme } from "@mui/material";
 import CardMultiTasks from "../../../components/Task/CardMultiTasks";
 import CoverHomeTasks from "../../../components/Cover/CoverHomeTasks";
 import usePagination from "src/components/Pagination";
-import SearchFilters from "src/components/SearchFilters";
+import SearchFilters from "src/components/Task/SearchFiltersTasks";
 import { useSearchFilters } from "src/hooks/useSearchFilters";
 
 const HomeTasks = () => {

src/hooks/TaskServiceHook.tsx

@@ -110,7 +110,7 @@ export const useTaskServiceHook = (task: TaskService) => {
             setTaskData(nft);
         } catch (error) {
             setError('Erro ao buscar tarefa');
-            handleSnackbar('Error Searching Task', 'error')
+            handleSnackbar('Error Searching Task: '+error, 'error')
         } finally {
             setLoading(false);
         }

src/layouts/BaseLayout/Header/Search/index.tsx

@@ -18,13 +18,14 @@ import {
   DialogContent,
   Slide,
   Hidden,
+  useMediaQuery,
 } from "@mui/material";
 import { TransitionProps } from "@mui/material/transitions";
 import SearchTwoToneIcon from "@mui/icons-material/SearchTwoTone";
 import FindInPageTwoToneIcon from "@mui/icons-material/FindInPageTwoTone";
 import ChevronRightTwoToneIcon from "@mui/icons-material/ChevronRightTwoTone";
 import { Dialog, TextField, DialogTitle } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { styled, useTheme } from "@mui/material/styles";
 import HeaderNotifications from "../Buttons/Notifications";
 import HeaderToggleTheme from "../Buttons/ToggleTheme";
 
@@ -67,7 +68,8 @@ const DialogTitleWrapper = styled(DialogTitle)(
 function HeaderSearch() {
   const [openSearchResults, setOpenSearchResults] = useState(false);
   const [searchValue, setSearchValue] = useState("");
-
+  const theme = useTheme();
+  const smDown = useMediaQuery(theme.breakpoints.down('sm'));
   const handleSearchChange = (event: ChangeEvent<HTMLInputElement>): void => {
     setSearchValue(event.target.value);
     console.log("search value = ", searchValue);
@@ -96,32 +98,36 @@ function HeaderSearch() {
   return (
     <>
       <Grid container alignItems="center" rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
-        <Grid item xs={3}>
-
+        <Grid item xs={1}>
         </Grid>
-        <Grid item xs={6}>
-          <Box >
-            <Tooltip arrow title="Search">
-                <SearchInputWrapper
-                  value={searchValue}
-                  autoFocus={true}
-                  onChange={handleSearchChange}
-                  InputProps={{
-                    startAdornment: (
-                      <InputAdornment position="start">
-                        <SearchTwoToneIcon />
-                      </InputAdornment>
-                    ),
-                  }}
-                  placeholder="Search terms here..."
-                  fullWidth
-                />
-            </Tooltip>  
-          </Box>
+
+        <Grid item xs={7}>          
+          <Hidden mdDown>
+            <Box >
+              <Tooltip arrow title="Search">
+                  <SearchInputWrapper
+                    value={searchValue}
+                    autoFocus={true}
+                    onChange={handleSearchChange}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <SearchTwoToneIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    placeholder="Search terms here..."
+                    fullWidth
+                  />
+              </Tooltip>  
+            </Box>            
+          </Hidden>
         </Grid>
-        <Grid  item xs={3}>
+
+
+        <Grid  item xs={4}>
           <Box sx={{ mr: 1 }}>
-            <Box sx={{ mx: 0.5 }} component="span">
+            <Box sx={{ mx: 0.5 }} component="span" display={"flex"} >
               <HeaderNotifications />
               <HeaderToggleTheme />
             </Box>

src/layouts/BaseLayout/Header/Userbox/index.tsx

@@ -1,7 +1,5 @@
-import { useRef, useState } from "react";
-
+import { useRef, useState, useEffect } from "react";
 import { NavLink } from "react-router-dom";
-
 import {
   Avatar,
   Box,
@@ -15,13 +13,12 @@ import {
   Popover,
   Typography,
 } from "@mui/material";
-
 import { styled } from "@mui/material/styles";
 import ExpandMoreTwoToneIcon from "@mui/icons-material/ExpandMoreTwoTone";
-import AccountBoxTwoToneIcon from "@mui/icons-material/AccountBoxTwoTone";
 import LockOpenTwoToneIcon from "@mui/icons-material/LockOpenTwoTone";
 import { User } from "src/models/user";
-import { useDisconnect, useAccount } from 'wagmi';
+import { useWeb3Utils } from "src/hooks/Web3UtilsHook";
+import { useTaskService } from "src/services/tasks-service";
 
 const UserBoxButton = styled(Button)(
   ({ theme }) => `
@@ -83,7 +80,7 @@ function stringToColor(string: string) {
 
 const MuiAvatar = styled(Avatar)(
   ({ theme }) => `
-    width: 360px;
+    width: 160px;
 `
 );
 
@@ -98,6 +95,11 @@ function stringAvatar(name: string) {
 
 function HeaderUserbox({ disconnect, account }) {
   const [avatar, setAvatar] = useState("/static/images/avatars/1.jpg");
+  const { shortenAddressFromUser, userAddress } = useWeb3Utils();
+  const { hasMemberRole, hasLeaderRole } = useTaskService();
+  const [isMember, setIsMember] = useState<boolean>(false);
+  const [isLeader, setIsLeader] = useState<boolean>(false);
+
   const user: User = {
     name: "",
     avatar: avatar,
@@ -123,15 +125,26 @@ function HeaderUserbox({ disconnect, account }) {
     disconnect();
   };
 
+  useEffect(() => {
+
+    hasLeaderRole(userAddress()).then(result => {
+      setIsLeader(result);
+      hasMemberRole(userAddress()).then(result => {
+        setIsMember(result);
+      })
+    })
+
+}, [])
+
   return (
     <>
       <UserBoxButton color="secondary" ref={ref} onClick={handleOpen} sx={{ ml: 1 }}>
-        <MuiAvatar variant="rounded" {...stringAvatar(account?.address)} />
+        <MuiAvatar variant="rounded" {...stringAvatar(shortenAddressFromUser())} />
         <Hidden mdDown>
           <UserBoxText>
             <UserBoxLabel variant="body1">{user.name}</UserBoxLabel>
-            <UserBoxDescription variant="body2">
-              {user.jobTitle}
+            <UserBoxDescription noWrap variant="body2">
+              { isLeader ? "Leader" : isMember ? "Member" : "No Role" }
             </UserBoxDescription>
           </UserBoxText>
         </Hidden>
@@ -153,11 +166,11 @@ function HeaderUserbox({ disconnect, account }) {
         }}
       >
         <MenuUserBox sx={{ minWidth: 210 }} display="flex">
-          <MuiAvatar variant="rounded" {...stringAvatar(account?.address)} />
+          <MuiAvatar variant="rounded" {...stringAvatar(shortenAddressFromUser())} />
           <UserBoxText>
             <UserBoxLabel variant="body1">{user.name}</UserBoxLabel>
             <UserBoxDescription variant="body2">
-              {user.jobTitle}
+              { isLeader ? "Leader" : isMember ? "Member" : "No Role" }
             </UserBoxDescription>
           </UserBoxText>
         </MenuUserBox>
@@ -166,12 +179,18 @@ function HeaderUserbox({ disconnect, account }) {
           <ListItem button to="/users/profile" component={NavLink}>
             <ListItemText primary="Perfil" />
           </ListItem>
-          <ListItem button to="/tasks/create-task" component={NavLink}>
-            <ListItemText primary="Criar Tarefa" />
-          </ListItem>
-          <ListItem button to="/settings" component={NavLink}>
-            <ListItemText primary="Configurações" />
-          </ListItem>
+          {
+            isLeader && 
+            <ListItem button to="/tasks/create-task" component={NavLink}>
+              <ListItemText primary="Criar Tarefa" />
+            </ListItem>            
+          }
+          {
+            isLeader && 
+            <ListItem button to="/settings" component={NavLink}>
+              <ListItemText primary="Configurações" />
+            </ListItem>
+          }
         </List>
         <Divider />
         <Box sx={{ m: 1 }}>