Store Logo: Remove restriction of square dimension (#5738)

As discussed on #5718, there is no need for the store logo to be provided in square dimension. As it populates its own row on the public page layouts, we can remove that restriction and make it adaptable by providing only maximum height and width.

BTCPayServer/Views/UIStores/GeneralSettings.cshtml

@@ -59,14 +59,10 @@
                         <input asp-for="LogoFile" type="file" class="form-control flex-grow">
                         @if (!string.IsNullOrEmpty(Model.LogoFileId))
                         {
-                            <img src="@(await FileService.GetFileUrl(Context.Request.GetAbsoluteRootUri(), Model.LogoFileId))" alt="@Model.StoreName" class="rounded-circle" style="width:2.1rem;height:2.1rem;"/>
+                            <img src="@(await FileService.GetFileUrl(Context.Request.GetAbsoluteRootUri(), Model.LogoFileId))" alt="@Model.StoreName Logo" style="height:2.1rem;max-width:10.5rem;"/>
                         }
                     </div>
                     <span asp-validation-for="LogoFile" class="text-danger"></span>
-                    <div class="form-text">
-                        Please upload an image with square dimension, as it will be displayed in 1:1 format and circular.
-                        Size should be around 100✕100px.
-                    </div>
                 }
                 else
                 {

BTCPayServer/wwwroot/main/layout.css

@@ -184,8 +184,8 @@
 
 #StoreSelectorToggle .logo,
 #StoreSelectorToggle .icon {
-    width: 1.5rem;
-    height: 1.5rem;
+    max-width: 1.5rem;
+    max-height: 1.5rem;
     /* Fixes seemingly delayed icon animation */
     -webkit-transition-duration: 0.05s, var(--btcpay-transition-duration-fast);
 }
@@ -195,10 +195,6 @@
     margin-right: var(--btcpay-space-s);
 }
 
-#StoreSelectorToggle .logo {
-    border-radius: 50%;
-}
-
 #StoreSelectorToggle .icon.icon-caret-down {
     margin-left: auto;
     color: var(--btcpay-body-text-muted);

BTCPayServer/wwwroot/main/site.css

@@ -731,10 +731,9 @@ input:checked + label.btcpay-list-select-item {
 .store-logo {
     --logo-size: 3rem;
     --logo-bg: transparent;
-    --logo-radius: 50%;
+    --logo-radius: 0;
 
-    width: var(--logo-size);
-    height: var(--logo-size);
+    max-height: var(--logo-size);
     background: var(--logo-bg);
     border-radius: var(--logo-radius);
 }