Visual and responsive polish

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 (
-        <AppSourcesListItem key={key}>
+        <AppSourcesListItem hideOnMobile key={key}>
           <a href={sourceUrl} target="_blank" rel="noopener noreferrer">
             <Icon size={32} glyph="windows" />
             <AppSourcesLabel>Windows</AppSourcesLabel>
@@ -47,7 +46,7 @@ export const AppRow = ({ app }: Props) => {
 
     if (key === 'macos') {
       return (
-        <AppSourcesListItem key={key}>
+        <AppSourcesListItem hideOnMobile key={key}>
           <a href={sourceUrl} target="_blank" rel="noopener noreferrer">
             <Icon size={32} glyph="app-store" />
             <AppSourcesLabel>macOS</AppSourcesLabel>

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 (
     <AppsContainer>
+      <SectionHeading>Apps</SectionHeading>
       {resource.apps.map(app => (
         <AppRow key={app.name} app={app} />
       ))}

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<Props, State> {
 
             <ResourceContent isChecked={isChecked}>
               <Heading resource={resource} isChecked={isChecked} />
+              <Divider />
               <Apps resource={resource} />
+              <Divider />
               <Resources resource={resource} />
             </ResourceContent>
           </CardContent>

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;
+  }
+`;

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};

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/',
       },
     },
   ],

pages/about.js

@@ -21,8 +21,6 @@ export default function About() {
       <SectionHeading>
         <Heading>About</Heading>
 
-        <div style={{ padding: '8px' }} />
-
         <Subheading>
           This website provides a beginner’s checklist for staying safe on the
           internet. This website is the result of a conversation started during