Skip to content

Commit

Permalink
M3-5546: IP address font color on Firefox in dark mode (#8008)
Browse files Browse the repository at this point in the history
## Description

Previously, if you go to any Linode Detail page on Firefox in dark mode, the font color for "IP Addresses" and "SSH Access" should be white but instead, it's showing up as black.

This is due to a known Firefox bug that will decide that a font is colored if it contains SVG glyphs (which surprise, Source Code Pro does). The latest release should've fixed this issue but the font is still showing up as black for me after updating the files.

After some sleuthing, I decided to test out [Ubuntu Monospace](https://design.ubuntu.com/font/) as an alternative to Source Code Pro. I tested the font color on Chrome, Firefox, Safari, Edge, Opera, and Vivaldi with no issues.

**Links:**
- [GitHub issue with more details](adobe-fonts/source-code-pro#248)
- [List of Ubuntu Monospace font files](https://google-webfonts-helper.herokuapp.com/fonts/ubuntu-mono?subsets=latin)

## How to test

- On `develop`, use Firefox and go to any Linode Detail page in dark mode to verify the problem
- The font color should now be white after checking out this PR
  • Loading branch information
tiffwong committed Oct 27, 2021
1 parent 99385fd commit 2a218c2
Show file tree
Hide file tree
Showing 7 changed files with 11 additions and 11 deletions.
13 changes: 5 additions & 8 deletions packages/manager/public/fonts/fonts.css
Original file line number Diff line number Diff line change
Expand Up @@ -37,16 +37,13 @@
text-rendering: optimizeLegibility;
}

/* Webfont: SourceCodePro-Regular */
/* Webfont: UbuntuMono */
@font-face {
font-family: 'SourceCodePro';
font-family: 'UbuntuMono';
src:
/* IE6-IE8 */ url('fonts/SourceCodePro-Regular.ttf.woff2')
format('woff2'),
/* Modern Browsers */ url('fonts/SourceCodePro-Regular.ttf.woff')
format('woff'),
/* Modern Browsers */ url('fonts/SourceCodePro-Regular.ttf')
format('truetype');
/* IE6-IE8 */ url('fonts/UbuntuMono-Regular.woff2') format('woff2'),
/* Modern Browsers */ url('fonts/UbuntuMono-Regular.woff') format('woff'),
/* Modern Browsers */ url('fonts/UbuntuMono-Regular.ttf') format('truetype');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({
lineHeight: 1,
padding: theme.spacing(),
whiteSpace: 'nowrap',
fontFamily: '"SourceCodePro", monospace, sans-serif',
fontFamily: '"UbuntuMono", monospace, sans-serif',
wordBreak: 'break-all',
position: 'relative',
width: '100%',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -323,7 +323,7 @@ const useBodyStyles = makeStyles((theme: Theme) => ({
},
code: {
color: theme.cmrTextColors.tableStatic,
fontFamily: '"SourceCodePro", monospace, sans-serif',
fontFamily: '"UbuntuMono", monospace, sans-serif',
},
}));

Expand Down
5 changes: 4 additions & 1 deletion packages/manager/src/features/linodes/LinodeEntityDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -644,8 +644,11 @@ const useAccessTableStyles = makeStyles((theme: Theme) => ({
},
code: {
color: theme.cmrTextColors.tableStatic,
fontFamily: '"SourceCodePro", monospace, sans-serif',
fontFamily: '"UbuntuMono", monospace, sans-serif',
position: 'relative',
'& div': {
fontSize: 15,
},
},
copyCell: {
width: 36,
Expand Down

0 comments on commit 2a218c2

Please sign in to comment.