Merge pull request #14 from brianlovin/more-changes

More changes

components/BottomShare/index.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import Card from '../Card';
+import ShareButtons from '../ShareButtons';
+import { CardContent, TopBorder } from './style';
+import { SmallHeading, SmallSubheading } from '../Page/style';
+
+const BottomShare = () => (
+  <Card style={{ width: '100%' }}>
+    <TopBorder />
+    <CardContent>
+      <SmallHeading>Feeling more secure?</SmallHeading>
+      <SmallSubheading>
+        Spread the word about improving online privacy and security
+      </SmallSubheading>
+      <ShareButtons />
+    </CardContent>
+  </Card>
+);
+
+export default BottomShare;

components/BottomShare/style.js

@@ -0,0 +1,23 @@
+// @flow
+import styled from 'styled-components';
+
+export const CardContent = styled.div`
+  padding: 24px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+
+  @media (max-width: 768px) {
+    padding-top: 40px;
+  }
+`;
+
+export const TopBorder = styled.div`
+  width: 100%;
+  height: 4px;
+  background-image: linear-gradient(to left, #a913de, #6ac9ff);
+  border-radius: 6px 6px 0 0;
+`;

components/Checklist/style.js

@@ -4,6 +4,6 @@ import styled from 'styled-components';
 export const Grid = styled.div`
   display: grid;
   grid-template-columns: 1fr;
-  margin-top: 32px;
+  margin-top: 48px;
   width: 100%;
 `;

components/ChecklistItem/Heading.js

@@ -1,15 +1,22 @@
 // @flow
 import React from 'react';
-import { Title, Description } from './style';
+import { Title, Description, Uncollapse } from './style';
 import type { ChecklistResource } from '../../types';
 
 type Props = {
   resource: ChecklistResource,
+  isCollapsed: boolean,
+  handleCollapse: Function,
 };
 
-export const Heading = ({ resource }: Props) => (
+export const Heading = ({ resource, isCollapsed, handleCollapse }: Props) => (
   <React.Fragment>
-    <Title>{resource.title}</Title>
-    <Description source={resource.description} />
+    <Title>
+      {resource.title}
+      <Uncollapse onClick={handleCollapse}>
+        {isCollapsed ? 'Show details' : 'Hide details'}
+      </Uncollapse>
+    </Title>
+    {!isCollapsed && <Description source={resource.description} />}
   </React.Fragment>
 );

components/ChecklistItem/index.js

@@ -23,26 +23,34 @@ type Props = {
 type State = {
   isChecked: boolean,
   isLoading: boolean,
+  isCollapsed: boolean,
 };
 
 class ChecklistItem extends React.Component<Props, State> {
-  state = { isChecked: false, isLoading: true };
+  state = { isChecked: false, isLoading: true, isCollapsed: true };
 
   componentDidMount() {
     const { resource } = this.props;
     const isChecked = getCheckedStatusById(resource.id);
-    return this.setState({ isChecked, isLoading: false });
+    return this.setState({
+      isChecked,
+      isLoading: false,
+      isCollapsed: isChecked,
+    });
   }
 
   handleSetChecked = () => {
     const { isChecked } = this.state;
     const { resource } = this.props;
     setCheckedStatusById(resource.id, !isChecked);
-    return this.setState({ isChecked: !isChecked });
+    return this.setState({ isChecked: !isChecked, isCollapsed: !isChecked });
   };
 
+  uncollapse = () =>
+    this.setState(state => ({ isCollapsed: !state.isCollapsed }));
+
   render() {
-    const { isChecked, isLoading } = this.state;
+    const { isChecked, isLoading, isCollapsed } = this.state;
     const { resource } = this.props;
 
     if (isLoading) return <LoadingChecklistItem />;
@@ -50,21 +58,26 @@ class ChecklistItem extends React.Component<Props, State> {
     return (
       <Container>
         <Card isChecked={isChecked}>
-          <CardContent>
+          <CardContent isCollapsed={isCollapsed}>
             <CheckboxContainer onClick={this.handleSetChecked}>
               <Checkbox isChecked={isChecked} />
             </CheckboxContainer>
 
-            <ResourceContent isChecked={isChecked}>
-              <Heading resource={resource} />
-              {resource.apps && (
+            <ResourceContent isChecked={isChecked} isCollapsed={isCollapsed}>
+              <Heading
+                resource={resource}
+                isCollapsed={isCollapsed}
+                handleCollapse={this.uncollapse}
+              />
+
+              {!isCollapsed && resource.apps && (
                 <React.Fragment>
                   <Divider />
                   <Apps resource={resource} />
                 </React.Fragment>
               )}
 
-              {resource.resources && (
+              {!isCollapsed && resource.resources && (
                 <React.Fragment>
                   <Divider />
                   <Resources resource={resource} />

components/ChecklistItem/style.js

@@ -14,7 +14,7 @@ export const CardContent = styled.div`
   width: 100%;
 
   @media (max-width: 768px) {
-    flex-direction: column;
+    flex-direction: ${props => (props.isCollapsed ? 'row' : 'column')};
   }
 `;
 
@@ -22,6 +22,10 @@ export const Title = styled.h3`
   font-size: 18px;
   font-weight: 500;
   color: ${theme.text.default};
+  display: flex;
+  line-height: 1.2;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 export const Description = styled(Markdown)`
@@ -72,16 +76,25 @@ export const Checkbox = styled.span`
   height: 32px;
   border-radius: 4px;
   border: 1px solid
-    ${props => (props.isChecked ? theme.brand.default : theme.border.default)};
+    ${props => (props.isChecked ? theme.bg.default : theme.border.default)};
   background: ${props =>
-    props.isChecked ? theme.brand.default : theme.bg.wash};
+    props.isChecked ? theme.success.default : theme.bg.wash};
   cursor: pointer;
   position: relative;
+  background-image: ${props =>
+    props.isChecked
+      ? 'radial-gradient(circle at top right, #a913de, #6ac9ff)'
+      : 'none'};
+  box-shadow: ${props =>
+    props.isChecked ? 'inset 0 0 1px rgba(0,0,0,0.4)' : 'none'};
 
   &:hover {
-    ${Shadows.default};
-    border: 1px solid
-      ${props => (props.isChecked ? theme.brand.default : theme.border.active)};
+    ${props => !props.isChecked && Shadows.default};
+    background: ${theme.bg.default};
+    background-image: ${props =>
+      props.isChecked
+        ? 'radial-gradient(circle at top right, #a913de, #6ac9ff)'
+        : 'none'};
   }
 
   &:after {
@@ -102,12 +115,15 @@ export const Checkbox = styled.span`
 export const ResourceContent = styled.div`
   display: flex;
   flex-direction: column;
+  margin-top: 2px;
   padding-left: 16px;
   width: 100%;
+  justify-content: ${props => (props.isCollapsed ? 'center' : 'flex-start')};
 
   @media (max-width: 768px) {
-    padding-left: 8px;
-    margin-top: 24px;
+    padding-left: ${props => (props.isCollapsed ? '16px' : '8px')};
+    margin-top: ${props => (props.isCollapsed ? '0px' : '24px')};
+    justify-content: ${props => (props.isCollapsed ? 'center' : 'flex-start')};
   }
 `;
 
@@ -302,3 +318,26 @@ export const Divider = styled.div`
     display: none;
   }
 `;
+
+export const Uncollapse = styled.span`
+  background: ${theme.bg.wash};
+  border-radius: 20px;
+  padding: 8px 16px;
+  font-size: 15px;
+  color: ${theme.text.tertiary};
+  cursor: pointer;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+
+  &:hover {
+    color: ${theme.text.default};
+    background: ${tint(theme.bg.wash, -4)};
+  }
+`;

components/Header/Logo.js

@@ -9,22 +9,26 @@ const Logo = () => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M13.2 20.0789C13.9174 19.6639 14.4 18.8883 14.4 18C14.4 16.6745 13.3255 15.6 12 15.6C10.6745 15.6 9.6 16.6745 9.6 18C9.6 18.8883 10.0826 19.6639 10.8 20.0789V21.6C10.8 22.2627 11.3373 22.8 12 22.8C12.6627 22.8 13.2 22.2627 13.2 21.6V20.0789Z"
-      fill="url(#paint0_linear)"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M20.3905 10.3689C20.2716 1.07667 18.9621 0 12 0C5.03792 0 3.72841 1.07667 3.60955 10.3689C0.484609 11.4315 0 13.8619 0 19.2C0 27.6 1.2 28.8 12 28.8C22.8 28.8 24 27.6 24 19.2C24 13.8619 23.5154 11.4315 20.3905 10.3689ZM15.8346 2.68544C14.928 2.44887 13.7752 2.39919 12 2.4C10.2248 2.39919 9.07196 2.44887 8.1654 2.68544C7.43904 2.8659 7.17441 3.09677 6.99522 3.34706C6.74561 3.69573 6.45306 4.39304 6.25866 5.87989C6.11609 6.95433 6.04544 8.2459 6.01655 9.85748C7.57941 9.66222 9.54084 9.6 12 9.6C14.4592 9.6 16.4206 9.66222 17.9835 9.85748C17.9546 8.2459 17.8839 6.95433 17.7413 5.8799C17.5469 4.39305 17.2544 3.69573 17.0048 3.34707C16.8256 3.09677 16.561 2.8659 15.8346 2.68544ZM2.70147 14.6661C2.48002 15.6848 2.4 17.1067 2.4 19.2C2.4 21.2932 2.48002 22.7152 2.70147 23.7339C2.90889 24.688 3.19322 25.0662 3.46977 25.2925C3.80835 25.5695 4.47216 25.8907 5.92343 26.1076C7.36508 26.323 9.31177 26.4 12 26.4C14.6882 26.4 16.6349 26.323 18.0766 26.1076C19.5278 25.8908 20.1916 25.5695 20.5302 25.2925C20.8068 25.0662 21.0911 24.688 21.2985 23.7339C21.52 22.7152 21.6 21.2932 21.6 19.2C21.6 17.1067 21.52 15.6848 21.2985 14.6661C21.0911 13.712 20.8068 13.3338 20.5302 13.1075C20.1916 12.8305 19.5278 12.5092 18.0766 12.2924C16.6349 12.077 14.6882 12 12 12C9.31177 12 7.36508 12.077 5.92343 12.2924C4.47216 12.5092 3.80836 12.8305 3.46977 13.1075C3.19323 13.3338 2.90889 13.712 2.70147 14.6661Z"
-      fill="url(#paint1_linear)"
-    />
+    <g id="logo">
+      <g id="Union">
+        <path
+          d="M13.2 20.0789C13.9174 19.664 14.4 18.8883 14.4 18C14.4 16.6745 13.3255 15.6 12 15.6C10.6745 15.6 9.6 16.6745 9.6 18C9.6 18.8883 10.0826 19.664 10.8 20.0789V21.6C10.8 22.2627 11.3373 22.8 12 22.8C12.6627 22.8 13.2 22.2627 13.2 21.6V20.0789Z"
+          fill="url(#paint0_linear)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20.3905 10.3689C20.2716 1.07667 18.9621 0 12 0C5.03792 0 3.72841 1.07667 3.60955 10.3689C0.484609 11.4315 0 13.8619 0 19.2C0 27.6 1.2 28.8 12 28.8C22.8 28.8 24 27.6 24 19.2C24 13.8619 23.5154 11.4315 20.3905 10.3689ZM15.8346 2.68544C14.928 2.44887 13.7752 2.39919 12 2.4C10.2248 2.39919 9.07196 2.44887 8.1654 2.68544C7.43904 2.8659 7.17441 3.09677 6.99522 3.34707C6.74561 3.69573 6.45306 4.39304 6.25866 5.8799C6.11609 6.95433 6.04544 8.2459 6.01655 9.85749C7.57941 9.66222 9.54084 9.6 12 9.6C14.4592 9.6 16.4206 9.66222 17.9835 9.85749C17.9546 8.2459 17.8839 6.95433 17.7413 5.8799C17.5469 4.39305 17.2544 3.69573 17.0048 3.34707C16.8256 3.09677 16.561 2.8659 15.8346 2.68544ZM2.70147 14.6661C2.48002 15.6848 2.4 17.1068 2.4 19.2C2.4 21.2932 2.48002 22.7152 2.70147 23.7339C2.90889 24.688 3.19322 25.0662 3.46977 25.2925C3.80835 25.5695 4.47216 25.8907 5.92343 26.1076C7.36508 26.323 9.31177 26.4 12 26.4C14.6882 26.4 16.6349 26.323 18.0766 26.1076C19.5278 25.8908 20.1916 25.5695 20.5302 25.2925C20.8068 25.0662 21.0911 24.688 21.2985 23.7339C21.52 22.7152 21.6 21.2932 21.6 19.2C21.6 17.1068 21.52 15.6848 21.2985 14.6661C21.0911 13.712 20.8068 13.3338 20.5302 13.1075C20.1916 12.8305 19.5278 12.5093 18.0766 12.2924C16.6349 12.077 14.6882 12 12 12C9.31177 12 7.36508 12.077 5.92343 12.2924C4.47216 12.5093 3.80836 12.8305 3.46977 13.1075C3.19323 13.3338 2.90889 13.712 2.70147 14.6661Z"
+          fill="url(#paint1_linear)"
+        />
+      </g>
+    </g>
     <defs>
       <linearGradient
         id="paint0_linear"
-        x1="12"
-        y1="0"
-        x2="12"
+        x1="20.3143"
+        y1="1.85766e-06"
+        x2="1.86312e-06"
         y2="28.8"
         gradientUnits="userSpaceOnUse"
       >
@@ -33,9 +37,9 @@ const Logo = () => (
       </linearGradient>
       <linearGradient
         id="paint1_linear"
-        x1="12"
-        y1="0"
-        x2="12"
+        x1="20.3143"
+        y1="1.85766e-06"
+        x2="1.86312e-06"
         y2="28.8"
         gradientUnits="userSpaceOnUse"
       >

components/LoadingChecklistItem/index.js

@@ -4,7 +4,7 @@ import { ShimmerInboxThread, ShimmerBase, ShimmerLine, Cover } from './style';
 import Card from '../Card';
 
 const LoadingChecklistItem = () => (
-  <div style={{ marginTop: '24px' }}>
+  <div style={{ marginBottom: '24px' }}>
     <Card>
       <ShimmerInboxThread>
         <ShimmerBase>

components/Page/index.js

@@ -13,14 +13,12 @@ import {
   SectionHeading,
   Heading,
   Subheading,
-  LargeHeading,
-  LargeSubheading,
   InnerContainer,
   ScrollToTop,
 } from './style';
 import * as gtag from '../../lib/gtag';
 
-export { SectionHeading, Heading, Subheading, LargeHeading, LargeSubheading };
+export { SectionHeading, Heading, Subheading };
 
 type Props = {
   children: Node,

components/Page/style.js

@@ -75,12 +75,16 @@ export const Subheading = styled.h4`
   }
 `;
 
-export const LargeHeading = styled(Heading)`
-  font-size: 32px;
+export const SmallHeading = styled(Heading)`
+  font-size: 30px;
+  margin-bottom: 4px;
+  margin-top: 8px;
 `;
 
-export const LargeSubheading = styled(Subheading)`
+export const SmallSubheading = styled(Subheading)`
   font-size: 20px;
+  margin-top: 4px;
+  margin-bottom: 32px;
 `;
 
 export const ScrollToTop = styled.button`
@@ -97,6 +101,7 @@ export const ScrollToTop = styled.button`
   transition: all 0.2s ease-in-out;
   opacity: ${props => (props.isVisible ? '1' : '0')};
   background: ${theme.text.default};
+  background-image: radial-gradient(circle at top right, #a913de, #6ac9ff);
   color: ${theme.bg.default};
   transform: translateY(${props => (props.isVisible ? '0' : '80px')});
   cursor: pointer;

components/ShareButtons/style.js

@@ -5,8 +5,6 @@ export const Container = styled.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 16px;
-  margin-top: 40px;
-  margin-bottom: 16px;
   width: 100%;
 
   button {

config/browsers.js

@@ -30,6 +30,15 @@ export default {
         android: 'https://www.mozilla.org/en-US/firefox/mobile/',
       },
     },
+    {
+      name: 'Safari',
+      image: '/static/img/safari.jpg',
+      url: 'https://www.apple.com/safari/',
+      sources: {
+        windows: 'https://www.apple.com/safari/',
+        macos: 'https://www.apple.com/safari/',
+      },
+    },
     {
       name: 'Tor',
       image: '/static/img/tor.png',

config/data.js

@@ -19,15 +19,15 @@ export default {
   strongDevicePasscode,
   twoFactor,
   carrierPin,
-  creditFreeze,
   encryptedHardware,
+  creditFreeze,
   dns,
   vpn,
+  webcam,
   browsers,
   searchEngine,
   email,
   appPermissions,
-  webcam,
   socialMedia,
   phishing,
 };

cypress/integration/home_spec.js

@@ -1,3 +1,5 @@
+import data from '../../config/data';
+
 describe('Home', () => {
   before(() => {
     cy.visit('/');
@@ -23,4 +25,11 @@ describe('Home', () => {
       'be.visible'
     );
   });
+
+  it('should render content', () => {
+    const dataKeys = Object.keys(data);
+    dataKeys.map(key => {
+      cy.contains(data[key].title);
+    });
+  });
 });

pages/index.js

@@ -4,6 +4,7 @@ import Page, { SectionHeading, Heading, Subheading } from '../components/Page';
 import type { GetInitialProps } from '../types';
 import Checklist from '../components/Checklist';
 import ShareButtons from '../components/ShareButtons';
+import BottomShare from '../components/BottomShare';
 
 class Index extends React.Component<{}> {
   static async getInitialProps({ res }: GetInitialProps) {
@@ -22,14 +23,19 @@ class Index extends React.Component<{}> {
         <SectionHeading>
           <Heading>Be safe on the internet.</Heading>
           <Subheading>
-            An open source collection of resources designed to improve your
-            online privacy and security.
+            An open source checklist of resources designed to improve your
+            online privacy and security. Check things off to keep track as you
+            go.
           </Subheading>
         </SectionHeading>
 
+        <div style={{ marginTop: '40px' }} />
+
         <ShareButtons />
 
         <Checklist />
+
+        <BottomShare />
       </Page>
     );
   }