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 => {

{dateAndTime()}

+ Go to Settings

{greeter()}