fix: background blur transition

src/components/modals/main/settings/ChipSelect.jsx

@@ -0,0 +1,56 @@
+import { useState, memo, useEffect } from 'react';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Chip from '@mui/material/Chip';
+
+function ChipSelect({ label, options, name }) {
+  const [optionsSelected, setoptionsSelected] = useState([]);
+
+  const handleChange = (event) => {
+    const {
+      target: { value },
+    } = event;
+    setoptionsSelected(
+      typeof value === 'string' ? value.split(',') : value,
+    );
+    localStorage.setItem('apiCategories', optionsSelected)
+  };
+  console.log(localStorage.getItem('apiCategories'))
+
+
+  return (
+    <div>
+      <FormControl>
+        <InputLabel id="chipSelect-label">{label}</InputLabel>
+        <Select
+          labelId="chipSelect-label"
+          id="chipSelect"
+          multiple
+          value={optionsSelected}
+          onChange={handleChange}
+          input={<OutlinedInput id="select-multiple-chip" label={label} />}
+          renderValue={(optionsSelected) => (
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+              {optionsSelected.map((value) => (
+                <Chip key={value} label={value} />
+              ))}
+            </Box>
+          )}
+        >
+          {options.map((option) => (
+            <MenuItem key={option.name} value={option.name}>
+              {option.name.charAt(0).toUpperCase() + option.name.slice(1)} ({option.count})
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
+
+export default memo(ChipSelect);

src/components/modals/main/settings/sections/background/Background.jsx

@@ -5,6 +5,7 @@ import { MdSource, MdOutlineKeyboardArrowRight, MdOutlineAutoAwesome } from 'rea
 
 import Header from '../../Header';
 import Checkbox from '../../Checkbox';
+import ChipSelect from '../../ChipSelect';
 import Dropdown from '../../Dropdown';
 import Slider from '../../Slider';
 import Radio from '../../Radio';
@@ -125,16 +126,25 @@ export default class BackgroundSettings extends PureComponent {
               </Dropdown>
             </>
           ) : (
-            <Dropdown
-              label={variables.getMessage('modals.main.settings.sections.background.category')}
-              name="apiCategories"
-            >
-              {this.state.backgroundCategories.map((category) => (
-				  <MenuItem value={category.name} key={category.name}>
-                  {category.name.charAt(0).toUpperCase() + category.name.slice(1)} ({category.count})
-                </MenuItem>
-              ))}
-            </Dropdown>
+            <>
+              {/*<Dropdown
+                label={variables.getMessage('modals.main.settings.sections.background.category')}
+                name="apiCategories"
+              >
+                {this.state.backgroundCategories.map((category) => (
+                  <MenuItem value={category.name} key={category.name}>
+                    {category.name.charAt(0).toUpperCase() + category.name.slice(1)} (
+                    {category.count})
+                  </MenuItem>
+                ))}
+                    </Dropdown>
+              <ChipSelect
+                label={variables.getMessage('modals.main.settings.sections.background.category')}
+                options={this.state.backgroundCategories}
+                name="apiCategories"
+              ></ChipSelect>
+              */}
+            </>
           )}
           <Dropdown
             label={variables.getMessage(