Home and Settings components

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

@@ -1,3 +1,17 @@
+.Header h1 {
+  color: var(--color-primary);
+  font-weight: 700;
+  font-size: 4em;
+  margin-bottom: 0.5em;
+}
+
+.Header p {
+  color: var(--color-primary);
+  font-weight: 300;
+  text-transform: uppercase;
+  height: 30px;
+}
+
 .SettingsButton {
   width: 35px;
   height: 35px;

client/src/components/Home/Home.tsx

@@ -3,22 +3,65 @@ import Icon from '../UI/Icon/Icon';
 
 import classes from './Home.module.css';
 import { Container } from '../UI/Layout/Layout';
-import Headline from '../UI/Headline/Headline';
+import Headline from '../UI/Headlines/Headline/Headline';
+import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
+import Apps from '../Apps/Apps';
 
 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();
+    const now = new Date();
 
-
-    return `${days[date.getDay()]}, ${date.getDate()} of ${months[date.getMonth()]} ${date.getFullYear()}`;
+    return `${days[now.getDay()]}, ${now.getDate()} of ${months[now.getMonth()]} ${now.getFullYear()}`;
   }
 
+  const greeter = (): string => {
+    const now = new Date().getHours();
+    let msg: string;
+
+    if (now > 18) {
+      msg = 'Good evening!';
+    } else if (now > 12) {
+      msg = 'Good afternoon!';
+    } else if (now > 6) {
+      msg = 'Good morning!';
+    } else if (now > 0) {
+      msg = 'Good night!';
+    } else {
+      msg = 'Hello!';
+    }
+
+    return msg;
+  }
+
+  (() => {
+    const mdiName = 'book-open-blank-variant';
+    const expected = 'mdiBookOpenBlankVariant';
+
+    let parsedName = mdiName
+      .split('-')
+      .map((word: string) => `${word[0].toUpperCase()}${word.slice(1)}`)
+      .join('');
+    parsedName = `mdi${parsedName}`;
+    
+    console.log(parsedName);
+    console.log(parsedName === expected);
+  })();
+
   return (
     <Container>
-      <Headline title='Home' subtitle={dateAndTime()} />
+      <header className={classes.Header}>
+        <p>{dateAndTime()}</p>
+        <h1>{greeter()}</h1>
+      </header>
+
+      <SectionHeadline title='Apps' />
+      <Apps />
+
+      <SectionHeadline title='Bookmarks' />
+
       <Link to='/settings' className={classes.SettingsButton}>
         <Icon icon='mdiCog' />
       </Link>

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

@@ -0,0 +1,31 @@
+.Settings {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.SettingsNav {
+  /* background-color: coral; */
+  display: flex;
+  flex-direction: column;
+}
+
+.SettingsNavLink {
+  padding-left: 7px;
+  border-left: 3px solid transparent;
+  display: flex;
+  align-items: center;
+  height: 40px;
+}
+
+.SettingsNavLink:hover {
+  border-left: 3px solid var(--color-primary);
+}
+
+.SettingsNavLinkActive {
+  border-left: 3px solid var(--color-primary);
+}
+
+.SettingsContent {
+  /* background-color:springgreen; */
+}

client/src/components/Settings/Settings.tsx

@@ -1,15 +1,48 @@
-import { Link } from 'react-router-dom';
+import { NavLink, Link, Switch, Route, withRouter, match } 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';
 
-const Settings = (): JSX.Element => {
+interface ComponentProps {
+  match: match;
+}
+
+const Settings = (props: ComponentProps): JSX.Element => {
   return (
-    <div>
-      <h1>settings</h1>
-      <Link to='/'>Home</Link>
-      <Themer />
-    </div>
+    <Container>
+      <Headline
+        title='Settings'
+        subtitle={<Link to='/'>Go back</Link>}
+      />
+      <div className={classes.Settings}>
+        <nav className={classes.SettingsNav}>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings'>
+            Theme
+          </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/nothig'>
+            Nothing
+          </NavLink>
+        </nav>
+        <section className={classes.SettingsContent}>
+          {/* <Themer /> */}
+          <Switch>
+            <Route exact path='/settings' component={Themer} />
+          </Switch>
+        </section>
+      </div>
+    </Container>
   )
 }
 
-export default Settings;
+export default withRouter(Settings);

client/src/components/Themer/Themer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, Fragment } from 'react';
+import { Fragment } from 'react';
 import { connect } from 'react-redux';
 
 import classes from './Themer.module.css';
@@ -6,8 +6,6 @@ import classes from './Themer.module.css';
 import { themes } from './themes.json';
 import { Theme } from '../../interfaces/Theme';
 import ThemePreview from './ThemePreview';
-import { Container } from '../UI/Layout/Layout';
-import Headline from '../UI/Headline/Headline';
 
 import { setTheme } from '../../store/actions';
 
@@ -16,32 +14,18 @@ interface ComponentProps {
 }
 
 const Themer = (props: ComponentProps): JSX.Element => {
-  useEffect((): void => {
-    if (localStorage.theme) {
-      applyTheme(localStorage.theme);
-    }
-  }, []);
-
-  const applyTheme = (themeName: string): void => {
-    const newTheme = themes.find((theme: Theme) => theme.name === themeName);
-    
-    if (newTheme) {
-      for (const [key, value] of Object.entries(newTheme.colors)) {
-        document.body.style.setProperty(`--color-${key}`, value);
-      }
-      localStorage.setItem('theme', themeName);
-    }
-  }
 
   return (
     <Fragment>
       <div>
-        {/* <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={props.setTheme} />)}
+          {themes.map((theme: Theme, idx: number): JSX.Element => (
+            <ThemePreview
+              key={idx}
+              theme={theme}
+              applyTheme={props.setTheme}
+            />
+          ))}
         </div>
       </div>
     </Fragment>