WeatherIcon. Small changes to theme state

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 (<Link to={props.link}>{body}</Link>)
+    return (
+      <Link
+        to={props.link}
+        tabIndex={0}>
+        {body}
+      </Link>
+    )
   } else if (props.handler) {
-    return (<div className={classes.ActionButton} onClick={props.handler}>{body}</div>)
+    return (
+      <div
+        className={classes.ActionButton}
+        onClick={props.handler}
+        onKeyPress={(e) => {
+          if (e.key === 'Enter' && props.handler) props.handler()
+        }}
+        tabIndex={0}
+        >{body}
+      </div>
+    )
   } else {
-    return (<div className={classes.ActionButton}>{body}</div>)
+    return (
+      <div
+        className={classes.ActionButton}>
+        {body}
+      </div>
+    )
   }
 }
 

client/src/components/UI/Icon/Icon.module.css

@@ -1,4 +0,0 @@
-.Icon {
-  color: var(--color-primary);
-  width: 90%;
-}

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%;
+}

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 <canvas id={`weather-icon-${randomId}`} width='50' height='50'></canvas>
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    theme: state.theme.theme
+  }
+}
+
+export default connect(mapStateToProps)(WeatherIcon);

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;