fix: style fixes, finish background categories option, fix photoinformation

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;
   }
 

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;
 }

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 {
         <Radio title={background.source.api} options={apiOptions} name='backgroundAPI'/>
         <br/>
         <Dropdown label='Category' name='apiCategory'>
-          <option value='wildlife'>Landscapes</option>
-          <option value='wildlife'>Wildlife</option>
-          <option value='nature'>Vehicles</option>
-          <option value='nature'>Cities</option>
-          <option value='nature'>Castles</option>
+          {this.state.backgroundCategories.map((category) => (
+            <option value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</option>
+          ))}
         </Dropdown>
       </>
     );

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')}%);`

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;
 }