Allow direct editing of collection icon (#7120)

* Allow direct editing of collection icon

* feedback

app/scenes/Document/components/Document.tsx

@@ -659,7 +659,7 @@ type EditorContainerProps = {
 
 const EditorContainer = styled.div<EditorContainerProps>`
   // Adds space to the gutter to make room for icon & heading annotations
-  padding: 0 44px;
+  padding: 0 40px;
 
   ${breakpoint("tablet")`
     grid-row: 1;
@@ -686,7 +686,7 @@ type RevisionContainerProps = {
 
 const RevisionContainer = styled.div<RevisionContainerProps>`
   // Adds space to the gutter to make room for icon
-  padding: 0 44px;
+  padding: 0 40px;
 
   ${breakpoint("tablet")`
     grid-row: 1;

app/scenes/Document/components/DocumentTitle.tsx

@@ -8,7 +8,7 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import isMarkdown from "@shared/editor/lib/isMarkdown";
 import normalizePastedMarkdown from "@shared/editor/lib/markdown/normalize";
-import { extraArea, s } from "@shared/styles";
+import { s } from "@shared/styles";
 import { light } from "@shared/styles/theme";
 import {
   getCurrentDateAsString,
@@ -138,21 +138,21 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
   );
 
   const handleChange = React.useCallback(
-    (value: string) => {
-      let title = value;
+    (input: string) => {
+      let value = input;
 
-      if (/\/date\s$/.test(value)) {
-        title = getCurrentDateAsString();
+      if (/\/date\s$/.test(input)) {
+        value = getCurrentDateAsString();
         ref?.current?.focusAtEnd();
-      } else if (/\/time$/.test(value)) {
-        title = getCurrentTimeAsString();
+      } else if (/\/time$/.test(input)) {
+        value = getCurrentTimeAsString();
         ref?.current?.focusAtEnd();
-      } else if (/\/datetime$/.test(value)) {
-        title = getCurrentDateTimeAsString();
+      } else if (/\/datetime$/.test(input)) {
+        value = getCurrentDateTimeAsString();
         ref?.current?.focusAtEnd();
       }
 
-      onChangeTitle?.(title);
+      onChangeTitle?.(value);
     },
     [ref, onChangeTitle]
   );
@@ -257,16 +257,16 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
       {can.update && !readOnly ? (
         <IconWrapper align="center" justify="center" dir={dir}>
           <React.Suspense fallback={fallbackIcon}>
-            <StyledIconPicker
+            <IconPicker
               icon={icon ?? null}
               color={color}
               size={40}
               popoverPosition="bottom-start"
-              allowDelete={true}
-              borderOnHover={true}
               onChange={handleIconChange}
               onOpen={handleOpen}
               onClose={handleClose}
+              allowDelete
+              borderOnHover
             />
           </React.Suspense>
         </IconWrapper>
@@ -346,10 +346,6 @@ const Title = styled(ContentEditable)<TitleProps>`
   }
 `;
 
-const StyledIconPicker = styled(IconPicker)`
-  ${extraArea(8)}
-`;
-
 const IconWrapper = styled(Flex)<{ dir?: string }>`
   position: absolute;
   top: 3px;