From 4b64b4c0be43c50a82abf9662e15b8346391f02b Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@did.science>
Date: Wed, 24 Mar 2021 17:57:21 +0100
Subject: [PATCH] Some minor UI improvements

---
 shared/js/ui/frames/ImagePreview.scss          | 8 ++++----
 shared/js/ui/modal/avatar-upload/Renderer.scss | 6 ++++++
 shared/js/ui/modal/avatar-upload/Renderer.tsx  | 4 ++--
 shared/js/ui/react-elements/Avatar.tsx         | 3 ++-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/shared/js/ui/frames/ImagePreview.scss b/shared/js/ui/frames/ImagePreview.scss
index 8ddb6c08..b97ceb20 100644
--- a/shared/js/ui/frames/ImagePreview.scss
+++ b/shared/js/ui/frames/ImagePreview.scss
@@ -71,11 +71,11 @@
 .containerImage {
     max-width: 90%;
     max-height: 90%;
-    align-self: center;
 
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
+    align-self: center;
+    text-align: center;
+
+    display: block;
 
     img {
         flex-shrink: 1;
diff --git a/shared/js/ui/modal/avatar-upload/Renderer.scss b/shared/js/ui/modal/avatar-upload/Renderer.scss
index 7209095e..2d5e9408 100644
--- a/shared/js/ui/modal/avatar-upload/Renderer.scss
+++ b/shared/js/ui/modal/avatar-upload/Renderer.scss
@@ -96,6 +96,8 @@
             max-height: 100%;
             max-width: 100%;
 
+            /* We currently strech all avatars */
+            /*
             &.heightBound {
                 height: 100%;
             }
@@ -103,6 +105,10 @@
             &.widthBound {
                 width: 100%;
             }
+            */
+
+            width: 100%;
+            height: 100%;
         }
 
         &.sizeChatInfo {
diff --git a/shared/js/ui/modal/avatar-upload/Renderer.tsx b/shared/js/ui/modal/avatar-upload/Renderer.tsx
index 124d5edf..aa28f466 100644
--- a/shared/js/ui/modal/avatar-upload/Renderer.tsx
+++ b/shared/js/ui/modal/avatar-upload/Renderer.tsx
@@ -71,13 +71,13 @@ const MaxAvatarSize = React.memo(() => {
     const currentAvatar = useContext(CurrentAvatarContext);
     const maxSize = variables.useReadOnly("maxAvatarSize", undefined);
 
-    if(currentAvatar.status === "loading" || maxSize.status === "loading") {
+    if(maxSize.status === "loading") {
         return (
             <div className={cssStyle.containerLimit} key={"loading"}>
                 <Translatable>Maximal avatar size:</Translatable> <Translatable>loading</Translatable> <LoadingDots />
             </div>
         )
-    } else if(currentAvatar.status === "unset" || currentAvatar.status === "server") {
+    } else if(currentAvatar.status === "loading" ||currentAvatar.status === "unset" || currentAvatar.status === "server") {
         return (
             <div className={cssStyle.containerLimit} key={"unset"}>
                 <VariadicTranslatable text={"Maximal avatar size: {}"}>
diff --git a/shared/js/ui/react-elements/Avatar.tsx b/shared/js/ui/react-elements/Avatar.tsx
index e231eeb1..799f1d19 100644
--- a/shared/js/ui/react-elements/Avatar.tsx
+++ b/shared/js/ui/react-elements/Avatar.tsx
@@ -20,6 +20,7 @@ const AvatarDefaultImage = React.memo((props: { className?: string, alt?: string
     <img
         draggable={false}
         src={kDefaultAvatarImage}
+        style={ImageStyle}
         alt={typeof props.alt === "string" ? props.alt : tr("default avatar")}
         color={props.className}
         onClick={event => {
@@ -28,7 +29,7 @@ const AvatarDefaultImage = React.memo((props: { className?: string, alt?: string
             }
 
             event.preventDefault();
-            showImagePreview(kDefaultAvatarImage, undefined);
+            showImagePreview(kDefaultAvatarImage, kDefaultAvatarImage);
         }}
     />
 ));