Perform design audit

[macklinu]

Look at the app in its current state with a designer and assess:

• layout (large desktop screens especially)
• color
• responsiveness

Make any issues to address feedback and tackle those before shipping 1.0

[macklinu]

Looking at Typeform, I'm wondering if the questions and answers should have larger calls to action to fill the space on a large monitor:

[macklinu]

Rough idea of this (not sure what the background would look like:

diff --git a/src/components/ButtonGroup.js b/src/components/ButtonGroup.js
index 7c470f2..16e4e3b 100644
--- a/src/components/ButtonGroup.js
+++ b/src/components/ButtonGroup.js
@@ -4,29 +4,33 @@ import React from 'react'
 import compose from 'recompose/compose'
 import setDisplayName from 'recompose/setDisplayName'
 import defaultProps from 'recompose/defaultProps'
-import { ButtonCircle, Flex, Box, Text } from 'rebass'
+import styled from 'styled-components'
+import { Card, Flex, Heading, Lead, Box, Text } from 'rebass'

 const enhance = compose(
   setDisplayName('ButtonGroup'),
   defaultProps({ labels: [], onSelected: () => {} })
 )

+const CardLink = styled(Card)`
+  transition: all 0.15s ease-in-out;
+  &:hover {
+    opacity: 0.85;
+  }
+`
+
 export default enhance(({ labels, onSelected }) =>
-  <div>
+  <Flex>
     {labels.map((label, index) =>
-      <Flex key={label} align="baseline" my={2}>
-        <Box flex="0 1 auto" mr={1}>
-          <ButtonCircle
-            onClick={() => onSelected(index)}
+      <CardLink mx={2} width={256} onClick={() => onSelected(index)}>
+        <Flex p={6} bg="blue" justify="center" align="start">
+          <Heading
+            color="white"
             children={String.fromCharCode(97 + index).toUpperCase()}
           />
-        </Box>
-        <Box flex="1 1 auto">
-          <Text>
-            {label}
-          </Text>
-        </Box>
-      </Flex>
+        </Flex>
+        <Text f={3} p={2} children={label} center />
+      </CardLink>
     )}
-  </div>
+  </Flex>
 )
diff --git a/src/components/Question.js b/src/components/Question.js
index 98faa0d..356fb57 100644
--- a/src/components/Question.js
+++ b/src/components/Question.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Lead, Flex } from 'rebass'
+import { Text, Flex } from 'rebass'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
 import ButtonGroup from './ButtonGroup'
@@ -11,9 +11,9 @@ const TextContainer = styled(Flex)`height: ${props => props.height || '128px'};`
 const Question = ({ text, onAnswered }) =>
   <div>
     <TextContainer align="center">
-      <Lead>
+      <Text f={4}>
         {text}
-      </Lead>
+      </Text>
     </TextContainer>
     <ButtonGroup
       labels={[

[macklinu]

Feedback about the font size:

The font could be much larger. On both my PC and phone, the screen is mostly blank when I am reading the questions.

[macklinu]

Klaw sent me a couple of designs to help with the look of the quiz itself. These have been implemented, just leaving them here for reference.

Desktop

Mobile