From cd59054c8e4d46feb7192b71b682a08320b9e0c8 Mon Sep 17 00:00:00 2001
From: Enrique Ortiz <hi@enriqueortiz.dev>
Date: Thu, 27 Aug 2020 09:23:43 -0400
Subject: [PATCH] Grid view on desktop, move ethers connection to self-hosted
 nodes, T&C fixes

---
 src/components/AddProposalPanel.js     |  8 ++++----
 src/components/Header/HeaderPopover.js |  1 -
 src/components/ProposalSupported.js    |  2 +-
 src/components/ProposalsView.js        | 18 +++++++++++-------
 src/providers/Wallet.js                |  6 +++---
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/AddProposalPanel.js b/src/components/AddProposalPanel.js
index da768d5..5fdc8cf 100644
--- a/src/components/AddProposalPanel.js
+++ b/src/components/AddProposalPanel.js
@@ -23,6 +23,9 @@ import { ZERO_ADDR } from '../constants'
 const NULL_PROPOSAL_TYPE = -1
 const FUNDING_PROPOSAL = 1
 
+const BASE_IPFS_URI = 'https://ipfs.eth.aragon.network/ipfs/'
+const TC_IPFS_HASH = 'QmTSDxWVFnNUis8ZJ7aBfH2z71Jc4N62YLYM9PzJz8DUjt'
+
 const DEFAULT_FORM_DATA = {
   title: '',
   link: '',
@@ -263,10 +266,7 @@ const AddProposalPanel = React.memo(({ onSubmit }) => {
       >
         <Checkbox checked={termsAccepted} onChange={setTermsAccepted} />I accept
         the&nbsp;
-        <Link
-          href="https://ipfs.eth.aragon.network/ipfs/QmU13GnuG9qo8NUi1WfJP19qTrViHwZ2dRzAnmJKG2i8hA"
-          external
-        >
+        <Link href={`${BASE_IPFS_URI}${TC_IPFS_HASH}`} external>
           Terms and Conditions
         </Link>
       </label>
diff --git a/src/components/Header/HeaderPopover.js b/src/components/Header/HeaderPopover.js
index db7eba5..636977b 100644
--- a/src/components/Header/HeaderPopover.js
+++ b/src/components/Header/HeaderPopover.js
@@ -23,7 +23,6 @@ function HeaderPopover({
       onClose={onClose}
       opener={opener}
       visible={visible}
-      placement="center-start"
       css={`
         width: ${width}px;
       `}
diff --git a/src/components/ProposalSupported.js b/src/components/ProposalSupported.js
index d877a89..2686744 100644
--- a/src/components/ProposalSupported.js
+++ b/src/components/ProposalSupported.js
@@ -3,7 +3,7 @@ import TokenAmount from 'token-amount'
 import { GU, IconCheck, RADIUS, textStyle, useTheme } from '@aragon/ui'
 import { useAppState } from '../providers/AppState'
 
-const LIGHT_INFO_SURFACE_COLOR = '#F8DFE'
+const LIGHT_INFO_SURFACE_COLOR = '#F8FDFE'
 
 function VoteCast({ amountOfTokens }) {
   const theme = useTheme()
diff --git a/src/components/ProposalsView.js b/src/components/ProposalsView.js
index 677129e..aa7edff 100644
--- a/src/components/ProposalsView.js
+++ b/src/components/ProposalsView.js
@@ -26,7 +26,7 @@ function ProposalsView({ proposals, requestToken }) {
   const history = useHistory()
   const { below } = useViewport()
 
-  const compactMode = below('large')
+  const compactMode = below(1400)
 
   const handleSelectProposal = useCallback(
     id => {
@@ -69,9 +69,13 @@ function ProposalsView({ proposals, requestToken }) {
           <div
             css={`
               width: 100%;
-              display: flex;
+              display: grid;
+              grid-template-columns: 1fr 1fr 1fr;
+              grid-template-rows: 1fr;
+              justify-items: start;
               ${compactMode &&
                 `
+                display: flex;
                 flex-direction: column;
               `}
             `}
@@ -79,6 +83,7 @@ function ProposalsView({ proposals, requestToken }) {
             <ProposalProperty
               title="Proposal Title"
               css={`
+                grid-column-start: 0;
                 margin-top: ${2 * GU}px;
               `}
             >
@@ -88,7 +93,6 @@ function ProposalsView({ proposals, requestToken }) {
                 id={proposal.id}
               />
             </ProposalProperty>
-            <div css="flex-grow: 0.8;" />
             {proposal.beneficiary === ZERO_ADDR ? (
               <SignalingIndicator />
             ) : (
@@ -172,7 +176,7 @@ function ProposalProperty({ title, children }) {
   const theme = useTheme()
   const { below } = useViewport()
 
-  const compactMode = below('large')
+  const compactMode = below(1400)
 
   return (
     <div
@@ -205,7 +209,7 @@ const SignalingIndicator = () => {
   const theme = useTheme()
   const { below } = useViewport()
 
-  const compactMode = below('large')
+  const compactMode = below(1400)
 
   return (
     <div
@@ -241,7 +245,7 @@ const CancelledIndicator = () => {
   const theme = useTheme()
   const { below } = useViewport()
 
-  const compactMode = below('large')
+  const compactMode = below(1400)
 
   return (
     <div
@@ -277,7 +281,7 @@ const ExecutedIndicator = () => {
   const theme = useTheme()
   const { below } = useViewport()
 
-  const compactMode = below('large')
+  const compactMode = below(1400)
 
   return (
     <div
diff --git a/src/providers/Wallet.js b/src/providers/Wallet.js
index df50636..4b07970 100644
--- a/src/providers/Wallet.js
+++ b/src/providers/Wallet.js
@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react'
-import Ethers, { providers as EthersProviders } from 'ethers'
+import { providers as EthersProviders } from 'ethers'
 import { UseWalletProvider, useWallet } from 'use-wallet'
 import { getUseWalletConnectors } from '../lib/web3-utils'
 import { getNetwork } from '../networks'
@@ -18,10 +18,10 @@ function WalletAugmented({ children }) {
 
   const ethers = useMemo(() => {
     if (!ethereum) {
-      const { defaultEthNode: networkNode, type } = getNetwork()
+      const { defaultEthNode: networkNode } = getNetwork()
 
       return networkNode.includes('wss')
-        ? Ethers.getDefaultProvider(type)
+        ? new EthersProviders.WebSocketProvider(networkNode)
         : new EthersProviders.JsonRpcProvider(networkNode)
     }