From 503ed0977161777fc072fcc3a055d430f2ff1518 Mon Sep 17 00:00:00 2001
From: Kuinox <github@kuinox.io>
Date: Thu, 28 Sep 2023 15:01:04 +0200
Subject: [PATCH] Fixed images aspect ratio. (#8)

---
 src/app/layout.tsx                | 6 ++++--
 src/components/BackgroundLogo.tsx | 9 +++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3e105c7..979e3e3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -18,7 +18,8 @@ export default function RootLayout({
                 src="generated/Logo-Short.svg"
                 className="top-bar-logo"
                 alt="logo"
-                fill={true}
+                height={50}
+                width={55}
               />
             </Link>
             <div className="links">
@@ -40,7 +41,8 @@ export default function RootLayout({
                   src="generated/github-logo.svg"
                   className="topbar-icon"
                   alt="GitHub Logo"
-                  fill={true}
+                  height={28}
+                  width={28}
                 />
               </a>
             </div>
diff --git a/src/components/BackgroundLogo.tsx b/src/components/BackgroundLogo.tsx
index 5efae9a..f850fdf 100644
--- a/src/components/BackgroundLogo.tsx
+++ b/src/components/BackgroundLogo.tsx
@@ -1,6 +1,6 @@
+/* eslint-disable @next/next/no-img-element */
 import React from "react";
 import "./BackgroundLogo.css";
-import Image from "next/image";
 
 export default function BackgroundLogo(
   props: {
@@ -11,12 +11,13 @@ export default function BackgroundLogo(
   const { logoUrl, sizeOverride, ...restProps } = props;
   return (
     <div {...restProps} className="background-logo-container">
-      <Image
+      <img
         className="background-logo"
         src={logoUrl}
         alt="Background decoration."
-        height={sizeOverride ?? 0}
-        width={0}
+        style={{
+          height: sizeOverride,
+        }}
       />
     </div>
   );