From 1446ad2f1d58e825a9d72b6481f969a9b767975a Mon Sep 17 00:00:00 2001 From: Brian Lovin Date: Sat, 12 Jan 2019 23:36:51 -0800 Subject: [PATCH] Visual and responsive polish --- components/ChecklistItem/App.js | 5 +- components/ChecklistItem/Apps.js | 3 +- components/ChecklistItem/index.js | 3 + components/ChecklistItem/style.js | 97 ++++++++++++++++++++++--------- components/Page/style.js | 2 +- config/passwordManager.js | 8 +-- pages/about.js | 2 - 7 files changed, 80 insertions(+), 40 deletions(-) diff --git a/components/ChecklistItem/App.js b/components/ChecklistItem/App.js index bb477ac..ec9abc2 100644 --- a/components/ChecklistItem/App.js +++ b/components/ChecklistItem/App.js @@ -21,11 +21,10 @@ export const AppRow = ({ app }: Props) => { const renderSourceIcon = (key: string) => { const sourceUrl = app.sources[key]; - const appUrl = app.url; if (key === 'windows') { return ( - + Windows @@ -47,7 +46,7 @@ export const AppRow = ({ app }: Props) => { if (key === 'macos') { return ( - + macOS diff --git a/components/ChecklistItem/Apps.js b/components/ChecklistItem/Apps.js index 608b28a..0350197 100644 --- a/components/ChecklistItem/Apps.js +++ b/components/ChecklistItem/Apps.js @@ -1,6 +1,6 @@ // @flow import React from 'react'; -import { AppsContainer } from './style'; +import { AppsContainer, SectionHeading } from './style'; import type { ChecklistResource } from '../../types'; import { AppRow } from './App'; @@ -12,6 +12,7 @@ export const Apps = ({ resource }: Props) => { if (!resource.apps) return null; return ( + Apps {resource.apps.map(app => ( ))} diff --git a/components/ChecklistItem/index.js b/components/ChecklistItem/index.js index 5d51c14..a176e78 100644 --- a/components/ChecklistItem/index.js +++ b/components/ChecklistItem/index.js @@ -13,6 +13,7 @@ import { Checkbox, CardContent, ResourceContent, + Divider, } from './style'; type Props = { @@ -56,7 +57,9 @@ class ChecklistItem extends React.Component { + + diff --git a/components/ChecklistItem/style.js b/components/ChecklistItem/style.js index f518ed8..2e0e523 100644 --- a/components/ChecklistItem/style.js +++ b/components/ChecklistItem/style.js @@ -1,7 +1,7 @@ // @flow -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { theme } from '../theme'; -import { Shadows } from '../globals'; +import { Shadows, tint } from '../globals'; export const Container = styled.div` margin-bottom: 24px; @@ -35,7 +35,11 @@ export const SectionHeading = styled.h5` color: ${theme.text.tertiary}; text-transform: uppercase; letter-spacing: 0.5px; - margin-top: 32px; + + @media (max-width: 768px) { + margin-top: 24px; + margin-bottom: 8px; + } `; export const CheckboxContainer = styled.div` @@ -43,6 +47,13 @@ export const CheckboxContainer = styled.div` align-items: flex-start; width: 48px; justify-content: center; + + @media (max-width: 768px) { + width: auto; + margin-left: 8px; + margin-top: 4px; + width: 32px; + } `; export const Checkbox = styled.span` @@ -89,23 +100,11 @@ export const ResourceContent = styled.div` } `; -export const AppsContainer = styled.div` - margin-top: 8px; - - @media (max-width: 768px) { - margin-top: 24px; - } -`; +export const AppsContainer = styled.div``; export const AppMeta = styled.div` display: flex; align-items: center; - - @media (max-width: 768px) { - width: 100%; - padding-bottom: 16px; - margin-bottom: 16px; - } `; export const AppRowContainer = styled.a` @@ -115,9 +114,10 @@ export const AppRowContainer = styled.a` margin-top: 8px; width: 100%; border-radius: 6px; - padding: 8px; + padding: 4px 8px; padding-left: 16px; margin-left: -16px; + padding-right: 4px; width: calc(100% + 12px); flex-wrap: wrap; @@ -144,6 +144,12 @@ export const AppIcon = styled.img` height: 40px; border-radius: 8px; margin-right: 12px; + + @media (max-width: 768px) { + width: 32px; + height: 32px; + border-radius: 6px; + } `; export const AppName = styled.p` @@ -156,12 +162,10 @@ export const AppSourcesList = styled.ul` list-style-type: none; display: flex; align-items: center; - margin-right: 8px; @media (max-width: 768px) { - width: 100%; margin-right: 0; - justify-content: space-between; + justify-content: flex-start; } `; @@ -186,23 +190,40 @@ export const AppSourcesListItem = styled.li` .icon { position: relative; - top: 4px; - left: 6px; + top: 5px; + left: 7px; } &:hover { - color: ${theme.text.secondary}; - background: ${theme.bg.default}; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); - transition: all 0.1s ease-in-out; + color: ${theme.text.default}; + } + + @media (max-width: 768px) { + padding: 4px; + min-width: 40px; + + .icon { + position: relative; + top: 5px; + left: 7px; + } + + ${props => + props.hideOnMobile && + css` + display: none; + `} } `; export const AppSourcesLabel = styled.span` font-size: 12px; font-weight: 400; - color: ${theme.text.tertiary}; margin-top: 4px; + + @media (max-width: 768px) { + display: none; + } `; export const ResourceRowContainer = styled.a` @@ -217,7 +238,15 @@ export const ResourceRowContainer = styled.a` width: calc(100% + 8px); @media (max-width: 768px) { - width: calc(100% + 16px); + width: calc(100% + 40px); + border-radius: 0; + align-items: flex-start; + margin-left: -24px; + padding-left: 24px; + + .icon { + margin-top: 4px; + } } &:first-of-type { @@ -238,3 +267,15 @@ export const ResourceName = styled.p` font-size: 16px; font-weight: 400; `; + +export const Divider = styled.div` + border-bottom: 1px solid ${tint(theme.bg.wash, -4)}; + margin-top: 24px; + margin-bottom: 24px; + height: 1px; + width: 100%; + + @media (max-width: 768px) { + display: none; + } +`; diff --git a/components/Page/style.js b/components/Page/style.js index eac5938..ed92531 100644 --- a/components/Page/style.js +++ b/components/Page/style.js @@ -62,7 +62,7 @@ export const Subheading = styled.h4` font-size: 22px; font-weight: 400; color: ${theme.text.tertiary}; - margin-top: 8px; + margin-top: 16px; a { color: ${theme.text.default}; diff --git a/config/passwordManager.js b/config/passwordManager.js index a9f8a4e..7eff762 100644 --- a/config/passwordManager.js +++ b/config/passwordManager.js @@ -10,10 +10,9 @@ export default { url: 'https://1password.com/', sources: { windows: 'https://1password.com/downloads/windows/', + macos: 'https://1password.com/downloads/mac/', ios: 'https://1password.com/downloads/ios/', android: 'https://1password.com/downloads/android/', - macos: 'https://1password.com/downloads/mac/', - website: 'https://1password.com/', }, }, { @@ -23,12 +22,11 @@ export default { sources: { windows: 'https://download.cloud.lastpass.com/windows_installer/lastpass.exe', + macos: + 'https://itunes.apple.com/us/app/lastpass/id926036361?ls=1&mt=12', ios: 'https://itunes.apple.com/us/app/lastpass-password-manager/id324613447', android: 'https://lastpass.com/android_market.php', - macos: - 'https://itunes.apple.com/us/app/lastpass/id926036361?ls=1&mt=12', - website: 'https://www.lastpass.com/', }, }, ], diff --git a/pages/about.js b/pages/about.js index 3d510ba..3f2c942 100644 --- a/pages/about.js +++ b/pages/about.js @@ -21,8 +21,6 @@ export default function About() { About -
- This website provides a beginner’s checklist for staying safe on the internet. This website is the result of a conversation started during