Responsive voting app

apps/voting/app/src/App.js

@@ -20,6 +20,7 @@ import VotePanelContent from './components/VotePanelContent'
 import NewVotePanelContent from './components/NewVotePanelContent'
 import AutoLink from './components/AutoLink'
 import MenuButton from './components/MenuButton/MenuButton'
+import NewVoteButton from './components/NewVoteButton/NewVoteButton'
 import { networkContextType } from './utils/provideNetwork'
 import { settingsContextType } from './utils/provideSettings'
 import { hasLoadedVoteSettings } from './vote-settings'
@@ -244,9 +245,10 @@ class App extends React.Component {
                   </Title>
                 }
                 endContent={
-                  <Button mode="strong" onClick={this.handleCreateVoteOpen}>
-                    New Vote
-                  </Button>
+                  <NewVoteButton
+                    title="New Vote"
+                    onClick={this.handleCreateVoteOpen}
+                  />
                 }
               />
             }
@@ -302,12 +304,12 @@ const Title = styled.span`
 `
 
 const TitleLabel = styled.span`
-  margin-right: 10px;
   ${font({ size: 'xxlarge' })};
 `
 
 const Main = styled.div`
   height: 100vh;
+  min-width: 320px;
 `
 
 export default observe(

apps/voting/app/src/components/NewVoteButton/NewVoteButton.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import styled from 'styled-components'
+import { theme, Button, BreakPoint } from '@aragon/ui'
+
+const StyledButton = styled.button`
+  border: none;
+  background: none;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+
+  &:focus {
+    border: 2px solid ${theme.accent};
+  }
+
+  &:active {
+    border: none;
+  }
+`
+
+export default props => (
+  <React.Fragment>
+    <BreakPoint to="medium">
+      <StyledButton {...props}>
+        <svg width="24px" height="24px" viewBox="0 0 24 24" {...props}>
+          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+          <path d="M0 0h24v24H0z" fill="none" />
+        </svg>
+      </StyledButton>
+    </BreakPoint>
+    <BreakPoint from="medium">
+      <Button mode="strong" {...props}>
+        New Vote
+      </Button>
+    </BreakPoint>
+  </React.Fragment>
+)

apps/voting/app/src/components/VotePanelContent.js

@@ -4,13 +4,15 @@ import styled from 'styled-components'
 import Blockies from 'react-blockies'
 import {
   Button,
+  IdentityBadge,
   Info,
   SafeLink,
   SidePanelSplit,
   SidePanelSeparator,
   Countdown,
   Text,
   theme,
+  BreakPoint,
 } from '@aragon/ui'
 import provideNetwork from '../utils/provideNetwork'
 import { VOTE_NAY, VOTE_YEA } from '../vote-types'
@@ -25,6 +27,10 @@ import SummaryBar from './SummaryBar'
 class VotePanelContent extends React.Component {
   static propTypes = {
     app: PropTypes.object.isRequired,
+    shortAddresses: PropTypes.bool.isRequired,
+  }
+  static defaultProps = {
+    shortAddresses: false,
   }
   state = {
     userCanVote: false,
@@ -135,6 +141,7 @@ class VotePanelContent extends React.Component {
       network: { etherscanBaseUrl },
       vote,
       ready,
+      shortAddresses,
       tokenSymbol,
       tokenDecimals,
     } = this.props
@@ -220,23 +227,7 @@ class VotePanelContent extends React.Component {
             <Label>Created By</Label>
           </h2>
           <Creator>
-            <CreatorImg>
-              <Blockies seed={creator} size={8} />
-            </CreatorImg>
-            <div>
-              <p>
-                {etherscanBaseUrl ? (
-                  <SafeLink
-                    href={`${etherscanBaseUrl}/address/${creator}`}
-                    target="_blank"
-                  >
-                    {creator}
-                  </SafeLink>
-                ) : (
-                  creator
-                )}
-              </p>
-            </div>
+            <IdentityBadge entity={creator} shorten={shortAddresses} />
           </Creator>
         </Part>
         <SidePanelSeparator />
@@ -340,6 +331,17 @@ class VotePanelContent extends React.Component {
   }
 }
 
+const ResponsiveVotePanelContent = props => (
+  <React.Fragment>
+    <BreakPoint to="medium">
+      <VotePanelContent {...props} shortAddresses />
+    </BreakPoint>
+    <BreakPoint from="medium">
+      <VotePanelContent {...props} />
+    </BreakPoint>
+  </React.Fragment>
+)
+
 const Label = styled(Text).attrs({
   smallcaps: true,
   color: theme.textSecondary,
@@ -404,4 +406,4 @@ const VotingButton = styled(Button)`
   }
 `
 
-export default provideNetwork(VotePanelContent)
+export default provideNetwork(ResponsiveVotePanelContent)

apps/voting/app/src/components/VotingCard/VotingCardGroup.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Badge, Text, unselectable } from '@aragon/ui'
+import { Badge, Text, unselectable, breakpoint } from '@aragon/ui'
 
 const VotingCardGroup = ({ title, count, children }) => (
   <Main>
@@ -24,9 +24,16 @@ const Main = styled.section`
 
 const Grid = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  grid-template-columns: 1fr;
   grid-auto-rows: 270px;
   grid-gap: 30px;
+
+  ${breakpoint(
+    'medium',
+    `
+      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+     `,
+  )};
 `
 
 const Title = styled.h1`