From f96bb026d921a0a7e3906b51b5755aef1200534e Mon Sep 17 00:00:00 2001
From: Daniel Lautzenheiser <lautzd@gmail.com>
Date: Tue, 9 May 2023 17:58:40 -0400
Subject: [PATCH] fix: styles for custom logo and use custom logo in top nav
 bar (#789)

---
 packages/core/dev-test/backends/gitlab/config.yml |  1 +
 packages/core/src/components/login/Login.tsx      |  9 ++++++++-
 packages/core/src/components/navbar/Navbar.tsx    | 12 ++++++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/core/dev-test/backends/gitlab/config.yml b/packages/core/dev-test/backends/gitlab/config.yml
index d02874f2..cf6a72c5 100644
--- a/packages/core/dev-test/backends/gitlab/config.yml
+++ b/packages/core/dev-test/backends/gitlab/config.yml
@@ -7,6 +7,7 @@ backend:
 
 media_folder: assets/upload
 public_folder: /assets/upload
+logo_url: http://localhost:8080/assets/uploads/lobby.jpg
 media_library:
   max_file_size: 100000000
 collections:
diff --git a/packages/core/src/components/login/Login.tsx b/packages/core/src/components/login/Login.tsx
index af1425a2..ab66e7bc 100644
--- a/packages/core/src/components/login/Login.tsx
+++ b/packages/core/src/components/login/Login.tsx
@@ -32,7 +32,14 @@ const Login = ({
 
   return (
     <div className="flex flex-col h-screen items-center justify-center bg-slate-50 dark:bg-slate-900">
-      {config?.logo_url ? <img src={config.logo_url} /> : <StaticCmsLogo className="h-40 w-80" />}
+      {config?.logo_url ? (
+        <div
+          className="h-40 w-80 mb-4 bg-cover bg-no-repeat bg-center object-cover"
+          style={{ backgroundImage: `url('${config.logo_url}')` }}
+        />
+      ) : (
+        <StaticCmsLogo className="h-40 w-80" />
+      )}
       {error ? (
         <div
           className="flex px-4 py-3 mb-6 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800"
diff --git a/packages/core/src/components/navbar/Navbar.tsx b/packages/core/src/components/navbar/Navbar.tsx
index b9f9a800..acd90c43 100644
--- a/packages/core/src/components/navbar/Navbar.tsx
+++ b/packages/core/src/components/navbar/Navbar.tsx
@@ -4,7 +4,7 @@ import { translate } from 'react-polyglot';
 import { Link } from 'react-router-dom';
 
 import { checkBackendStatus } from '@staticcms/core/actions/status';
-import { selectDisplayUrl } from '@staticcms/core/reducers/selectors/config';
+import { selectConfig, selectDisplayUrl } from '@staticcms/core/reducers/selectors/config';
 import { useAppDispatch, useAppSelector } from '@staticcms/core/store/hooks';
 import Button from '../common/button/Button';
 import { StaticCmsIcon } from '../images/_index';
@@ -26,6 +26,7 @@ const Navbar = ({
   breadcrumbs = [],
 }: TranslatedProps<NavbarProps>) => {
   const dispatch = useAppDispatch();
+  const config = useAppSelector(selectConfig);
 
   const displayUrl = useAppSelector(selectDisplayUrl);
 
@@ -45,7 +46,14 @@ const Navbar = ({
         <div className="relative flex h-16 items-center justify-between">
           <div className="flex flex-1 items-center justify-center h-full sm:items-stretch sm:justify-start gap-4">
             <div className="flex flex-shrink-0 items-center justify-center bg-slate-500 dark:bg-slate-700 w-16">
-              <StaticCmsIcon className="inline-flex w-10 h-10" />
+              {config?.logo_url ? (
+                <div
+                  className="inline-flex h-10 w-10 bg-cover bg-no-repeat bg-center object-cover"
+                  style={{ backgroundImage: `url('${config.logo_url}')` }}
+                />
+              ) : (
+                <StaticCmsIcon className="inline-flex w-10 h-10" />
+              )}
             </div>
             <div className="flex h-full items-center text-xl font-semibold gap-1 text-gray-800 dark:text-white">
               {breadcrumbs.map((breadcrumb, index) =>