diff --git a/components/ChecklistItem/style.js b/components/ChecklistItem/style.js index 5d8ba91..4861b9d 100644 --- a/components/ChecklistItem/style.js +++ b/components/ChecklistItem/style.js @@ -23,9 +23,9 @@ export const Title = styled.h3` font-weight: 500; color: ${theme.text.default}; display: flex; - line-height: 1.2; + line-height: 1.4; justify-content: space-between; - align-items: center; + align-items: flex-start; `; export const Description = styled(Markdown)` @@ -333,6 +333,8 @@ export const Uncollapse = styled.span` align-items: center; justify-content: center; margin-right: 8px; + margin-left: 16px; + flex: 0 1 140px; @media (max-width: 768px) { display: none; @@ -394,7 +396,7 @@ export const ExpandContainer = styled.div` display: flex; align-items: center; justify-content: center; - width: 100%; + width: calc(100% + 12px); position: relative; background: ${theme.bg.wash}; border: 1px solid ${tint(theme.bg.wash, -4)}; @@ -402,6 +404,7 @@ export const ExpandContainer = styled.div` padding: 8px 16px; margin-bottom: -28px; margin-top: 16px; + margin-left: -16px; @media (max-width: 768px) { margin-bottom: 0; diff --git a/config/data.js b/config/data.js index 7498653..f2108f7 100644 --- a/config/data.js +++ b/config/data.js @@ -14,6 +14,7 @@ import socialMedia from './socialMedia'; import phishing from './phishing'; import physicalPrivacy from './physicalPrivacy'; import geotagging from './geotagging'; +import messagingApps from './messagingApps'; export default { passwordManager, @@ -31,5 +32,6 @@ export default { appPermissions, geotagging, socialMedia, + messagingApps, phishing, }; diff --git a/config/messagingApps.js b/config/messagingApps.js new file mode 100644 index 0000000..d38b41e --- /dev/null +++ b/config/messagingApps.js @@ -0,0 +1,69 @@ +export default { + id: 'messagingApps', + title: 'Use encrypted messaging apps when sharing sensitive information', + description: `When sharing senstive information over chat, you should be using a secure, end-to-end encrypted messaging service. End-to-end encryption ensures that only you and your intended recipient are able to view messages. Your messages will appear scrambled and will be nearly-impossible to unscramble to anyone else, including app developers and ISPs. + `, + apps: [ + { + name: 'iMessage', + image: '/static/img/imessage.png', + url: 'https://support.apple.com/explore/messages', + sources: { + macos: 'https://support.apple.com/explore/messages', + ios: 'https://support.apple.com/explore/messages', + }, + }, + { + name: 'WhatsApp', + image: '/static/img/whatsapp.jpg', + url: 'https://www.whatsapp.com/', + sources: { + windows: 'https://www.whatsapp.com/download', + macos: 'https://www.whatsapp.com/download', + ios: + 'http://itunes.apple.com/us/app/whatsapp-messenger/id310633997?mt=8', + android: 'https://play.google.com/store/apps/details?id=com.whatsapp', + }, + }, + { + name: 'Signal', + image: '/static/img/signal.jpg', + url: 'https://www.signal.org/', + sources: { + windows: 'https://www.signal.org/download/', + macos: 'https://www.signal.org/download/', + ios: + 'https://itunes.apple.com/us/app/signal-private-messenger/id874139669?mt=8', + android: + 'https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms&referrer=utm_source%3DOWS%26utm_medium%3DWeb%26utm_campaign%3DNav', + linux: 'https://www.signal.org/download/', + }, + }, + ], + resources: [ + { + name: 'What is end-to-end encryption?', + url: 'https://www.lifewire.com/what-is-end-to-end-encryption-4028873', + }, + { + name: 'Hacker lexicon: end-to-end encryption', + url: + 'https://www.wired.com/2014/11/hacker-lexicon-end-to-end-encryption/', + }, + { + name: 'Encrypted messaging isn’t magic', + url: 'https://www.wired.com/story/encrypted-messaging-isnt-magic/', + }, + { + name: + 'Why you need a better handle on the WhatsApp, Signal and Telegram apps', + url: + 'https://www.cnet.com/news/you-might-not-really-understand-how-encrypted-messaging-apps-work/', + }, + { + name: 'The best and worst encrypted messaging apps', + url: + 'https://gizmodo.com/the-best-and-worst-encrypted-messaging-apps-1782424449', + }, + ], +}; diff --git a/static/img/imessage.png b/static/img/imessage.png new file mode 100644 index 0000000..8305e24 Binary files /dev/null and b/static/img/imessage.png differ diff --git a/static/img/signal.jpg b/static/img/signal.jpg new file mode 100644 index 0000000..cb07f52 Binary files /dev/null and b/static/img/signal.jpg differ diff --git a/static/img/whatsapp.jpg b/static/img/whatsapp.jpg new file mode 100644 index 0000000..aa339e5 Binary files /dev/null and b/static/img/whatsapp.jpg differ