Browse Source

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.
suwalkanishka 2 years ago
parent
commit
1e9943323a

+ 1 - 0
src/components/ColorPicker.scss

@@ -183,6 +183,7 @@
     width: 100%;
     width: 100%;
     margin: 0;
     margin: 0;
     font-size: 0.875rem;
     font-size: 0.875rem;
+    font-family: inherit;
     background-color: transparent;
     background-color: transparent;
     color: var(--text-primary-color);
     color: var(--text-primary-color);
     border: 0;
     border: 0;

+ 1 - 0
src/components/ContextMenu.scss

@@ -30,6 +30,7 @@
     background-color: transparent;
     background-color: transparent;
     border: none;
     border: none;
     white-space: nowrap;
     white-space: nowrap;
+    font-family: inherit;
 
 
     display: grid;
     display: grid;
     grid-template-columns: 1fr 0.2fr;
     grid-template-columns: 1fr 0.2fr;

+ 3 - 0
src/components/Tooltip.scss

@@ -2,6 +2,9 @@
 
 
 // container in body where the actual tooltip is appended to
 // container in body where the actual tooltip is appended to
 .excalidraw-tooltip {
 .excalidraw-tooltip {
+  --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
+    Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--ui-font);
   position: fixed;
   position: fixed;
   z-index: 1000;
   z-index: 1000;
 
 

+ 2 - 0
src/css/styles.scss

@@ -354,6 +354,7 @@
     border-radius: var(--space-factor);
     border-radius: var(--space-factor);
     border: 1px solid var(--button-gray-2);
     border: 1px solid var(--button-gray-2);
     font-size: 0.8rem;
     font-size: 0.8rem;
+    font-family: inherit;
     outline: none;
     outline: none;
     appearance: none;
     appearance: none;
     background-image: var(--dropdown-icon);
     background-image: var(--dropdown-icon);
@@ -413,6 +414,7 @@
     bottom: 30px;
     bottom: 30px;
     transform: translateX(-50%);
     transform: translateX(-50%);
     pointer-events: all;
     pointer-events: all;
+    font-family: inherit;
 
 
     &:hover {
     &:hover {
       background-color: var(--button-hover-bg);
       background-color: var(--button-hover-bg);