Added redux. Moved theme loading/setting to redux actions. Added automatic theme loading based on localStorage value.

client/src/components/Home/Home.module.css

@@ -0,0 +1,19 @@
+.SettingsButton {
+  width: 35px;
+  height: 35px;
+  background-color: var(--color-accent);
+  border-radius: 50%;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.25;
+  transition: all 0.3s;
+}
+
+.SettingsButton:hover {
+  cursor: pointer;
+  opacity: 1;
+}

client/src/components/Home/Home.tsx

@@ -0,0 +1,29 @@
+import { Link } from 'react-router-dom';
+import Icon from '../UI/Icon/Icon';
+
+import classes from './Home.module.css';
+import { Container } from '../UI/Layout/Layout';
+import Headline from '../UI/Headline/Headline';
+
+const Home = (): JSX.Element => {
+  const dateAndTime = (): string => {
+    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+    const date = new Date();
+
+
+    return `${days[date.getDay()]}, ${date.getDate()} of ${months[date.getMonth()]} ${date.getFullYear()}`;
+  }
+
+  return (
+    <Container>
+      <Headline title='Home' subtitle={dateAndTime()} />
+      <Link to='/settings' className={classes.SettingsButton}>
+        <Icon icon='mdiCog' />
+      </Link>
+    </Container>
+  )
+}
+
+export default Home;

client/src/components/Themer/ThemePreview.module.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .ThemePreview:hover {
@@ -13,6 +13,7 @@
 .ThemePreview p {
   text-transform: capitalize;
   margin: 8px 0;
+  color: var(--color-primary);
   /* align-self: flex-start; */
 }
 

client/src/components/Themer/Themer.tsx

@@ -1,4 +1,5 @@
-import { useEffect } from 'react';
+import { useEffect, Fragment } from 'react';
+import { connect } from 'react-redux';
 
 import classes from './Themer.module.css';
 
@@ -8,7 +9,13 @@ import ThemePreview from './ThemePreview';
 import { Container } from '../UI/Layout/Layout';
 import Headline from '../UI/Headline/Headline';
 
-const Themer = (): JSX.Element => {
+import { setTheme } from '../../store/actions';
+
+interface ComponentProps {
+  setTheme: Function;
+}
+
+const Themer = (props: ComponentProps): JSX.Element => {
   useEffect((): void => {
     if (localStorage.theme) {
       applyTheme(localStorage.theme);
@@ -27,19 +34,20 @@ const Themer = (): JSX.Element => {
   }
 
   return (
-    <Container>
+    <Fragment>
       <div>
-        <Headline
+        {/* <Headline
           title='Themes'
           subtitle='Select new theme by clicking on it'
-        />
+        /> */}
         <div className={classes.ThemerGrid}>
-          {themes.map((theme: Theme): JSX.Element => <ThemePreview theme={theme} applyTheme={applyTheme} />)}
+          {themes.map((theme: Theme): JSX.Element => <ThemePreview theme={theme} applyTheme={props.setTheme} />)}
         </div>
       </div>
-    </Container>
+    </Fragment>
 
   )
 }
 
-export default Themer;
+
+export default connect(null, { setTheme })(Themer);