perf: new date picker and add purecomponent to more things

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

@@ -47,6 +47,21 @@ input {
       border-radius: 100%;
     }
   }
+
+  &[type=date] {
+    width: 200px;
+    color: var(--modal-text);
+    background: var(--sidebar);
+    border: none;
+    padding: 10px 10px;
+    border-radius: 5px;
+  }
+}
+
+.dark {
+  ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
 }
 
 h4 {

src/components/modals/main/settings/sections/Greeting.jsx

@@ -5,9 +5,6 @@ import Switch from '../Switch';
 import Text from '../Text';
 import Slider from '../Slider';
 
-import DayPickerInput from 'react-day-picker/DayPickerInput';
-import 'react-day-picker/lib/style.css';
-
 export default class GreetingSettings extends React.PureComponent {
   constructor() {
     super();
@@ -17,11 +14,11 @@ export default class GreetingSettings extends React.PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
-  changeDate = (data) => {
-    localStorage.setItem('birthday', data);
+  changeDate = (e) => {
+    localStorage.setItem('birthday', e.target.value);
 
     this.setState({
-      birthday: data
+      birthday: e.target.value
     });
   }
 
@@ -41,7 +38,7 @@ export default class GreetingSettings extends React.PureComponent {
         <Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.greeting'/>
         <Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting' element='.greeting'/>
         <p>{greeting.birthday_date}</p>
-        <DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
+        <input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)}/>
       </>
     );
   }

src/components/modals/main/tabs/backend/Tab.jsx

@@ -92,4 +92,4 @@ function Tab(props) {
   );
 }
 
-export default React.memo(Tab);
+export default React.memo(Tab);

src/components/modals/main/tabs/backend/Tabs.jsx

@@ -42,7 +42,7 @@ export default class Tabs extends React.PureComponent {
           {this.props.children.map((tab, index) => (
             <Tab
               currentTab={this.state.currentTab}
-              key={tab.props.label || index}
+              key={index}
               label={tab.props.label}
               onClick={(nextTab) => this.onClick(nextTab, tab.props.name)}
               navbar={this.props.navbar || false}

src/components/modals/welcome/WelcomeSections.jsx

@@ -15,7 +15,7 @@ import SettingsFunctionsModal from '../../../modules/helpers/settings/modals';
 const languages = require('../../../modules/languages.json');
 const default_settings = require('../../../modules/default_settings.json');
 
-export default class WelcomeSections extends React.Component {
+export default class WelcomeSections extends React.PureComponent {
   constructor() {
     super();
     this.state = {

src/components/widgets/navbar/Navbar.jsx

@@ -14,7 +14,7 @@ import EventBus from '../../../modules/helpers/eventbus';
 
 import './scss/index.scss';
 
-export default class Navbar extends React.Component {
+export default class Navbar extends React.PureComponent {
   componentDidMount() {
     EventBus.on('refresh', (data) => {
       if (data === 'navbar') {