From 8392c2422a42c906d3710ccfcd34004303c4cc41 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 9 May 2021 19:02:50 +0200 Subject: [PATCH] Home and Settings components --- client/src/components/Home/Home.module.css | 14 +++++ client/src/components/Home/Home.tsx | 53 +++++++++++++++++-- .../components/Settings/Settings.module.css | 31 +++++++++++ client/src/components/Settings/Settings.tsx | 49 ++++++++++++++--- client/src/components/Themer/Themer.tsx | 32 +++-------- 5 files changed, 142 insertions(+), 37 deletions(-) create mode 100644 client/src/components/Settings/Settings.module.css diff --git a/client/src/components/Home/Home.module.css b/client/src/components/Home/Home.module.css index 6fd7c5f..8bd0511 100644 --- a/client/src/components/Home/Home.module.css +++ b/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; diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx index 616f0a1..55c1025 100644 --- a/client/src/components/Home/Home.tsx +++ b/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 ( - +
+

{dateAndTime()}

+

{greeter()}

+
+ + + + + + diff --git a/client/src/components/Settings/Settings.module.css b/client/src/components/Settings/Settings.module.css new file mode 100644 index 0000000..1d360d7 --- /dev/null +++ b/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; */ +} \ No newline at end of file diff --git a/client/src/components/Settings/Settings.tsx b/client/src/components/Settings/Settings.tsx index 00a5caf..6f1f376 100644 --- a/client/src/components/Settings/Settings.tsx +++ b/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 ( -
-

settings

- Home - -
+ + Go back} + /> +
+ +
+ {/* */} + + + +
+
+ ) } -export default Settings; \ No newline at end of file +export default withRouter(Settings); \ No newline at end of file diff --git a/client/src/components/Themer/Themer.tsx b/client/src/components/Themer/Themer.tsx index ba9184e..b1db345 100644 --- a/client/src/components/Themer/Themer.tsx +++ b/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 (
- {/* */}
- {themes.map((theme: Theme): JSX.Element => )} + {themes.map((theme: Theme, idx: number): JSX.Element => ( + + ))}