Some changes on how application list is being rendered. Added isDay property on WeatherIcon to render icon accordingly to time of day. Modal can now be closed by clicking on backdrop

client/src/App.tsx

@@ -22,7 +22,7 @@ const App = (): JSX.Element => {
         <Switch>
           <Route exact path='/' component={Home} />
           <Route path='/settings' component={Settings} />
-          <Route path='/apps' component={Apps} />
+          <Route path='/applications' component={Apps} />
         </Switch>
       </BrowserRouter>
     </Provider>

client/src/components/Apps/Apps.module.css

@@ -2,3 +2,12 @@
   display: flex;
   align-items: center;
 }
+
+.AppsMessage {
+  color: var(--color-primary);
+}
+
+.AppsMessage a {
+  color: var(--color-accent);
+  font-weight: 600;
+}

client/src/components/Apps/Apps.tsx

@@ -36,7 +36,9 @@ const Apps = (props: ComponentProps): JSX.Element => {
   const [isInEdit, setIsInEdit] = useState(false);
 
   useEffect(() => {
-    props.getApps();
+    if (props.apps.length === 0) {
+      props.getApps();
+    }
   }, [props.getApps]);
 
   const toggleModal = (): void => {
@@ -49,12 +51,12 @@ const Apps = (props: ComponentProps): JSX.Element => {
 
   return (
     <Container>
-      <Modal isOpen={modalIsOpen}>
+      <Modal isOpen={modalIsOpen} setIsOpen={setModalIsOpen}>
         <AppForm modalHandler={toggleModal} />
       </Modal>
 
       <Headline
-        title='All Apps'
+        title='All Applications'
         subtitle={(<Link to='/'>Go back</Link>)}
       />
       
@@ -75,7 +77,9 @@ const Apps = (props: ComponentProps): JSX.Element => {
         {props.loading
           ? <Spinner />
           : (!isInEdit
-              ? <AppGrid apps={props.apps} />
+              ? props.apps.length > 0
+                ? <AppGrid apps={props.apps} />
+                : <p className={classes.AppsMessage}>You don't have any applications. You can a new one from <Link to='/applications'>/application</Link> menu</p>
               : <AppTable />)
         }
       </div>

client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx

@@ -7,10 +7,13 @@ import { IconMapping, TimeOfDay } from './IconMapping';
 interface ComponentProps {
   theme: Theme;
   weatherStatusCode: number;
+  isDay: number;
 }
 
 const WeatherIcon = (props: ComponentProps): JSX.Element => {
-  const icon = (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.day);
+  const icon = props.isDay
+    ? (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.day)
+    : (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.night);
 
   useEffect(() => {
     const delay = setTimeout(() => {

client/src/components/UI/Modal/Modal.tsx

@@ -1,15 +1,25 @@
+import { MouseEvent, useRef, useEffect } from 'react';
+
 import classes from './Modal.module.css';
 
 interface ComponentProps {
   isOpen: boolean;
+  setIsOpen: Function;
   children: JSX.Element;
 }
 
 const Modal = (props: ComponentProps): JSX.Element => {
+  const modalRef = useRef(null);
   const modalClasses = [classes.Modal, props.isOpen ? classes.ModalOpen : classes.ModalClose].join(' ');
 
+  const clickHandler = (e: MouseEvent) => {
+    if (e.target === modalRef.current) {
+      props.setIsOpen(false);
+    }
+  }
+
   return (
-    <div className={modalClasses}>
+    <div className={modalClasses} onClick={clickHandler} ref={modalRef}>
       {props.children}
     </div>
   )

client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx

@@ -36,7 +36,10 @@ const WeatherWidget = (): JSX.Element => {
         : (
           <Fragment>
             <div className={classes.WeatherIcon}>
-              <WeatherIcon weatherStatusCode={weather.conditionCode} />
+              <WeatherIcon
+                weatherStatusCode={weather.conditionCode}
+                isDay={weather.isDay}
+              />
             </div>
             <div className={classes.WeatherDetails}>
               <span>{weather.tempC}°C</span>