From a93b95f158e62e5cef5e7eda0ff7ec2dc2067520 Mon Sep 17 00:00:00 2001
From: sayamsamal <samal.sayam@gmail.com>
Date: Mon, 1 Aug 2022 23:05:41 +0530
Subject: [PATCH] tooltips: Move tooltips styling to a dedicated .css file.

We want to seperate the tooltips styling into a dedicated .css file for
general readability and decluttering of the zulip.css file.
---
 static/js/bundles/app.js   |  1 +
 static/styles/tooltips.css | 64 +++++++++++++++++++++++++++++++++++++
 static/styles/zulip.css    | 65 --------------------------------------
 3 files changed, 65 insertions(+), 65 deletions(-)
 create mode 100644 static/styles/tooltips.css

diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js
index a43c1e0964..b44b742717 100644
--- a/static/js/bundles/app.js
+++ b/static/js/bundles/app.js
@@ -28,6 +28,7 @@ import "spectrum-colorpicker/spectrum.css";
 import "katex/dist/katex.css";
 import "flatpickr/dist/flatpickr.css";
 import "flatpickr/dist/plugins/confirmDate/confirmDate.css";
+import "../../styles/tooltips.css";
 import "../../styles/components.css";
 import "../../styles/app_components.css";
 import "../../styles/rendered_markdown.css";
diff --git a/static/styles/tooltips.css b/static/styles/tooltips.css
new file mode 100644
index 0000000000..c19f200e3d
--- /dev/null
+++ b/static/styles/tooltips.css
@@ -0,0 +1,64 @@
+[data-tippy-root] {
+    /* Since tooltip elements are sometimes inside elements
+     * which have different font-family, we force font-family
+     * for tooltips here.
+     */
+    font-family: "Source Sans 3", sans-serif !important;
+    word-wrap: break-word;
+
+    /* Affects all tippy tooltips not using any theme. */
+    .tippy-box:not([data-theme]) {
+        background-color: hsl(0, 0%, 12%);
+
+        &[data-placement^="top"] {
+            > .tippy-arrow {
+                &::before {
+                    border-top-color: hsl(0, 0%, 12%);
+                }
+            }
+        }
+
+        &[data-placement^="bottom"] {
+            > .tippy-arrow {
+                &::before {
+                    border-bottom-color: hsl(0, 0%, 12%);
+                }
+            }
+        }
+
+        &[data-placement^="left"] {
+            > .tippy-arrow {
+                &::before {
+                    border-left-color: hsl(0, 0%, 12%);
+                }
+            }
+        }
+
+        &[data-placement^="right"] {
+            > .tippy-arrow {
+                &::before {
+                    border-right-color: hsl(0, 0%, 12%);
+                }
+            }
+        }
+    }
+
+    .tippy-content {
+        font-size: 13px;
+    }
+
+    .tippy-arrow::before {
+        /* `.tippy-arrow:before` element sometimes
+         * inherits the height of the parent, we
+         * don't want any height here since we
+         * want it to remain an triangle.
+         * The bug was only found in Firefox.
+         */
+        height: 0 !important;
+    }
+    /* If the text in the tooltips stretches to multiple lines,
+     * we want the lines to be left-indented and not right-indented
+     * by default.
+     */
+    text-align: left;
+}
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 6e1c334108..d4d609f62c 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -82,71 +82,6 @@ pre {
     font-family: "Source Code Pro", monospace;
 }
 
-[data-tippy-root] {
-    /* Since tooltip elements are sometimes inside elements
-     * which have different font-family, we force font-family
-     * for tooltips here.
-     */
-    font-family: "Source Sans 3", sans-serif !important;
-    word-wrap: break-word;
-
-    /* Affects all tippy tooltips not using any theme. */
-    .tippy-box:not([data-theme]) {
-        background-color: hsl(0, 0%, 12%);
-
-        &[data-placement^="top"] {
-            > .tippy-arrow {
-                &::before {
-                    border-top-color: hsl(0, 0%, 12%);
-                }
-            }
-        }
-
-        &[data-placement^="bottom"] {
-            > .tippy-arrow {
-                &::before {
-                    border-bottom-color: hsl(0, 0%, 12%);
-                }
-            }
-        }
-
-        &[data-placement^="left"] {
-            > .tippy-arrow {
-                &::before {
-                    border-left-color: hsl(0, 0%, 12%);
-                }
-            }
-        }
-
-        &[data-placement^="right"] {
-            > .tippy-arrow {
-                &::before {
-                    border-right-color: hsl(0, 0%, 12%);
-                }
-            }
-        }
-    }
-
-    .tippy-content {
-        font-size: 13px;
-    }
-
-    .tippy-arrow::before {
-        /* `.tippy-arrow:before` element sometimes
-         * inherits the height of the parent, we
-         * don't want any height here since we
-         * want it to remain an triangle.
-         * The bug was only found in Firefox.
-         */
-        height: 0 !important;
-    }
-    /* If the text in the tooltips stretches to multiple lines,
-     * we want the lines to be left-indented and not right-indented
-     * by default.
-     */
-    text-align: left;
-}
-
 .no-select {
     user-select: none;
 }