From 45fba7f26ddd56266b1a52e6e692f7a493af8a13 Mon Sep 17 00:00:00 2001
From: Sonika <kumari.sonika@seryfertsoft.com>
Date: Tue, 2 Jan 2024 19:33:46 +0530
Subject: [PATCH] more style changes

---
 src/components/search/AdvancedFilters.tsx | 200 +++++++++++-----------
 1 file changed, 100 insertions(+), 100 deletions(-)

diff --git a/src/components/search/AdvancedFilters.tsx b/src/components/search/AdvancedFilters.tsx
index 745c9e7..5b2b081 100644
--- a/src/components/search/AdvancedFilters.tsx
+++ b/src/components/search/AdvancedFilters.tsx
@@ -9,7 +9,7 @@ import {
   TextField,
 } from '@mui/material';
 
-const commonStyles = {
+const menuItemStyle = {
   fontSize: '13px', // Adjust the font size as needed
 };
 
@@ -22,7 +22,7 @@ const AdvancedFilters = ({ advanceFilterData, setAdvanceFilterData }:any) => {
   return (
     <Paper square sx={{ width:'100%', overflow: 'hidden', backgroundColor: 'rgb(13 13 13)' }}>
       <Grid container spacing={2} justifyContent="center" sx={{marginTop:'1%',marginBottom:'1%'}} >
-          <Grid item  xs={1.6}>
+          <Grid item  xs={6} sm={3} md={3} lg={1.6} >
             <FormControl fullWidth variant="standard">
               <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Assets</InputLabel>
               <Select
@@ -31,22 +31,22 @@ const AdvancedFilters = ({ advanceFilterData, setAdvanceFilterData }:any) => {
                 onChange={(e) => {
                   handleFilterChange('asset_type', e.target.value);
                 }}
-                
+                                
                 IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
                 sx={{ color: 'white', border: '1px solid white',  }}
               >
-                <MenuItem value={0} sx={commonStyles}>All</MenuItem>
-                <MenuItem value={1} sx={commonStyles}>Audio Song</MenuItem>
-                <MenuItem value={2} sx={commonStyles}>Video Song</MenuItem>
-                <MenuItem value={3} sx={commonStyles}>Audio visual</MenuItem>
-                <MenuItem value={4} sx={commonStyles}>Story</MenuItem>
-                <MenuItem value={5} sx={commonStyles}>Score</MenuItem>
-                <MenuItem value={6} sx={commonStyles}>Dialogue</MenuItem>
+                <MenuItem value={0} sx={menuItemStyle}>All</MenuItem>
+                <MenuItem value={1} sx={menuItemStyle}>Audio Song</MenuItem>
+                <MenuItem value={2} sx={menuItemStyle}>Video Song</MenuItem>
+                <MenuItem value={3} sx={menuItemStyle}>Audio visual</MenuItem>
+                <MenuItem value={4} sx={menuItemStyle}>Story</MenuItem>
+                <MenuItem value={5} sx={menuItemStyle}>Score</MenuItem>
+                <MenuItem value={6} sx={menuItemStyle}>Dialogue</MenuItem>
               </Select>
             </FormControl>
           </Grid>
 
-          <Grid item  xs={1.6}>
+          <Grid item  xs={6} sm={3} md={3} lg={1.6} >
             <FormControl fullWidth variant="standard">
               <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px'  }}>Rights</InputLabel>
               <Select
@@ -58,29 +58,29 @@ const AdvancedFilters = ({ advanceFilterData, setAdvanceFilterData }:any) => {
                 IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
                 sx={{ color: 'white', border: '1px solid white',  }}
               >
-                <MenuItem value="All" sx={commonStyles}>All</MenuItem>
-                <MenuItem value="Physical" sx={commonStyles}>Physical</MenuItem>
-                <MenuItem value="Digital" sx={commonStyles}>Digital</MenuItem>
-                <MenuItem value="Adaptation" sx={commonStyles}>Adaptation</MenuItem>
-                <MenuItem value="Synchronisation" sx={commonStyles}>Synchronisation</MenuItem>
-                <MenuItem value="Copyright Registration" sx={commonStyles}>Copyright Registration</MenuItem>
-                <MenuItem value="Public Performance" sx={commonStyles}>Public Performance</MenuItem>
-                <MenuItem value="Compilation" sx={commonStyles}>Compilation</MenuItem>
-                <MenuItem value="Games" sx={commonStyles}>Games</MenuItem>
-                <MenuItem value="GamesDuplicate" sx={commonStyles}>GamesDuplicate</MenuItem>
-                <MenuItem value="Literary Work" sx={commonStyles}>Literary Work</MenuItem>
-                <MenuItem value="Musical Work" sx={commonStyles}>Musical Work</MenuItem>
-                <MenuItem value="Performances/Singer" sx={commonStyles}>Performances/Singer</MenuItem>
-                <MenuItem value="Background Score" sx={commonStyles}>Background Score</MenuItem>
-                <MenuItem value="Dialogue" sx={commonStyles}>Dialogue</MenuItem>
-                <MenuItem value="Synchronisation" sx={commonStyles}>Synchronisation</MenuItem>
-                <MenuItem value="Composition" sx={commonStyles}>Composition</MenuItem>
-                <MenuItem value="Lyrics" sx={commonStyles}>Lyrics</MenuItem>
+                <MenuItem value="All" sx={menuItemStyle}>All</MenuItem>
+                <MenuItem value="Physical" sx={menuItemStyle}>Physical</MenuItem>
+                <MenuItem value="Digital" sx={menuItemStyle}>Digital</MenuItem>
+                <MenuItem value="Adaptation" sx={menuItemStyle}>Adaptation</MenuItem>
+                <MenuItem value="Synchronisation" sx={menuItemStyle}>Synchronisation</MenuItem>
+                <MenuItem value="Copyright Registration" sx={menuItemStyle}>Copyright Registration</MenuItem>
+                <MenuItem value="Public Performance" sx={menuItemStyle}>Public Performance</MenuItem>
+                <MenuItem value="Compilation" sx={menuItemStyle}>Compilation</MenuItem>
+                <MenuItem value="Games" sx={menuItemStyle}>Games</MenuItem>
+                <MenuItem value="GamesDuplicate" sx={menuItemStyle}>GamesDuplicate</MenuItem>
+                <MenuItem value="Literary Work" sx={menuItemStyle}>Literary Work</MenuItem>
+                <MenuItem value="Musical Work" sx={menuItemStyle}>Musical Work</MenuItem>
+                <MenuItem value="Performances/Singer" sx={menuItemStyle}>Performances/Singer</MenuItem>
+                <MenuItem value="Background Score" sx={menuItemStyle}>Background Score</MenuItem>
+                <MenuItem value="Dialogue" sx={menuItemStyle}>Dialogue</MenuItem>
+                <MenuItem value="Synchronisation" sx={menuItemStyle}>Synchronisation</MenuItem>
+                <MenuItem value="Composition" sx={menuItemStyle}>Composition</MenuItem>
+                <MenuItem value="Lyrics" sx={menuItemStyle}>Lyrics</MenuItem>
               </Select>
             </FormControl>
           </Grid>
 
-          <Grid item  xs={1.6}>
+          <Grid item  xs={6} sm={3} md={3} lg={1.6} >
             <FormControl fullWidth variant="standard">
               <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px'  }}>Validity</InputLabel>
               <Select
@@ -92,16 +92,16 @@ const AdvancedFilters = ({ advanceFilterData, setAdvanceFilterData }:any) => {
                 IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
                 sx={{ color: 'white', border: '1px solid white',  }}
               >
-                <MenuItem value="0" sx={commonStyles}>All</MenuItem>
-                <MenuItem value="6" sx={commonStyles}>6 Months</MenuItem>
-                <MenuItem value="12" sx={commonStyles}>12 Months</MenuItem>
-                <MenuItem value="24" sx={commonStyles}>24 Months</MenuItem>
-                <MenuItem value="60" sx={commonStyles}>60 Months</MenuItem>
+                <MenuItem value="0" sx={menuItemStyle}>All</MenuItem>
+                <MenuItem value="6" sx={menuItemStyle}>6 Months</MenuItem>
+                <MenuItem value="12" sx={menuItemStyle}>12 Months</MenuItem>
+                <MenuItem value="24" sx={menuItemStyle}>24 Months</MenuItem>
+                <MenuItem value="60" sx={menuItemStyle}>60 Months</MenuItem>
               </Select>
             </FormControl>
           </Grid>
 
-          <Grid item xs={1.6}>
+          <Grid item xs={6} sm={3} md={3} lg={1.6}>
           <FormControl fullWidth variant="standard">
             <InputLabel sx={{ color: 'white', paddingLeft: 1 }}>Territory</InputLabel>
             <TextField
@@ -120,7 +120,7 @@ const AdvancedFilters = ({ advanceFilterData, setAdvanceFilterData }:any) => {
           </FormControl>
         </Grid>
 
-          <Grid item  xs={1.6}>
+          <Grid item  xs={6} sm={3} md={3} lg={1.6} >
             <FormControl fullWidth variant="standard">
               <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px'  }}>Mood</InputLabel>
               <Select
@@ -132,17 +132,17 @@ const AdvancedFilters = ({ advanceFilterData, setAdvanceFilterData }:any) => {
                 IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
                 sx={{ color: 'white', border: '1px solid white',  }}
               >
-                <MenuItem value="All" sx={commonStyles}>All</MenuItem>
-                <MenuItem value="Happy" sx={commonStyles}>Happy</MenuItem>
-                <MenuItem value="Sad" sx={commonStyles}>Sad</MenuItem>
-                <MenuItem value="Romantic" sx={commonStyles}>Romantic</MenuItem>
-                <MenuItem value="Bored" sx={commonStyles}>Bored</MenuItem>
-                <MenuItem value="Upbeat" sx={commonStyles}>Upbeat</MenuItem>
+                <MenuItem value="All" sx={menuItemStyle}>All</MenuItem>
+                <MenuItem value="Happy" sx={menuItemStyle}>Happy</MenuItem>
+                <MenuItem value="Sad" sx={menuItemStyle}>Sad</MenuItem>
+                <MenuItem value="Romantic" sx={menuItemStyle}>Romantic</MenuItem>
+                <MenuItem value="Bored" sx={menuItemStyle}>Bored</MenuItem>
+                <MenuItem value="Upbeat" sx={menuItemStyle}>Upbeat</MenuItem>
               </Select>
             </FormControl>
           </Grid>
 
-          <Grid item  xs={1.6}>
+          <Grid item  xs={6} sm={3} md={3} lg={1.6} >
             <FormControl fullWidth variant="standard">
               <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px'  }}>Language</InputLabel>
               <Select
@@ -154,36 +154,36 @@ const AdvancedFilters = ({ advanceFilterData, setAdvanceFilterData }:any) => {
                 IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
                 sx={{ color: 'white', border: '1px solid white',  }}
               >
-                <MenuItem value="All" sx={commonStyles}>All</MenuItem>
-                <MenuItem value="English" sx={commonStyles}>English</MenuItem>
-                <MenuItem value="Punjabi" sx={commonStyles}>Punjabi </MenuItem>
-                <MenuItem value="Gujarati" sx={commonStyles}>Gujarati </MenuItem>
-                <MenuItem value="Telugu" sx={commonStyles}>Telugu </MenuItem>
-                <MenuItem value="Bahasa Indonesia" sx={commonStyles}>Bahasa Indonesia </MenuItem>
-                <MenuItem value="Tamil" sx={commonStyles}>Tamil </MenuItem>
-                <MenuItem value="Kannada" sx={commonStyles}>Kannada </MenuItem>
-                <MenuItem value="Marathi" sx={commonStyles}>Marathi </MenuItem>
-                <MenuItem value="Bahasa Malaysia" sx={commonStyles}>Bahasa Malaysia </MenuItem>
-                <MenuItem value="Malayalam" sx={commonStyles}>Malayalam </MenuItem>
-                <MenuItem value="Hindi" sx={commonStyles}>Hindi </MenuItem>
-                <MenuItem value="Bengali" sx={commonStyles}>Bengali </MenuItem>
-                <MenuItem value="Assamese" sx={commonStyles}>Assamese </MenuItem>
-                <MenuItem value="Carnatic" sx={commonStyles}>Carnatic </MenuItem>
-                <MenuItem value="Spanish" sx={commonStyles}>Spanish </MenuItem>
-                <MenuItem value="Urdu" sx={commonStyles}>Urdu </MenuItem>
-                <MenuItem value="Rajasthani" sx={commonStyles}>Rajasthani </MenuItem>
-                <MenuItem value="Multi Language" sx={commonStyles}>Multi Language </MenuItem>
-                <MenuItem value="Other" sx={commonStyles}>Other </MenuItem>
-                <MenuItem value="Arabic" sx={commonStyles}>Arabic </MenuItem>
-                <MenuItem value="Sanskrit" sx={commonStyles}>Sanskrit </MenuItem>
-                <MenuItem value="Not Applicable" sx={commonStyles}>Not Applicable </MenuItem>
-                <MenuItem value="Maithili" sx={commonStyles}>Maithili </MenuItem>
-                <MenuItem value="Greek" sx={commonStyles}>Greek </MenuItem>
+                <MenuItem value="All" sx={menuItemStyle}>All</MenuItem>
+                <MenuItem value="English" sx={menuItemStyle}>English</MenuItem>
+                <MenuItem value="Punjabi" sx={menuItemStyle}>Punjabi </MenuItem>
+                <MenuItem value="Gujarati" sx={menuItemStyle}>Gujarati </MenuItem>
+                <MenuItem value="Telugu" sx={menuItemStyle}>Telugu </MenuItem>
+                <MenuItem value="Bahasa Indonesia" sx={menuItemStyle}>Bahasa Indonesia </MenuItem>
+                <MenuItem value="Tamil" sx={menuItemStyle}>Tamil </MenuItem>
+                <MenuItem value="Kannada" sx={menuItemStyle}>Kannada </MenuItem>
+                <MenuItem value="Marathi" sx={menuItemStyle}>Marathi </MenuItem>
+                <MenuItem value="Bahasa Malaysia" sx={menuItemStyle}>Bahasa Malaysia </MenuItem>
+                <MenuItem value="Malayalam" sx={menuItemStyle}>Malayalam </MenuItem>
+                <MenuItem value="Hindi" sx={menuItemStyle}>Hindi </MenuItem>
+                <MenuItem value="Bengali" sx={menuItemStyle}>Bengali </MenuItem>
+                <MenuItem value="Assamese" sx={menuItemStyle}>Assamese </MenuItem>
+                <MenuItem value="Carnatic" sx={menuItemStyle}>Carnatic </MenuItem>
+                <MenuItem value="Spanish" sx={menuItemStyle}>Spanish </MenuItem>
+                <MenuItem value="Urdu" sx={menuItemStyle}>Urdu </MenuItem>
+                <MenuItem value="Rajasthani" sx={menuItemStyle}>Rajasthani </MenuItem>
+                <MenuItem value="Multi Language" sx={menuItemStyle}>Multi Language </MenuItem>
+                <MenuItem value="Other" sx={menuItemStyle}>Other </MenuItem>
+                <MenuItem value="Arabic" sx={menuItemStyle}>Arabic </MenuItem>
+                <MenuItem value="Sanskrit" sx={menuItemStyle}>Sanskrit </MenuItem>
+                <MenuItem value="Not Applicable" sx={menuItemStyle}>Not Applicable </MenuItem>
+                <MenuItem value="Maithili" sx={menuItemStyle}>Maithili </MenuItem>
+                <MenuItem value="Greek" sx={menuItemStyle}>Greek </MenuItem>
               </Select>
             </FormControl>
           </Grid>
 
-          <Grid item  xs={1.6}>
+          <Grid item  xs={6} sm={3} md={3} lg={1.6} >
             <FormControl fullWidth variant="standard">
               <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px'  }}>Genre</InputLabel>
               <Select
@@ -195,36 +195,36 @@ const AdvancedFilters = ({ advanceFilterData, setAdvanceFilterData }:any) => {
                 IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
                 sx={{ color: 'white', border: '1px solid white',  }}
               >
-                <MenuItem value="All" sx={commonStyles}>All</MenuItem>
-                <MenuItem value="Childrens Music" sx={commonStyles}>Childrens Music</MenuItem>
-                <MenuItem value="Pop" sx={commonStyles}>Pop</MenuItem>
-                <MenuItem value="Soundtrack (Bollywood)" sx={commonStyles}>Soundtrack (Bollywood)</MenuItem>
-                <MenuItem value="Ghazals, Sufi &amp; Qawwali" sx={commonStyles}>Ghazals, Sufi &amp; Qawwali</MenuItem>
-                <MenuItem value="Regional Indian" sx={commonStyles}>Regional Indian</MenuItem>
-                <MenuItem value="Classical - Carnatic" sx={commonStyles}>Classical - Carnatic</MenuItem>
-                <MenuItem value="Soundtrack (Punjabi)" sx={commonStyles}>Soundtrack (Punjabi)</MenuItem>
-                <MenuItem value="Soundtrack (Telugu)" sx={commonStyles}>Soundtrack (Telugu)</MenuItem>
-                <MenuItem value="World Music" sx={commonStyles}>World Music</MenuItem>
-                <MenuItem value="Qawwali" sx={commonStyles}>Qawwali</MenuItem>
-                <MenuItem value="Indian Pop" sx={commonStyles}>Indian Pop</MenuItem>
-                <MenuItem value="Classical - Hindustani" sx={commonStyles}>Classical - Hindustani</MenuItem>
-                <MenuItem value="Soundtrack (Bengali)" sx={commonStyles}>Soundtrack (Bengali)</MenuItem>
-                <MenuItem value="Soundtrack (Kannada)" sx={commonStyles}>Soundtrack (Kannada)</MenuItem>
-                <MenuItem value="Folk" sx={commonStyles}>Folk</MenuItem>
-                <MenuItem value="Miscellaneous/Other" sx={commonStyles}>Miscellaneous/Other</MenuItem>
-                <MenuItem value="Fusion" sx={commonStyles}>Fusion</MenuItem>
-                <MenuItem value="Electronica" sx={commonStyles}>Electronica</MenuItem>
-                <MenuItem value="Soundtrack (Malayalam)" sx={commonStyles}>Soundtrack (Malayalam)</MenuItem>
-                <MenuItem value="IndiPop" sx={commonStyles}>IndiPop</MenuItem>
-                <MenuItem value="Devotional &amp; Spiritual" sx={commonStyles}>Devotional &amp; Spiritual</MenuItem>
-                <MenuItem value="Soundtrack (Other)" sx={commonStyles}>Soundtrack (Other)</MenuItem>
-                <MenuItem value="Western Pop/Rock" sx={commonStyles}>Western Pop/Rock</MenuItem>
-                <MenuItem value="International" sx={commonStyles}>International</MenuItem>
-                <MenuItem value="Soundtrack (Marathi)" sx={commonStyles}>Soundtrack (Marathi)</MenuItem>
-                <MenuItem value="Punjabi/Bhangra" sx={commonStyles}>Punjabi/Bhangra</MenuItem>
-                <MenuItem value="Soundtrack (Tamil)" sx={commonStyles}>Soundtrack (Tamil)</MenuItem>
-                <MenuItem value="Indian Folk" sx={commonStyles}>Indian Folk</MenuItem>
-                <MenuItem value="Devotional" sx={commonStyles}>Devotional</MenuItem>
+                <MenuItem value="All" sx={menuItemStyle}>All</MenuItem>
+                <MenuItem value="Childrens Music" sx={menuItemStyle}>Childrens Music</MenuItem>
+                <MenuItem value="Pop" sx={menuItemStyle}>Pop</MenuItem>
+                <MenuItem value="Soundtrack (Bollywood)" sx={menuItemStyle}>Soundtrack (Bollywood)</MenuItem>
+                <MenuItem value="Ghazals, Sufi &amp; Qawwali" sx={menuItemStyle}>Ghazals, Sufi &amp; Qawwali</MenuItem>
+                <MenuItem value="Regional Indian" sx={menuItemStyle}>Regional Indian</MenuItem>
+                <MenuItem value="Classical - Carnatic" sx={menuItemStyle}>Classical - Carnatic</MenuItem>
+                <MenuItem value="Soundtrack (Punjabi)" sx={menuItemStyle}>Soundtrack (Punjabi)</MenuItem>
+                <MenuItem value="Soundtrack (Telugu)" sx={menuItemStyle}>Soundtrack (Telugu)</MenuItem>
+                <MenuItem value="World Music" sx={menuItemStyle}>World Music</MenuItem>
+                <MenuItem value="Qawwali" sx={menuItemStyle}>Qawwali</MenuItem>
+                <MenuItem value="Indian Pop" sx={menuItemStyle}>Indian Pop</MenuItem>
+                <MenuItem value="Classical - Hindustani" sx={menuItemStyle}>Classical - Hindustani</MenuItem>
+                <MenuItem value="Soundtrack (Bengali)" sx={menuItemStyle}>Soundtrack (Bengali)</MenuItem>
+                <MenuItem value="Soundtrack (Kannada)" sx={menuItemStyle}>Soundtrack (Kannada)</MenuItem>
+                <MenuItem value="Folk" sx={menuItemStyle}>Folk</MenuItem>
+                <MenuItem value="Miscellaneous/Other" sx={menuItemStyle}>Miscellaneous/Other</MenuItem>
+                <MenuItem value="Fusion" sx={menuItemStyle}>Fusion</MenuItem>
+                <MenuItem value="Electronica" sx={menuItemStyle}>Electronica</MenuItem>
+                <MenuItem value="Soundtrack (Malayalam)" sx={menuItemStyle}>Soundtrack (Malayalam)</MenuItem>
+                <MenuItem value="IndiPop" sx={menuItemStyle}>IndiPop</MenuItem>
+                <MenuItem value="Devotional &amp; Spiritual" sx={menuItemStyle}>Devotional &amp; Spiritual</MenuItem>
+                <MenuItem value="Soundtrack (Other)" sx={menuItemStyle}>Soundtrack (Other)</MenuItem>
+                <MenuItem value="Western Pop/Rock" sx={menuItemStyle}>Western Pop/Rock</MenuItem>
+                <MenuItem value="International" sx={menuItemStyle}>International</MenuItem>
+                <MenuItem value="Soundtrack (Marathi)" sx={menuItemStyle}>Soundtrack (Marathi)</MenuItem>
+                <MenuItem value="Punjabi/Bhangra" sx={menuItemStyle}>Punjabi/Bhangra</MenuItem>
+                <MenuItem value="Soundtrack (Tamil)" sx={menuItemStyle}>Soundtrack (Tamil)</MenuItem>
+                <MenuItem value="Indian Folk" sx={menuItemStyle}>Indian Folk</MenuItem>
+                <MenuItem value="Devotional" sx={menuItemStyle}>Devotional</MenuItem>
 
               </Select>
             </FormControl>