fix: languages and dark theme day picker

src/components/modals/main/scss/index.scss

@@ -4,6 +4,7 @@
 @import 'settings/main';
 @import 'settings/buttons';
 @import 'settings/dropdown';
+@import 'settings/daypicker';
 
 @import './settings/react-color-picker-gradient-picker-custom-styles.scss';
 

src/components/modals/main/scss/settings/_buttons.scss

@@ -95,7 +95,6 @@
   &:hover {
     background: #2d3436;
     color: map-get($theme-colours, 'main');
-    ;
   }
 }
 
@@ -117,7 +116,6 @@
   &:hover {
     background: #ff4757;
     color: map-get($theme-colours, 'main');
-    ;
   }
 }
 
@@ -159,7 +157,7 @@ input[type=number]::-webkit-outer-spin-button {
   color: var(--modal-text) !important;
 }
 
-.MuiIconButton-label > svg.MuiSvgIcon-root {
+.MuiIconButton-label>svg.MuiSvgIcon-root {
   color: var(--modal-text) !important;
 }
 
@@ -174,16 +172,19 @@ legend {
   border-radius: 15px;
   margin-bottom: 10px;
   font-size: 1.5rem;
+
   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.22);
     transition: 0.3s;
   }
+
   z-index: 999 !important;
 }
 
 li.stortableitem {
   width: 200px;
-}
+}

src/components/modals/main/scss/settings/_daypicker.scss

@@ -0,0 +1,26 @@
+.DayPickerInput,
+.input-container {
+  input {
+    width: 200px;
+    color: var(--modal-text) !important;
+    background: var(--sidebar);
+    border: none;
+    padding: 10px 10px;
+    border-radius: 5px;
+  }
+}
+
+.DayPicker-Day--selected {
+  background-color: #ff4757 !important;
+  color: white;
+}
+
+.DayPicker-Months,
+.DayPickerInput-Overlay {
+  background-color: var(--background) !important;
+  color: var(--modal-text) !important;
+}
+
+.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
+  color: black !important;
+}

src/components/modals/main/scss/settings/_dropdown.scss

@@ -20,18 +20,3 @@ select {
     font: -moz-pull-down-menu !important;
   }
 }
-
-.react-date-picker__wrapper {
-  padding: 0.5rem 1rem !important;
-  box-sizing: border-box !important;
-  border-image-slice: 1 !important;
-  border-image-source: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%) !important;
-  background: transparent !important;
-  color: #fff !important;
-}
-
-.react-date-picker__clear-button,
-.react-calendar__navigation__prev2-button,
-.react-calendar__navigation__next2-button {
-  display: none !important;
-}

src/components/modals/main/scss/settings/_main.scss

@@ -26,17 +26,6 @@ input {
   }
 }
 
-.DayPickerInput, .input-container {
-  input {
-    width: 200px;
-    color: var(--modal-text) ! important;
-    background: var(--sidebar);
-    border: none;
-    padding: 10px 10px;
-    border-radius: 5px;
-  }
-}
-
 h4 {
   cursor: pointer;
 }
@@ -165,14 +154,4 @@ input[type=color]::-moz-color-swatch {
 .radio-title {
   text-transform: uppercase;
   font-weight: bold;
-}
-
-.DayPicker-Day--selected {
-  background-color: #ff4757 !important;
-  color: white;
-}
-
-.DayPicker-Months, .DayPickerInput-Overlay {
-  background-color: var(--background) !important;
-  color: var(--modal-text) !important;
 }

src/index.js

@@ -12,11 +12,15 @@ import '@fontsource/roboto/cyrillic-400.css';
 
 // language
 import merge from '@material-ui/utils/deepmerge';
-const languagecode = localStorage.getItem('language') || 'en-GB';
+const languagecode = localStorage.getItem('language') || 'en_GB';
 // we set things to window. so they're global and we avoid passing the translation strings as props to each component
-window.languagecode = languagecode;
+window.languagecode = languagecode.replace('-', '_');
 // these are merged so if a string is untranslated it doesn't break mue
-window.language = merge(require('./translations/en-GB.json'), require(`./translations/${languagecode}.json`));
+window.language = merge(require('./translations/en_GB.json'), require(`./translations/${window.languagecode}.json`));
+// set html language tag
+if (window.languagecode !== 'en_GB' || window.languagecode !== 'en_US') {
+  document.documentElement.lang = window.languagecode;
+}
 
 // window.constants
 import * as Constants from './modules/constants';

src/modules/helpers/settings.js

@@ -53,13 +53,10 @@ export default class SettingsFunctions {
     const languageCodes = languages.map(({ code }) => code);
     const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
 
-    if (languageCodes.includes(browserLanguage)) {
+    if (languageCodes.includes(browserLanguage.replace('-', '_'))) {
       localStorage.setItem('language', browserLanguage);
-      if (browserLanguage !== 'en-GB' || browserLanguage !== 'en-US') {
-        document.documentElement.lang = browserLanguage;
-      }
     } else {
-      localStorage.setItem('language', 'en-GB');
+      localStorage.setItem('language', 'en_GB');
     }
 
     if (reset) {