From e293325da72a6f0f4744f38e7c73698d4575f73c Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 14 May 2021 18:51:56 +0200 Subject: [PATCH] WeatherIcon. Small changes to theme state --- client/package-lock.json | 5 +++ client/package.json | 1 + .../src/components/Apps/AppCard/AppCard.tsx | 2 +- .../src/components/Apps/AppForm/AppForm.tsx | 2 +- .../src/components/Apps/AppTable/AppTable.tsx | 2 +- client/src/components/Home/Home.module.css | 32 ++++++++++++++++- client/src/components/Home/Home.tsx | 19 ++++++++--- .../UI/Buttons/ActionButton/ActionButton.tsx | 29 +++++++++++++--- client/src/components/UI/Icon/Icon.module.css | 4 --- .../components/UI/Icons/Icon/Icon.module.css | 6 ++++ .../components/UI/{ => Icons}/Icon/Icon.tsx | 0 .../UI/Icons/WeatherIcon/WeatherIcon.tsx | 34 +++++++++++++++++++ client/src/components/UI/Modal/Modal.tsx | 1 - client/src/store/actions/actionTypes.ts | 4 +-- client/src/store/actions/theme.ts | 10 +++--- client/src/store/reducers/theme.ts | 18 ++++++---- 16 files changed, 137 insertions(+), 32 deletions(-) delete mode 100644 client/src/components/UI/Icon/Icon.module.css create mode 100644 client/src/components/UI/Icons/Icon/Icon.module.css rename client/src/components/UI/{ => Icons}/Icon/Icon.tsx (100%) create mode 100644 client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx diff --git a/client/package-lock.json b/client/package-lock.json index fe13e61..288d925 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -13766,6 +13766,11 @@ "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==" }, + "skycons-ts": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/skycons-ts/-/skycons-ts-0.2.0.tgz", + "integrity": "sha512-GBn7Ox0dvZa9cin4NZIuBC4isdNYubSfJ+Rv0m5vkOQ8eBHPFApV98mbaAOseoKEBBjqsR1xDsY55rJ0HfwB6w==" + }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", diff --git a/client/package.json b/client/package.json index 8f7d7a9..5a7676c 100644 --- a/client/package.json +++ b/client/package.json @@ -23,6 +23,7 @@ "redux": "^4.1.0", "redux-devtools-extension": "^2.13.9", "redux-thunk": "^2.3.0", + "skycons-ts": "^0.2.0", "typescript": "^4.2.4", "web-vitals": "^1.1.2" }, diff --git a/client/src/components/Apps/AppCard/AppCard.tsx b/client/src/components/Apps/AppCard/AppCard.tsx index b927c5c..bc6c967 100644 --- a/client/src/components/Apps/AppCard/AppCard.tsx +++ b/client/src/components/Apps/AppCard/AppCard.tsx @@ -1,7 +1,7 @@ import { Link } from 'react-router-dom'; import classes from './AppCard.module.css'; -import Icon from '../../UI/Icon/Icon'; +import Icon from '../../UI/Icons/Icon/Icon'; import { App } from '../../../interfaces'; diff --git a/client/src/components/Apps/AppForm/AppForm.tsx b/client/src/components/Apps/AppForm/AppForm.tsx index 6e822f9..cea768e 100644 --- a/client/src/components/Apps/AppForm/AppForm.tsx +++ b/client/src/components/Apps/AppForm/AppForm.tsx @@ -4,7 +4,7 @@ import { addApp } from '../../../store/actions'; import { NewApp } from '../../../interfaces/App'; import classes from './AppForm.module.css'; -import Icon from '../../UI/Icon/Icon'; +import Icon from '../../UI/Icons/Icon/Icon'; interface ComponentProps { modalHandler: Function; diff --git a/client/src/components/Apps/AppTable/AppTable.tsx b/client/src/components/Apps/AppTable/AppTable.tsx index 6798e1d..4f72237 100644 --- a/client/src/components/Apps/AppTable/AppTable.tsx +++ b/client/src/components/Apps/AppTable/AppTable.tsx @@ -3,7 +3,7 @@ import { App, GlobalState } from '../../../interfaces'; import { pinApp, deleteApp } from '../../../store/actions'; import classes from './AppTable.module.css'; -import Icon from '../../UI/Icon/Icon'; +import Icon from '../../UI/Icons/Icon/Icon'; interface ComponentProps { apps: App[]; diff --git a/client/src/components/Home/Home.module.css b/client/src/components/Home/Home.module.css index 8bd0511..30ac2bb 100644 --- a/client/src/components/Home/Home.module.css +++ b/client/src/components/Home/Home.module.css @@ -2,7 +2,7 @@ color: var(--color-primary); font-weight: 700; font-size: 4em; - margin-bottom: 0.5em; + display: inline-block; } .Header p { @@ -12,6 +12,36 @@ height: 30px; } +.HeaderMain { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2.5rem; +} + +.WeatherWidget { + display: flex; +} + +.WeatherDetails { + display: flex; + flex-direction: column; + justify-content: center; + font-size: 16px; + color: var(--color-primary); + margin-left: 10px; + font-weight: 500; +} + +.WeatherDetails span:first-child { + border-bottom: 1px solid var(--color-primary); + padding-bottom: 5px; +} + +.WeatherDetails span:last-child { + padding-top: 5px; +} + .SettingsButton { width: 35px; height: 35px; diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx index bf561a4..26e0c40 100644 --- a/client/src/components/Home/Home.tsx +++ b/client/src/components/Home/Home.tsx @@ -4,14 +4,12 @@ import { connect } from 'react-redux'; import { GlobalState } from '../../interfaces/GlobalState'; import { getApps } from '../../store/actions'; -import Icon from '../UI/Icon/Icon'; -import Modal from '../UI/Modal/Modal'; +import Icon from '../UI/Icons/Icon/Icon'; +import WeatherIcon from '../UI/Icons/WeatherIcon/WeatherIcon'; import classes from './Home.module.css'; import { Container } from '../UI/Layout/Layout'; -import Headline from '../UI/Headlines/Headline/Headline'; import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline'; -import Apps from '../Apps/Apps'; import AppGrid from '../Apps/AppGrid/AppGrid'; import { App } from '../../interfaces'; import Spinner from '../UI/Spinner/Spinner'; @@ -63,7 +61,18 @@ const Home = (props: ComponentProps): JSX.Element => {

{dateAndTime()}

-

{greeter()}

+ +

{greeter()}

+
+
+ +
+
+ 30°C + 15°C +
+
+
diff --git a/client/src/components/UI/Buttons/ActionButton/ActionButton.tsx b/client/src/components/UI/Buttons/ActionButton/ActionButton.tsx index 9c9c335..3e99935 100644 --- a/client/src/components/UI/Buttons/ActionButton/ActionButton.tsx +++ b/client/src/components/UI/Buttons/ActionButton/ActionButton.tsx @@ -2,7 +2,7 @@ import { Fragment } from 'react'; import { Link } from 'react-router-dom'; import classes from './ActionButton.module.css'; -import Icon from '../../Icon/Icon'; +import Icon from '../../Icons/Icon/Icon'; interface ComponentProps { name: string; @@ -24,11 +24,32 @@ const ActionButton = (props: ComponentProps): JSX.Element => { ); if (props.link) { - return ({body}) + return ( + + {body} + + ) } else if (props.handler) { - return (
{body}
) + return ( +
{ + if (e.key === 'Enter' && props.handler) props.handler() + }} + tabIndex={0} + >{body} +
+ ) } else { - return (
{body}
) + return ( +
+ {body} +
+ ) } } diff --git a/client/src/components/UI/Icon/Icon.module.css b/client/src/components/UI/Icon/Icon.module.css deleted file mode 100644 index 871f07e..0000000 --- a/client/src/components/UI/Icon/Icon.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.Icon { - color: var(--color-primary); - width: 90%; -} \ No newline at end of file diff --git a/client/src/components/UI/Icons/Icon/Icon.module.css b/client/src/components/UI/Icons/Icon/Icon.module.css new file mode 100644 index 0000000..33b3aa7 --- /dev/null +++ b/client/src/components/UI/Icons/Icon/Icon.module.css @@ -0,0 +1,6 @@ +.Icon { + color: var(--color-primary); + /* for settings */ + /* color: var(--color-background); */ + width: 90%; +} \ No newline at end of file diff --git a/client/src/components/UI/Icon/Icon.tsx b/client/src/components/UI/Icons/Icon/Icon.tsx similarity index 100% rename from client/src/components/UI/Icon/Icon.tsx rename to client/src/components/UI/Icons/Icon/Icon.tsx diff --git a/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx b/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx new file mode 100644 index 0000000..7f9d484 --- /dev/null +++ b/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx @@ -0,0 +1,34 @@ +import { useEffect } from 'react'; +import { connect } from 'react-redux'; +import { IconKey, Skycons } from 'skycons-ts'; +import { GlobalState, Theme } from '../../../../interfaces'; + +interface ComponentProps { + theme: Theme; + icon: IconKey +} + +const WeatherIcon = (props: ComponentProps): JSX.Element => { + const randomId = `icon-${Math.floor(Math.random() * 1000)}`; + useEffect(() => { + const delay = setTimeout(() => { + const skycons = new Skycons({'color': props.theme.colors.accent}); + skycons.add(`weather-icon-${randomId}`, props.icon); + skycons.play(); + }, 1); + + return () => { + clearTimeout(delay); + } + }, []); + + return +} + +const mapStateToProps = (state: GlobalState) => { + return { + theme: state.theme.theme + } +} + +export default connect(mapStateToProps)(WeatherIcon); \ No newline at end of file diff --git a/client/src/components/UI/Modal/Modal.tsx b/client/src/components/UI/Modal/Modal.tsx index da350dd..5f458ee 100644 --- a/client/src/components/UI/Modal/Modal.tsx +++ b/client/src/components/UI/Modal/Modal.tsx @@ -1,5 +1,4 @@ import classes from './Modal.module.css'; -import Icon from '../Icon/Icon'; interface ComponentProps { isOpen: boolean; diff --git a/client/src/store/actions/actionTypes.ts b/client/src/store/actions/actionTypes.ts index 92041be..5336541 100644 --- a/client/src/store/actions/actionTypes.ts +++ b/client/src/store/actions/actionTypes.ts @@ -1,6 +1,6 @@ import { GetAppsAction, - SetTheme, + SetThemeAction, PinAppAction, AddAppAction, DeleteAppAction @@ -17,4 +17,4 @@ export enum ActionTypes { deleteApp = 'DELETE_APP' } -export type Action = GetAppsAction | SetTheme | PinAppAction | AddAppAction | DeleteAppAction; \ No newline at end of file +export type Action = GetAppsAction | SetThemeAction | PinAppAction | AddAppAction | DeleteAppAction; \ No newline at end of file diff --git a/client/src/store/actions/theme.ts b/client/src/store/actions/theme.ts index 1fa3552..0134ead 100644 --- a/client/src/store/actions/theme.ts +++ b/client/src/store/actions/theme.ts @@ -3,9 +3,9 @@ import { themes } from '../../components/Themer/themes.json'; import { Theme } from '../../interfaces/Theme'; import { ActionTypes } from './actionTypes'; -export interface SetTheme { +export interface SetThemeAction { type: ActionTypes.setTheme, - payload: string + payload: Theme } export const setTheme = (themeName: string) => (dispatch: Dispatch) => { @@ -15,14 +15,14 @@ export const setTheme = (themeName: string) => (dispatch: Dispatch) => { localStorage.setItem('theme', themeName); loadTheme(theme); - dispatch({ + dispatch({ type: ActionTypes.setTheme, - payload: themeName + payload: theme }) } } -export const loadTheme = (theme: Theme) => { +export const loadTheme = (theme: Theme): void => { for (const [key, value] of Object.entries(theme.colors)) { document.body.style.setProperty(`--color-${key}`, value); } diff --git a/client/src/store/reducers/theme.ts b/client/src/store/reducers/theme.ts index 63767d2..fabcc4b 100644 --- a/client/src/store/reducers/theme.ts +++ b/client/src/store/reducers/theme.ts @@ -1,20 +1,24 @@ import { ActionTypes, Action } from '../actions'; +import { Theme } from '../../interfaces/Theme'; export interface State { - theme: string; + theme: Theme; } const initialState: State = { - theme: 'blues' -} - -const setTheme = (state: State, action: Action): State => { - return { theme: action.payload }; + theme: { + name: 'blues', + colors: { + background: '#2B2C56', + primary: '#EFF1FC', + accent: '#6677EB' + } + } } const themeReducer = (state = initialState, action: Action) => { switch (action.type) { - case ActionTypes.setTheme: return setTheme(state, action); + case ActionTypes.setTheme: return { theme: action.payload }; default: return state; } }