From 9b8d197e8f028fcf26da44356be89ca8d1a07c46 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Fri, 9 Oct 2020 14:35:27 -0400
Subject: [PATCH] interface: sidebarInvite in indigo-react

---
 .../components/Sidebar/SidebarInvite.tsx      | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/pkg/interface/src/views/landscape/components/Sidebar/SidebarInvite.tsx b/pkg/interface/src/views/landscape/components/Sidebar/SidebarInvite.tsx
index eb57b9731..837e8b260 100644
--- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarInvite.tsx
+++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarInvite.tsx
@@ -1,30 +1,40 @@
 import React, { Component } from 'react';
 import { Invite } from '~/types/invite-update';
+import { Text, Box, Button, Row } from '@tlon/indigo-react';
 
 export class SidebarInvite extends Component<{invite: Invite, onAccept: Function, onDecline: Function}, {}> {
   render() {
     const { props } = this;
 
     return (
-      <div className='w-100 bg-white bg-gray0-d pa4 bb b--gray4 b--gray1-d  z-5' style={{position: 'sticky', top: 0}}>
-        <div className='w-100 v-mid'>
-          <p className="dib f8 mono gray4-d">
-            {props.invite.text ? props.invite.text : props.invite.path}
-          </p>
-        </div>
-        <a
-          className="dib pointer pa2 f9 bg-green2 white mt4"
+      <Box width='100%' p='4' mb='4' borderBottom='1px solid lightGray' position='sticky' style={{ top: 0 }}>
+        <Box width='100%' verticalAlign='middle'>
+          <Text display='block' pb='2' gray>You have been invited to:</Text>
+          <Text display='inline-block'>
+            {props.invite.path.substr(1)}
+          </Text>
+        </Box>
+        <Row>
+        <Button
+          cursor='pointer'
+          primary
+          mt='4'
+          display='inline-block'
           onClick={this.props.onAccept.bind(this)}
         >
-          Accept Invite
-        </a>
-        <a
-          className="dib pointer ml4 pa2 f9 bg-black bg-gray0-d white mt4"
+          Accept
+        </Button>
+        <Button
+          display='inline-block'
+          cursor='pointer'
+          ml='4'
+          mt='4'
           onClick={this.props.onDecline.bind(this)}
         >
           Decline
-        </a>
-      </div>
+        </Button>
+        </Row>
+      </Box>
     );
   }
 }