Experiment with using image component for logo. Closes #2019

web/components/PageLogo.tsx

@@ -1,3 +0,0 @@
-export default function PageLogo() {
-  return <div>Pimary logo component goes here</div>;
-}

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>
   );

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',
+};