project style changes

src/components/projects/Projects.tsx

@@ -8,13 +8,15 @@ import { getLinkedProjectListCopy } from "../../APIs/ProjectScreenAPIs/getLinked
 import { Box, Card, CardContent, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material";
 import { getPublishedProjects } from "../../APIs/ProjectScreenAPIs/getPublishedProject";
 import { getUnlinkedProjects } from "../../APIs/ProjectScreenAPIs/getUnlinkedProject";
+  
 
 export default function Projects(){
     const [selectedContractFilter, setSelectedContractFilter] = useState<any>('All');
     const [ContractFilterResponseData, setContractFilterResponseData] = useState<any>();
     const [searchByFilter, setSearchByFilter] = useState('');
+    const [searchByFilterOnBlur, setSearchByFilterOnBlur] = useState('');
     const { data: getProjectDataList, isLoading, isError } = useGetProjectDataRQ(searchByFilter);
-
+    
     useEffect(()=>{
         if(selectedContractFilter=='All'){
             setContractFilterResponseData(getProjectListCopy(searchByFilter))
@@ -37,12 +39,17 @@ export default function Projects(){
 
     return(
         <>
-        <Card style={{margin: '1%', backgroundColor:'rgb(24 24 23)'}}>
+        <Card square style={{ backgroundColor:'rgb(13 13 13)'}}>
+            <Card sx={{margin:'1%', backgroundColor:'rgb(23 23 22)'}}>
             <CardContent>
                 <FormControl className="select-field" variant="standard" style={{marginTop: '1%'}}>
                     <InputLabel htmlFor="contract-list" >Select Contract</InputLabel>
                     <Select
-                        sx={{input: { color: 'white' }}}
+                        sx={{color: 'white',
+                        '& .MuiSelect-iconOutlined ': {
+                          color: '#393939',
+                        },
+                        }}
                         value={selectedContractFilter}
                         inputProps={{
                         name: 'contracts',
@@ -62,16 +69,42 @@ export default function Projects(){
                     id="standard-name"
                     variant="standard"
                     label="Search By"
-                    value={searchByFilter}
+                    value={searchByFilterOnBlur}
                     onChange={(e)=>{
-                        setSearchByFilter(e.target.value);
+                        setSearchByFilterOnBlur(e.target.value);
+                    }}
+                    onBlur={(e)=>{
+                        setSearchByFilter(searchByFilter);
+                        // setSearchByFilterOnBlur(searchByFilter);
+                    }}
+                    sx={{input: { color: 'white' },
+                    "& label": {
+                        color: "white"
+                      },
+                      "& label.Mui-focused": {
+                        color: "white"
+                      },
+                      "& .MuiInput-underline:after": {
+                        borderBottomColor: "white"
+                      },
+                      "& .MuiOutlinedInput-root": {
+                        "& fieldset": {
+                          borderColor: "white"
+                        }},
+                        "&:hover fieldset": {
+                            borderColor: "white",
+                            borderWidth: 2
+                          },
+                          "&.Mui-focused fieldset": {
+                            borderColor: "white"
+                          }
                     }}
-                    sx={{input: { color: 'white' }}}
                     placeholder="Search By Title, Project Title, Contract No, Asset Title, Track Grid, ISRC"
                     style={{marginLeft: '10%', width: '45%'}}
                     margin="normal"
                 />
             </CardContent>
+            </Card>
         </Card>
        
         <ProjectList projectData={getProjectDataList}/>

src/components/projects/ProjectsList.tsx

@@ -79,7 +79,8 @@ export default function ProjectList({projectData}:Props) {
 
 
   return (
-    <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden' }}>
+    <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
+    <Paper  className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
       <TableContainer sx={{ maxHeight: '600px'}}>
         <Table stickyHeader aria-label="sticky table">
           <TableHead >
@@ -131,5 +132,6 @@ export default function ProjectList({projectData}:Props) {
         onRowsPerPageChange={handleChangeRowsPerPage}
       />
     </Paper>
+    </Paper>
   );
 }