From f2c7b91eab1abe09577c097d9d37286fa9b4445c Mon Sep 17 00:00:00 2001 From: John Gallias Date: Sun, 3 Feb 2019 17:36:16 -0500 Subject: [PATCH 01/12] Added resources Added resources from https://github.com/brianlovin/security-checklist/issues/113 --- config/email.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/config/email.js b/config/email.js index cd7b71c..aff72f1 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/';, + }, ], }; From 8943e25a5bcf9e4fe78936ae463b2c99766efe10 Mon Sep 17 00:00:00 2001 From: John Gallias Date: Sun, 3 Feb 2019 17:43:29 -0500 Subject: [PATCH 02/12] Added resources Added resources from https://github.com/brianlovin/security-checklist/issues/117 --- config/twoFactor.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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/', + }, ], }; From f8002a0eda6633e24fc0b2310c74d857ac7e0c1a Mon Sep 17 00:00:00 2001 From: Joachim Date: Wed, 6 Feb 2019 19:19:56 -0500 Subject: [PATCH 03/12] Update config/email.js Co-Authored-By: jgallias --- config/email.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/email.js b/config/email.js index aff72f1..99d8e6a 100644 --- a/config/email.js +++ b/config/email.js @@ -79,7 +79,7 @@ export default { }, { name: 'Knowledge and tools to protect your privacy against global mass surveillance', - url: 'https://www.privacytools.io/';, + url: 'https://www.privacytools.io/', }, ], }; From 0af1e08c0a7441e81f29db11ac343e4d9f5542e7 Mon Sep 17 00:00:00 2001 From: Brian Lovin Date: Fri, 8 Feb 2019 14:56:35 -0800 Subject: [PATCH 04/12] Center android icon --- components/Icon/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ( - + From 78a7d3702841b15b5aa8a8d02231611653d3ef81 Mon Sep 17 00:00:00 2001 From: Brian Lovin Date: Fri, 8 Feb 2019 15:03:02 -0800 Subject: [PATCH 05/12] Small polish on focus states --- components/ChecklistItem/style.js | 91 +++++++++++++++---------------- 1 file changed, 44 insertions(+), 47 deletions(-) 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 +`; From 5e421d2fcdc644d7cd9ded6a5aade33386c0471d Mon Sep 17 00:00:00 2001 From: Joachim Robert Date: Sat, 9 Feb 2019 12:38:01 +0100 Subject: [PATCH 06/12] Animate progress bar on load --- components/Page/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) { From ea26d4e419b087b099f0af8ca174e54855cabfc3 Mon Sep 17 00:00:00 2001 From: Joachim Robert Date: Sat, 9 Feb 2019 13:48:31 +0100 Subject: [PATCH 07/12] Style modifications --- components/Header/index.js | 23 +++++++++--- components/Header/style.js | 75 ++++++++++++++++++++++++++++++-------- 2 files changed, 76 insertions(+), 22 deletions(-) diff --git a/components/Header/index.js b/components/Header/index.js index f07c922..855794a 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'; @@ -32,11 +33,6 @@ export default function Header(props: Props) { - - {currentCount} of {totalItemsCount} completed - - - @@ -53,6 +49,21 @@ export default function Header(props: Props) { Contribute + + { displayProgress && ( + + + {currentCount} of {totalItemsCount} completed + )} ); } diff --git a/components/Header/style.js b/components/Header/style.js index 4e9ea36..8317790 100644 --- a/components/Header/style.js +++ b/components/Header/style.js @@ -5,24 +5,20 @@ import { hexa } 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"; } `; @@ -33,26 +29,46 @@ export const Logo = styled.h1` color: ${theme.text.default}; `; -export const Progression = styled.div` - grid-area: progression; +export const Progression = styled.button` 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` + display: block; height: 8px; - margin: 6px 0; + width: 100%; + margin: 8px 0 0; position: relative; overflow: hidden; - border-radius: 4px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; background-image: linear-gradient(to left, #a913de, #6ac9ff); + box-shadow: 0 4px 8px rgba(0,0,0,0.04); + z-index: 5; + + ${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}; @@ -61,6 +77,32 @@ export const ProgressBar = styled.div` } `; +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; + + ${Progression}:hover &, + ${Progression}:focus &, + ${Progression}:active & + { + visibility: visible; + opacity: 1; + bottom: calc((100% - 8px) * -1); + } +` + export const ButtonRowContainer = styled.div` display: flex; justify-content: flex-end; @@ -77,7 +119,8 @@ export const LogoLink = styled.a` display: inline-flex; align-items: center; border-radius: 6px; - + height: 100%; + &:hover { transform: scale(1.2); } From 7d76f0d6faadf6752d7cb4f25dca5350bd4a8f07 Mon Sep 17 00:00:00 2001 From: Joachim Robert Date: Sat, 9 Feb 2019 14:30:13 +0100 Subject: [PATCH 08/12] Replace button with focusable div --- components/Header/index.js | 1 + components/Header/style.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/Header/index.js b/components/Header/index.js index 855794a..da38203 100644 --- a/components/Header/index.js +++ b/components/Header/index.js @@ -54,6 +54,7 @@ export default function Header(props: Props) { Date: Sat, 9 Feb 2019 14:31:49 +0100 Subject: [PATCH 09/12] Better spacing of the progress bar --- components/Header/style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Header/style.js b/components/Header/style.js index d46d71b..81c6a53 100644 --- a/components/Header/style.js +++ b/components/Header/style.js @@ -49,7 +49,7 @@ export const ProgressBar = styled.div` display: block; height: 8px; width: 100%; - margin: 8px 0 0; + margin: 16px 0 0; position: relative; overflow: hidden; border-bottom-left-radius: 8px; From 7496dae8484e3bbe03196d2bfd7c58daeeade973 Mon Sep 17 00:00:00 2001 From: Joachim Robert Date: Sat, 9 Feb 2019 14:43:43 +0100 Subject: [PATCH 10/12] Better mobile sizing --- components/Header/style.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/Header/style.js b/components/Header/style.js index 81c6a53..a6f0769 100644 --- a/components/Header/style.js +++ b/components/Header/style.js @@ -101,6 +101,10 @@ export const ProgressLabel = styled.p` opacity: 1; bottom: calc((100% - 8px) * -1); } + + @media (max-width: 968px) { + padding: 8px 12px; + } ` export const ButtonRowContainer = styled.div` From 6f61bfeade364bea882a5c2d31a22ff3b013fb89 Mon Sep 17 00:00:00 2001 From: Joachim Robert Date: Sat, 9 Feb 2019 14:52:35 +0100 Subject: [PATCH 11/12] =?UTF-8?q?=F0=9F=8E=89=20=F0=9F=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Header/index.js | 6 +++++- components/Header/style.js | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/components/Header/index.js b/components/Header/index.js index da38203..b166d40 100644 --- a/components/Header/index.js +++ b/components/Header/index.js @@ -63,7 +63,11 @@ export default function Header(props: Props) { {currentCount} of {totalItemsCount} completed + > + { currentCount === totalItemsCount && `πŸŽ‰ `} + {currentCount} of {totalItemsCount} completed + { currentCount === totalItemsCount && ` πŸŽ‰`} + )} ); diff --git a/components/Header/style.js b/components/Header/style.js index a6f0769..ae0d707 100644 --- a/components/Header/style.js +++ b/components/Header/style.js @@ -92,6 +92,7 @@ export const ProgressLabel = styled.p` border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; + white-space: nowrap; ${Progression}:hover &, ${Progression}:focus &, @@ -99,7 +100,7 @@ export const ProgressLabel = styled.p` { visibility: visible; opacity: 1; - bottom: calc((100% - 8px) * -1); + bottom: -100%; } @media (max-width: 968px) { From 41452fc7f4d2cca9d4ca534a9537c480eeb93a0f Mon Sep 17 00:00:00 2001 From: Joachim Robert Date: Wed, 13 Feb 2019 15:43:40 +0100 Subject: [PATCH 12/12] Style changes --- components/Header/index.js | 1 + components/Header/style.js | 15 +++++++++------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/components/Header/index.js b/components/Header/index.js index b166d40..72db668 100644 --- a/components/Header/index.js +++ b/components/Header/index.js @@ -59,6 +59,7 @@ export default function Header(props: Props) { 0 ? false : true} /> hexa(props.theme.brand.default, 0.25)}; } - &:after { + &::after { content: ''; position: absolute; height: 100%; @@ -73,7 +72,10 @@ export const ProgressBar = styled.div` 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}; } `; @@ -93,6 +95,7 @@ export const ProgressLabel = styled.p` border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; white-space: nowrap; + ${Shadows.default}; ${Progression}:hover &, ${Progression}:focus &, @@ -100,7 +103,7 @@ export const ProgressLabel = styled.p` { visibility: visible; opacity: 1; - bottom: -100%; + bottom: -87.5%; } @media (max-width: 968px) {