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: Codepen, + icon: Codepen, }), 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: Framer, + icon: Framer, }), 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: GitHub, + icon: GitHub, 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: JSFiddle, + icon: JSFiddle, 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: Tldraw, + icon: Tldraw, }), new EmbedDescriptor({ title: "Trello", @@ -621,7 +627,7 @@ const embeds: EmbedDescriptor[] = [ ), ], transformMatch: (matches: RegExpMatchArray) => matches[0], - icon: Typeform, + icon: Typeform, }), 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: Valtown, + icon: Valtown, }), new EmbedDescriptor({ title: "Vimeo",