Fix logo to support non-square sizes

web/components/ui/Content/Content.tsx

@@ -83,7 +83,7 @@ export default function ContentComponent() {
         </ActionButtonRow>
 
         <div className={`${s.lowerRow}`}>
-          <ServerLogo />
+          <ServerLogo src="/logo" />
           <Title level={2}>{name}</Title>
           {online && title !== '' && <Title level={3}>{title}</Title>}
           <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>

web/components/ui/Logo/Logo.module.scss

@@ -1,9 +1,29 @@
 .logo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
   width: 120px;
+  height: 120px;
   border-radius: 50%;
   border-width: 3px;
   border-style: solid;
   border-color: var(--theme-primary-color);
   background-color: var(--theme-background-secondary);
-  padding: 3px;
+}
+
+.container {  
+  width: 90%;
+  height: 90%;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
 }

web/components/ui/Logo/Logo.tsx

@@ -1,5 +1,15 @@
 import s from './Logo.module.scss';
 
-export default function SocialLinks() {
-  return <img className={s.logo} src="/logo" alt="logo" />;
+interface Props {
+  src: string;
+}
+
+export default function Logo({ src }: Props) {
+  return (
+    <div className={s.logo}>
+      <div className={s.container}>
+        <div className={s.image} style={{ backgroundImage: `url(${src})` }} />
+      </div>
+    </div>
+  );
 }