feat(suite): Enhance HiddenPlaceholder using special font

trezor · Aug 23, 2024 · 7f904d7 · 7f904d7
1 parent a057422
commit 7f904d7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/packages/suite-data/files/fonts/TTSatoshi/TTSatoshi-redacted-numbers.otf b/packages/suite-data/files/fonts/TTSatoshi/TTSatoshi-redacted-numbers.otf
diff --git a/packages/suite-data/files/fonts/fonts.css b/packages/suite-data/files/fonts/fonts.css
@@ -25,3 +25,14 @@
  font-weight: 500;
  font-style: normal;
 }
+
+/*
+ Special font that has all numbers replaced with the same placeholder symbol.
+ DO NOT USE except when you need to redact sensitive information!
+*/
+@font-face {
+ font-family: 'TT Satoshi redacted numbers';
+ src: url('./TTSatoshi/TTSatoshi-redacted-numbers.otf') format('opentype');
+ font-weight: 500;
+ font-style: normal;
+}
diff --git a/packages/suite/src/components/suite/HiddenPlaceholder.tsx b/packages/suite/src/components/suite/HiddenPlaceholder.tsx
@@ -17,8 +17,23 @@ const Wrapper = styled.span<WrapperProps>`
  transition: all 0.1s ease;
  filter: blur(${$intensity}px);
 
+ /*
+ It is needed to target both this element, and all of its children.
+ Otherwise the * global selector, which declares normal font, overrides font for HiddenPlaceholder's children (even when !important is used).
+ */
+ font-family: 'TT Satoshi redacted numbers', sans-serif;
+ 
+ & * {
+ font-family: 'TT Satoshi redacted numbers', sans-serif;
+ }
+
  &:hover {
  filter: none;
+ font-family: unset;
+
+ & * {
+ font-family: unset;
+ }
  }
  `}
 `;