From 7d5d151b999bfa06d859c24be3fe532043a73bcc Mon Sep 17 00:00:00 2001
From: sayamsamal <samal.sayam@gmail.com>
Date: Mon, 1 Aug 2022 23:56:04 +0530
Subject: [PATCH] tooltips: Change tooltips styling to incorporate the
 redesign.

We use hsla(0, 0%, 20%, 1) for the light theme background color and
hsla(0, 0%, 0%, 1) for the dark theme. The text inside the tooltips
should be white in color, 14px in size and have a line height of 15px.

With one line of text, we want the height of the tooltips to be 25px,
i.e, line height (15px) + padding (5px + 5px = 10px).

Part of #21753
---
 static/styles/dark_theme.css | 20 ++++++++++++++++
 static/styles/tooltips.css   | 45 ++++++++++++++----------------------
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css
index aaab144991..780740c890 100644
--- a/static/styles/dark_theme.css
+++ b/static/styles/dark_theme.css
@@ -137,6 +137,26 @@
         }
     }
 
+    .tippy-box:not([data-theme]) {
+        background: hsla(0, 0%, 0%, 1);
+
+        &[data-placement^="top"] > .tippy-arrow::before {
+            border-top-color: hsla(0, 0%, 0%, 1);
+        }
+
+        &[data-placement^="bottom"] > .tippy-arrow::before {
+            border-bottom-color: hsla(0, 0%, 0%, 1);
+        }
+
+        &[data-placement^="left"] > .tippy-arrow::before {
+            border-left-color: hsla(0, 0%, 0%, 1);
+        }
+
+        &[data-placement^="right"] > .tippy-arrow::before {
+            border-right-color: hsla(0, 0%, 0%, 1);
+        }
+    }
+
     body,
     .app-main,
     .header-main,
diff --git a/static/styles/tooltips.css b/static/styles/tooltips.css
index c19f200e3d..e9e1d499af 100644
--- a/static/styles/tooltips.css
+++ b/static/styles/tooltips.css
@@ -8,43 +8,32 @@
 
     /* Affects all tippy tooltips not using any theme. */
     .tippy-box:not([data-theme]) {
-        background-color: hsl(0, 0%, 12%);
+        background: hsla(0, 0%, 20%, 1);
+        border-radius: 5px;
 
-        &[data-placement^="top"] {
-            > .tippy-arrow {
-                &::before {
-                    border-top-color: hsl(0, 0%, 12%);
-                }
-            }
+        > .tippy-content {
+            display: inline-block;
+            padding: 5px 10px;
+            font-size: 14px;
+            line-height: 15px;
+            color: #FFFFFF;
         }
 
-        &[data-placement^="bottom"] {
-            > .tippy-arrow {
-                &::before {
-                    border-bottom-color: hsl(0, 0%, 12%);
-                }
-            }
+        &[data-placement^="top"] > .tippy-arrow::before {
+            border-top-color: hsla(0, 0%, 20%, 1);
         }
 
-        &[data-placement^="left"] {
-            > .tippy-arrow {
-                &::before {
-                    border-left-color: hsl(0, 0%, 12%);
-                }
-            }
+        &[data-placement^="bottom"] > .tippy-arrow::before {
+            border-bottom-color: hsla(0, 0%, 20%, 1);
         }
 
-        &[data-placement^="right"] {
-            > .tippy-arrow {
-                &::before {
-                    border-right-color: hsl(0, 0%, 12%);
-                }
-            }
+        &[data-placement^="left"] > .tippy-arrow::before {
+            border-left-color: hsla(0, 0%, 20%, 1);
         }
-    }
 
-    .tippy-content {
-        font-size: 13px;
+        &[data-placement^="right"] > .tippy-arrow::before {
+            border-right-color: hsla(0, 0%, 20%, 1);
+        }
     }
 
     .tippy-arrow::before {