diff --git a/public/images/instagram.png b/public/images/instagram.png
index 3ec15d5863..89a915af1e 100644
Binary files a/public/images/instagram.png and b/public/images/instagram.png differ
diff --git a/shared/editor/embeds/index.tsx b/shared/editor/embeds/index.tsx
index 150626a15d..3b0293f155 100644
--- a/shared/editor/embeds/index.tsx
+++ b/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:
,
+ icon:
,
}),
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:
,
+ icon:
,
}),
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:
,
+ icon:
,
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:
,
+ icon:
,
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:
,
+ icon:
,
}),
new EmbedDescriptor({
title: "Trello",
@@ -621,7 +627,7 @@ const embeds: EmbedDescriptor[] = [
),
],
transformMatch: (matches: RegExpMatchArray) => matches[0],
- icon:
,
+ icon:
,
}),
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:
,
+ icon:
,
}),
new EmbedDescriptor({
title: "Vimeo",