Created WeatherWidget

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

@@ -19,29 +19,6 @@
   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;

client/src/components/Home/Home.tsx

@@ -5,7 +5,6 @@ import { GlobalState } from '../../interfaces/GlobalState';
 import { getApps } from '../../store/actions';
 
 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';
@@ -13,6 +12,7 @@ import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
 import AppGrid from '../Apps/AppGrid/AppGrid';
 import { App } from '../../interfaces';
 import Spinner from '../UI/Spinner/Spinner';
+import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
 
 interface ComponentProps {
   getApps: Function;
@@ -63,19 +63,11 @@ const Home = (props: ComponentProps): JSX.Element => {
         <p>{dateAndTime()}</p>
         <span className={classes.HeaderMain}>
           <h1>{greeter()}</h1>
-          <div className={classes.WeatherWidget}>
-            <div className={classes.WeatherIcon}>
-              <WeatherIcon icon='clear-day' />
-            </div>
-            <div className={classes.WeatherDetails}>
-              <span>30°C</span>
-              <span>15°C</span>
-            </div>
-          </div>
+          <WeatherWidget />
         </span>
       </header>
-
-      <SectionHeadline title='Apps' link='/apps' />
+      
+      <SectionHeadline title='Applications' link='/applications' />
       {props.loading
         ? <Spinner />
         : <AppGrid apps={props.apps.filter((app: App) => app.isPinned)} />