Case-insensitive sorting. App version checking

client/src/components/Settings/AppDetails/AppDetails.module.css

@@ -0,0 +1,8 @@
+.AppVersion {
+  color: var(--color-primary);
+  margin-bottom: 15px;
+}
+
+.AppVersion a {
+  color: var(--color-accent);
+}

client/src/components/Settings/AppDetails/AppDetails.tsx

@@ -0,0 +1,25 @@
+import { Fragment } from 'react';
+
+import classes from './AppDetails.module.css';
+import Button from '../../UI/Buttons/Button/Button';
+import { checkVersion } from '../../../utility';
+
+const AppDetails = (): JSX.Element => {
+  return (
+    <Fragment>
+      <p className={classes.AppVersion}>
+        <a
+          href='https://github.com/pawelmalak/flame'
+          target='_blank'
+          rel='noreferrer'>
+          Flame
+        </a>
+        {' '}
+        version {process.env.REACT_APP_VERSION}
+      </p>
+      <Button click={() => checkVersion(true)}>Check for updates</Button>
+    </Fragment>
+  )
+}
+
+export default AppDetails;

client/src/components/Settings/Settings.tsx

@@ -1,12 +1,14 @@
-import { NavLink, Link, Switch, Route, withRouter } from 'react-router-dom';
+import { NavLink, Link, Switch, Route } from 'react-router-dom';
 
 import classes from './Settings.module.css';
 
 import { Container } from '../UI/Layout/Layout';
 import Headline from '../UI/Headlines/Headline/Headline';
+
 import Themer from '../Themer/Themer';
 import WeatherSettings from './WeatherSettings/WeatherSettings';
 import OtherSettings from './OtherSettings/OtherSettings';
+import AppDetails from './AppDetails/AppDetails';
 
 const Settings = (): JSX.Element => {
   return (
@@ -38,12 +40,20 @@ const Settings = (): JSX.Element => {
             to='/settings/other'>
             Other
           </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/app'>
+            App
+          </NavLink>
         </nav>
         <section className={classes.SettingsContent}>
           <Switch>
             <Route exact path='/settings' component={Themer} />
             <Route path='/settings/weather' component={WeatherSettings} />
             <Route path='/settings/other' component={OtherSettings} />
+            <Route path='/settings/app' component={AppDetails} />
           </Switch>
         </section>
       </div>
@@ -51,4 +61,4 @@ const Settings = (): JSX.Element => {
   )
 }
 
-export default withRouter(Settings);
+export default Settings;