Skip to content

Commit

Permalink
Add social media buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@ezwelty
ezwelty committed Jul 9, 2023
1 parent ab1749b commit cd6eb61
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 52 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@reach/tabs": "^0.13.0",
"@reach/window-size": "^0.13.2",
"@reduxjs/toolkit": "^1.5.1",
"@styled-icons/boxicons-logos": "^10.47.0",
"@styled-icons/boxicons-regular": "^10.23.0",
"@styled-icons/boxicons-solid": "^10.23.0",
"axios": "^0.21.1",
Expand Down
136 changes: 84 additions & 52 deletions src/components/desktop/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { logout } from '../../redux/authSlice'
import aboutRoutes from '../about/aboutRoutes'
import Button from '../ui/Button'
import ResetButton from '../ui/ResetButton'
import SocialButtons from '../ui/SocialButtons'

const StyledUser = styled(User)`
svg {
Expand Down Expand Up @@ -40,7 +41,7 @@ const StyledHeader = styled.header`
ul {
list-style: none;
padding: 0;
margin: 0 10px 0 0;
margin: 0 0 0 0;
height: 100%;
display: flex;
Expand Down Expand Up @@ -177,6 +178,32 @@ const SignupButton = styled(Button)`
color: ${({ theme }) => theme.background};
`

const StyledSocialButtons = styled(SocialButtons)`
margin: 0 5px;
a {
color: ${({ theme }) => theme.text};
position: relative;
display: inline-block;
padding: 12px 0;
&:hover::before {
content: '';
width: 100%;
position: absolute;
background-color: #ffa41b;
height: 3px;
bottom: 0;
left: 0;
}
}
svg {
height: 32px;
margin: 0 2px;
}
`

// TODO: Clean up file structure (i.e. logo_white.svg) from ./public
const Header = () => {
const { t } = useTranslation()
Expand All @@ -195,66 +222,71 @@ const Header = () => {
return (
<StyledHeader>
<LogoLink to="/map">
<img src="/logo_orange.svg" alt="Falling Fruit Logo" />
<img src="/logo_orange.svg" alt="Falling Fruit logo" />
</LogoLink>
<nav>
<ul>
<li>
<NavLink to="/map" activeClassName="active">
{t('glossary.map')}
</NavLink>
</li>
<li>
<StyledDropdown label={t('glossary.about')} isMatch={isAboutPage}>
<NavLink to="/about" activeClassName="active">
{t('pages.project')}
</NavLink>
<NavLink to="/data" activeClassName="active">
{t('pages.data')}
</NavLink>
<NavLink to="/sharing" activeClassName="active">
{t('pages.sharing')}
</NavLink>
<NavLink to="/press" activeClassName="active">
{t('pages.press')}
<div style={{ marginRight: 'auto' }}>
<ul>
<li>
<NavLink to="/map" activeClassName="active">
{t('glossary.map')}
</NavLink>
</StyledDropdown>
</li>
</ul>
<ul>
{user ? (
</li>
<li>
<StyledDropdown
label={
<>
<StyledUser height={15} /> {user.name || user.email}
</>
}
isMatch={isAccountPage}
>
<NavLink to="/users/edit" activeClassName="active">
{t('glossary.account')}
<StyledDropdown label={t('glossary.about')} isMatch={isAboutPage}>
<NavLink to="/about" activeClassName="active">
{t('pages.project')}
</NavLink>
<NavLink to="/data" activeClassName="active">
{t('pages.data')}
</NavLink>
<NavLink to="/sharing" activeClassName="active">
{t('pages.sharing')}
</NavLink>
<NavLink to="/press" activeClassName="active">
{t('pages.press')}
</NavLink>
<ResetButton onClick={handleLogout}>
{t('glossary.logout')}
</ResetButton>
</StyledDropdown>
</li>
) : (
<>
</ul>
</div>
<div>
<ul>
{user ? (
<li>
<NavLink to="/users/sign_in" activeClassName="active">
{t('users.sign_in')}
</NavLink>
</li>
<li>
<NavLink to="/users/sign_up" activeClassName="active">
<SignupButton>{t('glossary.sign_up')}</SignupButton>
</NavLink>
<StyledDropdown
label={
<>
<StyledUser height={15} /> {user.name || user.email}
</>
}
isMatch={isAccountPage}
>
<NavLink to="/users/edit" activeClassName="active">
{t('glossary.account')}
</NavLink>
<ResetButton onClick={handleLogout}>
{t('glossary.logout')}
</ResetButton>
</StyledDropdown>
</li>
</>
)}
</ul>
) : (
<>
<li>
<NavLink to="/users/sign_in" activeClassName="active">
{t('users.sign_in')}
</NavLink>
</li>
<li>
<NavLink to="/users/sign_up" activeClassName="active">
<SignupButton>{t('glossary.sign_up')}</SignupButton>
</NavLink>
</li>
</>
)}
</ul>
</div>
<StyledSocialButtons />
</nav>
</StyledHeader>
)
Expand Down
16 changes: 16 additions & 0 deletions src/components/settings/SettingsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import LabeledRow from '../ui/LabeledRow'
import ListEntry from '../ui/ListEntry'
import RadioTiles from '../ui/RadioTiles'
import { Select } from '../ui/Select'
import SocialButtons from '../ui/SocialButtons'
import Bicycling from './mapTiles/bicycling.png'
import Road from './mapTiles/road.png'
import Satellite from './mapTiles/satellite.png'
Expand Down Expand Up @@ -56,6 +57,20 @@ const StyledListEntry = styled(ListEntry)`
}
`

const StyledSocialButtons = styled(SocialButtons)`
width: 100%;
display: flex;
justify-content: space-between;
a {
color: ${({ theme }) => theme.text};
}
svg {
height: 32px;
}
`

const SettingsPage = ({ desktop }) => {
const dispatch = useDispatch()
const settings = useSelector((state) => state.settings)
Expand Down Expand Up @@ -228,6 +243,7 @@ const SettingsPage = ({ desktop }) => {
{!desktop && (
<>
<h3>{t('glossary.about')}</h3>
<StyledSocialButtons />
<StyledListEntry
rightIcons={<ChevronRight size="16" />}
primaryText={t('pages.project')}
Expand Down
37 changes: 37 additions & 0 deletions src/components/ui/SocialButtons.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import {
Facebook,
Github,
Instagram,
Slack,
Twitter,
} from '@styled-icons/boxicons-logos'

const SocialButtons = ({ ...props }) => (
<div {...props}>
<a href="https://github.com/falling-fruit" alt="GitHub" title="GitHub">
<Github />
</a>
<a
href="https://join.slack.com/t/fallingfruit/shared_invite/zt-1oh1paonq-XJ7dBHPapv6uuBTc93~4UA"
alt="Slack"
title="Slack"
>
<Slack />
</a>
<a href="https://facebook.com/FallingFruit" alt="Facebook" title="Facebook">
<Facebook />
</a>
<a
href="https://instagram.com/fallingfruit"
alt="Instagram"
title="Instagram"
>
<Instagram />
</a>
<a href="https://twitter.com/Falling_Fruit" alt="Twitter" title="Twitter">
<Twitter />
</a>
</div>
)

export default SocialButtons
27 changes: 27 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1177,6 +1177,13 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.19.0", "@babel/runtime@^7.20.7":
version "7.22.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
dependencies:
regenerator-runtime "^0.13.11"

"@babel/template@^7.10.4", "@babel/template@^7.16.0", "@babel/template@^7.3.3":
version "7.16.0"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
Expand Down Expand Up @@ -1953,6 +1960,14 @@
dependencies:
"@sinonjs/commons" "^1.7.0"

"@styled-icons/boxicons-logos@^10.47.0":
version "10.47.0"
resolved "https://registry.yarnpkg.com/@styled-icons/boxicons-logos/-/boxicons-logos-10.47.0.tgz#8a21a61d202e3ae2dfdec24d80897c3262777841"
integrity sha512-eDZfiTjBth4MsCX83ZfiWIoYGU494NxZgAxyf7S0ky2ZRsJnq/Cs7crH4hKWUTaLvCo0XRJmLeA3Us2tZFiItg==
dependencies:
"@babel/runtime" "^7.20.7"
"@styled-icons/styled-icon" "^10.7.0"

"@styled-icons/boxicons-regular@^10.23.0":
version "10.38.0"
resolved "https://registry.yarnpkg.com/@styled-icons/boxicons-regular/-/boxicons-regular-10.38.0.tgz#1eb80b4f94a18a9b77b11dee5204aa23378d37ec"
Expand All @@ -1977,6 +1992,13 @@
"@babel/runtime" "^7.10.5"
"@emotion/is-prop-valid" "^0.8.7"

"@styled-icons/styled-icon@^10.7.0":
version "10.7.0"
resolved "https://registry.yarnpkg.com/@styled-icons/styled-icon/-/styled-icon-10.7.0.tgz#d6960e719b8567c8d0d3a87c40fb6f5b4952a228"
integrity sha512-SCrhCfRyoY8DY7gUkpz+B0RqUg/n1Zaqrr2+YKmK/AyeNfCcoHuP4R9N4H0p/NA1l7PTU10ZkAWSLi68phnAjw==
dependencies:
"@babel/runtime" "^7.19.0"

"@surma/rollup-plugin-off-main-thread@^1.1.1":
version "1.4.2"
resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz#e6786b6af5799f82f7ab3a82e53f6182d2b91a58"
Expand Down Expand Up @@ -10576,6 +10598,11 @@ regenerator-runtime@^0.11.0:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==

regenerator-runtime@^0.13.11:
version "0.13.11"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==

regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
version "0.13.9"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
Expand Down

0 comments on commit cd6eb61

Please sign in to comment.