From 1e9943323ad5f34bb4efc48c5b5a9b01387dbc36 Mon Sep 17 00:00:00 2001
From: suwalkanishka <suwalkanishka@gmail.com>
Date: Tue, 25 Apr 2023 17:35:19 +0545
Subject: [PATCH] style: fix font family inconsistencies (#6501)

style: font fix for four components

The browser default font was showing up in various locations. Fixed them to show the desired ui font.
---
 src/components/ColorPicker.scss | 1 +
 src/components/ContextMenu.scss | 1 +
 src/components/Tooltip.scss     | 3 +++
 src/css/styles.scss             | 2 ++
 4 files changed, 7 insertions(+)

diff --git a/src/components/ColorPicker.scss b/src/components/ColorPicker.scss
index 52ea20a1..b816b255 100644
--- a/src/components/ColorPicker.scss
+++ b/src/components/ColorPicker.scss
@@ -183,6 +183,7 @@
     width: 100%;
     margin: 0;
     font-size: 0.875rem;
+    font-family: inherit;
     background-color: transparent;
     color: var(--text-primary-color);
     border: 0;
diff --git a/src/components/ContextMenu.scss b/src/components/ContextMenu.scss
index 57976311..81ced388 100644
--- a/src/components/ContextMenu.scss
+++ b/src/components/ContextMenu.scss
@@ -30,6 +30,7 @@
     background-color: transparent;
     border: none;
     white-space: nowrap;
+    font-family: inherit;
 
     display: grid;
     grid-template-columns: 1fr 0.2fr;
diff --git a/src/components/Tooltip.scss b/src/components/Tooltip.scss
index bb2b2f72..490e2557 100644
--- a/src/components/Tooltip.scss
+++ b/src/components/Tooltip.scss
@@ -2,6 +2,9 @@
 
 // container in body where the actual tooltip is appended to
 .excalidraw-tooltip {
+  --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
+    Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--ui-font);
   position: fixed;
   z-index: 1000;
 
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 8dafbfbd..29e52011 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -354,6 +354,7 @@
     border-radius: var(--space-factor);
     border: 1px solid var(--button-gray-2);
     font-size: 0.8rem;
+    font-family: inherit;
     outline: none;
     appearance: none;
     background-image: var(--dropdown-icon);
@@ -413,6 +414,7 @@
     bottom: 30px;
     transform: translateX(-50%);
     pointer-events: all;
+    font-family: inherit;
 
     &:hover {
       background-color: var(--button-hover-bg);