perf: new date picker and add purecomponent to more things

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,20 @@
+---
+name: Feature Request
+about: Request things to be added to mue
+title: "[Feature Request]"
+labels: enhancement
+assignees: ''
+
+---
+
+**Description**
+A clear and concise description of what you want adding to Mue. If it's related to a problem, mention so.
+
+**Expected behaviour**
+A clear and concise description of what you expected to happen.
+
+**Design**
+Images or Figma prototypes of what your idea would be like.
+
+**Additional context**
+Add any other context about the feature request here.

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   presets: ['@babel/preset-env', ['@babel/preset-react', {
-    'runtime': 'automatic'
+    runtime: 'automatic'
   }]],
   plugins: ['@babel/plugin-proposal-class-properties', '@babel/transform-runtime', 'babel-plugin-transform-react-class-to-function', '@babel/plugin-transform-react-constant-elements']
 };

package.json

@@ -11,17 +11,16 @@
   "license": "BSD-3-Clause",
   "version": "5.1.1",
   "dependencies": {
-    "@emotion/react": "11.4.0",
-    "@emotion/styled": "11.3.0",
-    "@fontsource/lexend-deca": "^4.4.5",
-    "@fontsource/montserrat": "^4.4.5",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "@fontsource/lexend-deca": "^4.5.0",
+    "@fontsource/montserrat": "^4.5.0",
     "@material-ui/core": "5.0.0-beta.0",
     "@material-ui/icons": "5.0.0-beta.0",
     "fetch-jsonp": "^1.1.3",
     "react": "17.0.2",
     "react-clock": "3.0.0",
     "react-color-gradient-picker": "0.1.2",
-    "react-day-picker": "7.4.10",
     "react-dom": "17.0.2",
     "react-modal": "3.14.3",
     "react-sortable-hoc": "2.0.0",
@@ -44,10 +43,10 @@
     "eslint-config-react-app": "^6.0.0",
     "html-webpack-plugin": "^5.3.2",
     "mini-css-extract-plugin": "^2.1.0",
-    "sass": "^1.35.1",
+    "sass": "^1.35.2",
     "sass-loader": "^12.1.0",
     "source-map-loader": "^3.0.0",
-    "webpack": "^5.42.1",
+    "webpack": "^5.44.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^4.0.0-beta.3"
   },

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') {