diff --git a/components/ChecklistItem/style.js b/components/ChecklistItem/style.js index f15df18..777a34b 100644 --- a/components/ChecklistItem/style.js +++ b/components/ChecklistItem/style.js @@ -70,11 +70,11 @@ export const CheckboxContainer = styled.div` width: 32px; } - input[type="checkbox"] { + input[type='checkbox'] { position: absolute; } - input[type="checkbox"] + label { + input[type='checkbox'] + label { width: 32px; height: 32px; border-radius: 4px; @@ -86,12 +86,12 @@ export const CheckboxContainer = styled.div` text-indent: -1000px; } - input[type="checkbox"] + label:hover { + input[type='checkbox'] + label:hover { ${Shadows.default}; background: ${theme.bg.default}; } - input[type="checkbox"] + label::after { + input[type='checkbox'] + label::after { content: ''; position: absolute; display: block; @@ -104,18 +104,18 @@ export const CheckboxContainer = styled.div` transform: rotate(45deg); } - input[type="checkbox"]:checked + label { + input[type='checkbox']:checked + label { border: 1px solid ${theme.bg.default}; } - input[type="checkbox"]:checked + label::after { + input[type='checkbox']:checked + label::after { border: solid ${theme.bg.default}; border-width: 0 2px 2px 0; } /* This ::before pseudo-element is used to animate the gradient which does not support transitions. */ - input[type="checkbox"] + label::before { + input[type='checkbox'] + label::before { content: ''; position: absolute; top: 0; @@ -125,23 +125,24 @@ export const CheckboxContainer = styled.div` transition: opacity ${theme.animations.default}; opacity: 0; background-image: radial-gradient(circle at top right, #a913de, #6ac9ff); - box-shadow: inset 0 0 1px rgba(0,0,0,0.4); + box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4); } - input[type="checkbox"]:checked + label::before { + input[type='checkbox']:checked + label::before { opacity: 1; background-color: ${theme.success.default}; } - input[type="checkbox"]:active + label, input[type="checkbox"]:focus + label { + input[type='checkbox']:active + label, + input[type='checkbox']:focus + label { box-shadow: 0 0 0 1px ${theme.bg.default}, - 0 0 0 3px ${props => hexa(props.theme.brand.default, 0.5)}; + 0 0 0 3px ${props => hexa(props.theme.brand.default, 0.5)}; } - input[type="checkbox"]:active:checked + label, input[type="checkbox"]:focus:checked + label { + input[type='checkbox']:active:checked + label, + input[type='checkbox']:focus:checked + label { box-shadow: 0 0 0 1px ${theme.bg.default}, - 0 0 0 3px ${props => hexa(props.theme.spectrum.default, 0.5)}; + 0 0 0 3px ${props => hexa(props.theme.spectrum.default, 0.5)}; } - `; export const ResourceContent = styled.div` @@ -201,12 +202,12 @@ export const AppMeta = styled.a` display: flex; align-items: center; padding-right: 6px; - border-radius: 8px; + border-radius: 4px; - &:active, &:focus { + &:active, + &:focus { box-shadow: 0 0 0 1px ${theme.bg.default}, 0 0 0 3px ${props => hexa(props.theme.text.tertiary, 0.25)}; - background: ${theme.bg.wash}; } `; @@ -257,17 +258,17 @@ export const AppSourcesListItem = styled.li` align-items: center; justify-content: center; padding: 2px; - border-radius: 8px; + border-radius: 4px; &:hover { color: ${theme.text.default}; } - &:active, &:focus { + &:active, + &:focus { color: ${theme.text.default}; box-shadow: 0 0 0 1px ${theme.bg.default}, 0 0 0 3px ${props => hexa(props.theme.text.tertiary, 0.25)}; - background: ${theme.bg.wash}; } } @@ -277,15 +278,14 @@ export const AppSourcesListItem = styled.li` left: 4px; } - @media (max-width: 768px) { padding: 4px; min-width: 40px; .icon { position: relative; - top: 5px; - left: 7px; + top: 3px; + left: 5px; } &:hover { @@ -329,24 +329,28 @@ export const ResourceRowContainer = styled.a` margin-right: 8px; } - &:hover, &:active, &:focus { - background: ${theme.bg.wash}; + &:hover, + &:active, + &:focus { color: ${theme.text.default}; } - &:active, &:focus { + &:active, + &:focus { box-shadow: 0 0 0 1px ${theme.bg.default}, 0 0 0 3px ${props => hexa(props.theme.text.tertiary, 0.25)}; } @media (max-width: 768px) { width: calc(100% + 40px); - border-radius: 0; + border-radius: 4px; align-items: flex-start; margin-left: -24px; padding-left: 24px; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { background: ${theme.bg.default}!important; } @@ -376,24 +380,20 @@ export const Divider = styled.hr` `; export const Content = styled.div` - transition: - max-height ${theme.animations.default}, - opacity ${theme.animations.default}, - visibility ${theme.animations.default}; + transition: max-height ${theme.animations.default}, + opacity ${theme.animations.default}, visibility ${theme.animations.default}; max-height: 2000px; max-height: var(--maxHeight); opacity: 1; visibility: visible; - - &[aria-hidden="true"] { + &[aria-hidden='true'] { max-height: 0; opacity: 0; visibility: hidden; } - -` +`; export const Uncollapse = styled.button` background: ${theme.bg.wash}; @@ -418,7 +418,8 @@ export const Uncollapse = styled.button` color: ${theme.text.default}; background: ${tint(theme.bg.wash, -4)}; } - &:active, &:focus { + &:active, + &:focus { transition: all 0.2s ease-in-out; box-shadow: 0 0 0 1px ${theme.bg.default}, @@ -459,11 +460,11 @@ export const OfferContainer = styled.a` &:hover { color: ${theme.text.secondary}; } - &:active, &:focus { + &:active, + &:focus { box-shadow: inset 0 0 1px ${theme.border.active}, 0 0 0 1px ${theme.bg.default}, 0 0 0 3px ${props => hexa(props.theme.text.tertiary, 0.25)}; - background: ${theme.bg.wash}; } `; @@ -504,21 +505,17 @@ export const ExpandContainer = styled.div` } `; - export const ExpandContent = styled.div` - transition: - max-height ${theme.animations.default}, - opacity ${theme.animations.default}, - visibility ${theme.animations.default}; + transition: max-height ${theme.animations.default}, + opacity ${theme.animations.default}, visibility ${theme.animations.default}; max-height: 2000px; max-height: var(--maxHeight); opacity: 1; visibility: visible; - &[aria-hidden="true"] { + &[aria-hidden='true'] { max-height: 0; opacity: 0; visibility: hidden; } - -` \ No newline at end of file +`; diff --git a/components/Header/index.js b/components/Header/index.js index d791655..5a27d73 100644 --- a/components/Header/index.js +++ b/components/Header/index.js @@ -7,7 +7,8 @@ import { Label, LogoLink, Progression, - ProgressBar } from './style'; + ProgressBar, + ProgressLabel } from './style'; import { PrimaryButton, GhostButton } from '../Button'; import Logo from './Logo'; import Confetti from './Confetti'; @@ -33,14 +34,6 @@ export default function Header(props: Props) { - - { currentCount === totalItemsCount && `πŸŽ‰ `} - {currentCount} of {totalItemsCount} completed - { currentCount === totalItemsCount && ` πŸŽ‰`} - - - - @@ -57,6 +50,28 @@ export default function Header(props: Props) { Contribute + + { displayProgress && ( + + 0 ? false : true} + /> + + { currentCount === totalItemsCount && `πŸŽ‰ `} + {currentCount} of {totalItemsCount} completed + { currentCount === totalItemsCount && ` πŸŽ‰`} + + + )} ); } diff --git a/components/Header/style.js b/components/Header/style.js index 58a03b5..8a53a65 100644 --- a/components/Header/style.js +++ b/components/Header/style.js @@ -2,27 +2,24 @@ import styled from 'styled-components'; import { theme } from '../theme'; import { hexa } from '../globals'; +import { Shadows } from '../globals'; export const Container = styled.div` display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-template-areas: 'logo progression actions'; - padding: 16px; + grid-template-columns: 1fr 1fr; + grid-template-areas: "logo actions"; + padding: 16px 16px; position: fixed; top: 0; left: 0; right: 0; - background: ${props => - props.showHeaderShadow ? props.theme.bg.default : props.theme.bg.wash}; + background: ${theme.bg.default}; z-index: 3; - box-shadow: ${props => - props.showHeaderShadow ? '0 4px 8px rgba(0,0,0,0.04)' : 'none'}; + box-shadow: 0 4px 8px rgba(0,0,0,0.04); transition: all 0.2s ease-in-out; @media (max-width: 968px) { padding: 8px 16px; - grid-template-columns: 1fr 1fr; - grid-template-areas: "logo actions" "progression progression"; } `; @@ -34,33 +31,86 @@ export const Logo = styled.h1` `; export const Progression = styled.div` - grid-area: progression; text-align: center; + position: absolute; + left: 0; + right: 0; + height: 32px; + width: 100%; + bottom: -16px; + display: block; + background: transparent; - display: ${props => - props.isHidden ? 'none' : 'block'}; + &:active, &:focus { + outline: none; + } `; export const ProgressBar = styled.div` - height: 8px; - margin: 6px 0; + display: block; + height: 4px; + width: 100%; + margin: 16px 0 0; position: relative; overflow: hidden; - border-radius: 4px; background-image: linear-gradient(to left, #a913de, #6ac9ff); + box-shadow: 0 4px 8px rgba(0,0,0,0.04); + z-index: 5; - &:after { + ${Progression}:focus &, + ${Progression}:active & { + box-shadow: 0 0 0 1px ${theme.bg.default}, + 0 0 0 3px ${props => hexa(props.theme.brand.default, 0.25)}; + } + + &::after { content: ''; position: absolute; height: 100%; + top: 0; right: 0; width: 100%; background: ${theme.border.default}; max-width: var(--progress); - transition: max-width ${theme.animations.default}; + transition: max-width ${theme.animations.default}, background ${theme.animations.default}; + } + &[disabled]::after { + background: ${theme.bg.default}; } `; +export const ProgressLabel = styled.p` + visibility: hidden; + opacity: 0; + position: absolute; + z-index: 4; + bottom: -25%; + left: 50%; + transform: translateX(-50%); + background: ${theme.bg.default}; + padding: 8px 16px; + + transition: all ${theme.animations.default}; + + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + white-space: nowrap; + ${Shadows.default}; + + ${Progression}:hover &, + ${Progression}:focus &, + ${Progression}:active & + { + visibility: visible; + opacity: 1; + bottom: -87.5%; + } + + @media (max-width: 968px) { + padding: 8px 12px; + } +` + export const ButtonRowContainer = styled.div` display: flex; justify-content: flex-end; @@ -77,6 +127,7 @@ export const LogoLink = styled.a` display: inline-flex; align-items: center; border-radius: 6px; + height: 100%; &:hover { transform: scale(1.2); diff --git a/components/Icon/index.js b/components/Icon/index.js index 71d9b37..58a088c 100644 --- a/components/Icon/index.js +++ b/components/Icon/index.js @@ -95,7 +95,7 @@ export const Glyph = ({ glyph }: GlyphProps): any => { ); case 'android': return ( - + diff --git a/components/Page/index.js b/components/Page/index.js index 737e722..c53823c 100644 --- a/components/Page/index.js +++ b/components/Page/index.js @@ -100,7 +100,7 @@ export default function Page(props: Props) { diff --git a/config/email.js b/config/email.js index cd7b71c..99d8e6a 100644 --- a/config/email.js +++ b/config/email.js @@ -69,5 +69,17 @@ export default { url: 'https://www.salon.com/2014/02/05/4_ways_google_is_destroying_privacy_and_collecting_your_data_partner/', }, + { + name: 'Privacy-friendly alternatives to Google that don’t track you', + url: 'https://nomoregoogle.com/', + }, + { + name: 'Opt out of global data surveillance programs like PRISM, XKeyscore and Tempora.', + url: 'https://prism-break.org/en/', + }, + { + name: 'Knowledge and tools to protect your privacy against global mass surveillance', + url: 'https://www.privacytools.io/', + }, ], }; diff --git a/config/twoFactor.js b/config/twoFactor.js index 644e2b4..ccb6e08 100644 --- a/config/twoFactor.js +++ b/config/twoFactor.js @@ -96,5 +96,17 @@ export default { url: 'https://www.wired.com/2016/06/hey-stop-using-texts-two-factor-authentication/', }, + { + name: 'List of websites and whether or not they support 2FA.', + url: 'https://twofactorauth.org/', + }, + { + name: 'Step-by-step instructions on enabling 2FA', + url: 'https://www.turnon2fa.com/', + }, + { + name: 'List of websites and whether or not they support One Time Passwords (OTP) or Universal 2nd Factor (U2F)', + url: 'https://www.dongleauth.info/', + }, ], };