From e9ec31e5b823bcc1d0d4b14725d654746a2e8f65 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 25 May 2023 19:58:01 -0400
Subject: [PATCH] fix: Spotify embed shows white background in dark mode

---
 shared/editor/components/Frame.tsx | 5 ++++-
 shared/editor/embeds/Spotify.tsx   | 7 ++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/shared/editor/components/Frame.tsx b/shared/editor/components/Frame.tsx
index 07c7d215b..e6dcd7a1f 100644
--- a/shared/editor/components/Frame.tsx
+++ b/shared/editor/components/Frame.tsx
@@ -56,6 +56,7 @@ class Frame extends React.Component<PropsWithRef> {
       canonicalUrl,
       isSelected,
       referrerPolicy,
+      className = "",
       src,
     } = this.props;
     const withBar = !!(icon || canonicalUrl);
@@ -66,7 +67,9 @@ class Frame extends React.Component<PropsWithRef> {
         height={height}
         $withBar={withBar}
         $border={border}
-        className={isSelected ? "ProseMirror-selectednode" : ""}
+        className={
+          isSelected ? `ProseMirror-selectednode ${className}` : className
+        }
       >
         {this.isLoaded && (
           <Iframe
diff --git a/shared/editor/embeds/Spotify.tsx b/shared/editor/embeds/Spotify.tsx
index 17a95d291..25ace7092 100644
--- a/shared/editor/embeds/Spotify.tsx
+++ b/shared/editor/embeds/Spotify.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import styled from "styled-components";
 import Frame from "../components/Frame";
 import { EmbedProps as Props } from ".";
 
@@ -23,7 +24,7 @@ function Spotify(props: Props) {
   }
 
   return (
-    <Frame
+    <SpotifyFrame
       {...props}
       width="100%"
       height={`${height}px`}
@@ -34,6 +35,10 @@ function Spotify(props: Props) {
   );
 }
 
+const SpotifyFrame = styled(Frame)`
+  border-radius: 13px;
+`;
+
 Spotify.ENABLED = [new RegExp("https?://open\\.spotify\\.com/(.*)$")];
 
 export default Spotify;