chore: Embed branding (#10109)

* Remove InVision from embed menu, company shut down

* Update Instagram logo
Improve dark mode styling

* Optimised images with calibre/image-actions

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

shared/editor/embeds/index.tsx

@@ -31,13 +31,18 @@ export type EmbedProps = {
   };
 };
 
-const Img = styled(Image)`
+const Img = styled(Image)<{ invertable?: boolean }>`
   border-radius: 3px;
-  background: #fff;
-  box-shadow: 0 0 0 1px ${(props) => props.theme.divider};
   margin: 3px;
   width: 18px;
   height: 18px;
+
+  ${(props) =>
+    props.invertable &&
+    props.theme.isDark &&
+    `
+    filter: invert(1);
+  `}
 `;
 
 export class EmbedDescriptor {
@@ -225,7 +230,7 @@ const embeds: EmbedDescriptor[] = [
     regexMatch: [new RegExp("^https://codepen.io/(.*?)/(pen|embed)/(.*)$")],
     transformMatch: (matches) =>
       `https://codepen.io/${matches[1]}/embed/${matches[3]}`,
-    icon: <Img src="/images/codepen.png" alt="Codepen" />,
+    icon: <Img src="/images/codepen.png" alt="Codepen" invertable />,
   }),
   new EmbedDescriptor({
     title: "DBDiagram",
@@ -288,7 +293,7 @@ const embeds: EmbedDescriptor[] = [
     keywords: "design prototyping",
     regexMatch: [new RegExp("^https://framer.cloud/(.*)$")],
     transformMatch: (matches) => matches[0],
-    icon: <Img src="/images/framer.png" alt="Framer" />,
+    icon: <Img src="/images/framer.png" alt="Framer" invertable />,
   }),
   new EmbedDescriptor({
     title: "GitHub Gist",
@@ -298,7 +303,7 @@ const embeds: EmbedDescriptor[] = [
         "^https://gist\\.github\\.com/([a-zA-Z\\d](?:[a-zA-Z\\d]|-(?=[a-zA-Z\\d])){0,38})/(.*)$"
       ),
     ],
-    icon: <Img src="/images/github-gist.png" alt="GitHub" />,
+    icon: <Img src="/images/github-gist.png" alt="GitHub" invertable />,
     component: Gist,
   }),
   new EmbedDescriptor({
@@ -446,6 +451,7 @@ const embeds: EmbedDescriptor[] = [
     title: "InVision",
     keywords: "design prototype",
     defaultHidden: true,
+    visible: false,
     regexMatch: [
       /^https:\/\/(invis\.io\/.*)|(projects\.invisionapp\.com\/share\/.*)$/,
       /^https:\/\/(opal\.invisionapp\.com\/static-signed\/live-embed\/.*)$/,
@@ -458,7 +464,7 @@ const embeds: EmbedDescriptor[] = [
     keywords: "code",
     defaultHidden: true,
     regexMatch: [new RegExp("^https?://jsfiddle\\.net/(.*)/(.*)$")],
-    icon: <Img src="/images/jsfiddle.png" alt="JSFiddle" />,
+    icon: <Img src="/images/jsfiddle.png" alt="JSFiddle" invertable />,
     component: JSFiddle,
   }),
   new EmbedDescriptor({
@@ -603,7 +609,7 @@ const embeds: EmbedDescriptor[] = [
       new RegExp("^https?://(beta|www|old)\\.tldraw\\.com/[rsvopf]+/(.*)"),
     ],
     transformMatch: (matches: RegExpMatchArray) => matches[0],
-    icon: <Img src="/images/tldraw.png" alt="Tldraw" />,
+    icon: <Img src="/images/tldraw.png" alt="Tldraw" invertable />,
   }),
   new EmbedDescriptor({
     title: "Trello",
@@ -621,7 +627,7 @@ const embeds: EmbedDescriptor[] = [
       ),
     ],
     transformMatch: (matches: RegExpMatchArray) => matches[0],
-    icon: <Img src="/images/typeform.png" alt="Typeform" />,
+    icon: <Img src="/images/typeform.png" alt="Typeform" invertable />,
   }),
   new EmbedDescriptor({
     title: "Valtown",
@@ -629,7 +635,7 @@ const embeds: EmbedDescriptor[] = [
     regexMatch: [/^https?:\/\/(?:www.)?val\.town\/(?:v|embed)\/(.*)$/],
     transformMatch: (matches: RegExpMatchArray) =>
       `https://www.val.town/embed/${matches[1]}`,
-    icon: <Img src="/images/valtown.png" alt="Valtown" />,
+    icon: <Img src="/images/valtown.png" alt="Valtown" invertable />,
   }),
   new EmbedDescriptor({
     title: "Vimeo",