From db4c0bcb8731f135d166235a21b7c6003248abb6 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Wed, 10 Mar 2021 16:11:05 -0500
Subject: [PATCH 01/23] settings: sidebar same width as groups

fixes urbit/landscape#541
---
 .../src/views/apps/settings/settings.tsx      | 118 ++++++++----------
 1 file changed, 53 insertions(+), 65 deletions(-)

diff --git a/pkg/interface/src/views/apps/settings/settings.tsx b/pkg/interface/src/views/apps/settings/settings.tsx
index 0fb9d94d3..912d32821 100644
--- a/pkg/interface/src/views/apps/settings/settings.tsx
+++ b/pkg/interface/src/views/apps/settings/settings.tsx
@@ -1,35 +1,42 @@
-import React, { ReactNode } from "react";
-import { useLocation } from "react-router-dom";
-import Helmet from "react-helmet";
+import React, { ReactNode } from 'react';
+import { useLocation } from 'react-router-dom';
+import Helmet from 'react-helmet';
 
 import { Text, Box, Col, Row } from '@tlon/indigo-react';
 
-import { NotificationPreferences } from "./components/lib/NotificationPref";
-import DisplayForm from "./components/lib/DisplayForm";
-import S3Form from "./components/lib/S3Form";
-import { CalmPrefs } from "./components/lib/CalmPref";
-import SecuritySettings from "./components/lib/Security";
-import { LeapSettings } from "./components/lib/LeapSettings";
-import { useHashLink } from "~/logic/lib/useHashLink";
-import { SidebarItem as BaseSidebarItem } from "~/views/landscape/components/SidebarItem";
-import { PropFunc } from "~/types";
+import { NotificationPreferences } from './components/lib/NotificationPref';
+import DisplayForm from './components/lib/DisplayForm';
+import S3Form from './components/lib/S3Form';
+import { CalmPrefs } from './components/lib/CalmPref';
+import SecuritySettings from './components/lib/Security';
+import { LeapSettings } from './components/lib/LeapSettings';
+import { useHashLink } from '~/logic/lib/useHashLink';
+import { SidebarItem as BaseSidebarItem } from '~/views/landscape/components/SidebarItem';
+import { PropFunc } from '~/types';
 
 export const Skeleton = (props: { children: ReactNode }) => (
-  <Box height="100%" width="100%" px={[0, 3]} pb={[0, 3]} borderRadius={1}>
+  <Box height='100%' width='100%' px={[0, 3]} pb={[0, 3]} borderRadius={1}>
     <Box
-      height="100%"
-      width="100%"
-      borderRadius={1}
-      bg="white"
+      display='grid'
+      gridTemplateColumns={[
+        '100%',
+        'minmax(150px, 1fr) 3fr',
+        'minmax(250px, 1fr) 4fr'
+      ]}
+      gridTemplateRows='100%'
+      height='100%'
+      width='100%'
+      borderRadius={2}
+      bg='white'
       border={1}
-      borderColor="washedGray"
+      borderColor='washedGray'
     >
       {props.children}
     </Box>
   </Box>
 );
 
-type ProvSideProps = "to" | "selected";
+type ProvSideProps = 'to' | 'selected';
 type BaseProps = PropFunc<typeof BaseSidebarItem>;
 function SidebarItem(props: { hash: string } & Omit<BaseProps, ProvSideProps>) {
   const { hash, icon, text, ...rest } = props;
@@ -54,16 +61,15 @@ function SettingsItem(props: { children: ReactNode }) {
   const { children } = props;
 
   return (
-    <Box borderBottom="1" borderBottomColor="washedGray">
+    <Box borderBottom='1' borderBottomColor='washedGray'>
       {children}
     </Box>
   );
 }
 
 export default function SettingsScreen(props: any) {
-
   const location = useLocation();
-  const hash = location.hash.slice(1)
+  const hash = location.hash.slice(1);
 
   return (
     <>
@@ -71,65 +77,47 @@ export default function SettingsScreen(props: any) {
         <title>Landscape - Settings</title>
       </Helmet>
       <Skeleton>
-        <Row height="100%" overflow="hidden">
+        <Row height='100%' overflow='auto'>
           <Col
-            height="100%"
-            borderRight="1"
-            borderRightColor="washedGray"
-            display={hash === "" ? "flex" : ["none", "flex"]}
-            minWidth="250px"
-            width="100%"
-            maxWidth={["100vw", "350px"]}
+            height='100%'
+            borderRight='1'
+            borderRightColor='washedGray'
+            display={hash === '' ? 'flex' : ['none', 'flex']}
+            width='100%'
           >
-            <Text
-              display="block"
-              my="4"
-              mx="3"
-              fontSize="2"
-              fontWeight="medium"
-            >
+            <Text display='block' my='4' mx='3' fontSize='2' fontWeight='700'>
               System Preferences
             </Text>
-            <Col gapY="1">
+            <Col gapY='1'>
               <SidebarItem
-                icon="Inbox"
-                text="Notifications"
-                hash="notifications"
+                icon='Inbox'
+                text='Notifications'
+                hash='notifications'
               />
-              <SidebarItem icon="Image" text="Display" hash="display" />
-              <SidebarItem icon="Upload" text="Remote Storage" hash="s3" />
-              <SidebarItem icon="LeapArrow" text="Leap" hash="leap" />
-              <SidebarItem icon="Node" text="CalmEngine" hash="calm" />
+              <SidebarItem icon='Image' text='Display' hash='display' />
+              <SidebarItem icon='Upload' text='Remote Storage' hash='s3' />
+              <SidebarItem icon='LeapArrow' text='Leap' hash='leap' />
+              <SidebarItem icon='Node' text='CalmEngine' hash='calm' />
               <SidebarItem
-                icon="Locked"
-                text="Devices + Security"
-                hash="security"
+                icon='Locked'
+                text='Devices + Security'
+                hash='security'
               />
             </Col>
           </Col>
-          <Col flexGrow={1} overflowY="auto">
+          <Col flexGrow={1} overflowY='auto'>
             <SettingsItem>
-              {hash === "notifications" && (
+              {hash === 'notifications' && (
                 <NotificationPreferences
                   {...props}
                   graphConfig={props.notificationsGraphConfig}
                 />
               )}
-              {hash === "display" && (
-                <DisplayForm api={props.api} />
-              )}
-              {hash === "s3" && (
-                <S3Form api={props.api} />
-              )}
-              {hash === "leap" && (
-                <LeapSettings api={props.api} />
-              )}
-              {hash === "calm" && (
-                <CalmPrefs api={props.api} />
-              )}
-              {hash === "security" && (
-                <SecuritySettings api={props.api} />
-              )}
+              {hash === 'display' && <DisplayForm api={props.api} />}
+              {hash === 's3' && <S3Form api={props.api} />}
+              {hash === 'leap' && <LeapSettings api={props.api} />}
+              {hash === 'calm' && <CalmPrefs api={props.api} />}
+              {hash === 'security' && <SecuritySettings api={props.api} />}
             </SettingsItem>
           </Col>
         </Row>

From 41556cd5632b15a1bcec8c255f78e3611a40b2ee Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 10 Mar 2021 20:23:24 -0500
Subject: [PATCH 02/23] interface: remove deprecated types and props

---
 pkg/interface/src/views/components/UnjoinedResource.tsx   | 8 +++-----
 .../src/views/landscape/components/Sidebar/Sidebar.tsx    | 1 -
 pkg/interface/src/views/landscape/components/Skeleton.tsx | 4 ----
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/pkg/interface/src/views/components/UnjoinedResource.tsx b/pkg/interface/src/views/components/UnjoinedResource.tsx
index ab14aed2d..8e9156a7c 100644
--- a/pkg/interface/src/views/components/UnjoinedResource.tsx
+++ b/pkg/interface/src/views/components/UnjoinedResource.tsx
@@ -9,15 +9,13 @@ import {
   StatelessAsyncButton as AsyncButton,
   StatelessAsyncButton
 } from './StatelessAsyncButton';
-import { Notebooks, Graphs, Inbox } from '@urbit/api';
+import { Graphs } from '@urbit/api';
 import useGraphState from '~/logic/state/graph';
 
 interface UnjoinedResourceProps {
   association: Association;
   api: GlobalApi;
   baseUrl: string;
-  notebooks: Notebooks;
-  inbox: Inbox;
 }
 
 function isJoined(path: string) {
@@ -31,7 +29,7 @@ function isJoined(path: string) {
 }
 
 export function UnjoinedResource(props: UnjoinedResourceProps) {
-  const { api, notebooks, inbox } = props;
+  const { api } = props;
   const history = useHistory();
   const rid = props.association.resource;
   const appName = props.association['app-name'];
@@ -52,7 +50,7 @@ export function UnjoinedResource(props: UnjoinedResourceProps) {
     if (isJoined(rid)({ graphKeys })) {
       history.push(`${props.baseUrl}/resource/${app}${rid}`);
     }
-  }, [props.association, inbox, graphKeys, notebooks]);
+  }, [props.association, graphKeys]);
 
   return (
     <Center p={6}>
diff --git a/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx b/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx
index 62d2103af..ceb741a0e 100644
--- a/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx
+++ b/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx
@@ -37,7 +37,6 @@ interface SidebarProps {
   api: GlobalApi;
   selected?: string;
   selectedGroup?: string;
-  includeUnmanaged?: boolean;
   apps: SidebarAppConfigs;
   baseUrl: string;
   mobileHide?: boolean;
diff --git a/pkg/interface/src/views/landscape/components/Skeleton.tsx b/pkg/interface/src/views/landscape/components/Skeleton.tsx
index b1971041d..ea1280a92 100644
--- a/pkg/interface/src/views/landscape/components/Skeleton.tsx
+++ b/pkg/interface/src/views/landscape/components/Skeleton.tsx
@@ -5,7 +5,6 @@ import { Associations } from '@urbit/api/metadata';
 
 import { Sidebar } from './Sidebar/Sidebar';
 import GlobalApi from '~/logic/api/global';
-import GlobalSubscription from '~/logic/subscription/global';
 import { useGraphModule } from './Sidebar/Apps';
 import { Body } from '~/views/components/Body';
 import { Workspace } from '~/types/workspace';
@@ -16,14 +15,11 @@ import ErrorBoundary from '~/views/components/ErrorBoundary';
 interface SkeletonProps {
   children: ReactNode;
   recentGroups: string[];
-  linkListening: Set<Path>;
   selected?: string;
   selectedApp?: AppName;
   baseUrl: string;
   mobileHide?: boolean;
   api: GlobalApi;
-  subscription: GlobalSubscription;
-  includeUnmanaged: boolean;
   workspace: Workspace;
 }
 

From af38b0ee2db4d6a0f9a6a641eb06bbec3af2ce37 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 10 Mar 2021 20:23:38 -0500
Subject: [PATCH 03/23] GroupsPane: reference correct associations object

---
 .../src/views/landscape/components/GroupsPane.tsx          | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/pkg/interface/src/views/landscape/components/GroupsPane.tsx b/pkg/interface/src/views/landscape/components/GroupsPane.tsx
index 9f66d516e..658f0e599 100644
--- a/pkg/interface/src/views/landscape/components/GroupsPane.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupsPane.tsx
@@ -158,8 +158,6 @@ export function GroupsPane(props: GroupsPaneProps) {
                 baseUrl={baseUrl}
               >
                 <UnjoinedResource
-                  notebooks={props.notebooks}
-                  inbox={props.inbox}
                   baseUrl={baseUrl}
                   api={api}
                   association={association}
@@ -191,9 +189,8 @@ export function GroupsPane(props: GroupsPaneProps) {
       <Route
         path={relativePath('')}
         render={(routeProps) => {
-          const hasDescription = groupAssociation?.metadata?.description;
-          const channelCount = Object.keys(props?.associations?.graph ?? {}).filter((e) => {
-            return props?.associations?.graph?.[e]?.['group'] === groupPath;
+          const channelCount = Object.keys(associations?.graph ?? {}).filter((e) => {
+            return associations?.graph?.[e]?.['group'] === groupPath;
           }).length;
           let summary: ReactNode;
           if(groupAssociation?.group) {

From cce7c890f48044842e549818f6c86aa4d7b20505 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Thu, 11 Mar 2021 12:41:06 -0500
Subject: [PATCH 04/23] settings: removes superfluous flex container, pads back
 button on mobile

fixes urbit/landscape#541
---
 .../settings/components/lib/BackButton.tsx    | 12 ++-
 .../apps/settings/components/lib/S3Form.tsx   | 45 +++++-----
 .../src/views/apps/settings/settings.tsx      | 85 +++++++++----------
 3 files changed, 75 insertions(+), 67 deletions(-)

diff --git a/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx b/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx
index 570618c64..1fdcc633c 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx
@@ -4,8 +4,16 @@ import { Text } from '@tlon/indigo-react';
 
 export function BackButton(props: {}) {
   return (
-    <Link to="/~settings">
-      <Text display={["block", "none"]} fontSize="2" fontWeight="medium">{"<- Back to System Preferences"}</Text>
+    <Link to='/~settings'>
+      <Text
+        display={['block', 'none']}
+        fontSize='2'
+        fontWeight='medium'
+        p={4}
+        pb={0}
+      >
+        {'<- Back to System Preferences'}
+      </Text>
     </Link>
   );
 }
diff --git a/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx b/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
index 1e90dcbe6..24f10b7a9 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
@@ -11,12 +11,12 @@ import {
   Anchor
 } from '@tlon/indigo-react';
 
-import GlobalApi from "~/logic/api/global";
-import { BucketList } from "./BucketList";
+import GlobalApi from '~/logic/api/global';
+import { BucketList } from './BucketList';
 import { S3State } from '~/types/s3-update';
 import useS3State from '~/logic/state/storage';
 import { BackButton } from './BackButton';
-import {StorageState} from '~/types';
+import { StorageState } from '~/types';
 import useStorageState from '~/logic/state/storage';
 
 interface FormSchema {
@@ -33,7 +33,7 @@ interface S3FormProps {
 
 export default function S3Form(props: S3FormProps): ReactElement {
   const { api } = props;
-  const s3 = useStorageState(state => state.s3);
+  const s3 = useStorageState((state) => state.s3);
 
   const onSubmit = useCallback(
     (values: FormSchema) => {
@@ -54,7 +54,8 @@ export default function S3Form(props: S3FormProps): ReactElement {
 
   return (
     <>
-      <Col p="5" pt="4" borderBottom="1" borderBottomColor="washedGray">
+      <BackButton />
+      <Col p='5' pt='4' borderBottom='1' borderBottomColor='washedGray'>
         <Formik
           initialValues={
             {
@@ -68,42 +69,42 @@ export default function S3Form(props: S3FormProps): ReactElement {
           onSubmit={onSubmit}
         >
           <Form>
-            <BackButton/>
-            <Col maxWidth="600px" gapY="5">
-              <Col gapY="1" mt="0">
-                <Text color="black" fontSize={2} fontWeight="medium">
+            <Col maxWidth='600px' gapY='5'>
+              <Col gapY='1' mt='0'>
+                <Text color='black' fontSize={2} fontWeight='medium'>
                   S3 Storage Setup
                 </Text>
                 <Text gray>
                   Store credentials for your S3 object storage buckets on your
                   Urbit ship, and upload media freely to various modules.
                   <Anchor
-                    target="_blank"
+                    target='_blank'
                     style={{ textDecoration: 'none' }}
-                    borderBottom="1"
-                    ml="1"
-                    href="https://urbit.org/using/operations/using-your-ship/#bucket-setup">
+                    borderBottom='1'
+                    ml='1'
+                    href='https://urbit.org/using/operations/using-your-ship/#bucket-setup'
+                  >
                     Learn more
                   </Anchor>
                 </Text>
               </Col>
-              <Input label="Endpoint" id="s3endpoint" />
-              <Input label="Access Key ID" id="s3accessKeyId" />
+              <Input label='Endpoint' id='s3endpoint' />
+              <Input label='Access Key ID' id='s3accessKeyId' />
               <Input
-                type="password"
-                label="Secret Access Key"
-                id="s3secretAccessKey"
+                type='password'
+                label='Secret Access Key'
+                id='s3secretAccessKey'
               />
-              <Button style={{ cursor: "pointer" }} type="submit">
+              <Button style={{ cursor: 'pointer' }} type='submit'>
                 Submit
               </Button>
             </Col>
           </Form>
         </Formik>
       </Col>
-      <Col maxWidth="600px" p="5" gapY="4">
-        <Col gapY="1">
-          <Text color="black" mb={4} fontSize={2} fontWeight="medium">
+      <Col maxWidth='600px' p='5' gapY='4'>
+        <Col gapY='1'>
+          <Text color='black' mb={4} fontSize={2} fontWeight='medium'>
             S3 Buckets
           </Text>
           <Text gray>
diff --git a/pkg/interface/src/views/apps/settings/settings.tsx b/pkg/interface/src/views/apps/settings/settings.tsx
index 912d32821..eb0c37e6d 100644
--- a/pkg/interface/src/views/apps/settings/settings.tsx
+++ b/pkg/interface/src/views/apps/settings/settings.tsx
@@ -77,50 +77,49 @@ export default function SettingsScreen(props: any) {
         <title>Landscape - Settings</title>
       </Helmet>
       <Skeleton>
-        <Row height='100%' overflow='auto'>
-          <Col
-            height='100%'
-            borderRight='1'
-            borderRightColor='washedGray'
-            display={hash === '' ? 'flex' : ['none', 'flex']}
-            width='100%'
-          >
-            <Text display='block' my='4' mx='3' fontSize='2' fontWeight='700'>
-              System Preferences
-            </Text>
-            <Col gapY='1'>
-              <SidebarItem
-                icon='Inbox'
-                text='Notifications'
-                hash='notifications'
-              />
-              <SidebarItem icon='Image' text='Display' hash='display' />
-              <SidebarItem icon='Upload' text='Remote Storage' hash='s3' />
-              <SidebarItem icon='LeapArrow' text='Leap' hash='leap' />
-              <SidebarItem icon='Node' text='CalmEngine' hash='calm' />
-              <SidebarItem
-                icon='Locked'
-                text='Devices + Security'
-                hash='security'
-              />
-            </Col>
+        <Col
+          height='100%'
+          borderRight='1'
+          borderRightColor='washedGray'
+          display={hash === '' ? 'flex' : ['none', 'flex']}
+          width='100%'
+          overflowY='auto'
+        >
+          <Text display='block' my='4' mx='3' fontSize='2' fontWeight='700'>
+            System Preferences
+          </Text>
+          <Col gapY='1'>
+            <SidebarItem
+              icon='Inbox'
+              text='Notifications'
+              hash='notifications'
+            />
+            <SidebarItem icon='Image' text='Display' hash='display' />
+            <SidebarItem icon='Upload' text='Remote Storage' hash='s3' />
+            <SidebarItem icon='LeapArrow' text='Leap' hash='leap' />
+            <SidebarItem icon='Node' text='CalmEngine' hash='calm' />
+            <SidebarItem
+              icon='Locked'
+              text='Devices + Security'
+              hash='security'
+            />
           </Col>
-          <Col flexGrow={1} overflowY='auto'>
-            <SettingsItem>
-              {hash === 'notifications' && (
-                <NotificationPreferences
-                  {...props}
-                  graphConfig={props.notificationsGraphConfig}
-                />
-              )}
-              {hash === 'display' && <DisplayForm api={props.api} />}
-              {hash === 's3' && <S3Form api={props.api} />}
-              {hash === 'leap' && <LeapSettings api={props.api} />}
-              {hash === 'calm' && <CalmPrefs api={props.api} />}
-              {hash === 'security' && <SecuritySettings api={props.api} />}
-            </SettingsItem>
-          </Col>
-        </Row>
+        </Col>
+        <Col flexGrow={1} overflowY='auto'>
+          <SettingsItem>
+            {hash === 'notifications' && (
+              <NotificationPreferences
+                {...props}
+                graphConfig={props.notificationsGraphConfig}
+              />
+            )}
+            {hash === 'display' && <DisplayForm api={props.api} />}
+            {hash === 's3' && <S3Form api={props.api} />}
+            {hash === 'leap' && <LeapSettings api={props.api} />}
+            {hash === 'calm' && <CalmPrefs api={props.api} />}
+            {hash === 'security' && <SecuritySettings api={props.api} />}
+          </SettingsItem>
+        </Col>
       </Skeleton>
     </>
   );

From dd0252542d60afc3c0a145ca0ad75d37eaf5253f Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 11 Mar 2021 12:41:07 -0500
Subject: [PATCH 05/23] publish: allow admins to delete posts, comments

---
 .../views/apps/publish/components/Note.tsx    | 58 +++++++++++--------
 .../src/views/components/CommentItem.tsx      | 44 +++++++++-----
 2 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/pkg/interface/src/views/apps/publish/components/Note.tsx b/pkg/interface/src/views/apps/publish/components/Note.tsx
index 123db344e..4b0f7d761 100644
--- a/pkg/interface/src/views/apps/publish/components/Note.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Note.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Box, Text, Col, Anchor } from '@tlon/indigo-react';
+import { Box, Text, Col, Anchor, Row } from '@tlon/indigo-react';
 import ReactMarkdown from 'react-markdown';
 import bigInt from 'big-integer';
 
@@ -9,6 +9,7 @@ import { Comments } from '~/views/components/Comments';
 import { NoteNavigation } from './NoteNavigation';
 import GlobalApi from '~/logic/api/global';
 import { getLatestRevision, getComments } from '~/logic/lib/publish';
+import { roleForShip } from '~/logic/lib/group';
 import Author from '~/views/components/Author';
 import { Contacts, GraphNode, Graph, Association, Unreads, Group } from '@urbit/api';
 
@@ -54,29 +55,37 @@ export function Note(props: NoteProps & RouteComponentProps) {
     api.hark.markEachAsRead(props.association, '/',`/${index[1]}/1/1`, 'note', 'publish');
   }, [props.association, props.note]);
 
-  let adminLinks: JSX.Element | null = null;
+  let adminLinks: JSX.Element[] = [];
+  const ourRole = roleForShip(group, window.ship);
   if (window.ship === note?.post?.author) {
-    adminLinks = (
-      <Box display="inline-block" verticalAlign="middle">
-        <Link to={`${baseUrl}/edit`}>
-        <Text
-          color="green"
-          ml={2}
+    adminLinks.push(
+        <Link
+          style={{ 'display': 'inline-block' }}
+          to={`${baseUrl}/edit`}
         >
-          Update
-        </Text>
+          <Text
+            color="blue"
+            ml={2}
+          >
+            Update
+          </Text>
       </Link>
-        <Text
-          color="red"
-          ml={2}
-          onClick={deletePost}
-          style={{ cursor: 'pointer' }}
-        >
-          Delete
-        </Text>
-      </Box>
-    );
-  }
+    )
+  };
+
+  if (window.ship === note?.post?.author || ourRole === "admin") {
+    adminLinks.push(
+      <Text
+        color="red"
+        display='inline-block'
+        ml={2}
+        onClick={deletePost}
+        style={{ cursor: 'pointer' }}
+      >
+        Delete
+      </Text>
+    )
+  };
 
   const windowRef = React.useRef(null);
   useEffect(() => {
@@ -103,13 +112,14 @@ export function Note(props: NoteProps & RouteComponentProps) {
       </Link>
       <Col>
         <Text display="block" mb={2}>{title || ''}</Text>
-        <Box display="flex">
+        <Row alignItems="center">
           <Author
             ship={post?.author}
             date={post?.['time-sent']}
+            group={group}
           />
-          <Text ml={2}>{adminLinks}</Text>
-        </Box>
+          <Text ml={1}>{adminLinks}</Text>
+        </Row>
       </Col>
       <Box color="black" className="md" style={{ overflowWrap: 'break-word', overflow: 'hidden' }}>
         <ReactMarkdown source={body} linkTarget={'_blank'} renderers={renderers} />
diff --git a/pkg/interface/src/views/components/CommentItem.tsx b/pkg/interface/src/views/components/CommentItem.tsx
index c0054c3f5..ba85299a1 100644
--- a/pkg/interface/src/views/components/CommentItem.tsx
+++ b/pkg/interface/src/views/components/CommentItem.tsx
@@ -10,6 +10,7 @@ import { Group } from '@urbit/api';
 import GlobalApi from '~/logic/api/global';
 import Author from '~/views/components/Author';
 import { MentionText } from '~/views/components/MentionText';
+import { roleForShip } from '~/logic/lib/group';
 import { getLatestCommentRevision } from '~/logic/lib/publish';
 
 const ClickBox = styled(Box)`
@@ -31,7 +32,7 @@ interface CommentItemProps {
 export function CommentItem(props: CommentItemProps): ReactElement {
   const { ship, name, api, comment, group } = props;
   const [, post] = getLatestCommentRevision(comment);
-  const disabled = props.pending || window.ship !== post?.author;
+  const disabled = props.pending;
 
   const onDelete = async () => {
     await api.graph.removeNodes(ship, name, [comment.post?.index]);
@@ -41,6 +42,29 @@ export function CommentItem(props: CommentItemProps): ReactElement {
   const commentIndex = commentIndexArray[commentIndexArray.length - 1];
   const updateUrl = `${props.baseUrl}/${commentIndex}`;
 
+  const adminLinks: JSX.Element[] = [];
+  const ourRole = roleForShip(group, window.ship);
+  if (window.ship == post?.author && !disabled) {
+    adminLinks.push(
+      <Link to={updateUrl}>
+        <Text
+          color="blue"
+          ml={2}
+        >
+          Update
+        </Text>
+      </Link>
+    )
+  };
+
+  if ((window.ship == post?.author || ourRole == "admin") && !disabled) {
+    adminLinks.push(
+      <ClickBox display="inline-block" color="red" onClick={onDelete}>
+        <Text color='red'>Delete</Text>
+      </ClickBox>
+    )
+  };
+
   return (
     <Box mb={4} opacity={post?.pending ? '60%' : '100%'}>
       <Row bg="white" my={3}>
@@ -52,21 +76,9 @@ export function CommentItem(props: CommentItemProps): ReactElement {
           group={group}
           api={api}
         >
-          {!disabled && (
-            <Box display="inline-block" verticalAlign="middle">
-              <Link to={updateUrl}>
-                <Text
-                  color="green"
-                  ml={2}
-                >
-                  Update
-                </Text>
-              </Link>
-              <ClickBox display="inline-block" color="red" onClick={onDelete}>
-                <Text color='red'>Delete</Text>
-              </ClickBox>
-            </Box>
-          )}
+          <Row alignItems="center">
+            {adminLinks}
+          </Row>
         </Author>
       </Row>
       <Box mb={2}>

From 5189b3ea204b3be933a544e635143c727d296a13 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 11 Mar 2021 12:46:27 -0500
Subject: [PATCH 06/23] publish: render author's image and overlay

---
 pkg/interface/src/views/apps/publish/components/Note.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pkg/interface/src/views/apps/publish/components/Note.tsx b/pkg/interface/src/views/apps/publish/components/Note.tsx
index 4b0f7d761..8d5277cc3 100644
--- a/pkg/interface/src/views/apps/publish/components/Note.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Note.tsx
@@ -114,6 +114,7 @@ export function Note(props: NoteProps & RouteComponentProps) {
         <Text display="block" mb={2}>{title || ''}</Text>
         <Row alignItems="center">
           <Author
+            showImage
             ship={post?.author}
             date={post?.['time-sent']}
             group={group}

From 95e2281d99768beed235907a20f2b16354f869fd Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 11 Mar 2021 12:46:41 -0500
Subject: [PATCH 07/23] landscape/Author: remove unnecessary api prop

---
 pkg/interface/src/views/apps/links/components/LinkItem.tsx  | 6 +-----
 .../src/views/apps/publish/components/NotePreview.tsx       | 3 ---
 .../src/views/apps/publish/components/Notebook.tsx          | 4 ----
 .../src/views/apps/publish/components/NotebookPosts.tsx     | 2 --
 pkg/interface/src/views/components/Author.tsx               | 2 --
 pkg/interface/src/views/components/CommentItem.tsx          | 1 -
 6 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/pkg/interface/src/views/apps/links/components/LinkItem.tsx b/pkg/interface/src/views/apps/links/components/LinkItem.tsx
index d1922b0f3..9579f4f54 100644
--- a/pkg/interface/src/views/apps/links/components/LinkItem.tsx
+++ b/pkg/interface/src/views/apps/links/components/LinkItem.tsx
@@ -148,17 +148,13 @@ export const LinkItem = (props: LinkItemProps): ReactElement => {
           </Anchor>
         </Text>
       </Box>
-
       <Row minWidth='0' flexShrink={0} width="100%" justifyContent="space-between" py={3} bg="white">
-
       <Author
         showImage
         ship={author}
         date={node.post['time-sent']}
         group={group}
-        api={api}
-      ></Author>
-
+      />
       <Box ml="auto">
         <Link
           to={node.post.pending ? '#' : `${baseUrl}/${index}`}
diff --git a/pkg/interface/src/views/apps/publish/components/NotePreview.tsx b/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
index d6a5a6500..6dc7d2052 100644
--- a/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
+++ b/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
@@ -12,7 +12,6 @@ import {
   getSnippet
 } from '~/logic/lib/publish';
 import { Unreads } from '@urbit/api';
-import GlobalApi from '~/logic/api/global';
 import ReactMarkdown from 'react-markdown';
 import useHarkState from '~/logic/state/hark';
 
@@ -21,7 +20,6 @@ interface NotePreviewProps {
   book: string;
   node: GraphNode;
   baseUrl: string;
-  api: GlobalApi;
   group: Group;
 }
 
@@ -96,7 +94,6 @@ export function NotePreview(props: NotePreviewProps) {
           date={post?.['time-sent']}
           group={group}
           unread={isUnread}
-          api={props.api}
         />
         <Box ml="auto" mr={1}>
           <Link to={url}>
diff --git a/pkg/interface/src/views/apps/publish/components/Notebook.tsx b/pkg/interface/src/views/apps/publish/components/Notebook.tsx
index 37296ecd9..0c5f23302 100644
--- a/pkg/interface/src/views/apps/publish/components/Notebook.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Notebook.tsx
@@ -5,13 +5,11 @@ import { Col, Box, Text, Row } from '@tlon/indigo-react';
 import { Contacts, Rolodex, Groups, Associations, Graph, Association, Unreads } from '@urbit/api';
 
 import { NotebookPosts } from './NotebookPosts';
-import GlobalApi from '~/logic/api/global';
 import { useShowNickname } from '~/logic/lib/util';
 import useContactState from '~/logic/state/contact';
 import useGroupState from '~/logic/state/group';
 
 interface NotebookProps {
-  api: GlobalApi;
   ship: string;
   book: string;
   graph: Graph;
@@ -40,7 +38,6 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
   const contacts = useContactState(state => state.contacts);
 
   const contact = contacts?.[`~${ship}`];
-  console.log(association.resource);
 
   const showNickname = useShowNickname(contact);
 
@@ -61,7 +58,6 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
         host={ship}
         book={book}
         baseUrl={props.baseUrl}
-        api={props.api}
         group={group}
       />
     </Col>
diff --git a/pkg/interface/src/views/apps/publish/components/NotebookPosts.tsx b/pkg/interface/src/views/apps/publish/components/NotebookPosts.tsx
index 801e34e38..b18e74eed 100644
--- a/pkg/interface/src/views/apps/publish/components/NotebookPosts.tsx
+++ b/pkg/interface/src/views/apps/publish/components/NotebookPosts.tsx
@@ -11,7 +11,6 @@ interface NotebookPostsProps {
   baseUrl: string;
   hideAvatars?: boolean;
   hideNicknames?: boolean;
-  api: GlobalApi;
   group: Group;
 }
 
@@ -29,7 +28,6 @@ export function NotebookPosts(props: NotebookPostsProps) {
               contact={contacts[`~${node.post.author}`]}
               node={node}
               baseUrl={props.baseUrl}
-              api={props.api}
               group={props.group}
             />
           )
diff --git a/pkg/interface/src/views/components/Author.tsx b/pkg/interface/src/views/components/Author.tsx
index 33fc3df54..063061a91 100644
--- a/pkg/interface/src/views/components/Author.tsx
+++ b/pkg/interface/src/views/components/Author.tsx
@@ -11,7 +11,6 @@ import useSettingsState, {selectCalmState} from "~/logic/state/settings";
 import useLocalState from "~/logic/state/local";
 import OverlaySigil from './OverlaySigil';
 import { Sigil } from '~/logic/lib/sigil';
-import GlobalApi from '~/logic/api/global';
 import Timestamp from './Timestamp';
 import useContactState from '~/logic/state/contact';
 
@@ -22,7 +21,6 @@ interface AuthorProps {
   children?: ReactNode;
   unread?: boolean;
   group: Group;
-  api?: GlobalApi;
 }
 
 // eslint-disable-next-line max-lines-per-function
diff --git a/pkg/interface/src/views/components/CommentItem.tsx b/pkg/interface/src/views/components/CommentItem.tsx
index ba85299a1..50493f6f6 100644
--- a/pkg/interface/src/views/components/CommentItem.tsx
+++ b/pkg/interface/src/views/components/CommentItem.tsx
@@ -74,7 +74,6 @@ export function CommentItem(props: CommentItemProps): ReactElement {
           date={post?.['time-sent']}
           unread={props.unread}
           group={group}
-          api={api}
         >
           <Row alignItems="center">
             {adminLinks}

From 534f5279a172c7737989cb4d9d3b72cf8a032bbd Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Wed, 10 Mar 2021 20:22:39 -0800
Subject: [PATCH 08/23] interface: added tool to track unneeded renders

---
 pkg/interface/config/webpack.dev.js                      | 6 +++++-
 pkg/interface/package-lock.json                          | 9 +++++++++
 pkg/interface/package.json                               | 1 +
 pkg/interface/src/index.js                               | 1 +
 pkg/interface/src/logic/api/metadata.ts                  | 1 -
 .../src/views/apps/publish/components/Notebook.tsx       | 1 -
 pkg/interface/src/views/components/RemoteContent.tsx     | 2 --
 pkg/interface/src/views/components/useTutorialModal.tsx  | 4 +---
 pkg/interface/src/wdyr.js                                | 8 ++++++++
 9 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 pkg/interface/src/wdyr.js

diff --git a/pkg/interface/config/webpack.dev.js b/pkg/interface/config/webpack.dev.js
index 66bf83ce9..0f85b58a9 100644
--- a/pkg/interface/config/webpack.dev.js
+++ b/pkg/interface/config/webpack.dev.js
@@ -94,7 +94,11 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['@babel/preset-env', '@babel/typescript', '@babel/preset-react'],
+            presets: ['@babel/preset-env', '@babel/typescript', ['@babel/preset-react', {
+              runtime: 'automatic',
+              development: true,
+              importSource: '@welldone-software/why-did-you-render',
+            }]],
             plugins: [
               '@babel/transform-runtime',
               '@babel/plugin-proposal-object-rest-spread',
diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json
index 61b37093d..0c5535474 100644
--- a/pkg/interface/package-lock.json
+++ b/pkg/interface/package-lock.json
@@ -1995,6 +1995,15 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@welldone-software/why-did-you-render": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-6.1.0.tgz",
+      "integrity": "sha512-0s+PuKQ4v9VV1SZSM6iS7d2T7X288T3DF+K8yfkFAhI31HhJGGH1SY1ssVm+LqjSMyrVWT60ZF5r0qUsO0Z9Lw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4"
+      }
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index 8b8c7853f..566510cca 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -71,6 +71,7 @@
     "@types/yup": "^0.29.11",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@urbit/eslint-config": "file:../npm/eslint-config",
+    "@welldone-software/why-did-you-render": "^6.1.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
diff --git a/pkg/interface/src/index.js b/pkg/interface/src/index.js
index ded85a8f5..e62b46b2f 100644
--- a/pkg/interface/src/index.js
+++ b/pkg/interface/src/index.js
@@ -1,3 +1,4 @@
+import './wdyr';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
diff --git a/pkg/interface/src/logic/api/metadata.ts b/pkg/interface/src/logic/api/metadata.ts
index c2d388dfc..cae4fc6d6 100644
--- a/pkg/interface/src/logic/api/metadata.ts
+++ b/pkg/interface/src/logic/api/metadata.ts
@@ -77,7 +77,6 @@ export default class MetadataApi extends BaseApi<StoreState> {
           tempChannel.delete();
         },
         (ev: any) => {
-          console.log(ev);
           if ('metadata-hook-update' in ev) {
             done = true;
             tempChannel.delete();
diff --git a/pkg/interface/src/views/apps/publish/components/Notebook.tsx b/pkg/interface/src/views/apps/publish/components/Notebook.tsx
index 37296ecd9..dc015986e 100644
--- a/pkg/interface/src/views/apps/publish/components/Notebook.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Notebook.tsx
@@ -40,7 +40,6 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
   const contacts = useContactState(state => state.contacts);
 
   const contact = contacts?.[`~${ship}`];
-  console.log(association.resource);
 
   const showNickname = useShowNickname(contact);
 
diff --git a/pkg/interface/src/views/components/RemoteContent.tsx b/pkg/interface/src/views/components/RemoteContent.tsx
index 39ddb0e3f..33fda99da 100644
--- a/pkg/interface/src/views/components/RemoteContent.tsx
+++ b/pkg/interface/src/views/components/RemoteContent.tsx
@@ -51,7 +51,6 @@ class RemoteContent extends Component<RemoteContentProps, RemoteContentState> {
   }
 
   save = () => {
-    console.log(`saving for: ${this.props.url}`);
     if(this.saving) {
       return;
     }
@@ -60,7 +59,6 @@ class RemoteContent extends Component<RemoteContentProps, RemoteContentState> {
   };
 
   restore = () => {
-    console.log(`restoring for: ${this.props.url}`);
     this.saving = false;
     this.props.restore();
   }
diff --git a/pkg/interface/src/views/components/useTutorialModal.tsx b/pkg/interface/src/views/components/useTutorialModal.tsx
index e9a2162ad..94aad20be 100644
--- a/pkg/interface/src/views/components/useTutorialModal.tsx
+++ b/pkg/interface/src/views/components/useTutorialModal.tsx
@@ -16,9 +16,7 @@ export function useTutorialModal(
       setTutorialRef(anchorRef.current);
     }
 
-    return () => {
-      console.log(tutorialProgress);
-    }
+    return () => {}
   }, [tutorialProgress, show, anchorRef]);
 
   return show && onProgress === tutorialProgress;
diff --git a/pkg/interface/src/wdyr.js b/pkg/interface/src/wdyr.js
new file mode 100644
index 000000000..db32b5d19
--- /dev/null
+++ b/pkg/interface/src/wdyr.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+if (process.env.NODE_ENV === 'development') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+  });
+}
\ No newline at end of file

From 7f676822975edeeecd7bc8ca3c6a4f8e8d3d1456 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 11 Mar 2021 13:26:39 -0500
Subject: [PATCH 09/23] interface/css: remove non-existent fonts

---
 pkg/interface/src/views/css/fonts.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/views/css/fonts.css b/pkg/interface/src/views/css/fonts.css
index 9880e92de..1b50126e0 100644
--- a/pkg/interface/src/views/css/fonts.css
+++ b/pkg/interface/src/views/css/fonts.css
@@ -10,16 +10,14 @@
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: url("/~landscape/fonts/inter-medium.woff2") format("woff2"),
-       url("https://media.urbit.org/fonts/Inter-Medium.woff2") format("woff2");
+  src: url("https://media.urbit.org/fonts/Inter-Medium.woff2") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
-  src: url("/~landscape/fonts/inter-semibold.woff2") format("woff2"),
-       url("https://media.urbit.org/fonts/Inter-SemiBold.woff2") format("woff2");
+  src: url("https://media.urbit.org/fonts/Inter-SemiBold.woff2") format("woff2");
 }
 
 @font-face {

From 3d46b16a264b621b89b6bc118deacfe8d1201ce3 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 11 Mar 2021 13:27:14 -0500
Subject: [PATCH 10/23] chat: key mapped components

---
 pkg/interface/src/views/apps/chat/components/ChatMessage.tsx | 5 ++++-
 pkg/interface/src/views/apps/chat/components/content/text.js | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index c3359bdf5..ee9d1c623 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -408,6 +408,7 @@ export const Message = ({
             case 'text':
               return (
                 <TextContent
+                  key={i}
                   api={api}
                   fontSize={1}
                   lineHeight={'20px'}
@@ -415,10 +416,11 @@ export const Message = ({
                 />
               );
             case 'code':
-              return <CodeContent content={content} />;
+              return <CodeContent key={i} content={content} />;
             case 'url':
               return (
                 <Box
+                  key={i}
                   flexShrink={0}
                   fontSize={1}
                   lineHeight='20px'
@@ -455,6 +457,7 @@ export const Message = ({
               const first = (i) => (i === 0);
               return (
                 <Mention
+                  key={i}
                   first={first(i)}
                   group={group}
                   scrollWindow={scrollWindow}
diff --git a/pkg/interface/src/views/apps/chat/components/content/text.js b/pkg/interface/src/views/apps/chat/components/content/text.js
index 3e2d4065a..c434a965f 100644
--- a/pkg/interface/src/views/apps/chat/components/content/text.js
+++ b/pkg/interface/src/views/apps/chat/components/content/text.js
@@ -91,7 +91,7 @@ const MessageMarkdown = React.memo((props) => {
   }, []);
 
   return lines.map((line, i) => (
-    <>
+    <React.Fragment key={i}>
       {i !== 0 && <Row height={2} />}
       <ReactMarkdown
         {...rest}
@@ -123,7 +123,7 @@ const MessageMarkdown = React.memo((props) => {
           ]
         ]}
       />
-    </>
+    </React.Fragment>
   ));
 });
 

From c44370889edd89cc963d28825b80955ef9eef4f7 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 11 Mar 2021 13:27:24 -0500
Subject: [PATCH 11/23] VirtualScroller: use correct style name

---
 pkg/interface/src/views/components/VirtualScroller.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/components/VirtualScroller.tsx b/pkg/interface/src/views/components/VirtualScroller.tsx
index f36fd0334..588633418 100644
--- a/pkg/interface/src/views/components/VirtualScroller.tsx
+++ b/pkg/interface/src/views/components/VirtualScroller.tsx
@@ -40,7 +40,7 @@ interface VirtualScrollerProps<T> {
   data: BigIntOrderedMap<T>;
   /**
    * The component to render the items
-   * 
+   *
    * @remarks
    *
    * This component must be referentially stable, so either use `useCallback` or
@@ -157,7 +157,7 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
       this.loaded.top = true;
       this.loaded.bottom = true;
     }
-      
+
     this.updateVisible(0);
     this.resetScroll();
     this.loadRows(false);
@@ -493,7 +493,7 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
       <>
         {!IS_IOS && (<Box borderRadius="3" top ={isTop ? "0" : undefined} bottom={!isTop ? "0" : undefined} ref={el => { this.scrollRef = el; }} right="0" height="50px" position="absolute" width="4px" backgroundColor="lightGray" />)}
 
-      <ScrollbarLessBox overflowY='scroll' ref={this.setWindow} onScroll={this.onScroll} style={{ ...style, ...{ transform }, "-webkit-overflow-scrolling": "auto" }}>
+      <ScrollbarLessBox overflowY='scroll' ref={this.setWindow} onScroll={this.onScroll} style={{ ...style, ...{ transform }, "WebkitOverflowScrolling": "auto" }}>
         <Box style={{ transform, width: 'calc(100% - 4px)' }}>
           {(isTop ? !atStart : !atEnd) && (<Center height="5">
             <LoadingSpinner />

From 8b680cd1b855afbca691642a3ad98a40fd4ae4b8 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 11 Mar 2021 17:00:57 -0500
Subject: [PATCH 12/23] settings: fix sidebar spacing

Fixes urbit/landscape#562
---
 pkg/interface/src/views/apps/settings/settings.tsx           | 4 ++--
 pkg/interface/src/views/landscape/components/SidebarItem.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/apps/settings/settings.tsx b/pkg/interface/src/views/apps/settings/settings.tsx
index eb0c37e6d..b2ae9f855 100644
--- a/pkg/interface/src/views/apps/settings/settings.tsx
+++ b/pkg/interface/src/views/apps/settings/settings.tsx
@@ -85,10 +85,10 @@ export default function SettingsScreen(props: any) {
           width='100%'
           overflowY='auto'
         >
-          <Text display='block' my='4' mx='3' fontSize='2' fontWeight='700'>
+          <Text display='block' mt='4' mb='3' mx='3' fontSize='2' fontWeight='700'>
             System Preferences
           </Text>
-          <Col gapY='1'>
+          <Col>
             <SidebarItem
               icon='Inbox'
               text='Notifications'
diff --git a/pkg/interface/src/views/landscape/components/SidebarItem.tsx b/pkg/interface/src/views/landscape/components/SidebarItem.tsx
index 667ed2fed..74cacbff8 100644
--- a/pkg/interface/src/views/landscape/components/SidebarItem.tsx
+++ b/pkg/interface/src/views/landscape/components/SidebarItem.tsx
@@ -30,7 +30,7 @@ export const SidebarItem = ({
       bgActive="washedGray"
       display="flex"
       px="3"
-      py="1"
+      py="2"
       justifyContent="space-between"
       {...rest}
     >

From 0c766af3002ced09afdf91ae33ab6794a0410997 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Thu, 11 Mar 2021 17:19:38 -0500
Subject: [PATCH 13/23] interface: minor fix grabbag

---
 .../apps/profile/components/EditProfile.tsx      | 16 ++++++++--------
 pkg/interface/src/views/components/StatusBar.js  | 10 +++++-----
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/pkg/interface/src/views/apps/profile/components/EditProfile.tsx b/pkg/interface/src/views/apps/profile/components/EditProfile.tsx
index a8b774383..d59bd98a8 100644
--- a/pkg/interface/src/views/apps/profile/components/EditProfile.tsx
+++ b/pkg/interface/src/views/apps/profile/components/EditProfile.tsx
@@ -85,7 +85,7 @@ export function ProfileHeaderImageEdit(props: any): ReactElement {
 
 export function EditProfile(props: any): ReactElement {
   const { contact, ship, api } = props;
-  const isPublic = useContactState(state => state.isContactPublic);
+  const isPublic = useContactState((state) => state.isContactPublic);
   const [hideCover, setHideCover] = useState(false);
 
   const handleHideCover = (value) => {
@@ -150,7 +150,7 @@ export function EditProfile(props: any): ReactElement {
           <Form width='100%' height='100%'>
             <ProfileHeader>
               <ProfileControls>
-                <Row>
+                <Row alignItems='baseline'>
                   <Button
                     type='submit'
                     display='inline'
@@ -178,7 +178,11 @@ export function EditProfile(props: any): ReactElement {
                 </Row>
                 <ProfileStatus contact={contact} />
               </ProfileControls>
-              <ProfileImages hideCover={hideCover} contact={contact} ship={ship}>
+              <ProfileImages
+                hideCover={hideCover}
+                contact={contact}
+                ship={ship}
+              >
                 <ProfileHeaderImageEdit
                   contact={contact}
                   setFieldValue={setFieldValue}
@@ -203,11 +207,7 @@ export function EditProfile(props: any): ReactElement {
               <MarkdownField id='bio' mb={3} />
             </Col>
             <Checkbox mb={3} id='isPublic' label='Public Profile' />
-            <GroupSearch
-              label='Pinned Groups'
-              id='groups'
-              publicOnly
-            />
+            <GroupSearch label='Pinned Groups' id='groups' publicOnly />
             <AsyncButton primary loadingText='Updating...' border mt={3}>
               Submit
             </AsyncButton>
diff --git a/pkg/interface/src/views/components/StatusBar.js b/pkg/interface/src/views/components/StatusBar.js
index 82250028c..50affc276 100644
--- a/pkg/interface/src/views/components/StatusBar.js
+++ b/pkg/interface/src/views/components/StatusBar.js
@@ -9,6 +9,7 @@ import {
   Button,
   BaseImage
 } from '@tlon/indigo-react';
+
 import ReconnectButton from './ReconnectButton';
 import { Dropdown } from './Dropdown';
 import { StatusBarItem } from './StatusBarItem';
@@ -19,6 +20,7 @@ import { useTutorialModal } from './useTutorialModal';
 
 import useHarkState from '~/logic/state/hark';
 import useInviteState from '~/logic/state/invite';
+import useContactState from '~/logic/state/contact';
 import { useHistory } from 'react-router-dom';
 import useLocalState, { selectLocalState } from '~/logic/state/local';
 import useSettingsState, { selectCalmState } from '~/logic/state/settings';
@@ -61,6 +63,8 @@ const StatusBar = (props) => {
   const floatLeap =
     leapHighlight && window.matchMedia('(max-width: 550px)').matches;
 
+  const contact = useContactState((state) => state.contacts[`~${ship}`]);
+
   return (
     <Box
       display='grid'
@@ -176,11 +180,7 @@ const StatusBar = (props) => {
                 <Text color='gray' fontWeight='500' mb='1'>
                   Set Status:
                 </Text>
-                <ProfileStatus
-                  contact={ourContact}
-                  ship={`~${ship}`}
-                  api={api}
-                />
+                <ProfileStatus contact={contact} ship={`~${ship}`} api={api} />
               </Row>
             </Col>
           }

From ccf13d13f4dd291a0d42628adfed11b8b295c8e2 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Thu, 11 Mar 2021 17:30:59 -0500
Subject: [PATCH 14/23] status bar: replace ourContact prop

---
 pkg/interface/src/views/components/StatusBar.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/pkg/interface/src/views/components/StatusBar.js b/pkg/interface/src/views/components/StatusBar.js
index 50affc276..478d98d22 100644
--- a/pkg/interface/src/views/components/StatusBar.js
+++ b/pkg/interface/src/views/components/StatusBar.js
@@ -28,8 +28,9 @@ import useSettingsState, { selectCalmState } from '~/logic/state/settings';
 const localSel = selectLocalState(['toggleOmnibox']);
 
 const StatusBar = (props) => {
-  const { ourContact, api, ship } = props;
+  const { api, ship } = props;
   const history = useHistory();
+  const ourContact = useContactState((state) => state.contacts[`~${ship}`]);
   const notificationsCount = useHarkState((state) => state.notificationsCount);
   const doNotDisturb = useHarkState((state) => state.doNotDisturb);
   const inviteState = useInviteState((state) => state.invites);
@@ -40,7 +41,7 @@ const StatusBar = (props) => {
   const { toggleOmnibox } = useLocalState(localSel);
   const { hideAvatars } = useSettingsState(selectCalmState);
 
-  const color = !!ourContact ? `#${uxToHex(props.ourContact.color)}` : '#000';
+  const color = !!ourContact ? `#${uxToHex(ourContact.color)}` : '#000';
   const xPadding = !hideAvatars && ourContact?.avatar ? '0' : '2';
   const bgColor = !hideAvatars && ourContact?.avatar ? '' : color;
   const profileImage =
@@ -63,8 +64,6 @@ const StatusBar = (props) => {
   const floatLeap =
     leapHighlight && window.matchMedia('(max-width: 550px)').matches;
 
-  const contact = useContactState((state) => state.contacts[`~${ship}`]);
-
   return (
     <Box
       display='grid'
@@ -180,7 +179,11 @@ const StatusBar = (props) => {
                 <Text color='gray' fontWeight='500' mb='1'>
                   Set Status:
                 </Text>
-                <ProfileStatus contact={contact} ship={`~${ship}`} api={api} />
+                <ProfileStatus
+                  contact={ourContact}
+                  ship={`~${ship}`}
+                  api={api}
+                />
               </Row>
             </Col>
           }

From ec8b17c96d91d36accd6c2b6fcbd5f3864ca93be Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Thu, 11 Mar 2021 16:36:51 -0800
Subject: [PATCH 15/23] interface: fixes base state typo and improves
 notification initial status

---
 .../src/logic/reducers/hark-update.ts         | 40 +++++++++----------
 pkg/interface/src/logic/state/base.ts         |  2 +-
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/pkg/interface/src/logic/reducers/hark-update.ts b/pkg/interface/src/logic/reducers/hark-update.ts
index aa8025073..67f884eaf 100644
--- a/pkg/interface/src/logic/reducers/hark-update.ts
+++ b/pkg/interface/src/logic/reducers/hark-update.ts
@@ -133,7 +133,7 @@ function graphWatchSelf(json: any, state: HarkState): HarkState {
 function readAll(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'read-all');
   if(data) { 
-    clearState(state);
+    state = clearState(state);
   }
   return state;
 }
@@ -149,15 +149,15 @@ function removeGraph(json: any, state: HarkState): HarkState {
 function seenIndex(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'seen-index');
   if(data) {
-    updateNotificationStats(state, data.index, 'last', () => data.time);
+    state = updateNotificationStats(state, data.index, 'last', () => data.time);
   }
   return state;
 }
 
 function readEach(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'read-each');
-  if(data) {
-    updateUnreads(state, data.index, u => u.delete(data.target));
+  if (data) {
+    state = updateUnreads(state, data.index, u => u.delete(data.target));
   }
   return state;
 }
@@ -165,7 +165,7 @@ function readEach(json: any, state: HarkState): HarkState {
 function readSince(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'read-count');
   if(data) {
-    updateUnreadCount(state, data, () => 0);
+    state = updateUnreadCount(state, data, () => 0);
   }
   return state;
 }
@@ -173,7 +173,7 @@ function readSince(json: any, state: HarkState): HarkState {
 function unreadSince(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'unread-count');
   if(data) {
-    updateUnreadCount(state, data.index, u => u + 1);
+    state = updateUnreadCount(state, data.index, u => u + 1);
   }
   return state;
 }
@@ -181,7 +181,7 @@ function unreadSince(json: any, state: HarkState): HarkState {
 function unreadEach(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'unread-each');
   if(data) {
-    updateUnreads(state, data.index, us => us.add(data.target));
+    state = updateUnreads(state, data.index, us => us.add(data.target));
   }
   return state;
 }
@@ -191,13 +191,14 @@ function unreads(json: any, state: HarkState): HarkState {
   if(data) {
     data.forEach(({ index, stats }) => {
       const { unreads, notifications, last } = stats;
-      updateNotificationStats(state, index, 'notifications', x => x + notifications);
-      updateNotificationStats(state, index, 'last', () => last);
+      state = updateNotificationStats(state, index, 'notifications', x => x + notifications);
+      state = updateNotificationStats(state, index, 'last', () => last);
       if('count' in unreads) {
-        updateUnreadCount(state, index, (u = 0) => u + unreads.count);
+        state = updateUnreadCount(state, index, (u = 0) => u + unreads.count);
       } else {
+        state = updateUnreads(state, index, s => new Set());
         unreads.each.forEach((u: string) => {
-          updateUnreads(state, index, s => s.add(u));
+          state = updateUnreads(state, index, s => s.add(u));
         });
       }
     });
@@ -205,7 +206,7 @@ function unreads(json: any, state: HarkState): HarkState {
   return state;
 }
 
-function clearState(state: HarkState) {
+function clearState(state: HarkState): HarkState {
   const initialState = {
     notifications: new BigIntOrderedMap<Timebox>(),
     archivedNotifications: new BigIntOrderedMap<Timebox>(),
@@ -225,6 +226,7 @@ function clearState(state: HarkState) {
   Object.keys(initialState).forEach((key) => {
     state[key] = initialState[key];
   });
+  return state;
 }
 
 function updateUnreadCount(state: HarkState, index: NotifIndex, count: (c: number) => number): HarkState {
@@ -242,10 +244,9 @@ function updateUnreads(state: HarkState, index: NotifIndex, f: (us: Set<string>)
   if(!('graph' in index)) {
     return state;
   }
-  const unreads = _.get(state.unreads.graph, [index.graph.graph, index.graph.index, 'unreads'], new Set<string>());
-  const oldSize = unreads.size;
+  let unreads = _.get(state.unreads.graph, [index.graph.graph, index.graph.index, 'unreads'], new Set<string>());
   f(unreads);
-  const newSize = unreads.size;
+
   _.set(state.unreads.graph, [index.graph.graph, index.graph.index, 'unreads'], unreads);
   return state;
 }
@@ -254,7 +255,7 @@ function updateNotificationStats(state: HarkState, index: NotifIndex, statField:
   if(statField === 'notifications') {
     state.notificationsCount = f(state.notificationsCount);
   }
-  if('graph' in index) {
+  if ('graph' in index) {
     const curr = _.get(state.unreads.graph, [index.graph.graph, index.graph.index, statField], 0);
     _.set(state.unreads.graph, [index.graph.graph, index.graph.index, statField], f(curr));
   } else if('group' in index) {
@@ -276,7 +277,6 @@ function added(json: any, state: HarkState): HarkState {
     );
     if (arrIdx !== -1) {
       if (timebox[arrIdx]?.notification?.read) {
-        // TODO this is additive, and with a persistent state it keeps incrementing
         state = updateNotificationStats(state, index, 'notifications', x => x+1);
       }
       timebox[arrIdx] = { index, notification };
@@ -361,7 +361,7 @@ function read(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'read-note', false);
   if (data) {
     const { time, index } = data;
-    updateNotificationStats(state, index, 'notifications', x => x-1);
+    state = updateNotificationStats(state, index, 'notifications', x => x-1);
     setRead(time, index, true, state);
   }
   return state;
@@ -371,7 +371,7 @@ function unread(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'unread-note', false);
   if (data) {
     const { time, index } = data;
-    updateNotificationStats(state, index, 'notifications', x => x+1);
+    state = updateNotificationStats(state, index, 'notifications', x => x+1);
     setRead(time, index, false, state);
   }
   return state;
@@ -397,7 +397,7 @@ function archive(json: any, state: HarkState): HarkState {
       state.notifications.set(time, unarchived);
     }
     const newlyRead = archived.filter(x => !x.notification.read).length;
-    updateNotificationStats(state, index, 'notifications', x => x - newlyRead);
+    state = updateNotificationStats(state, index, 'notifications', x => x - newlyRead);
   }
   return state;
 }
diff --git a/pkg/interface/src/logic/state/base.ts b/pkg/interface/src/logic/state/base.ts
index e1add80e3..72af05e92 100644
--- a/pkg/interface/src/logic/state/base.ts
+++ b/pkg/interface/src/logic/state/base.ts
@@ -34,7 +34,7 @@ export const reduceState = <
 export let stateStorageKeys: string[] = [];
 
 export const stateStorageKey = (stateName: string) => {
-  stateName = `Landcape${stateName}State`;
+  stateName = `Landscape${stateName}State`;
   stateStorageKeys = [...new Set([...stateStorageKeys, stateName])];
   return stateName;
 };

From 29cc65a7b78dff76ed44ac6c6e385323dc753376 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Thu, 11 Mar 2021 21:41:53 -0500
Subject: [PATCH 16/23] chat: initial pass of spacing/sizing refactor

---
 .../views/apps/chat/components/ChatInput.tsx  | 114 +++++++++---------
 .../apps/chat/components/ChatMessage.tsx      | 113 ++++++++---------
 2 files changed, 114 insertions(+), 113 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
index 65803ebc3..2ef6fc676 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
@@ -24,7 +24,7 @@ type ChatInputProps = IuseStorage & {
   message: string;
   deleteMessage(): void;
   hideAvatars: boolean;
-}
+};
 
 interface ChatInputState {
   inCodeMode: boolean;
@@ -60,20 +60,23 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
 
   submit(text) {
     const { props, state } = this;
-    const [,,ship,name] = props.station.split('/');
+    const [, , ship, name] = props.station.split('/');
     if (state.inCodeMode) {
-      this.setState({
-        inCodeMode: false
-      }, async () => {
-        const output = await props.api.graph.eval(text);
-        const contents: Content[] = [{ code: { output, expression: text } }];
-        const post = createPost(contents);
-        props.api.graph.addPost(ship, name, post);
-      });
+      this.setState(
+        {
+          inCodeMode: false
+        },
+        async () => {
+          const output = await props.api.graph.eval(text);
+          const contents: Content[] = [{ code: { output, expression: text } }];
+          const post = createPost(contents);
+          props.api.graph.addPost(ship, name, post);
+        }
+      );
       return;
     }
 
-    const post = createPost(tokenizeMessage((text)));
+    const post = createPost(tokenizeMessage(text));
 
     props.deleteMessage();
 
@@ -86,8 +89,8 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
       this.chatEditor.current.editor.setValue(url);
       this.setState({ uploadingPaste: false });
     } else {
-      const [,,ship,name] = props.station.split('/');
-      props.api.graph.addPost(ship,name, createPost([{ url }]));
+      const [, , ship, name] = props.station.split('/');
+      props.api.graph.addPost(ship, name, createPost([{ url }]));
     }
   }
 
@@ -110,7 +113,8 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
       return;
     }
     Array.from(files).forEach((file) => {
-      this.props.uploadDefault(file)
+      this.props
+        .uploadDefault(file)
         .then(this.uploadSuccess)
         .catch(this.uploadError);
     });
@@ -119,32 +123,30 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
   render() {
     const { props, state } = this;
 
-    const color = props.ourContact
-      ? uxToHex(props.ourContact.color) : '000000';
+    const color = props.ourContact ? uxToHex(props.ourContact.color) : '000000';
 
-    const sigilClass = props.ourContact
-      ? '' : 'mix-blend-diff';
+    const sigilClass = props.ourContact ? '' : 'mix-blend-diff';
 
-    const avatar = (
-        props.ourContact &&
-        ((props.ourContact?.avatar) && !props.hideAvatars)
-      )
-      ? <BaseImage
+    const avatar =
+      props.ourContact && props.ourContact?.avatar && !props.hideAvatars ? (
+        <BaseImage
           src={props.ourContact.avatar}
-          height={16}
-          width={16}
+          height={24}
+          width={24}
           style={{ objectFit: 'cover' }}
           borderRadius={1}
           display='inline-block'
         />
-      : <Sigil
-        ship={window.ship}
-        size={16}
-        color={`#${color}`}
-        classes={sigilClass}
-        icon
-        padding={2}
-        />;
+      ) : (
+        <Sigil
+          ship={window.ship}
+          size={24}
+          color={`#${color}`}
+          classes={sigilClass}
+          icon
+          padding={2}
+        />
+      );
 
     return (
       <Row
@@ -158,7 +160,7 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
         className='cf'
         zIndex={0}
       >
-        <Row p='2' alignItems='center'>
+        <Row p='12px 8px 12px 12px' alignItems='center'>
           {avatar}
         </Row>
         <ChatEditor
@@ -170,31 +172,23 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
           onPaste={this.onPaste.bind(this)}
           placeholder='Message...'
         />
-        <Box
-          mx={2}
-          flexShrink={0}
-          height='16px'
-          width='16px'
-          flexBasis='16px'
-        >
-          {this.props.canUpload
-            ? this.props.uploading
-              ? <LoadingSpinner />
-              : <Icon icon='Links'
-                width="16"
-                height="16"
-                onClick={() => this.props.promptUpload().then(this.uploadSuccess)}
-                />
-            : null
-          }
+        <Box mx={2} flexShrink={0} height='16px' width='16px' flexBasis='16px'>
+          {this.props.canUpload ? (
+            this.props.uploading ? (
+              <LoadingSpinner />
+            ) : (
+              <Icon
+                icon='Links'
+                width='16'
+                height='16'
+                onClick={() =>
+                  this.props.promptUpload().then(this.uploadSuccess)
+                }
+              />
+            )
+          ) : null}
         </Box>
-        <Box
-          mr={2}
-          flexShrink={0}
-          height='16px'
-          width='16px'
-          flexBasis='16px'
-        >
+        <Box mr={2} flexShrink={0} height='16px' width='16px' flexBasis='16px'>
           <Icon
             icon='Dojo'
             onClick={this.toggleCode}
@@ -206,4 +200,6 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
   }
 }
 
-export default withLocalState(withStorage(ChatInput, { accept: 'image/*' }), ['hideAvatars']);
+export default withLocalState(withStorage(ChatInput, { accept: 'image/*' }), [
+  'hideAvatars'
+]);
diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index ee9d1c623..b2f9d4796 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -35,10 +35,10 @@ import RemoteContent from '~/views/components/RemoteContent';
 import { Mention } from '~/views/components/MentionText';
 import styled from 'styled-components';
 import useLocalState from '~/logic/state/local';
-import useSettingsState, {selectCalmState} from "~/logic/state/settings";
+import useSettingsState, { selectCalmState } from '~/logic/state/settings';
 import Timestamp from '~/views/components/Timestamp';
 import useContactState from '~/logic/state/contact';
-import {useIdlingState} from '~/logic/lib/idling';
+import { useIdlingState } from '~/logic/lib/idling';
 
 export const DATESTAMP_FORMAT = '[~]YYYY.M.D';
 
@@ -64,39 +64,42 @@ export const DayBreak = ({ when, shimTop = false }: DayBreakProps) => (
   </Row>
 );
 
-export const UnreadMarker = React.forwardRef(({ dayBreak, when, api, association }, ref) => {
-  const [visible, setVisible] = useState(false);
-  const idling = useIdlingState();
-  const dismiss = useCallback(() => {
-    api.hark.markCountAsRead(association, '/', 'message');
-  }, [api, association]);
+export const UnreadMarker = React.forwardRef(
+  ({ dayBreak, when, api, association }, ref) => {
+    const [visible, setVisible] = useState(false);
+    const idling = useIdlingState();
+    const dismiss = useCallback(() => {
+      api.hark.markCountAsRead(association, '/', 'message');
+    }, [api, association]);
 
-  useEffect(() => {
-    if(visible && !idling) {
-      dismiss();
-    }
-  }, [visible, idling]);
+    useEffect(() => {
+      if (visible && !idling) {
+        dismiss();
+      }
+    }, [visible, idling]);
 
-  return (
-  <Row
-    position='absolute'
-    ref={ref}
-    px={2}
-    mt={2}
-    height={5}
-    justifyContent='center'
-    alignItems='center'
-    width='100%'
-  >
-    <Rule borderColor='lightBlue' />
-    <VisibilitySensor onChange={setVisible}>
-    <Text color='blue' fontSize={0} flexShrink='0' px={2}>
-      New messages below
-    </Text>
-    </VisibilitySensor>
-    <Rule borderColor='lightBlue' />
-  </Row>
-)});
+    return (
+      <Row
+        position='absolute'
+        ref={ref}
+        px={2}
+        mt={2}
+        height={5}
+        justifyContent='center'
+        alignItems='center'
+        width='100%'
+      >
+        <Rule borderColor='lightBlue' />
+        <VisibilitySensor onChange={setVisible}>
+          <Text color='blue' fontSize={0} flexShrink='0' px={2}>
+            New messages below
+          </Text>
+        </VisibilitySensor>
+        <Rule borderColor='lightBlue' />
+      </Row>
+    );
+  }
+);
 
 interface ChatMessageProps {
   msg: Post;
@@ -126,8 +129,7 @@ class ChatMessage extends Component<ChatMessageProps> {
     this.divRef = React.createRef();
   }
 
-  componentDidMount() {
-  }
+  componentDidMount() {}
 
   render() {
     const {
@@ -146,7 +148,7 @@ class ChatMessage extends Component<ChatMessageProps> {
       history,
       api,
       highlighted,
-      fontSize,
+      fontSize
     } = this.props;
 
     let { renderSigil } = this.props;
@@ -170,7 +172,6 @@ class ChatMessage extends Component<ChatMessageProps> {
       .unix(msg['time-sent'] / 1000)
       .format(renderSigil ? 'h:mm A' : 'h:mm');
 
-
     const messageProps = {
       msg,
       timestamp,
@@ -183,7 +184,7 @@ class ChatMessage extends Component<ChatMessageProps> {
       api,
       scrollWindow,
       highlighted,
-      fontSize,
+      fontSize
     };
 
     const unreadContainerStyle = {
@@ -204,11 +205,11 @@ class ChatMessage extends Component<ChatMessageProps> {
         ) : null}
         {renderSigil ? (
           <>
-            <MessageAuthor pb={'2px'} {...messageProps} />
-            <Message pl={5} pr={4} {...messageProps} />
+            <MessageAuthor pb={1} {...messageProps} />
+            <Message pl={'44px'} pr={4} {...messageProps} />
           </>
         ) : (
-          <Message pl={5} pr={4} timestampHover {...messageProps} />
+          <Message pl={'44px'} pr={4} timestampHover {...messageProps} />
         )}
         <Box style={unreadContainerStyle}>
           {isLastRead ? (
@@ -226,7 +227,9 @@ class ChatMessage extends Component<ChatMessageProps> {
   }
 }
 
-export default React.forwardRef((props, ref) => <ChatMessage {...props} innerRef={ref} />);
+export default React.forwardRef((props, ref) => (
+  <ChatMessage {...props} innerRef={ref} />
+));
 
 export const MessageAuthor = ({
   timestamp,
@@ -239,9 +242,9 @@ export const MessageAuthor = ({
 }) => {
   const osDark = useLocalState((state) => state.dark);
 
-  const theme = useSettingsState(s => s.display.theme);
+  const theme = useSettingsState((s) => s.display.theme);
   const dark = theme === 'dark' || (theme === 'auto' && osDark);
-  const contacts = useContactState(state => state.contacts);
+  const contacts = useContactState((state) => state.contacts);
 
   const datestamp = moment
     .unix(msg['time-sent'] / 1000)
@@ -291,18 +294,18 @@ export const MessageAuthor = ({
         display='inline-block'
         style={{ objectFit: 'cover' }}
         src={contact.avatar}
-        height={16}
-        width={16}
+        height={24}
+        width={24}
         borderRadius={1}
       />
     ) : (
       <Sigil
         ship={msg.author}
-        size={16}
+        size={24}
         color={color}
         classes={sigilClass}
         icon
-        padding={2}
+        padding={3}
       />
     );
   return (
@@ -311,9 +314,9 @@ export const MessageAuthor = ({
         onClick={() => {
           setShowOverlay(true);
         }}
-        height={16}
+        height={24}
         pr={2}
-        pl={2}
+        pl={'12px'}
         cursor='pointer'
         position='relative'
       >
@@ -340,10 +343,10 @@ export const MessageAuthor = ({
           pt={1}
           pb={1}
           display='flex'
-          alignItems='center'
+          alignItems='baseline'
         >
           <Text
-            fontSize={0}
+            fontSize={1}
             mr={2}
             flexShrink={0}
             mono={nameMono}
@@ -385,13 +388,15 @@ export const Message = ({
   ...rest
 }) => {
   const { hovering, bind } = useHovering();
-  const contacts = useContactState(state => state.contacts);
+  const contacts = useContactState((state) => state.contacts);
   return (
     <Box position='relative' {...rest}>
       {timestampHover ? (
         <Text
           display={hovering ? 'block' : 'none'}
           position='absolute'
+          width='40px'
+          textAlign='center'
           left='0'
           top='3px'
           fontSize={0}
@@ -454,7 +459,7 @@ export const Message = ({
                 </Box>
               );
             case 'mention':
-              const first = (i) => (i === 0);
+              const first = (i) => i === 0;
               return (
                 <Mention
                   key={i}

From 2df168758044972bc880b439d93b47162640187c Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Fri, 12 Mar 2021 14:55:18 +1000
Subject: [PATCH 17/23] tutorial: update for zustand

---
 pkg/interface/src/views/apps/launch/app.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js
index dda418ddf..4ea158cad 100644
--- a/pkg/interface/src/views/apps/launch/app.js
+++ b/pkg/interface/src/views/apps/launch/app.js
@@ -32,6 +32,7 @@ import {
 } from '~/logic/lib/tutorialModal';
 import useLaunchState from '~/logic/state/launch';
 import useSettingsState, { selectCalmState } from '~/logic/state/settings';
+import useMetadataState from '~/logic/state/metadata';
 
 
 const ScrollbarLessBox = styled(Box)`
@@ -48,6 +49,7 @@ export default function LaunchApp(props) {
   const baseHash = useLaunchState(state => state.baseHash);
   const [hashText, setHashText] = useState(baseHash);
   const [exitingTut, setExitingTut] = useState(false);
+  const associations = useMetadataState(s => s.associations);
   const hashBox = (
     <Box
       position={["relative", "absolute"]}
@@ -78,7 +80,7 @@ export default function LaunchApp(props) {
 
   useEffect(() => {
     if(query.get('tutorial')) {
-      if(hasTutorialGroup(props)) {
+      if(hasTutorialGroup({ associations })) {
         nextTutStep();
       } else {
         showModal();
@@ -92,7 +94,7 @@ export default function LaunchApp(props) {
   let { hideGroups } = useLocalState(tutSelector);
   !hideGroups ? { hideGroups } = calmState : null;
 
-  const waiter = useWaitForProps(props);
+  const waiter = useWaitForProps({ ...props, associations });
 
   const { modal, showModal } = useModal({
     position: 'relative',
@@ -105,7 +107,7 @@ export default function LaunchApp(props) {
       };
       const onContinue = async (e) => {
         e.stopPropagation();
-        if(!hasTutorialGroup(props)) {
+        if(!hasTutorialGroup({ associations })) {
           await props.api.groups.join(TUTORIAL_HOST, TUTORIAL_GROUP);
           await props.api.settings.putEntry('tutorial', 'joined', Date.now());
           await waiter(hasTutorialGroup);

From c35c9b790af7a1208f5862460868ad5a08362cd3 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Fri, 12 Mar 2021 12:28:11 -0500
Subject: [PATCH 18/23] chat: pads 16px-square sigils out to 24px effective

fixes urbit/landscape#460
---
 pkg/interface/src/logic/lib/sigil.js          |  9 ++++---
 .../views/apps/chat/components/ChatInput.tsx  | 26 ++++++++++++------
 .../apps/chat/components/ChatMessage.tsx      | 27 +++++++++++++------
 3 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/pkg/interface/src/logic/lib/sigil.js b/pkg/interface/src/logic/lib/sigil.js
index f2444068e..e47eff93f 100644
--- a/pkg/interface/src/logic/lib/sigil.js
+++ b/pkg/interface/src/logic/lib/sigil.js
@@ -23,9 +23,10 @@ export const Sigil = memo(
     size,
     svgClass = '',
     icon = false,
-    padding = 0
+    padding = 0,
+    display = 'inline-block'
   }) => {
-    const innerSize = Number(size) - 2*padding;
+    const innerSize = Number(size) - 2 * padding;
     const paddingPx = `${padding}px`;
     const foregroundColor = foreground
       ? foreground
@@ -34,14 +35,14 @@ export const Sigil = memo(
       <Box
         backgroundColor={color}
         borderRadius={icon ? '1' : '0'}
-        display='inline-block'
+        display={display}
         height={size}
         width={size}
         className={classes}
       />
     ) : (
       <Box
-        display='inline-block'
+        display={display}
         borderRadius={icon ? '1' : '0'}
         flexBasis={size}
         backgroundColor={color}
diff --git a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
index 2ef6fc676..720f2a77e 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
@@ -138,14 +138,24 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
           display='inline-block'
         />
       ) : (
-        <Sigil
-          ship={window.ship}
-          size={24}
-          color={`#${color}`}
-          classes={sigilClass}
-          icon
-          padding={2}
-        />
+        <Box
+          width={24}
+          height={24}
+          display='flex'
+          justifyContent='center'
+          alignItems='center'
+          backgroundColor={`#${color}`}
+          borderRadius={1}
+        >
+          <Sigil
+            ship={window.ship}
+            size={16}
+            color={`#${color}`}
+            classes={sigilClass}
+            icon
+            padding={2}
+          />
+        </Box>
       );
 
     return (
diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index b2f9d4796..918b6f05c 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -299,14 +299,25 @@ export const MessageAuthor = ({
         borderRadius={1}
       />
     ) : (
-      <Sigil
-        ship={msg.author}
-        size={24}
-        color={color}
-        classes={sigilClass}
-        icon
-        padding={3}
-      />
+      <Box
+        width={24}
+        height={24}
+        display='flex'
+        justifyContent='center'
+        alignItems='center'
+        backgroundColor={color}
+        borderRadius={1}
+      >
+        <Sigil
+          ship={msg.author}
+          size={12}
+          display='block'
+          color={color}
+          classes={sigilClass}
+          icon
+          padding={0}
+        />
+      </Box>
     );
   return (
     <Box display='flex' alignItems='center' {...rest}>

From e76ce13f9d39e633d2af2d7b9b5d934eb1676f55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=A9douard?= <edouard@urcad.es>
Date: Fri, 12 Mar 2021 18:43:17 -0500
Subject: [PATCH 19/23] landscape profiles: tiny tweaks to visual elements

---
 .../src/views/apps/profile/components/Profile.tsx         | 8 ++++----
 .../src/views/apps/profile/components/ViewProfile.tsx     | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/pkg/interface/src/views/apps/profile/components/Profile.tsx b/pkg/interface/src/views/apps/profile/components/Profile.tsx
index 7068e07c5..bd644640e 100644
--- a/pkg/interface/src/views/apps/profile/components/Profile.tsx
+++ b/pkg/interface/src/views/apps/profile/components/Profile.tsx
@@ -15,8 +15,8 @@ export function ProfileHeader(props: any): ReactElement {
   return (
     <Box
       border='1px solid'
-      borderColor='lightGray'
-      borderRadius='2'
+      borderColor='washedGray'
+      borderRadius='3'
       overflow='hidden'
       marginBottom='calc(64px + 2rem)'
     >
@@ -65,7 +65,7 @@ export function ProfileImages(props: any): ReactElement {
 
   return (
     <>
-      <Row ref={anchorRef} width='100%' height='300px' position='relative'>
+      <Row ref={anchorRef} width='100%' height='400px' position='relative'>
         {cover}
         <Center position='absolute' width='100%' height='100%'>
           {props.children}
@@ -74,7 +74,7 @@ export function ProfileImages(props: any): ReactElement {
       <Box
         height='128px'
         width='128px'
-        borderRadius='2'
+        borderRadius='3'
         overflow='hidden'
         position='absolute'
         left='50%'
diff --git a/pkg/interface/src/views/apps/profile/components/ViewProfile.tsx b/pkg/interface/src/views/apps/profile/components/ViewProfile.tsx
index cdf7864e2..ddd2de9c4 100644
--- a/pkg/interface/src/views/apps/profile/components/ViewProfile.tsx
+++ b/pkg/interface/src/views/apps/profile/components/ViewProfile.tsx
@@ -39,7 +39,7 @@ export function ViewProfile(props: any): ReactElement {
       </ProfileHeader>
       <Row pb={2} alignItems='center' width='100%'>
         <Center width='100%'>
-          <Text>
+          <Text fontWeight='500'>
             {!hideNicknames && contact?.nickname ? contact.nickname : ''}
           </Text>
         </Center>
@@ -51,7 +51,7 @@ export function ViewProfile(props: any): ReactElement {
           </Text>
         </Center>
       </Row>
-      <Col pb={2} alignItems='center' justifyContent='center' width='100%'>
+      <Col pb={2} mt='3' alignItems='center' justifyContent='center' width='100%'>
         <Center flexDirection='column' maxWidth='32rem'>
           <RichText width='100%' disableRemoteContent>
             {contact?.bio ? contact.bio : ''}

From 5e8aa1cf0bdecfbeebe97fc04d3073e945d7ad2c Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Fri, 12 Mar 2021 21:29:39 -0500
Subject: [PATCH 20/23] chat: hover treatment for rows

fixes urbit/landscape#460
---
 .../views/apps/chat/components/ChatInput.tsx  |  2 +-
 .../apps/chat/components/ChatMessage.tsx      | 45 ++++++++++++++++---
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
index 720f2a77e..8e9cfef29 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
@@ -170,7 +170,7 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
         className='cf'
         zIndex={0}
       >
-        <Row p='12px 8px 12px 12px' alignItems='center'>
+        <Row p='12px 4px 12px 12px' alignItems='center'>
           {avatar}
         </Row>
         <ChatEditor
diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index 918b6f05c..028493927 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -101,6 +101,37 @@ export const UnreadMarker = React.forwardRef(
   }
 );
 
+const MessageActions = (props) => {
+  return (
+    <Box
+      borderRadius={1}
+      width={6}
+      height={4}
+      background='white'
+      border='1px solid'
+      borderColor='lightGray'
+      position='absolute'
+      top='-12px'
+      right={2}
+    />
+  );
+};
+
+const MessageWrapper = (props) => {
+  const { hovering, bind } = useHovering();
+  return (
+    <Box
+      py='1'
+      backgroundColor={hovering ? 'washedGray' : 'transparent'}
+      position='relative'
+      {...bind}
+    >
+      {props.children}
+      {/* {hovering ? <MessageActions /> : null} */}
+    </Box>
+  );
+};
+
 interface ChatMessageProps {
   msg: Post;
   previousMsg?: Post;
@@ -195,7 +226,7 @@ class ChatMessage extends Component<ChatMessageProps> {
       <Box
         ref={this.props.innerRef}
         pt={renderSigil ? 2 : 0}
-        pb={isLastMessage ? 4 : 2}
+        pb={isLastMessage ? '20px' : 0}
         className={containerClass}
         backgroundColor={highlighted ? 'blue' : 'white'}
         style={style}
@@ -204,12 +235,14 @@ class ChatMessage extends Component<ChatMessageProps> {
           <DayBreak when={msg['time-sent']} shimTop={renderSigil} />
         ) : null}
         {renderSigil ? (
-          <>
+          <MessageWrapper>
             <MessageAuthor pb={1} {...messageProps} />
             <Message pl={'44px'} pr={4} {...messageProps} />
-          </>
+          </MessageWrapper>
         ) : (
-          <Message pl={'44px'} pr={4} timestampHover {...messageProps} />
+          <MessageWrapper>
+            <Message pl={'44px'} pr={4} timestampHover {...messageProps} />
+          </MessageWrapper>
         )}
         <Box style={unreadContainerStyle}>
           {isLastRead ? (
@@ -406,8 +439,8 @@ export const Message = ({
         <Text
           display={hovering ? 'block' : 'none'}
           position='absolute'
-          width='40px'
-          textAlign='center'
+          width='36px'
+          textAlign='right'
           left='0'
           top='3px'
           fontSize={0}

From fd0267eae7a6bbdf3019a58b7c4c23a3ff4b79fc Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Sat, 13 Mar 2021 12:35:42 -0500
Subject: [PATCH 21/23] chat: adds hover actions and overflow menu

fixes urbit/landscape#460
---
 .../apps/chat/components/ChatMessage.tsx      | 100 ++++++++++++++++--
 1 file changed, 92 insertions(+), 8 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index 028493927..18aee5057 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -10,7 +10,7 @@ import React, {
 import moment from 'moment';
 import _ from 'lodash';
 import VisibilitySensor from 'react-visibility-sensor';
-import { Box, Row, Text, Rule, BaseImage } from '@tlon/indigo-react';
+import { Box, Row, Text, Rule, BaseImage, Icon, Col } from '@tlon/indigo-react';
 import { Sigil } from '~/logic/lib/sigil';
 import OverlaySigil from '~/views/components/OverlaySigil';
 import {
@@ -33,6 +33,7 @@ import TextContent from './content/text';
 import CodeContent from './content/code';
 import RemoteContent from '~/views/components/RemoteContent';
 import { Mention } from '~/views/components/MentionText';
+import { Dropdown } from '~/views/components/Dropdown';
 import styled from 'styled-components';
 import useLocalState from '~/logic/state/local';
 import useSettingsState, { selectCalmState } from '~/logic/state/settings';
@@ -101,19 +102,102 @@ export const UnreadMarker = React.forwardRef(
   }
 );
 
-const MessageActions = (props) => {
+const MessageActionItem = (props) => {
+  return (
+    <Row
+      color='black'
+      cursor='pointer'
+      fontSize={1}
+      fontWeight='500'
+      px={3}
+      py={2}
+      onClick={props.onClick}
+    >
+      <Text fontWeight='500' color={props.color}>
+        {props.children}
+      </Text>
+    </Row>
+  );
+};
+
+const MessageActions = ({ api, history, msg, group }) => {
+  const isAdmin = () => group.tags.role.admin.has(window.ship);
+  const isOwn = () => msg.author === window.ship;
   return (
     <Box
       borderRadius={1}
-      width={6}
-      height={4}
       background='white'
       border='1px solid'
       borderColor='lightGray'
       position='absolute'
       top='-12px'
       right={2}
-    />
+    >
+      <Row>
+        {isOwn() ? (
+          <Box
+            padding={1}
+            size={'24px'}
+            cursor='pointer'
+            onClick={(e) => console.log(e)}
+          >
+            <Icon icon='NullIcon' size={3} />
+          </Box>
+        ) : null}
+        <Box
+          padding={1}
+          size={'24px'}
+          cursor='pointer'
+          onClick={(e) => console.log(e)}
+        >
+          <Icon icon='Chat' size={3} />
+        </Box>
+        <Dropdown
+          dropWidth='250px'
+          width='auto'
+          alignY='top'
+          alignX='right'
+          flexShrink={'0'}
+          offsetY={8}
+          offsetX={-24}
+          options={
+            <Col
+              py={2}
+              backgroundColor='white'
+              color='washedGray'
+              border={1}
+              borderRadius={2}
+              borderColor='lightGray'
+              boxShadow='0px 0px 0px 3px'
+            >
+              {isOwn() ? (
+                <MessageActionItem onClick={(e) => console.log(e)}>
+                  Edit Message
+                </MessageActionItem>
+              ) : null}
+              <MessageActionItem onClick={(e) => console.log(e)}>
+                Reply
+              </MessageActionItem>
+              <MessageActionItem onClick={(e) => console.log(e)}>
+                Copy Message Link
+              </MessageActionItem>
+              {isAdmin() || isOwn() ? (
+                <MessageActionItem onClick={(e) => console.log(e)} color='red'>
+                  Delete Message
+                </MessageActionItem>
+              ) : null}
+              <MessageActionItem onClick={(e) => console.log(e)}>
+                View Signature
+              </MessageActionItem>
+            </Col>
+          }
+        >
+          <Box padding={1} size={'24px'} cursor='pointer'>
+            <Icon icon='Menu' size={3} />
+          </Box>
+        </Dropdown>
+      </Row>
+    </Box>
   );
 };
 
@@ -127,7 +211,7 @@ const MessageWrapper = (props) => {
       {...bind}
     >
       {props.children}
-      {/* {hovering ? <MessageActions /> : null} */}
+      {/* {hovering ? <MessageActions {...props} /> : null} */}
     </Box>
   );
 };
@@ -235,12 +319,12 @@ class ChatMessage extends Component<ChatMessageProps> {
           <DayBreak when={msg['time-sent']} shimTop={renderSigil} />
         ) : null}
         {renderSigil ? (
-          <MessageWrapper>
+          <MessageWrapper {...messageProps}>
             <MessageAuthor pb={1} {...messageProps} />
             <Message pl={'44px'} pr={4} {...messageProps} />
           </MessageWrapper>
         ) : (
-          <MessageWrapper>
+          <MessageWrapper {...messageProps}>
             <Message pl={'44px'} pr={4} timestampHover {...messageProps} />
           </MessageWrapper>
         )}

From 735805cb59d55bcc84f20b3c53742c0920ddfdce Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Sat, 13 Mar 2021 13:06:12 -0500
Subject: [PATCH 22/23] hark-fe: use calmengine for nickname render

Fixes urbit/landscape#566
---
 pkg/interface/src/views/apps/notifications/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/notifications/header.tsx b/pkg/interface/src/views/apps/notifications/header.tsx
index f7cbc36ba..f57d88188 100644
--- a/pkg/interface/src/views/apps/notifications/header.tsx
+++ b/pkg/interface/src/views/apps/notifications/header.tsx
@@ -21,7 +21,7 @@ function Author(props: { patp: string; last?: boolean }): ReactElement {
   const contact: Contact | undefined = contacts?.[`~${props.patp}`];
 
   const showNickname = useShowNickname(contact);
-  const name = contact?.nickname || `~${props.patp}`;
+  const name = showNickname ? contact.nickname : `~${props.patp}`;
 
   return (
     <Text mono={!showNickname}>

From f3c34751e41486b521ded90e5d78d0464534ed96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=A9douard?= <edouard@urcad.es>
Date: Sun, 14 Mar 2021 22:55:00 -0400
Subject: [PATCH 23/23] sidebar: change group avatar radius from 2 to 1

Making this tiny change to ensure visual consistency in radius treatment.
---
 pkg/interface/src/views/landscape/components/MetadataIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/landscape/components/MetadataIcon.tsx b/pkg/interface/src/views/landscape/components/MetadataIcon.tsx
index e4ab45d63..97ef54426 100644
--- a/pkg/interface/src/views/landscape/components/MetadataIcon.tsx
+++ b/pkg/interface/src/views/landscape/components/MetadataIcon.tsx
@@ -15,7 +15,7 @@ export function MetadataIcon(props: MetadataIconProps) {
   const bgColor = metadata.picture ? {} : { bg: `#${uxToHex(metadata.color)}` };
 
   return (
-    <Box {...bgColor} {...rest} borderRadius={2} boxShadow="inset 0 0 0 1px" color="lightGray" overflow="hidden">
+    <Box {...bgColor} {...rest} borderRadius={1} boxShadow="inset 0 0 0 1px" color="lightGray" overflow="hidden">
       {metadata.picture && <Image height="100%" src={metadata.picture} />}
     </Box>
   );