diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss
index 2ec7d797..674661bb 100644
--- a/src/components/modals/main/scss/settings/_buttons.scss
+++ b/src/components/modals/main/scss/settings/_buttons.scss
@@ -169,13 +169,14 @@ legend {
border-radius: 15px;
margin-bottom: 10px;
font-size: 1.5rem;
+ width: 250px !important;
svg {
font-size: 1.3rem;
}
&:hover {
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.15);
transition: 0.3s;
}
diff --git a/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
index a29344d9..d181d3fb 100644
--- a/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
+++ b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
@@ -28,4 +28,12 @@ div.color-preview-area > div > div:nth-child(5) {
.gradient-degree-pointer {
background-color: var(--modal-text) !important;
+}
+
+.input-field .label {
+ color: var(--modal-text) !important;
+}
+
+.gradient-type-item.active::after {
+ border: 2px solid var(--modal-text) !important;
}
\ No newline at end of file
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 99c044b7..b4175853 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -16,7 +16,8 @@ export default class BackgroundSettings extends React.PureComponent {
super();
this.state = {
customBackground: localStorage.getItem('customBackground') || '',
- backgroundType: localStorage.getItem('backgroundType') || 'api'
+ backgroundType: localStorage.getItem('backgroundType') || 'api',
+ backgroundCategories: [window.language.modals.main.loading]
};
this.language = window.language.modals.main.settings;
}
@@ -61,6 +62,17 @@ export default class BackgroundSettings extends React.PureComponent {
localStorage.setItem('customBackground', this.state.customBackground);
}
+ async getBackgroundCategories() {
+ const data = await (await fetch(window.constants.API_URL + '/images/categories')).json();
+ this.setState({
+ backgroundCategories: data
+ });
+ }
+
+ componentDidMount() {
+ this.getBackgroundCategories();
+ }
+
render() {
const { background } = this.language.sections;
@@ -83,11 +95,9 @@ export default class BackgroundSettings extends React.PureComponent {
-
-
-
-
-
+ {this.state.backgroundCategories.map((category) => (
+
+ ))}
>
);
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index 9eafd333..21e5c166 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -64,6 +64,8 @@ export default class Background extends React.PureComponent {
const backgroundImage = document.querySelector('#backgroundImage');
if (localStorage.getItem('bgtransition') === 'false') {
+ document.querySelector('.photoInformation').style.display = 'block';
+
return backgroundImage.setAttribute(
'style',
`background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%);`
diff --git a/src/scss/modules/_toast.scss b/src/scss/modules/_toast.scss
index ea6cfe7b..0257c70e 100644
--- a/src/scss/modules/_toast.scss
+++ b/src/scss/modules/_toast.scss
@@ -1,7 +1,8 @@
.Toastify__toast-body {
- color: #000000 !important;
+ color: var(--modal-text) !important;
font-size: 16px !important;
padding: 15px 20px !important;
+ background: var(--background) !important;
}
.Toastify__toast {
@@ -20,21 +21,21 @@
.Toastify__progress-bar--default {
height: 3px !important;
- background: #000000 !important;
+ background: var(--modal-text) !important;
}
.Toastify__toast-container {
width: auto !important;
}
-.dark {
- .Toastify__toast {
- background-color: #2f3542 !important;
- }
+.Toastify__progress-bar--default {
+ color: var(--modal-text) !important;
+}
- .Toastify__toast-body,
- .Toastify__progress-bar--default,
- .Toastify__close-button {
- color: white !important;
- }
+.Toastify__close-button {
+ color: var(--modal-text) !important;
+}
+
+.Toastify__toast--default {
+ background: var(--background) !important;
}
\ No newline at end of file