From 04ecb8ff29e7d899a435aa91dd6a1d9f73e7b090 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Mon, 1 Feb 2021 17:01:21 -0500
Subject: [PATCH] chat: add stubbed share banner

---
 .../src/views/apps/chat/ChatResource.tsx      |  2 ++
 .../apps/chat/components/ShareProfile.js      | 30 +++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 pkg/interface/src/views/apps/chat/components/ShareProfile.js

diff --git a/pkg/interface/src/views/apps/chat/ChatResource.tsx b/pkg/interface/src/views/apps/chat/ChatResource.tsx
index e9c8e46fd..56bc414b6 100644
--- a/pkg/interface/src/views/apps/chat/ChatResource.tsx
+++ b/pkg/interface/src/views/apps/chat/ChatResource.tsx
@@ -9,6 +9,7 @@ import { useFileDrag } from '~/logic/lib/useDrag';
 import ChatWindow from './components/ChatWindow';
 import ChatInput from './components/ChatInput';
 import GlobalApi from '~/logic/api/global';
+import { ShareProfile } from '~/views/apps/chat/components/ShareProfile';
 import SubmitDragger from '~/views/components/SubmitDragger';
 import { useLocalStorageState } from '~/logic/lib/useLocalStorageState';
 import { Loading } from '~/views/components/Loading';
@@ -85,6 +86,7 @@ export function ChatResource(props: ChatResourceProps) {
 
   return (
     <Col {...bind} height="100%" overflow="hidden" position="relative">
+      <ShareProfile our={ourContact} />
       {dragging && <SubmitDragger />}
       <ChatWindow
         mailboxSize={5}
diff --git a/pkg/interface/src/views/apps/chat/components/ShareProfile.js b/pkg/interface/src/views/apps/chat/components/ShareProfile.js
new file mode 100644
index 000000000..d0c1b60ee
--- /dev/null
+++ b/pkg/interface/src/views/apps/chat/components/ShareProfile.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Box, Row, Text, BaseImage } from '@tlon/indigo-react';
+import { uxToHex } from '~/logic/lib/util';
+import { Sigil } from '~/logic/lib/sigil';
+
+export const ShareProfile = (props) => {
+  const image = (props?.our?.avatar)
+  ? <BaseImage src={props.our.avatar} width='24px' height='24px' borderRadius={2} style={{ objectFit: 'cover' }} />
+  : <Row p={1} alignItems="center" borderRadius={2} backgroundColor={`#${uxToHex(props?.our?.color)}` || "#000000"}>
+      <Sigil ship={window.ship} size={16} icon color={`#${uxToHex(props?.our?.color)}` || "#000000"} />
+    </Row>;
+
+  return (
+    <Row
+      height="48px"
+      alignItems="center"
+      justifyContent="space-between"
+      borderBottom={1}
+      borderColor="washedGray"
+    >
+      <Row pl={3} alignItems="center">
+        {image}
+        <Text verticalAlign="middle" pl={2}>Share private profile?</Text>
+      </Row>
+      <Box pr={2}>
+        <Text color="blue" bold cursor="pointer">Share</Text>
+      </Box>
+    </Row>
+  );
+};