Skip to content

Develop/frontend #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Develop/frontend #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ca5a4c
added content to home page
Tamasa94 Mar 13, 2022
42c47c2
added home page styling and content
Tamasa94 Mar 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added frontend/public/images/HomeImage.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 12 additions & 10 deletions frontend/src/components/navigation/UserBar/UserBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const UserBar = () => {
const open = Boolean(anchorEl);
const dispatch = useDispatch();


const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
Expand All @@ -34,16 +33,24 @@ const UserBar = () => {
const editUserSettings = () => {
dispatch(selectSelf());
setEditUserPopup(true);
}
};

const logoutCommand = useCommand(commands.logout);
const username = useSelector((state) => state.user.username);

return (
<>
{editUserPopup && <EditUserPopup OnActionClose={()=>{setEditUserPopup(false)}} />}
{editUserPopup && (
<EditUserPopup
OnActionClose={() => {
setEditUserPopup(false);
}}
/>
)}
<Style.UserBarWrapper>
<Box sx={{ display: "flex", alignItems: "center", textAlign: "center" }}>
<Box
sx={{ display: "flex", alignItems: "center", textAlign: "center" }}
>
<Tooltip title="Account settings">
<IconButton onClick={handleClick} size="small" sx={{ ml: 2 }}>
<Avatar sx={{ width: 32, height: 32 }}>M</Avatar>
Expand Down Expand Up @@ -89,12 +96,7 @@ const UserBar = () => {
<Typography>{username}</Typography>
</MenuItem>
<Divider />
<MenuItem>
<ListItemIcon>
<PersonAdd fontSize="small" />
</ListItemIcon>
Add another account
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is removed yet the "Settings" option stays?

</MenuItem>

<MenuItem>
<ListItemIcon>
<Settings fontSize="small" />
Expand Down
18 changes: 13 additions & 5 deletions frontend/src/pages/Home/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import React from "react";
import { compose } from "react-recompose";
import RatingCommentCache from "../../components/content/Rating/RatingCommentCache";
import withPageWrapper from "../../hoc/withPageWrapper";
import DeleteCachePopup from "./../../components/content/CachePopup/DeleteCachePopup/DeleteCachePopup";
import * as Style from "./style.js";

const Home = () => {
return (
<>
<p>Home Page Construction</p>
</>
<Style.HomeContainer>
<Style.Header>Welcome on Gocache App!</Style.Header>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Gocache" seems wrong

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please also change it to "Welcome to (...)"

<Style.HomeContent>
<Style.CacheImage src="/images/HomeImage.jpg" />
<Style.WelcomeText>
Geocaching is a real-world, outdoor adventure that is happening all
the time, all around the world. To play, participants use the
Geocaching app and/or a GPS device to navigate to cleverly hidden
containers called geocaches.
</Style.WelcomeText>
</Style.HomeContent>
</Style.HomeContainer>
);
};

Expand Down
36 changes: 36 additions & 0 deletions frontend/src/pages/Home/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import styled from "styled-components";

export const HomeContainer = styled.div`
display: flex;
flex-direction: column;
flex-wrap: nowrap;
row-gap: 45px;
background-color: #15171c;
margin: 0 30px;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.32);
padding: 60px;
min-width: 500px;
max-width: 1300px;
color: #e1e9fc;
`;

export const Header = styled.h2`
font-size: 70px;
`;

export const HomeContent = styled.div`
display: flex;
column-gap: 45px;
align-items: center;
justify-content: center;
`;

export const CacheImage = styled.img`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The current style makes the image not-so-well cropped
Screenshot from 2022-03-13 22-11-49

border-radius: 100%;
`;

export const WelcomeText = styled.p`
font-size: 40px;
text-align: justify;
line-height: 1.4;
`;