From 7b6ac3f6a4a1d21eec9cff52ecca4ca7ad09f541 Mon Sep 17 00:00:00 2001
From: unknown <pawel999@icloud.com>
Date: Sun, 23 May 2021 18:55:27 +0200
Subject: [PATCH] Cleaned up Home component. Added 'settings' link vivible on
 mobile devices

---
 client/src/components/Home/Home.module.css | 18 +++++++++++++++-
 client/src/components/Home/Home.tsx        | 24 ++++++++++++++--------
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Home/Home.module.css b/client/src/components/Home/Home.module.css
index 09da7c5..09d4d0c 100644
--- a/client/src/components/Home/Home.module.css
+++ b/client/src/components/Home/Home.module.css
@@ -24,7 +24,7 @@
   height: 35px;
   background-color: var(--color-accent);
   border-radius: 50%;
-  position: absolute;
+  position: fixed;
   bottom: 10px;
   left: 10px;
   display: flex;
@@ -32,9 +32,25 @@
   align-items: center;
   opacity: 0.25;
   transition: all 0.3s;
+  visibility: hidden;
 }
 
 .SettingsButton:hover {
   cursor: pointer;
   opacity: 1;
+}
+
+.SettingsLink {
+  visibility: visible;
+  color: var(--color-accent);
+}
+
+@media (min-width: 769px) {
+  .SettingsButton {
+    visibility: visible;
+  }
+
+  .SettingsLink {
+    visibility: hidden;
+  }
 }
\ No newline at end of file
diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx
index bc560fc..1598820 100644
--- a/client/src/components/Home/Home.tsx
+++ b/client/src/components/Home/Home.tsx
@@ -1,20 +1,27 @@
 import { useEffect } from 'react';
-import _ from 'underscore';
 import { Link } from 'react-router-dom';
-import { connect, useSelector, useDispatch } from 'react-redux';
-import { GlobalState } from '../../interfaces/GlobalState';
+
+// Redux
+import { connect } from 'react-redux';
 import { getApps, getCategories } from '../../store/actions';
 
-import Icon from '../UI/Icons/Icon/Icon';
+// Typescript
+import { GlobalState } from '../../interfaces/GlobalState';
+import { App, Category } from '../../interfaces';
 
-import classes from './Home.module.css';
+// UI
+import Icon from '../UI/Icons/Icon/Icon';
 import { Container } from '../UI/Layout/Layout';
 import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
-import AppGrid from '../Apps/AppGrid/AppGrid';
-import { App, Category } from '../../interfaces';
 import Spinner from '../UI/Spinner/Spinner';
-import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
+
+// CSS
+import classes from './Home.module.css';
+
+// Components
+import AppGrid from '../Apps/AppGrid/AppGrid';
 import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
+import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
 
 interface ComponentProps {
   getApps: Function;
@@ -74,6 +81,7 @@ const Home = (props: ComponentProps): JSX.Element => {
     <Container>
       <header className={classes.Header}>
         <p>{dateAndTime()}</p>
+        <Link to='/settings' className={classes.SettingsLink}>Go to Settings</Link>
         <span className={classes.HeaderMain}>
           <h1>{greeter()}</h1>
           <WeatherWidget />