From 9187a7a43586d1d3a53cb18fa573b914ad4f9af2 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 9 Aug 2022 14:38:23 -0700
Subject: [PATCH] Experiment with using image component for logo. Closes #2019

---
 web/components/PageLogo.tsx      | 3 ---
 web/components/ui/Logo/Logo.tsx  | 3 ++-
 web/stories/PageLogo.stories.tsx | 5 +++++
 3 files changed, 7 insertions(+), 4 deletions(-)
 delete mode 100644 web/components/PageLogo.tsx

diff --git a/web/components/PageLogo.tsx b/web/components/PageLogo.tsx
deleted file mode 100644
index 4535a579b..000000000
--- a/web/components/PageLogo.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function PageLogo() {
-  return <div>Pimary logo component goes here</div>;
-}
diff --git a/web/components/ui/Logo/Logo.tsx b/web/components/ui/Logo/Logo.tsx
index c42aaccda..1949c13e1 100644
--- a/web/components/ui/Logo/Logo.tsx
+++ b/web/components/ui/Logo/Logo.tsx
@@ -1,3 +1,4 @@
+import { Image } from 'antd';
 import s from './Logo.module.scss';
 
 interface Props {
@@ -8,7 +9,7 @@ export default function Logo({ src }: Props) {
   return (
     <div className={s.root}>
       <div className={s.container}>
-        <div className={s.image} style={{ backgroundImage: `url(${src})` }} />
+        <Image src={src} alt="Logo" className={s.image} rootClassName={s.image} />
       </div>
     </div>
   );
diff --git a/web/stories/PageLogo.stories.tsx b/web/stories/PageLogo.stories.tsx
index 9166c6ad3..acb743f32 100644
--- a/web/stories/PageLogo.stories.tsx
+++ b/web/stories/PageLogo.stories.tsx
@@ -21,3 +21,8 @@ export const DemoServer = Template.bind({});
 DemoServer.args = {
   src: 'https://watch.owncast.online/logo',
 };
+
+export const NotSquare = Template.bind({});
+NotSquare.args = {
+  src: 'https://via.placeholder.com/150x325/FF0000/FFFFFF?text=Rectangle',
+};