Fix Content padding on smaller devices

Closes #55
1Hive · Sep 6, 2019 · adab01d · adab01d
1 parent e58c941
commit adab01d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -9,7 +9,7 @@
     "now-build": "npm run build"
   },
   "dependencies": {
-    "@aragon/ui": "^1.0.0-alpha.19",
+    "@aragon/ui": "^1.0.0-alpha.23",
     "date-fns": "^2.0.1",
     "graphql-hooks": "^3.6.1",
     "prop-types": "^15.7.2",

diff --git a/website/src/components/Layout/Content.js b/website/src/components/Layout/Content.js
@@ -1,6 +1,18 @@
+import React from 'react'
 import styled from 'styled-components'
+import { useLayout } from '@aragon/ui'
 
-export const Content = styled.div`
-  padding: 1em;
+export const ContentContainer = styled.div`
+  padding: ${({ compact }) => compact ? 'none' : '1em'};
   width: 100%;
 `
+
+export const Content = ({
+  children
+}) => {
+  const { name: layout } = useLayout()
+
+  return <ContentContainer compact={layout === 'small'}>
+    {children}
+  </ContentContainer>
+}
diff --git a/website/src/pages/orgs.js b/website/src/pages/orgs.js
@@ -143,8 +143,15 @@ export default () => {
             ]}
             entries={data.organisations.nodes}
             renderEntry={({ address, ens, createdAt }) => [
-              <IdentityBadge key='org-addr' entity={address} customLabel={ens} />,
-              <div key='org-created-at'>{format(new Date(createdAt), 'dd/MM/y')}</div>
+              <IdentityBadge
+                key='org-addr'
+                entity={address}
+                customLabel={ens}
+                popoverTitle={ens}
+              />,
+              <div key='org-created-at'>
+                {format(new Date(createdAt), 'dd/MM/y')}
+              </div>
             ]}
             renderEntryActions={({ address, ens }) => [
               <Button