From dbf43363a7fbb71167a034ed76f5f1cf18e67203 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Wed, 19 Jul 2023 18:13:19 +0100
Subject: [PATCH] add tooltip to new logos (#12837)

relates to #12053

quick fix to add tooltip to new inputs for logo
---
 frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx    | 4 ++++
 .../pages/admin/OrgSettingsPage/cards/Info/_styles.scss     | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx b/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx
index 7ce9d086b4..be76f1d7b1 100644
--- a/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx
+++ b/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx
@@ -124,6 +124,8 @@ const Info = ({
               onBlur={validateForm}
               error={formErrors.org_logo_url}
               inputWrapperClass={`${cardClass}__logo-field`}
+              tooltip="Logo is displayed in the top bar and other areas of Fleet that
+                have dark backgrounds."
             />
             <div
               className={`${cardClass}__icon-preview ${cardClass}__dark-background`}
@@ -144,6 +146,8 @@ const Info = ({
               onBlur={validateForm}
               error={formErrors.org_logo_url_light_background}
               inputWrapperClass={`${cardClass}__logo-field`}
+              tooltip="Logo is displayed in Fleet on top of light backgrounds.
+"
             />
             <div
               className={`${cardClass}__icon-preview ${cardClass}__light-background`}
diff --git a/frontend/pages/admin/OrgSettingsPage/cards/Info/_styles.scss b/frontend/pages/admin/OrgSettingsPage/cards/Info/_styles.scss
index 01ccc6e678..bb5f1e1fa1 100644
--- a/frontend/pages/admin/OrgSettingsPage/cards/Info/_styles.scss
+++ b/frontend/pages/admin/OrgSettingsPage/cards/Info/_styles.scss
@@ -10,10 +10,10 @@
 
   &__icon-preview {
     border-radius: $border-radius;
-    height: 82px;
-    max-width: 150px;
+    max-height: 82px;
+    min-width: 82px;
     border: 1px solid $ui-fleet-black-10;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
   }